列表切换样式

src/views/LandConsolidation/index.vue

@@ -9,7 +9,14 @@
     </el-radio-group>
     <div class="headerCheck">
       <ul>
-        <li v-for="(item, i) in checkList" :key="i">{{ item.title }}</li>
+        <li
+          :class="{ liActive: i == activeIndex }"
+          v-for="(item, i) in checkList"
+          :key="i"
+          @click="onClick(i)"
+        >
+          {{ item.title }}
+        </li>
       </ul>
     </div>
     <div class="innerContainer leftPane" v-drag>
@@ -80,21 +87,18 @@ export default {
       checkList: [
         {
           title: "试点总揽",
-          active:true
         },
         {
           title: "整治项目",
-          active:false
         },
         {
           title: "新增耕地",
-          active:false
         },
         {
           title: "整治预检",
-          active:false
         },
       ],
+      activeIndex: 0,
     };
   },
   computed: {
@@ -125,6 +129,9 @@ export default {
       //驾驶舱矢量数据点选查询
       pick_cockpit_vector.init_handler();
     },
+    onClick(val) {
+      this.activeIndex = val;
+    },
   },
   watch: {
     activeTabs(newValue) {
@@ -172,20 +179,30 @@ export default {
         width: 114px;
         height: 36px;
         background: inherit;
-        background-color: rgba(128, 255, 255, 0.39);
+        // background-color: rgba(128, 255, 255, 0.39);
         box-sizing: border-box;
         border-width: 2px;
         border-style: solid;
-        border-color: #64DAFF;
+        border-color: #64daff;
         border-radius: 9px;
         border-top-right-radius: 0px;
         border-bottom-left-radius: 0px;
-        color: #64DAFF;
+        color: #64daff;
         text-align: center;
         line-height: 36px;
         pointer-events: all;
         cursor: pointer;
       }
+      li:active,
+      li:focus {
+        background-color: rgba(128, 255, 255, 0.39) !important;
+      }
+    }
+    .liActive {
+      background-color: rgba(128, 255, 255, 0.39) !important;
+    }
+    .liItem {
+      background-color: transparent !important;
     }
   }
 }