wx-fensisiyu/pageA/everyday.vue

<template>
	<view class="page">
		<view class="index-navbar">
			<view class="" style="position: relative;;">
				<!-- <view class="back"></view> -->
				<u-navbar title-width='300' title='每日签到' :is-back="true" :border-bottom="false"
					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true"></u-navbar>
			</view>
		</view>
		<view class="u-flex u-row-between top">
			<view class="">
				<view class="u-flex u-row-between">
					<view class="">
						<view class="u-flex">
							<text class="jifen">2</text>
							<image style="width: 40rpx;height: 40rpx;" src="" mode=""></image>
						</view>
						<text class="huoqu">每日签到可得1积分</text>
					</view>
					<view class="haowu">
						积分兑好物
					</view>
				</view>
				<view class="qiandao">
					今日签到
				</view>
				<view class="" style="margin-top: 46rpx;">
					<u-icon name="info-circle" color="#5881C1" size="22"></u-icon>
					<text class="guize">积分规则</text>
				</view>
			</view>
			<image style="width: 208rpx;height: 308rpx;" src="/pageA/static/images/meimei.png" mode=""></image>
		</view>
		<view class="rili">
			<d-rili></d-rili>
		</view>
		<view class="jiangli">
			<view class="ji">签到奖励</view>
			<view class="u-flex">
				<view class="">
					<view class="qian u-flex-col u-col-center">
						<view class="hui">
							<u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
						</view>
						<view class="font1">
							累计签到7天
						</view>
						<view class="font2">
							额外奖励3积分
						</view>
					</view>
				</view>
				<view class="" style='margin-left:42rpx'>
					<view class="qian u-flex-col u-col-center">
						<view class="hui">
							<u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
						</view>
						<view class="font1">
							累计签到17天
						</view>
						<view class="font2">
							额外奖励5积分
						</view>
					</view>
				</view>
				<view class="" style='margin-left:42rpx'>
					<view class="qian u-flex-col u-col-center">
						<view class="hui">
							<u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
						</view>
						<view class="font1">
							累计签到27天
						</view>
						<view class="font2">
							额外奖励7积分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 136rpx;"></view>
		<view class="bottom u-flex u-col-center " style="justify-content: center;">
			<view class="button" @click="task">
				做任务赚积分
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'date'
			};
		},
		methods: {
			task() {
				this.$u.toast('暂未开放')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		width: 420rpx;
		height: 82rpx;
		background: linear-gradient(90deg, #B8E7FB 0%, #97D6F6 100%);
		opacity: 1;
		border-radius: 42rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		line-height: 82rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.bottom {
		width: 750rpx;
		height: 122rpx;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.ji {
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: 500;
		line-height: 42rpx;
		color: #323337;
		margin-bottom: 18rpx;
	}

	.hui {
		width: 50rpx;
		height: 50rpx;
		background: rgba(187, 187, 187, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.font1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #7A7A7A;
		margin-top: 16rpx;
	}

	.font2 {
		font-size: 20rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		line-height: 28rpx;
		color: #959595;
	}

	.qian {

		width: 184rpx;
		height: 176rpx;
		background: rgba(239, 239, 240, 1);
		border-radius: 16rpx;
		padding: 25rpx 0 22rpx 0;
	}

	.jiangli {
		margin-top: 40rpx;
		width: 692rpx;
		height: 316rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 34rpx;
		padding: 34rpx 24rpx 0;
	}

	.rili {
		// width: 702rpx;
		// height: 848rpx;
		// padding:0 24rpx;
		// border-radius: 36rpx;
	}

	.guize {
		font-size: 22rpx;
		font-weight: 400;
		line-height: 26rpx;
		color: #5881C1;
	}

	.qiandao {
		width: 168rpx;
		height: 54rpx;
		background: linear-gradient(180deg, #B8E7FB 0%, #97D6F6 100%);
		box-shadow: 0rpx 6rpx 12rpx rgba(143, 204, 241, 1);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		line-height: 56rpx;
		color: #FFF7F7;
		text-align: center;
		margin-top: 28rpx;
	}

	.haowu {
		width: 158rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 48rpx;
		color: #26303A;
		text-align: center;
		margin-left: 108rpx;
		margin-right: -50rpx;
	}

	.jifen {
		font-size: 70rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 98rpx;
		color: #323337;
	}

	.huoqu {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #7C879A;
	}

	.top {
		padding: 24rpx 44rpx 0 40rpx;
	}

	.page {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #CFF4FE 0%, #D5E5FF 41%, #8FCCF1 100%);
		padding: 0 24rpx;
	}

	.index-navbar {
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
		// overflow: hidden;

		// .back {
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: -1;
		// 	width: 750rpx;
		// 	height: 100vh;
		// 	background: linear-gradient(180deg, #CFF4FE 0%, #D5E5FF 41%, #8FCCF1 100%);
		// }
	}
</style>