zhgkpt-datav/app/src/components/Headers.vue

<template>
    <div>
<div class="header">
 <div class="title-card">  
    <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
        <img src="../assets/Vector.png" alt="">
        <linear-text text="总览" startColor="#95CCFF" endColor="#fff"
            fontSize="20px" />
    </li> 
    <ul   v-for="(item,index) in titleList" :key="index">   
        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">
        <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
        fontSize="20px"
      /></li> 
 </ul>
 </div>
 <div class="title-card"> 
     <ul v-for="(item,index) in titleList1" :key="index" >  
        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)"> <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
            fontSize="20px"
      /></li> 
 </ul>
 <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
        <img src="../assets/out.png" alt="">   
    </li> 
</div>
</div>
    </div>
</template>

<script >
import Image1 from '../assets/fxyj2.png'
import Image2 from '../assets/fxyj4.png'
import Image3 from '../assets/fxyj7.png'
import Image4 from '../assets/fxyj8.png'
export default{
    data(){
        return{
            imgList:[
            {load:Image1},
            {load:Image2},
            {load:Image3},
            {load:Image4}
            ],
            titleList:[
                {
                    name:'基础信息',
                    id:2
                },
                {
                    name:'消防管理',
                    id:3
                },
                {
                    name:'风险预警',
                    id:4
                },
            ],
            titleList1:[
                {
                    name:'警情动态',
                    id:5
                },
                {
                    name:'火灾情况',
                    id:6
                },
                {
                    name:'消防物联网',
                    id:7
                },
            
            ],
            test:1,
            flag:1
        }
    },
    mounted(){
        console.log(this.test);
    },
    methods:{
        ConfirmBtn(num){
        this.flag=num
        },
        getClass(v){
          return this.flag==v?'bg-img active':'bg-img'
        }
    },
    created() {
        console.log(this)
    }
}
</script>

<style  scoped>
.header{
  width: 100%;
  height: 120px;
  /* background: url('../assets/top.png') center no-repeat; */
  background: url('../assets/top.png') center no-repeat;

  display: flex;
  justify-content: space-between;
}
.title-card{
 /* width: 400px; */
display: flex;
padding: 40px 20px ;
font-size: 20px;
}
img{
  width: 16px;
  height: 15px;
}
.tab-list{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.bg-img{
    width: 138px;
    height: 48px;
    font-size: 18px;
    background: url('../assets/btn.png')  no-repeat;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    line-height: 49px;
}
.bg-img:hover{
    cursor: pointer;
}
/* 选中效果 */
.active{
    width: 150px;
    height: 48px;
    font-size: 18px;
    background: url('../assets/active-btn.png')  no-repeat !important;
    background-size: 100% 100%;
    text-align: center;
    line-height: 49px;
}

</style>