562 lines
15 KiB
Vue
562 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<statusNav returnColor="#ffffff" fontWeight="800" titleColor="rgba(255, 255, 255, 100)" backgroudColor="#F37A61"
|
||
navBarTitle="天天签到">
|
||
</statusNav>
|
||
|
||
<view class="head">
|
||
<view class="integral">
|
||
当前积分
|
||
</view>
|
||
<view class="num">
|
||
<text class="bold">3000</text>积分
|
||
</view>
|
||
<view class="text">
|
||
每日签到领取积分，连续签到领大礼~
|
||
</view>
|
||
|
||
<view class="button">
|
||
兑换商城
|
||
</view>
|
||
</view>
|
||
|
||
<view class="signin-content">
|
||
<view class="text">
|
||
已连续签到<text class="cF37A61 bold">3</text>天
|
||
</view>
|
||
<view class="icon-content">
|
||
<view class="li" v-for="(item,index) in signinData">
|
||
<view class="icon" :class="item.state?'on':''">
|
||
<image src="" v-if="item.state" mode=""></image>
|
||
</view>
|
||
<view class="icon-text">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="button" @click="signinFun()">
|
||
立即签到
|
||
</view>
|
||
</view>
|
||
|
||
<view class="conversion">
|
||
<view class="title">
|
||
兑换红包
|
||
</view>
|
||
|
||
<view class="conversion-content">
|
||
<view class="li" v-for="(item,index) in 4" @click="redPacketFun()">
|
||
<image src="" class="img" mode=""></image>
|
||
<view class="text">
|
||
限量3000个
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="welfare">
|
||
<view class="title">
|
||
福利任务
|
||
</view>
|
||
<view class="welfare-content">
|
||
<view class="li" v-for="(item,index) in welfareData">
|
||
<view class="left">
|
||
<view class="text">
|
||
{{item.title}} <text class="ml" v-if="item.num>0">{{item.num}}/3</text>
|
||
</view>
|
||
<view class="num">
|
||
<image src="" class="icon" mode=""></image>
|
||
<view class="">
|
||
积分+40
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="button" :class="item.state?'on':''">
|
||
<text v-if="item.state">待领取</text>
|
||
<text v-else>+40积分</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="welfare time-limit">
|
||
<view class="title">
|
||
限时任务
|
||
</view>
|
||
<view class="welfare-content">
|
||
<view class="li" v-for="(item,index) in welfareData">
|
||
<view class="left">
|
||
<view class="text">
|
||
{{item.title}} <text class="ml" v-if="item.num>0">{{item.num}}/3</text>
|
||
</view>
|
||
<view class="num">
|
||
<image src="" class="icon" mode=""></image>
|
||
<view class="">
|
||
积分+40
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="button" :class="item.state?'on':''">
|
||
<text v-if="item.state">待领取</text>
|
||
<text v-else>+40积分</text>
|
||
</view>
|
||
<view class="date">
|
||
剩余时间20小时30分
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="make" v-if="isSignin">
|
||
<view class="make-content">
|
||
<view class="title">
|
||
恭喜签到成功
|
||
</view>
|
||
<view class="signin-make">
|
||
<view class="text">
|
||
+50积分
|
||
</view>
|
||
<view class="button" @click="signinFun()">
|
||
明天提醒我
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="make-close" @click="signinFun()">
|
||
<!-- <image src="" class="make-close-img" mode=""></image> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="make" v-if="isRedPacket">
|
||
<view class="make-content">
|
||
<view class="title">
|
||
恭喜签到成功
|
||
</view>
|
||
<view class="PacketFun-make">
|
||
+0.3元
|
||
</view>
|
||
</view>
|
||
<view class="make-close" @click="redPacketFun()">
|
||
<!-- <image src="" class="make-close-img" mode=""></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
|
||
import statusNav from '../../components/status-nav.vue';
|
||
export default {
|
||
components: {
|
||
footTabOne,
|
||
statusNav
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isRedPacket:false,
|
||
isSignin: false,
|
||
signinData: [{
|
||
title: "第1天",
|
||
state: true
|
||
},
|
||
{
|
||
title: "第2天",
|
||
state: false
|
||
},
|
||
{
|
||
title: "第3天",
|
||
state: false
|
||
},
|
||
{
|
||
title: "第4天",
|
||
state: false
|
||
},
|
||
{
|
||
title: "第5天",
|
||
state: false
|
||
},
|
||
{
|
||
title: "第6天",
|
||
state: false
|
||
},
|
||
{
|
||
title: "第7天",
|
||
state: false
|
||
},
|
||
|
||
],
|
||
welfareData: [{
|
||
title: "邀请好友注册",
|
||
state: false,
|
||
num: 0,
|
||
},
|
||
{
|
||
title: "参与抽奖",
|
||
state: true,
|
||
num: 2,
|
||
|
||
},
|
||
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
signinFun() {
|
||
this.isSignin=!this.isSignin
|
||
},
|
||
redPacketFun() {
|
||
this.isRedPacket=!this.isRedPacket
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.head {
|
||
width: 100%;
|
||
height: 360rpx;
|
||
line-height: 40rpx;
|
||
padding: 0 22rpx 0 26rpx;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
}
|
||
|
||
.head .integral {
|
||
color: rgba(227, 227, 227, 100);
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
font-family: PingFangSC-regular;
|
||
}
|
||
|
||
.head .num {
|
||
color: rgba(255, 255, 255, 100);
|
||
font-size: 28rpx;
|
||
margin-top: 16rpx;
|
||
font-family: PingFangSC-regular;
|
||
}
|
||
|
||
.head .num .bold {
|
||
font-size: 44rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.head .text {
|
||
font-size: 28rpx;
|
||
margin-top: 12rpx;
|
||
color: #E3E3E3;
|
||
}
|
||
|
||
.head .button {
|
||
width: 184rpx;
|
||
height: 72rpx;
|
||
position: absolute;
|
||
right: 22rpx;
|
||
top: 245rpx;
|
||
border-radius: 60rpx;
|
||
background-color: rgba(255, 221, 221, 100);
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
color: rgba(243, 122, 97, 100);
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.signin-content {
|
||
width: 702rpx;
|
||
height: 368rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #FFFFFF;
|
||
margin: auto;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
margin-top: -138rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.signin-content .text {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.signin-content .text .bold {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.icon-content {
|
||
display: flex;
|
||
margin-top: 36rpx;
|
||
justify-content: space-between;
|
||
color: rgba(208, 208, 208, 100);
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon-content .li .icon {
|
||
width: 60rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 16rpx;
|
||
height: 60rpx;
|
||
background-color: rgba(227, 227, 227, 100);
|
||
}
|
||
|
||
.icon-content .li .on {
|
||
background-color: rgba(249, 197, 29, 100);
|
||
}
|
||
|
||
.signin-content .button {
|
||
width: 602rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 60rpx;
|
||
color: rgba(255, 255, 255, 100);
|
||
font-size: 32rpx;
|
||
margin: auto;
|
||
margin-top: 54rpx;
|
||
background-color: rgba(249, 197, 29, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.conversion {
|
||
padding: 20rpx 26rpx;
|
||
width: 702rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
height: 378rpx;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.conversion .title {
|
||
color: rgba(16, 16, 16, 100);
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-regular;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 2rpx solid rgba(227, 227, 227, 100);
|
||
}
|
||
|
||
.conversion-content {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.conversion-content .li .img {
|
||
width: 122rpx;
|
||
height: 196rpx;
|
||
border-radius: 20rpx;
|
||
background-color: rgba(227, 227, 227, 100);
|
||
}
|
||
|
||
.conversion-content .li .text {
|
||
color: rgba(16, 16, 16, 100);
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
margin-top: 16rpx;
|
||
font-family: PingFangSC-regular;
|
||
}
|
||
|
||
.welfare {
|
||
padding: 20rpx 26rpx 28rpx;
|
||
width: 702rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.welfare .title {
|
||
color: rgba(16, 16, 16, 100);
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-regular;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 2rpx solid rgba(227, 227, 227, 100);
|
||
}
|
||
|
||
.welfare-content .li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0rpx;
|
||
border-bottom: 2rpx solid rgba(227, 227, 227, 100)
|
||
}
|
||
|
||
.welfare-content .li .text {
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
margin-bottom: 18rpx;
|
||
font-family: PingFangSC-regular;
|
||
}
|
||
|
||
.welfare-content .li .text .ml {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.welfare-content .li .num {
|
||
display: flex;
|
||
color: rgba(16, 16, 16, 100);
|
||
font-size: 24rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.welfare-content .li .num .icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 10rpx;
|
||
background-color: rgba(208, 208, 208, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.welfare-content .li .button {
|
||
width: 164rpx;
|
||
height: 64rpx;
|
||
border-radius: 60rpx;
|
||
color: rgba(255, 255, 255, 100);
|
||
line-height: 64rpx;
|
||
font-size: 28rpx;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
|
||
.time-limit .li .right .date {
|
||
color: rgba(243, 122, 97, 100);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.time-limit .li .right {
|
||
text-align: right;
|
||
}
|
||
|
||
.time-limit .li .button {
|
||
width: 164rpx;
|
||
display: inline-block;
|
||
height: 56rpx;
|
||
margin-bottom: 22rpx;
|
||
border-radius: 60rpx;
|
||
color: rgba(255, 255, 255, 100);
|
||
line-height: 56rpx;
|
||
font-size: 28rpx;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.time-limit .li .text {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.welfare-content .li .on {
|
||
background-color: rgba(243, 188, 97, 100);
|
||
}
|
||
|
||
.make {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
z-index: 100;
|
||
left: 0rpx;
|
||
top: 0rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(0, 0, 0, 0.54);
|
||
}
|
||
|
||
.make-close {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
text-align: center;
|
||
margin-top: 48rpx;
|
||
border: 2rpx solid rgba(255, 255, 255, 100);
|
||
}
|
||
|
||
.make-content .title {
|
||
width: 524rpx;
|
||
height: 168rpx;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
padding-top: 74rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx 20rpx 0px 0px;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.make-content .title::after {
|
||
position: absolute;
|
||
content: "";
|
||
left: 76rpx;
|
||
top: -36rpx;
|
||
width: 46rpx;
|
||
height: 106rpx;
|
||
line-height: 20px;
|
||
border-radius: 12px;
|
||
background-color: rgba(249, 70, 70, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.make-content .title::before {
|
||
position: absolute;
|
||
content: "";
|
||
right: 76rpx;
|
||
top: -36rpx;
|
||
width: 46rpx;
|
||
height: 106rpx;
|
||
line-height: 20px;
|
||
border-radius: 12px;
|
||
background-color: rgba(249, 70, 70, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.signin-make {
|
||
width: 100%;
|
||
height: 374rpx;
|
||
border-radius: 0px 0px 20rpx 20rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.signin-make .text {
|
||
color: rgba(243, 122, 97, 100);
|
||
font-size: 40rpx;
|
||
padding-top: 74rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
font-family: PingFangSC-medium;
|
||
}
|
||
|
||
.signin-make .button {
|
||
width: 387rpx;
|
||
margin: auto;
|
||
height: 84rpx;
|
||
color: rgba(255, 255, 255, 100);
|
||
font-size: 28rpx;
|
||
margin-top: 90rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 20rpx;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
text-align: center;
|
||
}
|
||
.PacketFun-make{
|
||
width: 100%;
|
||
height: 280rpx;
|
||
border-radius: 0px 0px 20rpx 20rpx;
|
||
background-color: #FFFFFF;
|
||
color: rgba(243, 122, 97, 100);
|
||
font-size: 96rpx;
|
||
text-align: center;
|
||
line-height: 280rpx;
|
||
}
|
||
</style>
|