演示网站 移动端app会员VIP页面模板
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员中心</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="top">
<!--标题-->
<div class="title">
<h3>会员中心</h3>
<span class="more"></span>
<div class="more-box">
<a href="#">更多</a>
</div>
</div>
<!--类型-->
<div class="type">
<ul>
<li class="active">精选</li>
<li>游戏</li>
<li>亲情卡</li>
</ul>
</div>
<!--状态-->
<div class="status">
<span>未开通</span>
<p>*预计每年可节省998元</p>
</div>
</div>
<!--精选会员卡列表-->
<div class="card-list active">
<div class="cate">
<p class="active"><i></i>超级会员</p>
<p><i></i>普通会员</p>
</div>
<div class="list">
<ul class="active">
<li class="active">
<div class="title">连续包月</div>
<div class="desc">
<p class="yh">6折优惠</p>
<p class="money"><i>¥</i><span>12</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">1个月</div>
<div class="desc">
<p class="yh">9折优惠</p>
<p class="money"><i>¥</i><span>18</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">3个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>45</span></p>
<p class="old">原价¥60</p>
</div>
</li>
<li>
<div class="title">12个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>120</span></p>
<p class="old">原价¥240</p>
</div>
</li>
</ul>
<ul>
<!-- 这里是普通会员卡列表，结构和上面的ul一样 -->
</ul>
<p class="tip">首月仅需15元，每月自动续费，可随时关闭</p>
</div>
</div>
<!--游戏会员卡列表-->
<div class="card-list">
<div class="cate">
<p class="active"><i></i>超级会员</p>
<p><i></i>普通会员</p>
</div>
<div class="list">
<ul>
<li class="active">
<div class="title">连续包月</div>
<div class="desc">
<p class="yh">5折优惠</p>
<p class="money"><i>¥</i><span>10</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">1个月</div>
<div class="desc">
<p class="yh">8折优惠</p>
<p class="money"><i>¥</i><span>16</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">3个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>45</span></p>
<p class="old">原价¥60</p>
</div>
</li>
<li>
<div class="title">12个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>120</span></p>
<p class="old">原价¥240</p>
</div>
</li>
</ul>
<ul>
<!-- 这里是普通会员卡列表，结构和上面的ul一样 -->
</ul>
<p class="tip">首月仅需15元，每月自动续费，可随时关闭</p>
</div>
</div>
<!--亲情卡会员卡列表-->
<div class="card-list">
<div class="cate">
<p class="active"><i></i>超级会员</p>
<p><i></i>普通会员</p>
</div>
<div class="list">
<ul>
<li class="active">
<div class="title">连续包月</div>
<div class="desc">
<p class="yh">7折优惠</p>
<p class="money"><i>¥</i><span>14</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">1个月</div>
<div class="desc">
<p class="yh">8折优惠</p>
<p class="money"><i>¥</i><span>16</span></p>
<p class="old">原价¥20</p>
</div>
</li>
<li>
<div class="title">3个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>45</span></p>
<p class="old">原价¥60</p>
</div>
</li>
<li>
<div class="title">12个月</div>
<div class="desc">
<p class="money"><i>¥</i><span>120</span></p>
<p class="old">原价¥240</p>
</div>
</li>
</ul>
<ul>
<!-- 这里是普通会员卡列表，结构和上面的ul一样 -->
</ul>
<p class="tip">首月仅需15元，每月自动续费，可随时关闭</p>
</div>
</div>
<!--特权-->
<div class="tequan">
<ul>
<li>
<img src="statics/images/icon-meilizhi.png"/>
<p>魅力值</p>
<span>兑换更多金币</span>
</li>
<li>
<img src="statics/images/icon-huiyuanjia.png"/>
<p>会员价</p>
<span>地址4折</span>
</li>
<li>
<img src="statics/images/icon-huiyuanri.png"/>
<p>会员日</p>
<span>每月5日</span>
</li>
<li>
<img src="statics/images/icon-shengri.png"/>
<p>生日礼</p>
<span>奢侈品折扣</span>
</li>
</ul>
</div>
<!--开通会员-->
<div class="submit">
<button>开通会员</button>
</div>
</body>
</html>
<script>
// 更多
$('.more').click(function(e){
e.stopPropagation()
$('.more-box').toggle()
})
$(document).click(function(){
$('.more-box').hide()
})
// 精选，游戏，亲情卡切换
$('.type ul li').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.card-list').removeClass('active').eq(index).addClass('active');
$('.card-list').find('ul').removeClass('active')
$('.card-list').eq(index).find('ul').addClass('active');
})
// 超级会员，普通会员切换
$('.card-list .cate p').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(this).parents('.card-list').find('ul').removeClass('active').eq(index).addClass('active');
})
// 选择套餐
$('.card-list .list ul li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
// 提交
$('.submit button').click(function(){
var current = $('.card-list.active .list ul.active li.active');
// 开通时常
var time = current.find('.title').text();
// 价格
var price = current.find('.desc .money span').text();
alert("您确定要开通："+time+"会员吗？，价格："+price+" 元")
})
</script>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
