From 76ceabe639f3cd51630549fa53a9ff2a931a19e4 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 5 Jul 2022 15:00:35 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9ANEZ-1989=20dashboard=20=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/panel/panelVariables.scss          | 19 +++++++++++++++----
 .../common/panel/panelVariables.vue           |  4 +---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss b/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
index 6d521b42d..a2ef63a4b 100644
--- a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
+++ b/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
@@ -10,11 +10,11 @@
     margin-right: 15px;
   }
   .variable-key{
-    margin-right: 5px;
     border: 1px solid $--border-color-base;
-    color: #33a2e5;
-    padding: 3px 5px;
-    border-radius: 4px;
+    color: $--color-text-regular;
+    background: $--background-color-2;
+    padding: 3px 10px;
+    border-radius: 2px 0 0 2px;
   }
   .choose-box {
     overflow: hidden;
@@ -22,8 +22,10 @@
     white-space: nowrap;
     max-width: 200px;
     text-overflow: ellipsis;
+    padding-right: 5px;
     height: 30px;
     border: 1px solid $--border-color-light;
+    border-left: none;
     padding-left: 8px;
     display: flex;
     align-items: center;
@@ -39,12 +41,17 @@
     width: calc(100% - 24px);
     overflow: hidden;
     min-width: 24px;
+    color: $--color-text-primary;
   }
 }
 
 .panel-variables{
+  min-width: 180px;
+  max-width: 220px;
   .el-dropdown-menu__item {
     padding: 0 5px 0 20px;
+    width: 100%;
+    box-sizing: border-box;
     position: relative;
     height: 36px;
   }
@@ -55,6 +62,10 @@
     width: calc(100% - 20px);
     overflow: hidden;
     min-width: 24px;
+    color: $--color-text-regular;
+  }
+  .el-dropdown-menu__item .el-dropdown-menu__item-label.checked {
+    color: $--color-warning;
   }
   .nz-icon-check{
     position: absolute;
diff --git a/nezha-fronted/src/components/common/panel/panelVariables.vue b/nezha-fronted/src/components/common/panel/panelVariables.vue
index 186bb0094..7dc1f8a6a 100644
--- a/nezha-fronted/src/components/common/panel/panelVariables.vue
+++ b/nezha-fronted/src/components/common/panel/panelVariables.vue
@@ -3,7 +3,6 @@
     <div v-for="(item,index) in labelArr" :key="index" v-if="item.show && labelValue[item.name].length" class="panel-variables-content" style="display: flex">
       <div class="variable-key">{{item.name}}</div>
       <el-popover
-        width="220"
         trigger="manual"
         placement="bottom-start"
         v-model="item.visible"
@@ -22,10 +21,9 @@
             </el-checkbox-group>
             <div v-else>
               <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
-                <div class="el-dropdown-menu__item-label">
+                <div class="el-dropdown-menu__item-label" :class="value.value === item.checked[0] && !item.checkAll ? 'checked': ''">
                   {{value.label}}
                 </div>
-                <i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0] && !item.checkAll"/>
               </li>
             </div>
           </ul>