|
|
@@ -163,17 +163,17 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.container {
|
|
|
min-height: 100vh;
|
|
|
- background: #f5f7fa;
|
|
|
+ background: $app-bg;
|
|
|
padding-bottom: 120rpx;
|
|
|
}
|
|
|
|
|
|
/* ===== 报告卡 ===== */
|
|
|
.report-card {
|
|
|
margin: 20rpx 30rpx;
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 40rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
|
|
|
@@ -190,12 +190,12 @@ export default {
|
|
|
.report-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
|
|
|
.report-date {
|
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
|
|
|
/* ===== 综合EQ ===== */
|
|
|
@@ -204,10 +204,10 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 40rpx 0;
|
|
|
- background: linear-gradient(135deg, #FF6B35, #FFD700);
|
|
|
+ background: linear-gradient(135deg, $mind-accent, $accent-gold);
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 40rpx;
|
|
|
- color: #fff;
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
|
|
|
|
.overall-label {
|
|
|
@@ -259,7 +259,7 @@ export default {
|
|
|
|
|
|
.dimension-name {
|
|
|
font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
@@ -272,7 +272,7 @@ export default {
|
|
|
.dimension-score {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #FF6B35;
|
|
|
+ color: $mind-accent;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
@@ -282,14 +282,14 @@ export default {
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.level-excellent { color: #10B981; background: #ECFDF5; }
|
|
|
-.level-good { color: #3B82F6; background: #EFF6FF; }
|
|
|
-.level-average { color: #F97316; background: #FFF7ED; }
|
|
|
-.level-low { color: #EF4444; background: #FEF2F2; }
|
|
|
+.level-excellent { color: $status-success; background: $status-success-tint; }
|
|
|
+.level-good { color: $status-info; background: $status-info-tint; }
|
|
|
+.level-average { color: $brand-primary; background: $facade-brand-tint; }
|
|
|
+.level-low { color: $status-danger; background: $status-danger-tint-2; }
|
|
|
|
|
|
.dimension-bar {
|
|
|
height: 18rpx;
|
|
|
- background: #f0f0f0;
|
|
|
+ background: $facade-fill;
|
|
|
border-radius: 9rpx;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 8rpx;
|
|
|
@@ -303,7 +303,7 @@ export default {
|
|
|
|
|
|
.dimension-desc {
|
|
|
font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
@@ -311,12 +311,12 @@ export default {
|
|
|
.section-card {
|
|
|
margin-top: 30rpx;
|
|
|
padding: 28rpx;
|
|
|
- background: #f9f9f9;
|
|
|
+ background: $facade-fill-ghost-2;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
|
|
|
.suggestion-card {
|
|
|
- background: #FFFBEB;
|
|
|
+ background: $dim-wealth-tint;
|
|
|
}
|
|
|
|
|
|
.section-header-row {
|
|
|
@@ -334,12 +334,12 @@ export default {
|
|
|
.section-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
|
|
|
.section-content {
|
|
|
font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+ color: $facade-text-body;
|
|
|
line-height: 1.7;
|
|
|
display: block;
|
|
|
}
|
|
|
@@ -362,25 +362,25 @@ export default {
|
|
|
}
|
|
|
|
|
|
.action-btn.primary {
|
|
|
- background: linear-gradient(135deg, #FF6B35, #FFD700);
|
|
|
+ background: linear-gradient(135deg, $mind-accent, $accent-gold);
|
|
|
margin-left: 16rpx;
|
|
|
box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
|
|
|
}
|
|
|
|
|
|
.action-btn.secondary {
|
|
|
- background: #fff;
|
|
|
- border: 2rpx solid #ddd;
|
|
|
+ background: $app-surface;
|
|
|
+ border: 2rpx solid $facade-border-soft;
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
|
|
|
.action-btn-text {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
- color: #fff;
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
|
|
|
|
.action-btn.secondary .action-btn-text {
|
|
|
- color: #666;
|
|
|
+ color: $facade-text-body;
|
|
|
}
|
|
|
|
|
|
/* ===== 推荐卡片 ===== */
|
|
|
@@ -398,9 +398,9 @@ export default {
|
|
|
.rec-card-left { display: flex; align-items: center; flex: 1; min-width: 0; }
|
|
|
.rec-card-icon { font-size: 44rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
.rec-card-info { flex: 1; min-width: 0; }
|
|
|
-.rec-card-title { font-size: 28rpx; font-weight: 600; color: #1a1a2e; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
-.rec-card-desc { font-size: 22rpx; color: #94a3b8; margin-top: 4rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
-.rec-card-score { font-size: 28rpx; font-weight: 700; color: #FF6B35; flex-shrink: 0; margin-left: 16rpx; }
|
|
|
+.rec-card-title { font-size: 28rpx; font-weight: 600; color: $app-ink-night; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+.rec-card-desc { font-size: 22rpx; color: $app-text-subtle; margin-top: 4rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+.rec-card-score { font-size: 28rpx; font-weight: 700; color: $mind-accent; flex-shrink: 0; margin-left: 16rpx; }
|
|
|
|
|
|
/* ===== 加载中 ===== */
|
|
|
.loading-state {
|
|
|
@@ -412,7 +412,7 @@ export default {
|
|
|
|
|
|
.loading-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
|
|
|
/* ===== 空状态 ===== */
|
|
|
@@ -430,22 +430,22 @@ export default {
|
|
|
|
|
|
.empty-title {
|
|
|
font-size: 32rpx;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.empty-desc {
|
|
|
font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
text-align: center;
|
|
|
line-height: 1.6;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.empty-btn {
|
|
|
- background: linear-gradient(135deg, #FF6B35, #FFD700);
|
|
|
- color: #fff;
|
|
|
+ background: linear-gradient(135deg, $mind-accent, $accent-gold);
|
|
|
+ color: $app-surface;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
padding: 16rpx 64rpx;
|