vue切换按钮（关闭消失型）

弹窗：

<div class="pop" v-show="isShow">
<i class="iconfont icon-iconfontweibiaoti1015" v-on:click="hideRules()"></i>
<span class="line"></span>
<div class="pop-content">
<div class="title title{{rules[type].image_bg}}" style="">
<div class="bg"></div>
{{rules[type].title}}</div>
<div class="content">
<i class="iconfont {{rules[type].iconName}} font-background" ></i>
<div class="txt" v-for="list in rules[type].content">
<p><span>Q</span>&nbsp;&nbsp;{{list.question}}</p>
<p><span>A</span>&nbsp;&nbsp;{{list.answer}}</p>
</div>
</div>
</div>
</div>

按钮：

<div class="chose-class header">
<div>不瘦玩法</div>
<div class="rulePlay">
<ul>
<li class="type" v-on:click="showRules(0)">
<i class="iconfont icon-money"></i>
<p>押钱</p>
<i class="iconfont icon-more"></i>
</li>
<li class="type" v-on:click="showRules(1)">
<i class="iconfont icon-flagcheckered" ></i>
<p>减重</p>
<i class="iconfont icon-more"></i>
</li>
<li class="type" v-on:click="showRules(2)">
<i class="iconfont icon-xiaolian"></i>
<p>分钱</p>
<i class="showBtn iconfont icon-more"></i>
</li>
</ul>
</div>
</div>

vuejs：

var app = new Vue({
el: '#chose-class-v',
data: {
rules:[
{
title:'压钱',
image_bg:'1',
iconName:'icon-icongroup',
content:[
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
}
]
},
{
title:'减重',
image_bg:'2',
iconName:'icon-cup',
content:[
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
}
]
},
{
title:'分钱',
image_bg:'3',
iconName:'icon-iconjinbi',
content:[
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
},
{
question:'可以用支付宝支付吗？ ',
answer:'暂不支持支付宝。因腾讯微信号支付仅限微信支付，可将钱转到银行卡支付。'
}
]
}
],
type:0,
isShow:false,
soClassList:null,

},
methods:{
showRules:function(type){
this.type=type;
this.isShow=true;
},
hideRules:function(){
this.isShow=false;
},

}
});

css:

#chose-class-v{
background-color:#efeff4;
.chose-class.header{
background-color: #fff;
display: flex;
margin: .22rem .08rem;
height: 2.52rem;
text-align: center;
align-items: center;
border-radius: 0.08rem;
div:first-child{
position:absolute;
top:0;
left:4.86rem;
1.2rem;
height:0.4rem;
background-color:#29b6f6;
font-size:0.22rem;
color:#fff;
line-height:0.4rem;
}
.rulePlay{
100%;
margin-top: 0.5rem;
ul li{
display:inline-block;
30%;
i:first-child{
font-size:0.36rem;
color:#c8c8c8;
}
p{
color:#c8c8c8;
font-size:0.26rem;
line-height:0.5rem;
}
i:last-child{
color:#29b6f6;
opacity:0.4;
font-size: 0.23rem;
}
}
}
}
.pop{
-webkit-user-select:none;
// display:none;
position:fixed;
100%;
height:100%;
text-align:center;
top:0;
bottom:0;
left:0;
right:0;
z-index:999;
background:rgba(#444444,0.5);
padding-top:1.56rem;
.icon-iconfontweibiaoti1015{
position:absolute;
top:0.78rem;
left:5.34rem;
font-size:0.36rem;
color:#eee;

}
.line{
position:absolute;
top:1.12rem;
left:5.52rem;
height:0.46rem;
border-left: 1px solid #fff;
}
.font-background{
position:absolute;
// top:2rem;
right:0.2rem;
font-size:0.8rem;
color:#03a9f4;
opacity: 0.1;

}
.pop-content{
background-color: #fff;
height:7.24rem;
5.6rem;
margin:0 auto;
border-radius: 0.1rem;

.title{
height:1.3rem;
100%;
margin:0 auto;
border-radius: 0.1rem;
line-height:1.3rem;
color:#ffffff;
font-size:0.5rem;
.bg{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(#101010,0.62);
border-radius: 0.1rem;
}
&.title1{
background:url('../images/yaqian_bg.jpg') no-repeat center;background-size: cover;
}
&.title2{
background:url('../images/yaqian_bg.jpg') no-repeat center;background-size: cover;
}
&.title3{
background:url('../images/yaqian_bg.jpg') no-repeat center;background-size: cover;
}
}
//滚动条样式
.content::-webkit-scrollbar {
2px;
}
.content::-webkit-scrollbar-thumb {
background:rgba(#29b6f6,0.21);
}
.content{
padding:0.2rem;
text-align: left;
height:5.94rem;
100%;
overflow-y: auto;
.txt:nth-child(2n-1){
background-color:rgb(250,250,250);
}
.txt{
p{
color:#969696;
}
span{
color:#29b6f6;
}
p:first-child,p:first-child span{
font-size:0.26rem;
line-height:0.38rem;
margin-bottom:0.2rem;
}
p:last-child,p:last-child span{
font-size:0.2rem;
line-height:0.3rem;
margin-bottom:0.4rem;
}
}
}

}

}