120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<template>
|
|
<view class="crystal-overview">
|
|
<!-- 错误态 -->
|
|
<view v-if="error" class="error-card" @tap="$emit('retry')">
|
|
<text class="error-text">加载失败，点击重试</text>
|
|
</view>
|
|
|
|
<!-- 骨架态 -->
|
|
<view v-else-if="loading || !data" class="skeleton-row">
|
|
<view v-for="i in 2" :key="i" class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<!-- 正常态 -->
|
|
<view v-else class="card-row">
|
|
<view class="data-card card-crystal">
|
|
<text class="card-label">水晶余额</text>
|
|
<text class="card-value">{{ data.crystal_balance }}</text>
|
|
</view>
|
|
<view class="data-card card-today">
|
|
<text class="card-label">今日收益</text>
|
|
<text class="card-value">+ {{ data.today_income }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
data: { type: Object, default: null }, // { crystal_balance, today_income, week_rank? }
|
|
loading: { type: Boolean, default: false },
|
|
error: { type: String, default: null },
|
|
})
|
|
defineEmits(['retry'])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.crystal-overview {
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.card-row {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.data-card {
|
|
flex: 1;
|
|
height: 200rpx;
|
|
border-radius: 22rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-crystal {
|
|
background: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
|
|
box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
|
|
}
|
|
|
|
.card-today {
|
|
background: linear-gradient(137deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
|
|
box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
text-shadow: 0px 4px 4px rgba(164, 60, 60, 0.55);
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 70rpx;
|
|
font-weight: 700;
|
|
color: #FFFABD;
|
|
text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
|
|
font-family: 'Baloo Bhai', sans-serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 骨架态 */
|
|
.skeleton-row {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.skeleton-card {
|
|
flex: 1;
|
|
height: 200rpx;
|
|
border-radius: 22rpx;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* 错误态 */
|
|
.error-card {
|
|
height: 200rpx;
|
|
border-radius: 22rpx;
|
|
background: rgba(255, 100, 100, 0.15);
|
|
border: 2rpx solid rgba(255, 100, 100, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.error-text {
|
|
color: #ff8080;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|