|
|
@@ -132,9 +132,18 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
+// 与 index-home / profile-main 同族:$c-text-slate-2/$c-fill-warm-gray/$c-violet 同名同值
|
|
|
+$c-text-muted: #999;
|
|
|
+$c-text-slate-2: #64748B; // slate-500
|
|
|
+$c-fill-warm-gray: #F8F4EF;
|
|
|
+$c-violet: #8B5CF6; // violet-500
|
|
|
+$c-info-blue: #3B82F6; // blue-500
|
|
|
+$c-cyan: #06B6D4; // cyan-500
|
|
|
+
|
|
|
.container {
|
|
|
- background: #F8F4EF;
|
|
|
+ background: $c-fill-warm-gray;
|
|
|
min-height: 100vh;
|
|
|
padding: 0 0 40rpx;
|
|
|
}
|
|
|
@@ -144,7 +153,7 @@ export default {
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
padding: 24rpx 30rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
@@ -154,12 +163,12 @@ export default {
|
|
|
.header-title {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #1E293B;
|
|
|
+ color: $uni-text-color;
|
|
|
}
|
|
|
|
|
|
.header-close {
|
|
|
font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
+ color: $c-text-muted;
|
|
|
}
|
|
|
|
|
|
/* 统计卡片横排(替代 grid,使用 flexbox) */
|
|
|
@@ -173,7 +182,7 @@ export default {
|
|
|
|
|
|
.stat-card {
|
|
|
flex: 1;
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
align-items: center;
|
|
|
@@ -181,26 +190,26 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.stat-card.blue { border-top: 4rpx solid #3B82F6; }
|
|
|
-.stat-card.green { border-top: 4rpx solid #10B981; }
|
|
|
-.stat-card.gold { border-top: 4rpx solid #F59E0B; }
|
|
|
-.stat-card.purple { border-top: 4rpx solid #8B5CF6; }
|
|
|
+.stat-card.blue { border-top: 4rpx solid $c-info-blue; }
|
|
|
+.stat-card.green { border-top: 4rpx solid $dim-action; }
|
|
|
+.stat-card.gold { border-top: 4rpx solid $dim-wealth; }
|
|
|
+.stat-card.purple { border-top: 4rpx solid $c-violet; }
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #1E293B;
|
|
|
+ color: $uni-text-color;
|
|
|
display: block;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 24rpx;
|
|
|
- color: #64748B;
|
|
|
+ color: $c-text-slate-2;
|
|
|
}
|
|
|
|
|
|
.section {
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
margin: 0 24rpx 24rpx;
|
|
|
@@ -209,7 +218,7 @@ export default {
|
|
|
.section-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #1E293B;
|
|
|
+ color: $uni-text-color;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
@@ -227,7 +236,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 0;
|
|
|
- background: #F8F4EF;
|
|
|
+ background: $c-fill-warm-gray;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
|
|
|
@@ -242,19 +251,19 @@ export default {
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.menu-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
|
|
|
-.menu-icon.green { background: rgba(16, 185, 129, 0.15); color: #10B981; }
|
|
|
-.menu-icon.cyan { background: rgba(6, 182, 212, 0.15); color: #06B6D4; }
|
|
|
-.menu-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
|
|
|
+.menu-icon.blue { background: rgba($c-info-blue, 0.15); color: $c-info-blue; }
|
|
|
+.menu-icon.green { background: rgba($dim-action, 0.15); color: $dim-action; }
|
|
|
+.menu-icon.cyan { background: rgba($c-cyan, 0.15); color: $c-cyan; }
|
|
|
+.menu-icon.purple { background: rgba($c-violet, 0.15); color: $c-violet; }
|
|
|
|
|
|
.menu-label {
|
|
|
font-size: 24rpx;
|
|
|
- color: #64748B;
|
|
|
+ color: $c-text-slate-2;
|
|
|
}
|
|
|
|
|
|
.empty-tip {
|
|
|
text-align: center;
|
|
|
- color: #999;
|
|
|
+ color: $c-text-muted;
|
|
|
padding: 60rpx 0;
|
|
|
font-size: 26rpx;
|
|
|
}
|