style：NEZ-1989 dashboard 变量 样式调整

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;

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>