图标更换

src/views/duty/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="tabs">
       <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
-        <i :class="item.icon" />
+        <i :class="activeIndex === item.id ? item.icon + '_checked' : item.icon" />
         <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
       </div>
     </div>
@@ -22,9 +22,9 @@ import Rota from "@/views/duty/rota.vue";
 
 let activeIndex = ref('calendar');
 let tabs = ref([
-  { id: 'calendar', name: '值班日历', icon: 'icon1' },
-  { id: 'shiftChange', name: '面对面换班', icon: 'icon2' },
-  { id: 'rota', name: '值班表', icon: 'icon3' },
+  { id: 'calendar', name: '值班日历', icon: 'tab1' },
+  { id: 'shiftChange', name: '面对面换班', icon: 'tab2' },
+  { id: 'rota', name: '值班表', icon: 'tab3' },
 ]);
 
 // 点击tab
@@ -73,5 +73,28 @@ const handleClickTab = (id) => {
     height: calc(100vh - 230px);
     overflow-y: auto;
   }
+  .tab1 {
+    background: url("@/assets/images/tab1.png") no-repeat;
+  }
+  .tab1_checked {
+    background: url("@/assets/images/tab1_checked.png") no-repeat;
+  }
+  .tab2 {
+    background: url("@/assets/images/tab2.png") no-repeat;
+  }
+  .tab2_checked {
+    background: url("@/assets/images/tab2_checked.png") no-repeat;
+  }
+  .tab3 {
+    background: url("@/assets/images/tab3.png") no-repeat;
+  }
+  .tab3_checked {
+    background: url("@/assets/images/tab3_checked.png") no-repeat;
+  }
+  .tab1, .tab1_checked, .tab2, .tab2_checked, .tab3, .tab3_checked {
+    width: 48px;
+    height: 48px;
+    background-size: 100% 100%;
+  }
 }
 </style>

src/views/worker/inspectionWork/index.vue

@@ -1,15 +1,8 @@
 <template>
-  <!--
-  <van-tabs v-model:active="active" type="card">
-    <van-tab title="巡查任务"> <PatrolTask /></van-tab>
-    <van-tab title="巡查记录"><InspectionRecord /></van-tab>
-    <van-tab title="巡查日历"><PatrolCalendar /></van-tab>
-  </van-tabs>
-  -->
   <div class="container">
     <div class="tabs">
       <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
-        <i :class="item.icon" />
+        <i :class="activeIndex === item.id ? item.icon + '_checked' : item.icon" />
         <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
       </div>
     </div>
@@ -28,9 +21,9 @@ import PatrolTask from "./patrolTask.vue";
 
 let activeIndex = ref('PatrolTask');
 let tabs = ref([
-  { id: 'PatrolTask', name: '巡查任务', icon: 'icon1' },
-  { id: 'InspectionRecord', name: '巡查记录', icon: 'icon2' },
-  { id: 'PatrolCalendar', name: '巡查日历', icon: 'icon3' },
+  { id: 'PatrolTask', name: '巡查任务', icon: 'tab1' },
+  { id: 'InspectionRecord', name: '巡查记录', icon: 'tab2' },
+  { id: 'PatrolCalendar', name: '巡查日历', icon: 'tab3' },
 ]);
 
 // 点击tab
@@ -59,22 +52,6 @@ const handleClickTab = (id) => {
       justify-content: center;
       align-items: center;
 
-      .icon1 {
-        background: url(./img/icon1_uncheck.png) no-repeat;
-      }
-      .icon2 {
-        background: url(./img/icon2.png) no-repeat;
-      }
-      .icon3 {
-        background: url(./img/icon3_uncheck.png) no-repeat;
-      }
-      .icon1, .icon2, .icon3 {
-        display: inline-block;
-        width: 48px;
-        height: 48px;
-        // background-color: #9d9d9d;
-        background-size: 100% 100%;
-      }
       .tab-text {
         color: #414F64;
         font-size: 14px;
@@ -90,5 +67,28 @@ const handleClickTab = (id) => {
     height: calc(100vh - 180px);
     overflow-y: auto;
   }
+  .tab1 {
+    background: url("@/assets/images/tab1.png") no-repeat;
+  }
+  .tab1_checked {
+    background: url("@/assets/images/tab1_checked.png") no-repeat;
+  }
+  .tab2 {
+    background: url("@/assets/images/tab2.png") no-repeat;
+  }
+  .tab2_checked {
+    background: url("@/assets/images/tab2_checked.png") no-repeat;
+  }
+  .tab3 {
+    background: url("@/assets/images/tab3.png") no-repeat;
+  }
+  .tab3_checked {
+    background: url("@/assets/images/tab3_checked.png") no-repeat;
+  }
+  .tab1, .tab1_checked, .tab2, .tab2_checked, .tab3, .tab3_checked {
+    width: 48px;
+    height: 48px;
+    background-size: 100% 100%;
+  }
 }
 </style>

src/views/worker/riskManagement/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="tabs">
       <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
-        <i :class="item.icon" />
+        <i :class="activeIndex === item.id ? item.icon + '_checked' : item.icon" />
         <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
       </div>
     </div>
@@ -22,10 +22,10 @@ import investigationRecords from "./InvestigationRecords.vue";
 
 let activeIndex = ref('riskSource');
 let tabs = ref([
-  { id: 'riskSource', name: '风险源排查', icon: 'icon1' },
-  { id: 'HiddenSource', name: '隐患源排查', icon: 'icon2' },
-  { id: 'dangerousSource', name: '危险源排查', icon: 'icon3' },
-  { id: 'investigationRecords', name: '排查记录', icon: 'icon4' },
+  { id: 'riskSource', name: '风险源排查', icon: 'tab1' },
+  { id: 'HiddenSource', name: '隐患源排查', icon: 'tab2' },
+  { id: 'dangerousSource', name: '危险源排查', icon: 'tab3' },
+  { id: 'investigationRecords', name: '排查记录', icon: 'tab4' },
 ]);
 
 // 点击tab
@@ -76,5 +76,34 @@ const handleClickTab = (id) => {
     height: calc(100vh - 180px);
     overflow-y: auto;
   }
+  .tab1 {
+    background: url("@/assets/images/tab4.png") no-repeat;
+  }
+  .tab1_checked {
+    background: url("@/assets/images/tab4_checked.png") no-repeat;
+  }
+  .tab2 {
+    background: url("@/assets/images/tab5.png") no-repeat;
+  }
+  .tab2_checked {
+    background: url("@/assets/images/tab5_checked.png") no-repeat;
+  }
+  .tab3 {
+    background: url("@/assets/images/tab6.png") no-repeat;
+  }
+  .tab3_checked {
+    background: url("@/assets/images/tab6_checked.png") no-repeat;
+  }
+  .tab4 {
+    background: url("@/assets/images/tab7.png") no-repeat;
+  }
+  .tab4_checked {
+    background: url("@/assets/images/tab7_checked.png") no-repeat;
+  }
+  .tab1, .tab1_checked, .tab2, .tab2_checked, .tab3, .tab3_checked, .tab4, .tab4_checked {
+    width: 48px;
+    height: 48px;
+    background-size: 100% 100%;
+  }
 }
 </style>