QCN_rider/.svn/pristine/56/566d116287a22b7dfb6c009541eb3f2394694324.svn-base

<template>


	<view v-if="loading" class="" style="margin: 20rpx;" >
		<!-- 收益统计骨架 -->
		<view class="skeleton-card">
			<view class="skeleton-slot skeleton-title"></view>
			<view class="skeleton-slot skeleton-subtitle"></view>
			<view class="skeleton-slot skeleton-progress"></view>
		</view>

		<!-- 签到区域骨架 -->
		<view class="skeleton-slot skeleton-section-title"></view>
		<view class="skeleton-signin-area"></view>

		<!-- 任务列表骨架 -->
		<view class="skeleton-slot skeleton-section-title"></view>
		<view class="skeleton-task-list">
			<view class="skeleton-task-item" v-for="index in 3" :key="index">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view class="skeleton-slot skeleton-task-name"></view>
					<view class="skeleton-slot skeleton-task-progress"></view>
				</view>
				<view class="skeleton-slot skeleton-task-reward"></view>
			</view>
		</view>

		<!-- 说明文字骨架 -->
		<view class="skeleton-slot skeleton-note"></view>
	</view>

	<view v-else style="margin: 20rpx ;">
		<view class=""
			style="background: linear-gradient(to bottom,#FFF8F0,#fff 90%);  border-radius: 20rpx; padding: 40rpx 20rpx; ">
			<view class="" style="font-size: 34rpx; font-weight: 600; color: red; ">
				今日最高可赚 ¥45.00
			</view>
			<view class="" style="margin: 15rpx 0; color: #666666;">
				已获得 ¥12.00
			</view>
			<up-line-progress :percentage="30" inactiveColor='#FFEFD5' activeColor='#FF6F00'
				:showText="false"></up-line-progress>
		</view>
		<view class="" style="margin-top: 20rpx; font-size: 34rpx; font-weight: 600; ">
			每日签到
		</view>

		<view class=""
			style=" width: 100%; height: 400rpx;  box-shadow:  0 0 10rpx 0 #e2e2e2 ;  border-radius: 20rpx; margin-top: 20rpx; ">

		</view>

		<view class="" style="margin-top: 20rpx; font-size: 34rpx; font-weight: 600; ">
			冲单奖励任务
		</view>
		<view class="" style="margin-top: 20rpx;">
			<view class="" v-for="(orderItem,orderIndex) in 3" :key="orderIndex"
				style=" margin-bottom: 30rpx; padding: 20rpx 30rpx;  box-shadow:  0 0 10rpx 0 #e2e2e2 ; border-radius: 20rpx; ">
				<view class="" style="display: flex; align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 30rpx; font-weight: 600; ">
						今日完成10单
					</view>
					<view class=""
						style="border: 1rpx solid var(--nav-mian);   color: var(--nav-mian); border-radius: 30rpx;  font-size: 26rpx; padding: 6rpx 24rpx; display: flex; align-items: center; justify-content: center;   ">
						6/10
					</view>
				</view>
				<view class="" style="color: red; margin-top: 10rpx; ">
					奖励￥20.00
				</view>
			</view>
		</view>


		<view class=""
			style="border-radius: 10rpx;  background-color: #F9F9F9;  padding: 20rpx; 30rpx;margin-top: 30rpx;">
			奖励将在任务完成后24小时内发放至钱包，可在‘收入中心’查看。
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { Service } from "@/Service/Service"
	import { ref } from "vue";

	let loading = ref(true)

	onLoad(() => {
		setTimeout(() => {
			loading.value = false
		}, 1000)
	});

	onShow(() => {

	});
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}



	/* 骨架屏样式 - 纯CSS实现 */
	.skeleton-slot {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		border-radius: 8rpx;
	}

	/* 骨架屏动画 */
	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}

		100% {
			background-position: -200% 0;
		}
	}

	/* 收益统计骨架 */
	.skeleton-card {
		background: linear-gradient(to bottom, #fff8f0, #fff 90%);
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
	}

	.skeleton-title {
		width: 60%;
		height: 34rpx;
		margin-bottom: 15rpx;
	}

	.skeleton-subtitle {
		width: 40%;
		height: 28rpx;
		margin-bottom: 15rpx;
	}

	.skeleton-progress {
		width: 100%;
		height: 20rpx;
		border-radius: 10rpx;
	}

	/* 区域标题骨架 */
	.skeleton-section-title {
		width: 30%;
		height: 34rpx;
		margin-top: 20rpx;
	}

	/* 签到区域骨架 */
	.skeleton-signin-area {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx 0 #e2e2e2;
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	/* 任务列表骨架 */
	.skeleton-task-list {
		margin-top: 20rpx;
	}

	.skeleton-task-item {
		margin-bottom: 30rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0 0 10rpx 0 #e2e2e2;
		border-radius: 20rpx;
	}

	.skeleton-task-name {
		width: 40%;
		height: 30rpx;
	}

	.skeleton-task-progress {
		width: 120rpx;
		height: 50rpx;
		border-radius: 25rpx;
	}

	.skeleton-task-reward {
		width: 25%;
		height: 28rpx;
		margin-top: 10rpx;
	}

	/* 说明文字骨架 */
	.skeleton-note {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}
</style>