|
@@ -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>
|