[Style 0000] 瓦斯公用的列表组件状态灯样式修改

src/views/vent/gas/components/list/listItem.vue

@@ -8,7 +8,7 @@
     <div class="list-item__value" :class="{ 'list-item__border': bordered }" :style="valueStyle">
       <slot name="value">
         <!-- 状态灯 -->
-        <div v-if="type === 'status-light'" :class="statusLightConfig.class">
+        <div v-if="type === 'status-light'" class="status-light" :class="statusLightConfig.class">
           {{ statusLightConfig.label }}
         </div>
         <!-- 输入框 -->
@@ -100,7 +100,6 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
 
   .list-item {
     height: 36px;
@@ -150,33 +149,33 @@
     border-radius: 5px;
   }
 
-  .list-item__actived {
-    min-width: 20px;
-    height: 100%;
-    padding-left: 20px;
-    background-image: url('@/assets/images/company/home/select-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: 20px 20px;
-  }
+  // .list-item__actived {
+  //   min-width: 20px;
+  //   height: 100%;
+  //   padding-left: 20px;
+  //   background-image: url('@/assets/images/company/home/select-bg.png');
+  //   background-repeat: no-repeat;
+  //   background-position: left center;
+  //   background-size: 20px 20px;
+  // }
 
-  .list-item__deactived {
-    min-width: 20px;
-    height: 100%;
-    padding-left: 20px;
-    background-image: url('@/assets/images/company/home/unselect-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: 20px 20px;
-  }
+  // .list-item__deactived {
+  //   min-width: 20px;
+  //   height: 100%;
+  //   padding-left: 20px;
+  //   background-image: url('@/assets/images/company/home/unselect-bg.png');
+  //   background-repeat: no-repeat;
+  //   background-position: left center;
+  //   background-size: 20px 20px;
+  // }
 
-  .list-item__default {
-    min-width: 20px;
+  .status-light {
+    min-width: 30px;
     height: 100%;
-    padding-left: 20px;
+    padding-left: 30px;
     position: relative;
   }
-  .list-item__default::before {
+  .status-light::before {
     display: block;
     content: '';
     position: absolute;
@@ -185,9 +184,8 @@
     top: calc(50% - 4px);
     left: 10px;
     border-radius: 50%;
-    background-color: #858585;
   }
-  .list-item__default::after {
+  .status-light::after {
     display: block;
     content: '';
     position: absolute;
@@ -196,9 +194,29 @@
     top: calc(50% - 6px);
     left: 8px;
     border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  .list-item__default::before {
+    background-color: #858585;
+  }
+  .list-item__default::after {
     background-color: #85858544;
     box-shadow: 0 0 1px 1px #85858599;
-    box-sizing: border-box;
+  }
+  .list-item__actived::before {
+    background-color: #67fc00;
+  }
+  .list-item__actived::after {
+    background-color: #67fc0044;
+    box-shadow: 0 0 1px 1px #67fc0099;
+  }
+  .list-item__deactived::before {
+    background-color: #dddddd;
+  }
+  .list-item__deactived::after {
+    background-color: #dddddd44;
+    box-shadow: 0 0 1px 1px #dddddd99;
   }
 
   ::v-deep .zxm-input {