241 lines
5.7 KiB
Vue
241 lines
5.7 KiB
Vue
<template>
|
||
<view class="sign-page">
|
||
<view class="nav" :style="{'paddingTop':statusBarHeight}">签到中心</view>
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<view class="header">
|
||
<view class="integral">
|
||
<view class="detail">
|
||
<text class="num">185</text>
|
||
<text class="title">我的积分</text>
|
||
</view>
|
||
<view class="rule">
|
||
<image src="@/static/sign/gt.png" mode="" class="rule-img"></image>
|
||
积分规则
|
||
</view>
|
||
</view>
|
||
<view class="time">有效期：2023-03-20-2023-04-20</view>
|
||
<view class="accumulative">
|
||
<view class="title">
|
||
<view class="left">
|
||
本月累计登录<text class="red">1</text>天
|
||
</view>
|
||
<view class="right">
|
||
距离下次奖励还<text class="red">2</text>天
|
||
</view>
|
||
</view>
|
||
<view class="accumulative-date">
|
||
<view class="date-item" v-for="(item,index) in list" :key="index" :style="{backgroundImage:item.type == 1 ? 'url(../../static/sign/qd.png)' : `url(../../static/sign/wqd.png)`,color:item.type == 1 ? '#fff' : '#888'}">
|
||
第{{index+1}}天
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="task">
|
||
<view class="title">做任务赚积分</view>
|
||
<view class="list" v-for="(item,index) in taskList" :key="index">
|
||
<view class="detail">
|
||
<image src="@/static/sign/j.png" mode="" class="detail-img"></image>
|
||
<view class="detail-info">
|
||
<view class="title">每日任务</view>
|
||
<view class="tip">完成每日登录可领取<text class="red">10</text>积分</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" :class="{'to-finish':item.type != 1}">领取奖励</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
statusBarHeight,
|
||
list:[{type:'1'},{type:'0'},{type:''},{type:''},{type:''}],
|
||
taskList:[
|
||
{type:'1'},{type:'0'},{type:''},{type:''},{type:''},
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.sign-page{
|
||
|
||
// background: url('@/static/sign/nav.png') no-repeat 100%;
|
||
//
|
||
.nav{
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
// padding-top: 69rpx;
|
||
width: 100%;
|
||
height: 184rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
background: url('@/static/sign/nav.png') no-repeat;
|
||
background-size: 100%;
|
||
z-index: 10;
|
||
}
|
||
.scroll-view{
|
||
padding-top: 184rpx;
|
||
height: 100vh;
|
||
.header{
|
||
background: url('@/static/sign/bg.png') no-repeat;
|
||
background-size: 100%;
|
||
padding-top: 34rpx;
|
||
.integral{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-left:53rpx;
|
||
.detail{
|
||
.num{
|
||
font-size: 83rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.title{
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
.rule{
|
||
width: 179rpx;
|
||
height: 60rpx;
|
||
background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%);
|
||
border-radius: 30rpx 0px 0px 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #EC4236;
|
||
.rule-img{
|
||
width: 26rpx;
|
||
height: 25rpx;
|
||
margin-right: 9rpx;
|
||
}
|
||
}
|
||
}
|
||
.time{
|
||
padding-left:53rpx;
|
||
// margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #FFBCB7;
|
||
}
|
||
.accumulative{
|
||
margin: 26rpx 0 0 23rpx;
|
||
width: 705rpx;
|
||
height: 288rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 9rpx 9rpx;
|
||
.title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 44rpx 25rpx 34rpx 20rpx;
|
||
.left{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
.red{
|
||
color: #EB473A;
|
||
}
|
||
}
|
||
.right{
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
.red{
|
||
color: #EB473A;
|
||
}
|
||
}
|
||
}
|
||
.accumulative-date{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 19rpx;
|
||
.date-item{
|
||
width: 114rpx;
|
||
height: 137rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
text-align: center;
|
||
padding-top: 90rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.task{
|
||
margin: 33rpx 22rpx;
|
||
width: 705rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 9rpx 9rpx;
|
||
padding: 31rpx 22rpx;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.list{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 32rpx;
|
||
.detail{
|
||
display: flex;
|
||
align-items: center;
|
||
.detail-img{
|
||
width: 12rpx;
|
||
height: 52rpx;
|
||
}
|
||
.detail-info{
|
||
margin-left: 14rpx;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.tip{
|
||
font-size: 20rpx;
|
||
color: #888888;
|
||
.red{
|
||
color: #F66B61;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn{
|
||
width: 153rpx;
|
||
height: 55rpx;
|
||
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
||
border-radius: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.to-finish{
|
||
background: #fff;
|
||
color: #EF4235;
|
||
border: 1px solid #EC4134;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |