first commit

This commit is contained in:
Ls
2026-02-12 12:19:20 +08:00
commit 219fd9be5c
529 changed files with 169918 additions and 0 deletions

View File

@@ -0,0 +1,206 @@
<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>