<html lang="en">
<head>
<title>Document</title>
<meta charset="utf-8">
<!-- 引入本地组件库 -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style lang="scss" scoped>
@mixin fs12{
font-size: 12px;
font-weight: normal;
}
.icon {
width: 2.2em; height: 2.2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.page-white{
background: #fff;
height: 100vh;
overflow: auto;
padding:30px 30px 120px;
box-sizing: border-box;
.skip{
display: flex;
justify-content: flex-end;
span{
border-radius: 30px;
border: 1px solid #EBEFF3;
padding:7px 20px;
color:#728195;
font-size: 12px;
}
}
h2{
font-size: 26px;
font-weight: bold;
text-align: center;
small{
color:#728195;
@include fs12;
display: block;
}
}
.board-list{
& > li {
& > span {
font-size: 18px;
color: #222C39;
margin-bottom: 12px;
display: block;
margin-top: 24px;
}
& > ul.sub-list{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 15px;
li {
background:#F6F7FC;
border-radius: 16px;
padding:26px 0;
display: flex;
flex-direction: column;
align-items: center;
border:3px solid transparent;
span{
color:#222C39;
font-size:14px;
margin-bottom: 0;
margin-top: 4px;
}
&.active{
background: #D8EBFF;
border:3px solid #1B73E9;
}
}
}
}
}
.btn-fixed{
position: absolute;
left:45px;
right:45px;
bottom:30px;
height: 54px;
color:#fff;
}
}
</style>
</head>
<body>
<div id="app">
<!-- 待选标签 -->
<ul class="board-list">
<li v-for="(item,itemIndex) in boardList" :key="item.id">
<span>{{item.title}}</span>
<ul class="sub-list">
<li v-for="(sub,subIndex) in item.subMenu" :class="{'active':isActive(item,sub)}" :key="sub.subIndex" @click="currentToggle(item,sub)">
<i :class="item.icon" class=""></i>
<span>{{sub.name}}</span>
</li>
</ul>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
boardList:[
{
title: '经济运行',
id:1,
subMenu:[
{
icon:'#icon-a-iconxianxingshuishou',
name:'税收'
},
{
icon:'#icon-a-iconxianxingzhaoshang',
name:'招商引资'
},
{
icon:'#icon-a-iconxianxingyingshanghuanjing',
name:'营商环境'
}
]
},{
title: '综合监管',
id:2,
subMenu:[
{
icon:'#icon-a-iconxianxingjianguan',
name:'分类1'
},
{
icon:'#icon-a-iconxianxingjianguan',
name:'分类2'
},
{
icon:'#icon-a-iconxianxingjianguan',
name:'分类3'
}
]
},{
title: '城市管理',
id:3,
subMenu:[
{
icon:'#icon-a-iconxianxingshehuibaozhang',
name:'社会保障底线'
},
{
icon:'#icon-a-iconxianxingchengshi',
name:'提升城市品质'
},
{
icon:'#icon-a-iconxianxinghuanjing',
name:'生态环境'
}
]
},{
title: '基层治理',
id:4,
subMenu:[
{
icon:'#icon-a-iconxianxingwangluo',
name:'一网统管'
},
{
icon:'#icon-a-iconxianxingpinganchengqu',
name:'平安城区'
},
{
icon:'#icon-a-iconxianxingjiayuan',
name:'同心家园'
}
]
},{
title: '总体安全',
id:5,
subMenu:[
{
icon:'#icon-a-iconxianxingjianguan3',
name:'分类1'
},
{
icon:'#icon-a-iconxianxingjianguan3',
name:'分类2'
},
{
icon:'#icon-a-iconxianxingjianguan3',
name:'分类3'
}
]
}
],
currentList:[],
}
},
methods: {
isActive(item,sub){
let checkItem = {
id:item.id,
name: sub.name
}
return this.currentList.some(cItem=>{
return cItem.id === checkItem.id && cItem.name === checkItem.name
})
},
currentToggle(item,sub){
let checkItem = {
id:item.id,
name: sub.name
}
console.log(checkItem);
if(this.currentList.some(cItem=>{
return cItem.id === checkItem.id && cItem.name === checkItem.name
})){
this.currentList = this.currentList.filter((v) => {
if(v.id === checkItem.id && v.name === checkItem.name){
return false
}
return true
})
} else {
this.currentList.push(checkItem)
}
}
}
});
</script>
</body>
</html>
