<template>
<div class="about">
<h1>about page</h1>
<el-row>
<el-col :span="2"><div class="grid-content bg-purple">11</div></el-col>
<el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
<el-col :span="2"><div class="grid-content bg-purple"></div>11</el-col>
<el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
<el-col :span="2"><div class="grid-content bg-purple"></div>111</el-col>
<el-col :span="22">
<el-row>
<el-col :span="24"><div class="more">
<div v-show="istrue">
<ul class="zij">
<li v-for="(item,index) in zimu" :key="index"
@click="changeck(item)"
:class="back==item?'back':''"
>{{item}}</li>
</ul>
</div>
<div class="dis">
<div :class="selecttab== 'all'?'change':'unSelected'">
<el-checkbox-group v-model="checkboxGroup3" size="small" v-if="isshow">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<el-checkbox-group v-model="checkboxGroup3" size="small" v-else>
<el-checkbox-button v-for="city in newlist" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<van-button type="primary" size="mini" @click="moreclock">{{news}}</van-button>
</div>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div >已选：{{checkboxGroup3}}</div></el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳','上海', '北京', '广州', '深圳'];
export default {
data(){
return{
back:'',
istr:'',
selecttab:'all',
checkboxGroup3: ['上海'],
checkboxGroup4:['A'],
cities: cityOptions,
cit:['方法','广告','方法','试试','嘿嘿',
'啊啊','额额','规范','一键','设置','让他','虽然','色',
'制作','规范','个人','方法','广告','方法','试试','嘿嘿',],
newlist:[],
zimu:['A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
isshow:true,
istrue:false,
news:'查看更多'
}
},methods:{
moreclock(){
this.isshow=!this.isshow
this.istrue=!this.istrue
this.selecttab = !this.selecttab
if (this.isshow) {
this.news = '查看更多'
}else{
this.news = '收起'
}
this.newlist= this.cities.concat(this.cit)
console.log(this.newlist)
},
changeck(i){
console.log(i)
this.back = i
this.istr = true
}
},
mounted(){
console.log(this.$route.params.id)
}
}
</script>
<style lang="scss" scoped>
.el-row{
border: 0.3px solid gray;
& :nth-child(3){
}
}
.more{
display: flex;
justify-content: space-between;
flex-direction: column;
.change{
min-height: 40px;
max-height: 120px;
overflow: hidden;
display: flex;
justify-content: space-between;
// overflow: scroll;
// overflow-x:hidden;
}
.unSelected{
max-height: 120px;
overflow: scroll;
overflow-x:hidden;
}
.zij{
display: flex;
max-width: 80%;
li{
padding-left: 10px;
cursor: pointer;
}
}
.dis{
display: flex;
justify-content: space-between;
cursor: pointer;
}
}
.back{
color: aqua;
}
</style>
