弹窗:

<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;
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切换按钮(关闭消失型)的更多相关文章

  1. 尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框

    尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...

  2. lhgdialog在打开的窗口里点击按钮关闭当前窗口

    lhgdialog在打开的窗口里点击按钮关闭当前窗口 var api = frameElement.api, W = api.opener; api.close();

  3. JQuery Dialog 禁用X按钮关闭对话框,-摘自网络

    JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({   closeOnEscape: false,   open: ...

  4. JAVA GUI学习 - 窗口【x】按钮关闭事件触发器:重写processWindowEvent(WindowEvent e)方法

    public class WindowListenerKnow extends JFrame { public WindowListenerKnow() { this.setBounds(300, 1 ...

  5. Android 按下电源按钮关闭小学习过程的整个长度

    Android 按下电源按钮关闭小学习过程的整个长度 近期研究了一下android关机跟又一次启动功能,看了一些长按电源键到弹出关机对话框,到真正关机的一系列处理过程. 首先还是来看看这个长按电源键都 ...

  6. C# PDF Page操作——设置页面切换按钮

    概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适 ...

  7. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  8. Egret 中实现3种状态切换按钮

    一.游戏中的常用3种状态按钮 Egret种提供了2种状态切换的按钮ToggleButton. 但是在游戏中常用到3种状态的按钮,比如任务系统的领取.已领取.未领取. 比如下图中宝箱的打开.浏览后打开. ...

  9. PyQT5-QPushButton切换按钮

    """ QPushButton:切换按钮就是QPsuhButton的一种特殊模式,他有两种状态:按下和未按下.我们在点击的时候切换两种状态,有很多场景会用到这个功能 Au ...

随机推荐

  1. 解决Window Azure: Failed to start Development Storage: the SQL Server instance ‘localhost\SQLExpress’ could not be found.

    运行Window Arzure 项目,报如下错误: Windows Azure Tools: Failed to initialize Windows Azure storage emulator. ...

  2. 使用javascript获取服务器时间

    思路:采用异步请求的方式,发送请求,获取HTTP请求的response头,头部中包含时间,使用getResponseHeader('Date')即可. 注意:以下任何一种方法都不精确,因为请求包的传输 ...

  3. 【已解决】新搭建的VPN服务器客户端无法正常连接

    昨天花了一天的时间,终于把VPN服务器搭建好了.但是客户端却一直提示无法拨号成功.查看VPN日志如下:[root@localhost log]# tail -f messages Jun 13 14: ...

  4. centos7 卸载openJDK 安装jdk7

    [root@cms02 root]# rpm -qa | grep jdk java--openjdk-headless-1.7.0.75-2.5.4.2.el7_0.x86_64 java--ope ...

  5. Dom编程

    Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...

  6. 7. LAMP环境搭建

    一.准备工作 1.安装编译工具gcc.gcc-c++ 注意解决依赖关系,推荐使用yum安装,若不能联网可使用安装光盘做为yum源-- 1)编辑yum配置文件: # mount /dev/cdrom / ...

  7. Innodb 表空间传输迁移数据

    在mysql5.5之前,mysql实例中innodb引擎表的迁移是个头疼的问题,要么使用mysqldump导出,要么使用物理备份的方法,但是在mysql5.6之后的版本中,可以使用一个新特性,方便地迁 ...

  8. GDB的深入研究

    GDB的深入研究 一.GDB代码调试 (一)GDB调试实例 在终端中编译一个示例C语言小程序,保存为文件 gdblianxi.c 中,用GCC编译. 在上面的命令行中,使用-o参数指定了编译生成的可执 ...

  9. MVC简单分层思想(连接数据库)

    图片内容是所有的包名,文件名. 1.创建(M)模型 package oa.bean; public class User { private String userName; private Stri ...

  10. YTU 3026: 中序线索化二叉树

    原文链接:https://www.dreamwings.cn/ytu3026/2896.html 3026: 中序线索化二叉树 时间限制: 1 Sec  内存限制: 128 MB 提交: 9  解决: ...