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>
按钮:
<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;
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;
}
}
}
}
}
vue切换按钮(关闭消失型)的更多相关文章
- 尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框
尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...
- lhgdialog在打开的窗口里点击按钮关闭当前窗口
lhgdialog在打开的窗口里点击按钮关闭当前窗口 var api = frameElement.api, W = api.opener; api.close();
- JQuery Dialog 禁用X按钮关闭对话框,-摘自网络
JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({ closeOnEscape: false, open: ...
- JAVA GUI学习 - 窗口【x】按钮关闭事件触发器:重写processWindowEvent(WindowEvent e)方法
public class WindowListenerKnow extends JFrame { public WindowListenerKnow() { this.setBounds(300, 1 ...
- Android 按下电源按钮关闭小学习过程的整个长度
Android 按下电源按钮关闭小学习过程的整个长度 近期研究了一下android关机跟又一次启动功能,看了一些长按电源键到弹出关机对话框,到真正关机的一系列处理过程. 首先还是来看看这个长按电源键都 ...
- C# PDF Page操作——设置页面切换按钮
概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适 ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- Egret 中实现3种状态切换按钮
一.游戏中的常用3种状态按钮 Egret种提供了2种状态切换的按钮ToggleButton. 但是在游戏中常用到3种状态的按钮,比如任务系统的领取.已领取.未领取. 比如下图中宝箱的打开.浏览后打开. ...
- PyQT5-QPushButton切换按钮
""" QPushButton:切换按钮就是QPsuhButton的一种特殊模式,他有两种状态:按下和未按下.我们在点击的时候切换两种状态,有很多场景会用到这个功能 Au ...
随机推荐
- Hiho coder 1236 2015 北京网络赛 Score
五维偏序..一开始被吓到了,后来知道了一种BITSET分块的方法,感觉非常不错. 呆马: #include <iostream> #include <cstdio> #incl ...
- BlogEngine2.9模仿yahoo滚动新闻Widget
widget.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="w ...
- ASP.NET MVC异常处理
ASP.NET MVC异常处理方案 如何保留异常前填写表单的数据 ASP.NET MVC中的统一化自定义异常处理 MVC过滤器详解 MVC过滤器使用案例:统一处理异常顺道精简代码 ASP.NET MV ...
- openlayer 3 在layer上添加feature
首先获取layer的source,所以你的source里就先要有内容. vectorLayer.getSource().addFeature(iconFeature); 如果source里面没有定义过 ...
- clock()、time()、clock_gettime()和gettimeofday()函数的用法和区别【转】
转自:http://www.cnblogs.com/krythur/archive/2013/02/25/2932647.html 转自http://blog.sina.com.cn/s/blog_7 ...
- eclipse中 将java项目转换为web项目
来自:http://jadethao.iteye.com/blog/1331308 eclipse中 将java项目转换为web项目 1.找到项目工作空间目录,打开.project文件,并修改文件, ...
- Java 序列化Serializable详解
Java 序列化Serializable详解(附详细例子) Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化Serialization(序列化)是一种将对象以一连 ...
- jQuery的deferred对象学习
#copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...
- Android Studio 自定义debug签名文件keystore
Android Studio 自定义debug签名文件keystore
- java使用sax解析xml
目的:解析xml文件,并存入mysql,并且要解析的字段能一一对应.这里解析的是微博的文件,想要利用里面的article和person_id字段. 思路: 为了能得到person_id和article ...