You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.9 KiB
135 lines
2.9 KiB
<template>
|
|
<view>
|
|
<view class="head">
|
|
<view class="left">
|
|
<view>
|
|
<text class="lf-color-222">已连续签到</text>
|
|
<text class="lf-color-primary lf-p-l-10">{{ day }} 天</text>
|
|
</view>
|
|
<view>连续签到7天以上多获赠5桃花</view>
|
|
</view>
|
|
<view class="right">签到</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="hua-item" :class="{'active-bg': item < day}" v-for="item in monthDate" :key="item">
|
|
<text class="lf-iconfont icon-hua lf-font-38" style="color: #FD898E;"></text>
|
|
<text>+5桃花</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="explain">
|
|
<view class="lf-font-32 lf-color-222 lf-font-bold">签到说明</view>
|
|
<view class="lf-m-t-20 lf-font-24 lf-color-777">
|
|
<view>1、每日签到：会员每天可签到一次，签到后获赠桃花。</view>
|
|
<view class="lf-m-t-10">2、连续签到：连续签到7天以上，以后继续签到将每天额外获赠5桃花。</view>
|
|
<view class="lf-m-t-10">
|
|
<text>3、关于桃花：桃花用于发布动态、评论等，也可在</text>
|
|
<text class="eye-catching">福利中心</text>
|
|
<text>兑换红线。</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
day: new Date().getDate()
|
|
}
|
|
},
|
|
computed: {
|
|
// 获取当前月份天数
|
|
monthDate(){
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth()+1;
|
|
var d = new Date(year, month, 0);
|
|
return d.getDate();
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.active-bg{
|
|
background-color: #ffdaf1 !important;
|
|
}
|
|
.head{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 40rpx 32rpx;
|
|
box-sizing: border-box;
|
|
.left view:nth-child(1){
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.left view:nth-child(2){
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
margin-top: 20rpx;
|
|
}
|
|
.right{
|
|
width: 182rpx;
|
|
height: 82rpx;
|
|
background-color: #E21196;
|
|
border-radius: 10rpx;
|
|
color: #FFFFFF;
|
|
font-size: 36rpx;
|
|
line-height: 82rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
padding: 20rpx 32rpx 50rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.hua-item{
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
background-color: #F5F5F5;
|
|
border-radius: 5rpx;
|
|
font-size: 18rpx;
|
|
color: #555555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-right: 9rpx;
|
|
margin-bottom: 10rpx;
|
|
&:nth-child(7n){
|
|
margin-right: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.explain{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
background-color: #F5F5F5;
|
|
border-radius: 10rpx;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
.eye-catching{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #E21196;
|
|
padding: 0 4rpx;
|
|
}
|
|
}
|
|
</style>
|