<template>
<div>
<ul class="tab">
<li v-for="(item,index) in review" :key="index" :id="item.id"
:class="{'sever':titletStyle==index}"
@click="onli(index,item.id)">
{{item.name}}
<div :class="{'select':titletStyle==index}">
{{item.name}}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
titletStyle:0,
review: [
{ id: "1", name: "支部党员大会" },
{ id: "8", name: "党课" },
{ id: "3", name: "组织生活会" },
{ id: "4", name: "民主评议党员" },
{ id: "2253028057613312", name: "主题党日" }
]
};
},
methods: {
onli(ind, e) {
//考评项目
this.titletStyle = ind;
// this.form.classificationId = e; //取得考评项目得名称,用于搜索
// this.form.quarter = "0"; //切换的时候后面的变成全年度
},
}
};
</script>
<style>
ul li {
font-size: 14px;
float: left;
cursor: pointer;
padding: 7px 20px;
list-style: none;
position: relative;
}
ul.tab li {
border-radius: 5px;
margin: 0 0 20px 20px;
background: #e8e8e8;
}
ul.tab li.sever {
background: #42a6d8;
color: white;
}
ul.tab li>div{
width: 250px;
height: 300px;
text-align: center;
line-height: 300px;
color: #ff0000;
border: 1px solid #aeaeae;
position: absolute;
top:35px;
left: 0;
display: none;
}
ul.tab li>div.select{
display: block;
}
</style>