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>  {{list.question}}</p>
<p><span>A</span>  {{list.answer}}</p>
</div>
</div>
</div>
</div>

按钮：

vuejs：

}
});

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;
width:1.2rem;
height:0.4rem;
background-color:#29b6f6;
font-size:0.22rem;
color:#fff;
line-height:0.4rem;
}
.rulePlay{
width: 100%;
margin-top: 0.5rem;
ul li{
display:inline-block;
width: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;
width: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;
width:5.6rem;
margin:0 auto;
border-radius: 0.1rem;

.title{
height:1.3rem;
width: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 {
width:2px;
}
.content::-webkit-scrollbar-thumb {
background:rgba(#29b6f6,0.21);
}
.content{
padding:0.2rem;
text-align: left;
height:5.94rem;
width: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;
}
}
}

}

}

posted @ 2016-12-20 10:32 B.I 阅读(5351) 评论(1) 编辑收藏举报

B.I

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

公告