演示网站 每日签到手机活动页面
编写代码
<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/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/layer_mobile/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="top-bar">
<a href="javascript:;"></a>
<span>每日签到</span>
<i></i>
</div>
<!-- 签到天数 -->
<div class="sign-day">
<span>{{day}}</span>
</div>
<!-- 主体 -->
<div class="container">
<!-- 积分 -->
<div class="score">
<div class="item" :class="{'signed':day>=0,'on':day==0}">
<img src="statics/images/icon-jf.png" alt="">
<span>+5</span>
<i>1</i>
<p>签到可领</p>
</div>
<div class="item" :class="{'signed':day>=1,'on':day==1}">
<img src="statics/images/icon-dj.png" alt="">
<span>+1</span>
<i>2</i>
<p>签到可领</p>
</div>
<div class="item" :class="{'signed':day>=2,'on':day==2}">
<img src="statics/images/icon-jf.png" alt="">
<span>+10</span>
<i>3</i>
<p>签到可领</p>
</div>
<div class="item" :class="{'signed':day>=3,'on':day==3}">
<img src="statics/images/icon-dj.png" alt="">
<span>+2</span>
<i>4</i>
<p>签到可领</p>
</div>
<div class="item" :class="{'signed':day>=4,'on':day==4}">
<img src="statics/images/icon-jf.png" alt="">
<span>+15</span>
<i>5</i>
<p>签到可领</p>
</div>
<div class="item" :class="{'signed':day>=5,'on':day==5}">
<img src="statics/images/icon-dj.png" alt="">
<span>+3</span>
<i>6</i>
<p>签到可领</p>
</div>
</div>
<!-- 进度 -->
<div class="progress">
<div class="line" :class="{'on':day>=1,'this':day==1}">
<span></span>
</div>
<div class="line" :class="{'on':day>=2,'this':day==2}">
<span></span>
</div>
<div class="line" :class="{'on':day>=3,'this':day==3}">
<span></span>
</div>
<div class="circle-right" :class="{'on':day>=4}">
<span></span>
</div>
<div class="line" :class="{'on':day>=4,'this':day==4}">
<span></span>
</div>
<div class="line" :class="{'on':day>=5,'this':day==5}">
<span></span>
</div>
<div class="line" :class="{'on':day>=6,'this':day==6}">
<span></span>
</div>
<div class="circle-left" :class="{'on':day>=7}">
<span></span>
</div>
<div class="line" :class="{'on':day>=7}">
<span></span>
</div>
</div>
<!-- 礼包 -->
<div class="libao"></div>
<!-- 签到按钮 -->
<div class="button" @click="signin"></div>
</div>
<!-- 活动规则 -->
<div class="rule">
<h4>活动规则：</h4>
<p>在12.28-01.03期间签到有奖励，连续7天签到可以获得大礼包哦！</p>
</div>
<!-- 领奖 -->
<div class="lingqu-dialog" v-show="lingquDialog">
<div class="dialog-body">
<img src="statics/images/icon-lb.png" alt="">
<button @click="lingqu"></button>
</div>
</div>
</div>
</body>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
