82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<div class="header">
|
|
<div class="tab flex a-c">
|
|
<div
|
|
class="tab-item"
|
|
:class="{active: activeIndex === item.id}"
|
|
v-for="item in tabList"
|
|
:key="item.id"
|
|
@click="setActiveIndex(item.id)"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {setStorage, getStorage} from '@/utils/localStorage.js'
|
|
|
|
export default {
|
|
name: '',
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
{id: 1, label: '机动路线规划'},
|
|
// {id: 2, label: '临时部署驻地分析'},
|
|
],
|
|
activeIndex: 1,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.activeIndex = getStorage('activeIndex') || 1
|
|
},
|
|
|
|
beforeDestroy() {
|
|
setStorage('activeIndex', 1)
|
|
},
|
|
methods: {
|
|
setActiveIndex(id) {
|
|
if (this.activeIndex !== id) {
|
|
this.activeIndex = id
|
|
setStorage('activeIndex', id)
|
|
this.$bus.$emit('setActiveIndex', this.activeIndex)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$label_height: 50px;
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #2f705f;
|
|
.tab {
|
|
margin-left: 50px;
|
|
width: 680px;
|
|
height: 100%;
|
|
color: #fff;
|
|
&-item {
|
|
height: $label_height;
|
|
line-height: $label_height;
|
|
padding: 0 30px;
|
|
margin-right: 20px;
|
|
// font-family: 'HarmonyOS Sans';
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
|
|
&.active {
|
|
background-image: url('@/assets/image/tab-active.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|