<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
<title>Year</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div id="app">
<div class="picture" id="image">
<div class="image_2">
<div class="sign">
<div class="sign_children" v-for="(item, index) in dayList" :key="index"
:class="item.sign_class" :style="item.img" >
<p v-if="item.show_value">{{item.value}}</p>
</div>
</div>
<button :style="sign_background" class="button_sign" @click="sign">{{sign_text}}</button>
</div>
</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
dayList: [],
sign_background: '',
sign_text: '立即签到',
sign_day: 0
}
},
mounted(){
this.init()
},
methods:{
init(){
for (let i = 1; i <= 23; i++) {
var img = 'background-image: url(./images/year/sign1.png); background-size: 100% 100%;'
var value = i + '天'
// sign_class为css名称列表
var sign_class = ['sign_day']
if (i === 5 || i === 10) {
img = 'background-image: url(./images/year/sign3.png); background-size: 100% 100%;'
value = '第' + i + '天'
sign_class.push('sign_reward')
} else if (i === 21) {
img = 'background-image: url(./images/year/sign5.png); background-size: 100% 100%;'
value = ''
sign_class.push('sign_reward')
}
// 右边距
if (i === 5 || i === 10 || i === 16 || i === 21) {
sign_class.push('margin_right1')
} else {
sign_class.push('margin_right2')
}
// 上边距
if (i > 5){
sign_class.push('margin_top')
}
this.dayList.push({ img: img, value: value, sign_class: sign_class, show_value: true })
}
},
// 签到
sign() {
window.alert('签到成功')
this.sign_background = 'background: #CCCCCC; color: #999999'
this.updateImg(this.sign_day)
this.sign_text = '签到完成'
this.sign_day++
},
// 更新签到图
updateImg(i) {
this.dayList[i].show_value = false
if (i === 4 || i === 9) {
this.dayList[i].img = 'background-image: url(./images/year/sign4.png); background-size: 100% 100%;'
} else if (i === 20) {
this.dayList[i].img = 'background-image: url(./images/year/sign6.png); background-size: 100% 100%;'
} else {
this.dayList[i].img = 'background-image: url(./images/year/sign2.png); background-size: 100% 100%;'
}
},
}
})
</script>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
display: block;
background-color: #BA1B2B;
}
.margin_top{
margin-top: 10px;
}
.margin_right1{
margin-right: 0px;
}
.margin_right2{
margin-right: 10px;
}
/* 签到--------start */
.picture {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
.image_2 {
margin: 20px 0px;
display: inline-block;
max-width: 343px;
max-height: 457px;
width: 100%;
height: 100%;
background: #FEEACC;
border-radius: 27px;
border: 1px solid #FFC060;
}
.sign {
padding: 16px 10px 0px 10px;
}
.sign_children{
float: left;
}
.sign_children p{
font-size: 12px;
font-weight: 600;
color: #FCD873;
line-height: 17px;
}
.button_sign {
margin: 15px 0px 0px 0px;
width: 240px;
height: 47px;
background: #FB9B32;
border: 0px;
border-radius: 24px;
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
line-height: 25px;
}
/* 动态css替换 */
.sign_day{
width: 45px;
height: 65px;
max-width: 45px;
max-height: 65px;
}
.sign_day p{
text-align: center;
padding-top: 44px;
}
.sign_reward{
width: 100px;
height: 65px;
max-width: 100px;
max-height: 65px;
}
.sign_reward p{
text-align: left;
padding: 24px 0px 0px 8px;
}
/* 签到--------end */
</style>
html+css+vue 实现签到样式
需积分: 0 168 浏览量
2023-01-14
11:08:44
上传
评论 1
收藏 115KB ZIP 举报
sign.zip （8个子文件） 
sign images year 
sign1.png 6KB sign3.png 28KB sign6.png 10KB sign5.png 17KB sign2.png 6KB sign4.png 13KB
sign.html 5KB
vue.min.js 92KB资源评论
洋哥登陆
- 粉丝: 49
- 资源: 1
最新资源
- J185-VB一款SOT23封装P-Channel场效应MOS管
- 计算整数各位数字之和,利用java代码实现
- J185-T2B-VB一款SOT23封装P-Channel场效应MOS管
- map20231226Kalmanfilter.ipynb
- J185-T1B-VB一款SOT23封装P-Channel场效应MOS管
- ASME Y14.5-2018 尺寸与公差标注 中文版
- J185-T1B-A-VB一款SOT23封装P-Channel场效应MOS管
- J168-VB一款SOT23封装P-Channel场效应MOS管
- J166-VB一款SOT23封装P-Channel场效应MOS管
- i2c测试程序-linux-如何调试i2c.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
