Răsfoiți Sursa

refactor(wealth): B-5c 财富子链第三批四页令牌化(178 处,零观感变化)

- wealth-cf/index.vue 32 处 + checkin.vue 48 处 + insurance-add.vue 34 处 + insurance-planning.vue 64 处
- 新全局令牌 5 枚:$app-bg-2 / $brand-primary-light-2 / $accent-navy / $status-info-deep-2 / $facade-hairline-2
- 局部令牌 8 枚:wealth-cf 1(indigo 边框)+ insurance-planning 7(antd 深档族 green-700/red-700/gold-7 等)
- 歧义同值按语义分流:#F59E0B checkin 页面主 accent 走 $dim-wealth、insurance-planning 警示卡走 $status-warning-2
- 修复 split(\n,1) 消耗分隔符导致的换行丢失(局部声明曾吞掉 .container 选择器)
- 等价回归四连 PASS
liaoxg 1 săptămână în urmă
părinte
comite
4bfce3cf52

+ 32 - 31
cfc-frontend/pages/wealth-cf/index.vue

@@ -243,10 +243,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+$c-tint-indigo-border: #e8eaff; // indigo 极浅边框(单页专有)
 .container {
   min-height: 100vh;
-  background: #f5f6fa;
+  background: $app-bg-2;
   padding-bottom: 40rpx;
 }
 .empty-state {
@@ -262,13 +263,13 @@ export default {
 }
 .empty-title {
   font-size: 32rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 600;
   margin-bottom: 12rpx;
 }
 .empty-desc {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 40rpx;
   text-align: center;
 }
@@ -276,8 +277,8 @@ export default {
   width: 280rpx;
   height: 80rpx;
   line-height: 80rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   border-radius: 40rpx;
   font-size: 28rpx;
   border: none;
@@ -285,9 +286,9 @@ export default {
 .balance-card {
   margin: 30rpx;
   padding: 40rpx 30rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border-radius: 24rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .balance-label {
   font-size: 26rpx;
@@ -335,7 +336,7 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: 24rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
@@ -345,7 +346,7 @@ export default {
 }
 .action-text {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section {
   margin: 20rpx 30rpx;
@@ -359,14 +360,14 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
 }
 .log-list {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
 }
@@ -375,7 +376,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .log-item:last-child {
   border-bottom: none;
@@ -387,13 +388,13 @@ export default {
 .log-type {
   font-size: 26rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 4rpx;
 }
 .log-remark {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .log-right {
   text-align: right;
@@ -403,24 +404,24 @@ export default {
   font-weight: 600;
   display: block;
 }
-.log-plus { color: #52c41a; }
-.log-minus { color: #ff4d4f; }
+.log-plus { color: $status-success-3; }
+.log-minus { color: $status-danger-2; }
 .log-time {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
   margin-top: 4rpx;
   display: block;
 }
 .empty-logs {
   text-align: center;
   padding: 60rpx;
-  color: #999;
+  color: $facade-text-muted;
   font-size: 26rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
 }
 .exchange-modal {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx 24rpx 0 0;
   max-height: 80vh;
   display: flex;
@@ -431,16 +432,16 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .modal-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .modal-close {
   font-size: 40rpx;
-  color: #999;
+  color: $facade-text-muted;
   line-height: 1;
 }
 .modal-body {
@@ -458,9 +459,9 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 24rpx;
-  background: #f8f9ff;
+  background: $dim-wisdom-tint-4;
   border-radius: 16rpx;
-  border: 1rpx solid #e8eaff;
+  border: 1rpx solid $c-tint-indigo-border;
 }
 .coupon-info {
   flex: 1;
@@ -469,25 +470,25 @@ export default {
 .coupon-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .coupon-desc {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
   display: block;
 }
 .coupon-price {
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
   white-space: nowrap;
 }
 .empty-coupons {
   text-align: center;
   padding: 60rpx;
-  color: #999;
+  color: $facade-text-muted;
   font-size: 26rpx;
 }
 </style>

+ 43 - 43
cfc-frontend/pages/wealth-sub/checkin.vue

@@ -430,96 +430,96 @@ export default {
 }
 </script>
 
-<style>
-.container { min-height: 100vh; background: #f5f7fa; padding: 20rpx 30rpx 120rpx; width: 100%; box-sizing: border-box; overflow-x: hidden; }
+<style lang="scss">
+.container { min-height: 100vh; background: $app-bg; padding: 20rpx 30rpx 120rpx; width: 100%; box-sizing: border-box; overflow-x: hidden; }
 
 /* 能量提示 */
 .energy-tip {
-  background: linear-gradient(135deg, #F59E0B, #F97316);
+  background: linear-gradient(135deg, $dim-wealth, $brand-primary);
   border-radius: 20rpx; padding: 24rpx 30rpx; margin-bottom: 24rpx;
 }
-.energy-tip-text { color: #fff; font-size: 28rpx; font-weight: 600; }
+.energy-tip-text { color: $app-surface; font-size: 28rpx; font-weight: 600; }
 .energy-tip-sub { color: rgba(255,255,255,0.8); font-size: 22rpx; margin-top: 6rpx; }
 
 /* 日历 */
 .calendar-card {
-  background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx;
+  background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx;
 }
 .calendar-header {
   display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
 }
-.calendar-title { font-size: 32rpx; font-weight: 700; color: #333; }
-.nav-btn { font-size: 40rpx; color: #F97316; padding: 0 16rpx; }
+.calendar-title { font-size: 32rpx; font-weight: 700; color: $facade-text-strong; }
+.nav-btn { font-size: 40rpx; color: $brand-primary; padding: 0 16rpx; }
 .calendar-weekdays {
   display: flex; flex-direction: row; margin-bottom: 12rpx;
 }
-.weekday { width: 14.28%; text-align: center; font-size: 24rpx; color: #999; }
+.weekday { width: 14.28%; text-align: center; font-size: 24rpx; color: $facade-text-muted; }
 .calendar-days { display: flex; flex-direction: row; flex-wrap: wrap; }
 .day-cell {
   width: 14.28%; height: 72rpx; display: flex; flex-direction: column;
   align-items: center; justify-content: center; position: relative;
 }
 .day-cell.today .day-num {
-  background: #F97316; color: #fff; border-radius: 50%;
+  background: $brand-primary; color: $app-surface; border-radius: 50%;
   width: 48rpx; height: 48rpx; text-align: center; line-height: 48rpx;
 }
-.day-num { font-size: 26rpx; color: #333; }
-.day-dot { font-size: 16rpx; color: #F97316; position: absolute; bottom: 4rpx; }
+.day-num { font-size: 26rpx; color: $facade-text-strong; }
+.day-dot { font-size: 16rpx; color: $brand-primary; position: absolute; bottom: 4rpx; }
 .day-cell.empty { height: 72rpx; }
 .calendar-stats {
   display: flex; justify-content: space-between; margin-top: 16rpx;
-  padding-top: 16rpx; border-top: 2rpx solid #f5f5f5;
-  font-size: 24rpx; color: #999;
+  padding-top: 16rpx; border-top: 2rpx solid $facade-fill-2;
+  font-size: 24rpx; color: $facade-text-muted;
 }
-.stat-highlight { color: #F97316; font-weight: 700; font-size: 28rpx; }
+.stat-highlight { color: $brand-primary; font-weight: 700; font-size: 28rpx; }
 
 /* 快速打卡 */
-.quick-checkin { background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; }
+.quick-checkin { background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; }
 .section-title-row {
   display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
 }
-.section-title { font-size: 30rpx; font-weight: 700; color: #333; }
-.section-subtitle { font-size: 22rpx; color: #999; }
+.section-title { font-size: 30rpx; font-weight: 700; color: $facade-text-strong; }
+.section-subtitle { font-size: 22rpx; color: $facade-text-muted; }
 .checkin-types { display: flex; flex-direction: row; justify-content: space-between; }
 .checkin-btn {
   display: flex; flex-direction: column; align-items: center; justify-content: center;
-  width: 150rpx; height: 130rpx; background: #FFFBEB; border-radius: 16rpx;
-  border: 2rpx solid #FDE68A;
+  width: 150rpx; height: 130rpx; background: $dim-wealth-tint; border-radius: 16rpx;
+  border: 2rpx solid $status-warning-light;
 }
-.checkin-btn:active { background: #FEF3C7; }
+.checkin-btn:active { background: $status-warning-soft; }
 .checkin-btn.disabled { opacity: 0.5; }
 .checkin-icon { font-size: 44rpx; margin-bottom: 8rpx; }
-.checkin-label { font-size: 24rpx; color: #92400E; font-weight: 500; }
+.checkin-label { font-size: 24rpx; color: $status-warning-strong; font-weight: 500; }
 
 /* 统计 */
 .stats-card {
-  background: #fff; border-radius: 20rpx; padding: 24rpx;
+  background: $app-surface; border-radius: 20rpx; padding: 24rpx;
   display: flex; flex-direction: row; justify-content: space-around;
   align-items: center; margin-bottom: 24rpx;
 }
 .stat-item { display: flex; flex-direction: column; align-items: center; }
-.stat-value { font-size: 38rpx; font-weight: 800; color: #F59E0B; }
-.stat-label { font-size: 22rpx; color: #999; margin-top: 4rpx; }
-.stat-divider { width: 2rpx; height: 60rpx; background: #eee; }
+.stat-value { font-size: 38rpx; font-weight: 800; color: $dim-wealth; }
+.stat-label { font-size: 22rpx; color: $facade-text-muted; margin-top: 4rpx; }
+.stat-divider { width: 2rpx; height: 60rpx; background: $facade-hairline-2; }
 
 /* 记录 */
-.record-section { background: #fff; border-radius: 20rpx; padding: 24rpx; }
+.record-section { background: $app-surface; border-radius: 20rpx; padding: 24rpx; }
 .empty-state { text-align: center; padding: 48rpx 0; }
 .empty-icon { font-size: 48rpx; }
-.empty-text { color: #999; font-size: 26rpx; margin-top: 12rpx; }
+.empty-text { color: $facade-text-muted; font-size: 26rpx; margin-top: 12rpx; }
 .record-item {
   display: flex; flex-direction: row; justify-content: space-between;
-  align-items: center; padding: 20rpx 0; border-bottom: 2rpx solid #f5f5f5;
+  align-items: center; padding: 20rpx 0; border-bottom: 2rpx solid $facade-fill-2;
 }
 .record-item:last-child { border-bottom: none; }
 .record-left { display: flex; flex-direction: row; align-items: center; flex: 1; }
 .record-icon { font-size: 36rpx; margin-right: 16rpx; }
 .record-info { display: flex; flex-direction: column; }
-.record-type { font-size: 28rpx; color: #333; font-weight: 500; }
-.record-date { font-size: 22rpx; color: #999; margin-top: 2rpx; }
-.record-note { font-size: 22rpx; color: #666; margin-top: 2rpx; max-width: 300rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.record-type { font-size: 28rpx; color: $facade-text-strong; font-weight: 500; }
+.record-date { font-size: 22rpx; color: $facade-text-muted; margin-top: 2rpx; }
+.record-note { font-size: 22rpx; color: $facade-text-body; margin-top: 2rpx; max-width: 300rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .record-right { display: flex; flex-direction: column; align-items: flex-end; }
-.record-energy { font-size: 28rpx; color: #F59E0B; font-weight: 700; }
+.record-energy { font-size: 28rpx; color: $dim-wealth; font-weight: 700; }
 .record-mood { font-size: 28rpx; margin-top: 4rpx; }
 
 /* 打卡弹窗 */
@@ -529,27 +529,27 @@ export default {
   align-items: center; justify-content: center;
 }
 .dialog-card {
-  background: #fff; border-radius: 24rpx; width: 620rpx; padding: 32rpx;
+  background: $app-surface; border-radius: 24rpx; width: 620rpx; padding: 32rpx;
 }
-.dialog-title { font-size: 34rpx; font-weight: 700; color: #333; text-align: center; margin-bottom: 28rpx; }
+.dialog-title { font-size: 34rpx; font-weight: 700; color: $facade-text-strong; text-align: center; margin-bottom: 28rpx; }
 .form-item { margin-bottom: 24rpx; }
-.form-label { font-size: 26rpx; color: #666; margin-bottom: 8rpx; display: block; }
+.form-label { font-size: 26rpx; color: $facade-text-body; margin-bottom: 8rpx; display: block; }
 .form-input {
-  border: 2rpx solid #E5E7EB; border-radius: 12rpx; padding: 28rpx 20rpx;
+  border: 2rpx solid $facade-gray-200; border-radius: 12rpx; padding: 28rpx 20rpx;
   font-size: 28rpx; width: 100%; box-sizing: border-box; min-height: 80rpx;
 }
 .form-picker {
-  border: 2rpx solid #E5E7EB; border-radius: 12rpx; padding: 28rpx 20rpx;
-  font-size: 26rpx; color: #333; min-height: 80rpx; display: flex; align-items: center;
+  border: 2rpx solid $facade-gray-200; border-radius: 12rpx; padding: 28rpx 20rpx;
+  font-size: 26rpx; color: $facade-text-strong; min-height: 80rpx; display: flex; align-items: center;
 }
-.picker-text { color: #333; }
+.picker-text { color: $facade-text-strong; }
 .mood-picker { display: flex; flex-direction: row; gap: 16rpx; }
 .mood-item { font-size: 44rpx; padding: 8rpx; border-radius: 12rpx; border: 2rpx solid transparent; }
-.mood-item.selected { border-color: #F59E0B; background: #FFFBEB; }
+.mood-item.selected { border-color: $dim-wealth; background: $dim-wealth-tint; }
 .dialog-actions { display: flex; flex-direction: row; gap: 20rpx; margin-top: 32rpx; }
 .dialog-btn { flex: 1; padding: 20rpx; border-radius: 12rpx; font-size: 28rpx; text-align: center; }
-.dialog-btn.cancel { background: #f5f5f5; color: #666; }
-.dialog-btn.confirm { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; }
+.dialog-btn.cancel { background: $facade-fill-2; color: $facade-text-body; }
+.dialog-btn.confirm { background: linear-gradient(135deg, $dim-wealth, $brand-primary); color: $app-surface; }
 
 /* 能量动画 */
 .energy-animation {
@@ -557,7 +557,7 @@ export default {
   z-index: 1000; pointer-events: none;
 }
 .energy-anim-text {
-  font-size: 80rpx; font-weight: 900; color: #F59E0B;
+  font-size: 80rpx; font-weight: 900; color: $dim-wealth;
   text-shadow: 0 4rpx 20rpx rgba(245,158,11,0.5);
   animation: floatUp 1.5s ease-out forwards;
 }

+ 35 - 35
cfc-frontend/pages/wealth-sub/insurance-add.vue

@@ -367,10 +367,10 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
   .container {
     min-height: 100vh;
-    background: #f5f7fa;
+    background: $app-bg;
     padding: 20rpx 30rpx 120rpx;
     width: 100%;
     box-sizing: border-box;
@@ -383,13 +383,13 @@ export default {
   }
 
   .upload-card {
-    background: #fff;
+    background: $app-surface;
     border-radius: 20rpx;
     padding: 60rpx 40rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
-    border: 2rpx dashed #F97316;
+    border: 2rpx dashed $brand-primary;
   }
 
   .upload-icon {
@@ -400,13 +400,13 @@ export default {
   .upload-title {
     font-size: 32rpx;
     font-weight: 600;
-    color: #333;
+    color: $facade-text-strong;
     margin-bottom: 12rpx;
   }
 
   .upload-desc {
     font-size: 24rpx;
-    color: #999;
+    color: $facade-text-muted;
   }
 
   .upload-status {
@@ -418,15 +418,15 @@ export default {
 
   .upload-status-text {
     font-size: 28rpx;
-    color: #F97316;
+    color: $brand-primary;
     margin-bottom: 16rpx;
   }
 
   .spinner {
     width: 48rpx;
     height: 48rpx;
-    border: 4rpx solid #FED7AA;
-    border-top-color: #F97316;
+    border: 4rpx solid $brand-primary-light-2;
+    border-top-color: $brand-primary;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -438,11 +438,11 @@ export default {
 
   /* 解析结果预览 */
   .parsed-result {
-    background: #fff;
+    background: $app-surface;
     border-radius: 20rpx;
     padding: 30rpx;
     margin-bottom: 24rpx;
-    border: 2rpx solid #DCFCE7;
+    border: 2rpx solid $status-success-soft-2;
   }
 
   .result-header {
@@ -452,18 +452,18 @@ export default {
     align-items: center;
     margin-bottom: 20rpx;
     padding-bottom: 16rpx;
-    border-bottom: 1rpx solid #f5f5f5;
+    border-bottom: 1rpx solid $facade-fill-2;
   }
 
   .result-title {
     font-size: 30rpx;
     font-weight: 600;
-    color: #16A34A;
+    color: $status-success-text;
   }
 
   .result-hint {
     font-size: 24rpx;
-    color: #999;
+    color: $facade-text-muted;
   }
 
   .result-summary {
@@ -474,18 +474,18 @@ export default {
   }
 
   .summary-label {
-    color: #666;
+    color: $facade-text-body;
     width: 160rpx;
     flex-shrink: 0;
   }
 
   .summary-value {
-    color: #333;
+    color: $facade-text-strong;
     flex: 1;
   }
 
   .summary-value.orange {
-    color: #F97316;
+    color: $brand-primary;
     font-weight: 600;
   }
 
@@ -493,20 +493,20 @@ export default {
     margin-top: 24rpx;
     padding: 16rpx 0;
     text-align: center;
-    background: #F0F9FF;
+    background: $tint-sky-soft;
     border-radius: 12rpx;
-    color: #0284C7;
+    color: $status-info-deep-2;
     font-size: 28rpx;
     font-weight: 500;
   }
 
   /* 条款原文 */
   .terms-section {
-    background: #fff;
+    background: $app-surface;
     border-radius: 20rpx;
     padding: 30rpx;
     margin-bottom: 24rpx;
-    border: 2rpx solid #FEF3C7;
+    border: 2rpx solid $status-warning-soft;
   }
 
   .terms-header {
@@ -520,12 +520,12 @@ export default {
   .terms-title {
     font-size: 28rpx;
     font-weight: 600;
-    color: #92400E;
+    color: $status-warning-strong;
   }
 
   .terms-toggle {
     font-size: 24rpx;
-    color: #F59E0B;
+    color: $dim-wealth;
   }
 
   .terms-content {
@@ -534,7 +534,7 @@ export default {
 
   .terms-text {
     font-size: 24rpx;
-    color: #555;
+    color: $facade-text-deep;
     line-height: 1.8;
     white-space: pre-wrap;
     word-break: break-all;
@@ -542,7 +542,7 @@ export default {
 
   /* 表单 */
   .form-card {
-    background: #fff;
+    background: $app-surface;
     border-radius: 20rpx;
     padding: 30rpx;
     margin-bottom: 24rpx;
@@ -555,24 +555,24 @@ export default {
   .form-label {
     display: block;
     font-size: 28rpx;
-    color: #333;
+    color: $facade-text-strong;
     font-weight: 500;
     margin-bottom: 12rpx;
   }
 
   .required {
-    color: #DC2626;
+    color: $status-danger-deep;
   }
 
   .form-input {
     width: 100%;
     height: 88rpx;
     line-height: 88rpx;
-    background: #F5F7FA;
+    background: $app-bg;
     border-radius: 12rpx;
     padding: 0 20rpx;
     font-size: 28rpx;
-    color: #333;
+    color: $facade-text-strong;
     box-sizing: border-box;
   }
 
@@ -580,7 +580,7 @@ export default {
     width: 100%;
     height: 80rpx;
     line-height: 80rpx;
-    background: #F5F7FA;
+    background: $app-bg;
     border-radius: 12rpx;
     padding: 0 20rpx;
     box-sizing: border-box;
@@ -588,18 +588,18 @@ export default {
 
   .picker-value {
     font-size: 28rpx;
-    color: #333;
+    color: $facade-text-strong;
     line-height: 80rpx;
   }
 
   .form-textarea {
     width: 100%;
     height: 160rpx;
-    background: #F5F7FA;
+    background: $app-bg;
     border-radius: 12rpx;
     padding: 20rpx;
     font-size: 28rpx;
-    color: #333;
+    color: $facade-text-strong;
     box-sizing: border-box;
   }
 
@@ -622,8 +622,8 @@ export default {
     height: 88rpx;
     line-height: 88rpx;
     text-align: center;
-    background: #F97316;
-    color: #fff;
+    background: $brand-primary;
+    color: $app-surface;
     font-size: 30rpx;
     font-weight: 600;
     border-radius: 44rpx;

+ 64 - 57
cfc-frontend/pages/wealth-sub/insurance-planning.vue

@@ -296,10 +296,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+$c-success-deep: #389E0D; // green-700 成功深档(单页专有)
+$c-danger-deep: #CF1322; // red-700 危险深档(单页专有)
+$c-warning-deep: #D46B08; // gold-7 警示深档(单页专有)
+$c-navy-light: #2D5A8A; // 海军蓝渐变亮端(单页专有)
+$c-warning-ink: #78350F; // amber-900 警示极深文字(单页专有)
+$c-success-soft: #B7EB8F; // green-200 成功浅档(单页专有)
+$c-warning-mid: #FFA940; // gold-6 警示中档(单页专有)
   .container {
     min-height: 100vh;
-    background: #f5f7fa;
+    background: $app-bg;
     padding: 20rpx 30rpx 120rpx;
     width: 100%;
     box-sizing: border-box;
@@ -314,15 +321,15 @@ export default {
   padding: 120rpx 0;
 }
 .loading-icon { font-size: 64rpx; margin-bottom: 24rpx; }
-.loading-text { font-size: 28rpx; color: #999; }
+.loading-text { font-size: 28rpx; color: $facade-text-muted; }
 
 /* 综合评分卡 */
 .score-card {
-  background: linear-gradient(135deg, #1E3A5F 0%, #2D5A8A 100%);
+  background: linear-gradient(135deg, $accent-navy 0%, $c-navy-light 100%);
   border-radius: 24rpx;
   padding: 32rpx;
   margin-bottom: 24rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .score-header {
   display: flex;
@@ -379,9 +386,9 @@ export default {
   height: 100%;
   border-radius: 6rpx;
 }
-.body-fill { background: #FF8C42; }
-.mind-fill { background: #FF6B9D; }
-.wisdom-fill { background: #6366F1; }
+.body-fill { background: $dim-body; }
+.mind-fill { background: $dim-mind; }
+.wisdom-fill { background: $dim-wisdom; }
 .dim-value {
   font-size: 24rpx;
   width: 70rpx;
@@ -403,26 +410,26 @@ export default {
   padding: 12rpx 0;
   text-align: center;
 }
-.gap-stat.high { border-left: 4rpx solid #FF4D4F; }
-.gap-stat.medium { border-left: 4rpx solid #FFA940; }
-.gap-stat.low { border-left: 4rpx solid #52C41A; }
+.gap-stat.high { border-left: 4rpx solid $status-danger-2; }
+.gap-stat.medium { border-left: 4rpx solid $c-warning-mid; }
+.gap-stat.low { border-left: 4rpx solid $status-success-3; }
 .gap-stat-num {
   font-size: 36rpx;
   font-weight: bold;
   display: block;
-  color: #fff;
+  color: $app-surface;
 }
 .gap-stat-label { font-size: 22rpx; color: rgba(255,255,255,0.7); }
 
 /* 整体建议 */
 .recommend-card {
-  background: #FFFBEB;
+  background: $status-warning-tint;
   border-radius: 16rpx;
   padding: 24rpx;
-  border-left: 6rpx solid #F59E0B;
+  border-left: 6rpx solid $status-warning-2;
 }
-.recommend-title { font-size: 28rpx; font-weight: bold; color: #92400E; display: block; margin-bottom: 12rpx; }
-.recommend-text { font-size: 26rpx; color: #78350F; line-height: 1.6; }
+.recommend-title { font-size: 28rpx; font-weight: bold; color: $status-warning-strong; display: block; margin-bottom: 12rpx; }
+.recommend-text { font-size: 26rpx; color: $c-warning-ink; line-height: 1.6; }
 
 /* Section */
 .section { margin-bottom: 24rpx; }
@@ -432,13 +439,13 @@ export default {
   align-items: center;
   margin-bottom: 16rpx;
 }
-.section-title { font-size: 30rpx; font-weight: bold; color: #333; }
-.section-sub { font-size: 24rpx; color: #999; }
+.section-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; }
+.section-sub { font-size: 24rpx; color: $facade-text-muted; }
 
 /* 成员卡片 */
 .member-list {}
 .member-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
@@ -453,8 +460,8 @@ export default {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  color: #fff;
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
+  color: $app-surface;
   font-size: 32rpx;
   display: flex;
   align-items: center;
@@ -463,18 +470,18 @@ export default {
   flex-shrink: 0;
 }
 .member-info { flex: 1; }
-.member-name { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
-.member-role { font-size: 24rpx; color: #999; }
+.member-name { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; display: block; }
+.member-role { font-size: 24rpx; color: $facade-text-muted; }
 .member-policy-badge {
   font-size: 22rpx;
-  background: #DCFCE7;
-  color: #16A34A;
+  background: $status-success-soft-2;
+  color: $status-success-text;
   padding: 6rpx 16rpx;
   border-radius: 20rpx;
 }
 .member-policy-badge.no-policy {
-  background: #FEF2F2;
-  color: #DC2626;
+  background: $status-danger-tint-2;
+  color: $status-danger-deep;
 }
 
 .member-dims {
@@ -482,12 +489,12 @@ export default {
   gap: 24rpx;
   margin-bottom: 16rpx;
   padding: 12rpx 0;
-  border-top: 1rpx solid #f5f5f5;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-top: 1rpx solid $facade-fill-2;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .member-dim-item { text-align: center; flex: 1; }
-.mdim-label { font-size: 22rpx; color: #999; display: block; }
-.mdim-val { font-size: 32rpx; font-weight: bold; color: #333; }
+.mdim-label { font-size: 22rpx; color: $facade-text-muted; display: block; }
+.mdim-val { font-size: 32rpx; font-weight: bold; color: $facade-text-strong; }
 
 /* 覆盖状态芯片 */
 .coverage-chips {
@@ -502,25 +509,25 @@ export default {
   padding: 8rpx 16rpx;
   border-radius: 20rpx;
   font-size: 24rpx;
-  background: #f0f0f0;
-  color: #666;
+  background: $facade-fill;
+  color: $facade-text-body;
 }
-.coverage-chip.chip-good { background: #DCFCE7; color: #16A34A; }
-.coverage-chip.chip-warn { background: #FFF7E6; color: #D46B08; }
-.coverage-chip.chip-danger { background: #FFF1F0; color: #CF1322; }
+.coverage-chip.chip-good { background: $status-success-soft-2; color: $status-success-text; }
+.coverage-chip.chip-warn { background: $brand-primary-tint-2; color: $c-warning-deep; }
+.coverage-chip.chip-danger { background: $status-danger-tint-3; color: $c-danger-deep; }
 .chip-status { font-size: 22rpx; }
 
 /* 缺口列表 */
 .gap-list {}
 .gap-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
   border-left: 6rpx solid;
 }
-.gap-card[style*="priority-high"] { border-left-color: #FF4D4F; }
+.gap-card[style*="priority-high"] { border-left-color: $status-danger-2; }
 .gap-header {
   display: flex;
   align-items: center;
@@ -532,26 +539,26 @@ export default {
   padding: 4rpx 12rpx;
   border-radius: 8rpx;
 }
-.gap-priority.priority-high { background: #FFF1F0; color: #CF1322; }
-.gap-priority.priority-medium { background: #FFF7E6; color: #D46B08; }
-.gap-priority.priority-low { background: #F6FFED; color: #389E0D; }
-.gap-member { font-size: 28rpx; font-weight: bold; color: #333; }
-.gap-type { font-size: 26rpx; color: #666; }
+.gap-priority.priority-high { background: $status-danger-tint-3; color: $c-danger-deep; }
+.gap-priority.priority-medium { background: $brand-primary-tint-2; color: $c-warning-deep; }
+.gap-priority.priority-low { background: $status-success-tint-3; color: $c-success-deep; }
+.gap-member { font-size: 28rpx; font-weight: bold; color: $facade-text-strong; }
+.gap-type { font-size: 26rpx; color: $facade-text-body; }
 .gap-desc {
   font-size: 26rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.5;
   display: block;
   margin-bottom: 12rpx;
 }
 .gap-products { margin-bottom: 12rpx; }
-.gap-products-label { font-size: 24rpx; color: #999; }
-.gap-products-list { font-size: 24rpx; color: #F59E0B; font-weight: 500; }
+.gap-products-label { font-size: 24rpx; color: $facade-text-muted; }
+.gap-products-list { font-size: 24rpx; color: $status-warning-2; font-weight: 500; }
 .gap-actions { display: flex; justify-content: flex-end; }
 .gap-add-btn {
   font-size: 24rpx;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   padding: 10rpx 28rpx;
   border-radius: 24rpx;
   line-height: 1.5;
@@ -559,29 +566,29 @@ export default {
 
 /* 全覆盖 */
 .all-covered-card {
-  background: #F6FFED;
+  background: $status-success-tint-3;
   border-radius: 16rpx;
   padding: 40rpx;
   text-align: center;
-  border: 2rpx solid #B7EB8F;
+  border: 2rpx solid $c-success-soft;
 }
 .all-covered-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
-.all-covered-title { font-size: 30rpx; font-weight: bold; color: #389E0D; display: block; margin-bottom: 12rpx; }
-.all-covered-desc { font-size: 26rpx; color: #52C41A; }
+.all-covered-title { font-size: 30rpx; font-weight: bold; color: $c-success-deep; display: block; margin-bottom: 12rpx; }
+.all-covered-desc { font-size: 26rpx; color: $status-success-3; }
 
 /* 保单管理入口 */
 .action-btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 28rpx 30rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.action-arrow { color: #ccc; font-size: 32rpx; }
+.action-arrow { color: $facade-text-ghost; font-size: 32rpx; }
 
 /* 空状态 */
 .empty-state {
@@ -591,6 +598,6 @@ export default {
   padding: 120rpx 0;
 }
 .empty-icon { font-size: 80rpx; margin-bottom: 24rpx; }
-.empty-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; }
-.empty-desc { font-size: 26rpx; color: #999; }
+.empty-title { font-size: 32rpx; font-weight: bold; color: $facade-text-strong; margin-bottom: 12rpx; }
+.empty-desc { font-size: 26rpx; color: $facade-text-muted; }
 </style>

+ 5 - 0
cfc-frontend/uni.scss

@@ -391,6 +391,7 @@ $dim-wealth-soft: rgba(245, 158, 11, 0.15);
 
 // 语义角色(与应用真实观感一致)
 $app-bg:             #F5F7FA;
+$app-bg-2:           #f5f6fa; // 浅灰蓝底·副档(3 文件;vs $app-bg #F5F7FA)
 $app-surface:        #FFFFFF;
 $app-surface-subtle: #F7F8FA;
 $app-text:           #17181C;
@@ -445,6 +446,7 @@ $status-danger-strong:  #B91C1C;
 
 // 品牌橙亮阶(渐变/高亮用)
 $brand-primary-light:   #FB923C;
+$brand-primary-light-2: #FED7AA; // 品牌橙浅档 orange-200(29 文件;vs $brand-primary-light #FB923C orange-400)
 
 // 维度浅底(不透明 tint)
 $dim-body-tint:   #FFF8F0;
@@ -586,6 +588,7 @@ $accent-indigo:      #667EEA; // 靛紫渐变起点(封面/卡片,37 文件
 $accent-indigo-deep: #764BA2; // 靛紫渐变终点(26 文件)
 $accent-indigo-ink:  #4338CA; // indigo-700 靛紫深文字(4 文件)
 $accent-indigo-tint: #E0E7FF; // indigo-100 靛紫浅底(7 文件)
+$accent-navy:        #1E3A5F; // 深海军蓝渐变主色(4 文件;评分卡/引导条渐变)
 $tint-info-soft:     #E8F4FD; // 信息蓝浅底(article-edit + articles)
 $hint-cream-bg:      #FEF9E7; // 提示条奶油底(articles + shop/index)
 $hint-cream-border:  #F0E6C0; // 提示条奶油描边(articles + shop/index)
@@ -623,11 +626,13 @@ $facade-fill-4:        #E8E8E8; // 灰填充·深档(4 文件;vs $facade-fil
 $status-danger-strong-2: #C62828; // red-800 深文字(16 文件;vs $status-danger-strong #B91C1C red-700)
 $status-info-soft:    #DBEAFE; // blue-100 信息浅档(15 文件;vs $status-info-tint #EFF6FF blue-50)
 $facade-hairline:     #E0E0E0; // 浅灰描边(26 文件高频)
+$facade-hairline-2:   #EEE;    // 边框/分隔灰·副档(41 文件;vs $facade-hairline #E0E0E0 深档)
 $status-success-soft-2: #DCFCE7; // green-100 浅档(15 文件;vs $status-success-soft #D1FAE5 emerald-100)
 $status-success-strong-2: #16A34A; // green-600 深文字(21 文件;vs $status-success-strong #065F46 emerald-800)
 $status-success-2:   #22C55E; // green-500 成功主色·副档(13 文件;vs $status-success #10B981 emerald-500)
 $status-success-light-3: #34D399; // emerald-400 成功亮档·三档(20 文件;vs $status-success-light #A7F3D0 / -light-2 #6EE7B7)
 $status-info-light:    #38BDF8; // sky-400 信息亮档(3 文件;vs $status-info #3B82F6 blue-500)
+$status-info-deep-2:   #0284C7; // sky-600 信息深文字·副档(4 文件;vs $status-info-deep #2563EB blue-600)
 $status-danger-light:  #F87171; // red-400 危险亮档(3 文件;vs $status-danger #EF4444 red-500)
 $facade-text-slate-deep: #475569; // slate-600 深灰蓝文字(16 文件;vs $facade-text-slate #6B7280 gray-500)
 $facade-fill-slate:    #F1F5F9; // slate-100 浅灰蓝填充(36 文件;vs $facade-fill-gray-100 #F3F4F6 gray-100)