<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>