<div class="topCon">
<ul>
<li
v-for="(item,index) in inTop"
:class="{activeLi:item.name==surename}"
@click="clickLi(item)"
:key="index"
>{{item.name}}</li>
</ul>
</div>
.topCon {
width: 100%;
position: fixed;
top: 68px;
height: 40px;
background-color: #d4dbe8;
left: 200px;
text-align: left;
// z-index: 99;
@media screen and (max-width: 1366px) {
top: 50px;
}
padding-left: 20px;
box-sizing: border-box;
overflow: hidden;
ul {
position: relative;
}
li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 8px;
background-color: #e7ebf2;
margin-right: 3px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 0 10px;
color: #6485bc;
cursor: pointer;
}
.activeLi {
margin-top: 8px;
background-color: #f0f4fb;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fbad33;
font-weight: bold;
height: 36px;
}
}
methods: {
// Tab表格的切换
clickLi(item) {
//切换导航菜单
this.surename = item.name;
if (item.name == "趋势") {
this.TrendBox = true;
this.DataBox = false;
this.TargetBox = false;
this.Hvalue = [];
this.QHvalue.push(this.$moment(this.valueData[0]).format("YYYY-MM-DD"));
this.QHvalue.push(this.$moment(this.valueData[1]).format("YYYY-MM-DD"));
} else if (item.name == "数据") {
this.TrendBox = false;
this.DataBox = true;
this.TargetBox = false;
this.Hvalue = [];
this.Hvalue.push(this.$moment(this.valueData[0]).format("YYYY-MM-DD"));
this.Hvalue.push(this.$moment(this.valueData[1]).format("YYYY-MM-DD"));
// this.valueData[0]
// this.ScrollFun(this.Hvalue);
} else if (item.name == "目标和报警") {
this.TrendBox = false;
this.DataBox = false;
this.TargetBox = true;
}
},
}