Quellcode durchsuchen

refactor(miniapp): 五维页中性灰阶归一化并清除旧品牌蓝残留(UniForge 阶段二)

- 五页共 150+ 处泥灰(#333/#666/#999/#888/#ccc/#F5F5F5/#F8F8F8 等)归一到语义冷灰阶 $app-text/text-secondary/text-muted/border/surface-subtle/border-subtle,正文更沉、辅助更冷,五页灰阶口径统一

- mind-detail「每日心理」卡片:旧品牌蓝渐变左条(#5B9BD5→#8FC5E8,宽 6rpx)改为维度粉 $dim-mind + 8rpx,标题色归位,符合阶段一确立的维度左条规范

- 五维页旧品牌蓝 #5B9BD5 清零

- 验证:dart-sass 逐页编译五页 style 区块全部通过;剩余硬编码已收敛为状态色阶与维度浅底(阶段三对象)
liaoxg vor 1 Woche
Ursprung
Commit
ec804a7cf2

+ 7 - 7
cfc-frontend/pages/action-detail/index.vue

@@ -987,17 +987,17 @@ export default {
 }
 .section-link-octopus {
   background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  color: $app-surface;
   box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.3);
 }
 .section-link-pearl {
   background: linear-gradient(135deg, #0EA5E9, #38BDF8);
-  color: #fff;
+  color: $app-surface;
   box-shadow: 0 4rpx 16rpx rgba(14,165,233,0.3);
 }
 .section-link-ability {
   background: linear-gradient(135deg, $dim-action, #34D399);
-  color: #fff;
+  color: $app-surface;
   box-shadow: 0 4rpx 16rpx rgba(16,185,129,0.3);
 }
 
@@ -1192,7 +1192,7 @@ export default {
 /* 维度画像样式 */
 .dimension-portrait-section {
   margin: 24rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 32rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.12);
@@ -1209,7 +1209,7 @@ export default {
 }
 .portrait-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -1237,7 +1237,7 @@ export default {
 }
 .portrait-dim-name {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .portrait-dim-score {
@@ -1261,7 +1261,7 @@ export default {
 }
 .portrait-dim-desc {
   font-size: 20rpx;
-  color: #666;
+  color: $app-text-secondary;
   display: block;
 }
 .portrait-tip {

+ 25 - 25
cfc-frontend/pages/body-detail/index.vue

@@ -656,7 +656,7 @@ export default {
 
 .overview-sub {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 
 .overview-grid {
@@ -701,7 +701,7 @@ export default {
 
 .overview-name {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   display: block;
   margin-bottom: 4rpx;
 }
@@ -714,7 +714,7 @@ export default {
 
 .overview-placeholder {
   font-size: 22rpx;
-  color: #ccc;
+  color: $app-border;
 }
 
 .overview-trend {
@@ -731,11 +731,11 @@ export default {
 
 .trend-up { color: #10B981; }
 .trend-down { color: #FF6B6B; }
-.trend-stable { color: #999; }
+.trend-stable { color: $app-text-muted; }
 
 .trend-desc {
   font-size: 18rpx;
-  color: #888;
+  color: $app-text-muted;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -798,14 +798,14 @@ export default {
   display: flex;
   align-items: center;
   padding: 24rpx 24rpx 16rpx;
-  border-bottom: 1rpx solid #F5F5F5;
+  border-bottom: 1rpx solid $app-surface-subtle;
   border-left: 8rpx solid $dim-body;
 }
 
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
 }
 
 .section-more {
@@ -819,7 +819,7 @@ export default {
 .avg-badge {
   display: block;
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   padding: 0 24rpx 16rpx;
 }
 
@@ -845,7 +845,7 @@ export default {
 }
 
 .indicator-card.no-data {
-  background: #F8F8F8;
+  background: $app-surface-subtle;
   border-color: #eee;
 }
 
@@ -858,12 +858,12 @@ export default {
 
 .indicator-name {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
 }
 
 .indicator-unit {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 
 .indicator-body {
@@ -878,12 +878,12 @@ export default {
 
 .indicator-placeholder {
   font-size: 24rpx;
-  color: #ccc;
+  color: $app-border;
 }
 
 .indicator-footer {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
   text-align: right;
 }
 
@@ -919,7 +919,7 @@ export default {
 
 .gut-group-title {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 12rpx;
   display: block;
 }
@@ -934,13 +934,13 @@ export default {
   display: flex;
   align-items: center;
   padding: 10rpx 16rpx;
-  background-color: #F8F8F8;
+  background-color: $app-surface-subtle;
   border-radius: 16rpx;
   font-size: 22rpx;
 }
 
 .gut-item-name {
-  color: #333;
+  color: $app-text;
   flex: 1;
   max-width: 120rpx;
   overflow: hidden;
@@ -955,7 +955,7 @@ export default {
 
 .gut-item-value {
   font-size: 20rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
 }
 
@@ -971,7 +971,7 @@ export default {
 .gut-empty-hint {
   padding: 40rpx 24rpx;
   text-align: center;
-  color: #999;
+  color: $app-text-muted;
   font-size: 24rpx;
 }
 
@@ -999,7 +999,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $app-surface-subtle;
 }
 
 .risk-item:last-child {
@@ -1008,7 +1008,7 @@ export default {
 
 .risk-name {
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
 }
 
 .risk-right {
@@ -1029,12 +1029,12 @@ export default {
 
 .risk-severe .risk-level { color: #FF6B6B; }
 .risk-attention .risk-level { color: $dim-body; }
-.risk-normal .risk-level { color: #999; }
+.risk-normal .risk-level { color: $app-text-muted; }
 
 /* ─── 月引导语 ─── */
 .dimension-portrait-section {
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 28rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.12);
@@ -1051,7 +1051,7 @@ export default {
 }
 .portrait-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -1078,7 +1078,7 @@ export default {
 }
 .portrait-dim-name {
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .portrait-dim-score {
@@ -1101,7 +1101,7 @@ export default {
 }
 .portrait-dim-desc {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   display: block;
 }
 .portrait-tip {

+ 64 - 64
cfc-frontend/pages/mind-detail/index.vue

@@ -1207,13 +1207,13 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .section-title-icon {
   font-size: 32rpx;
-  color: #fff;
+  color: $app-surface;
   margin-right: 12rpx;
 }
 .section-title-text {
   font-size: 32rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 
 /* ===== 心理报告上传卡片 ===== */
@@ -1288,7 +1288,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 14rpx;
   padding: 20rpx 20rpx;
   margin-bottom: 8rpx;
@@ -1303,12 +1303,12 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .mind-report-item-name {
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .mind-report-item-date {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-right: 14rpx;
 }
 .mind-report-item-status {
@@ -1321,8 +1321,8 @@ var descList = descMap[this.dominantElement] || descMap.wood
   background: #F3E8FF;
 }
 .mind-report-item-status.pending {
-  color: #999;
-  background: #F5F5F5;
+  color: $app-text-muted;
+  background: $app-surface-subtle;
 }
 .mind-report-empty {
   display: flex;
@@ -1346,7 +1346,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   display: flex;
   flex-direction: row;
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -1365,11 +1365,11 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .badge-value {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
 }
 .badge-label {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-top: 4rpx;
 }
 
@@ -1378,7 +1378,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   margin: 20rpx 30rpx;
 }
 .emi-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx;
   box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
@@ -1386,7 +1386,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .emi-card-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   display: block;
 }
 .personality-header {
@@ -1403,7 +1403,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .test-btn-text {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 .emi-bar-item {
@@ -1414,7 +1414,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .emi-bar-label {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   width: 120rpx;
   flex-shrink: 0;
 }
@@ -1434,7 +1434,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .emi-bar-score {
   font-size: 26rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   width: 60rpx;
   text-align: right;
   flex-shrink: 0;
@@ -1482,7 +1482,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 /* ===== EMI 心理报告卡片 ===== */
 .emi-card {
   margin: 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx;
   box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
@@ -1493,7 +1493,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .emi-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   display: block;
 }
 .emi-overall-wrap {
@@ -1504,7 +1504,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   background: linear-gradient(135deg, #FF6B35, #FFD700);
   border-radius: 16rpx;
   margin: 20rpx 0;
-  color: #fff;
+  color: $app-surface;
 }
 .emi-overall-label {
   font-size: 26rpx;
@@ -1539,7 +1539,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .emi-dim-label {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
 }
 .emi-dim-values {
   display: flex;
@@ -1601,7 +1601,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 /* ===== 占位卡 ===== */
 .placeholder-card {
   margin: 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 60rpx 40rpx;
   display: flex;
@@ -1616,19 +1616,19 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .placeholder-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   margin-bottom: 16rpx;
 }
 .placeholder-desc {
   font-size: 26rpx;
-  color: #999;
+  color: $app-text-muted;
   text-align: center;
   line-height: 1.6;
   margin-bottom: 30rpx;
 }
 .placeholder-btn {
   background: linear-gradient(135deg, #FF6B35, #FFD700);
-  color: #fff;
+  color: $app-surface;
   font-size: 28rpx;
   font-weight: bold;
   padding: 16rpx 64rpx;
@@ -1641,7 +1641,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   margin: 20rpx 30rpx;
 }
 .culture-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -1659,11 +1659,11 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .culture-card-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
 }
 .culture-card-body {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
 }
 /* 八字四柱 */
@@ -1679,7 +1679,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .bazi-pillar-label {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 6rpx;
 }
 .bazi-pillar-value {
@@ -1720,7 +1720,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .wuxing-value {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   width: 56rpx;
   text-align: right;
 }
@@ -1787,7 +1787,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 
 .energy-quote {
   font-size: 26rpx;
-  color: #E2E8F0;
+  color: $app-border-subtle;
   line-height: 1.8;
   display: block;
   margin-bottom: 14rpx;
@@ -1849,7 +1849,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .culture-dual-item {
   flex: 1;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -1863,7 +1863,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .culture-dual-label {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 6rpx;
 }
 .culture-dual-value {
@@ -1880,7 +1880,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 
 /* ===== 每日心理 ===== */
 .tip-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
   display: flex;
@@ -1888,8 +1888,8 @@ var descList = descMap[this.dominantElement] || descMap.wood
   overflow: hidden;
 }
 .tip-left-bar {
-  width: 6rpx;
-  background: linear-gradient(180deg, #5B9BD5, #8FC5E8);
+  width: 8rpx;
+  background: $dim-mind;
   flex-shrink: 0;
 }
 .tip-body {
@@ -1899,13 +1899,13 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .tip-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #5B9BD5;
+  color: $dim-mind;
   display: block;
   margin-bottom: 12rpx;
 }
 .tip-content {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
   margin-bottom: 16rpx;
@@ -1930,7 +1930,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
 }
 
 /* ===== 推荐阅读 ===== */
@@ -1939,7 +1939,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   flex-direction: column;
 }
 .article-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -1953,19 +1953,19 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .article-category-text {
   font-size: 20rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 .article-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   display: block;
   margin-bottom: 10rpx;
 }
 .article-summary {
   font-size: 24rpx;
-  color: #888;
+  color: $app-text-muted;
   line-height: 1.5;
   display: block;
   margin-bottom: 20rpx;
@@ -2004,7 +2004,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
   display: flex;
   flex-direction: column;
   gap: 16rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -2035,7 +2035,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .func-label {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   font-weight: 500;
 }
 .func-item:active {
@@ -2045,21 +2045,21 @@ var descList = descMap[this.dominantElement] || descMap.wood
 /* ===== 底部 ===== */
 .indicator-cards-section { margin: 20rpx 30rpx; }
 .indicator-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16rpx; }
-.indicator-card { width: calc(50% - 8rpx); background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.indicator-card { width: calc(50% - 8rpx); background: $app-surface; border-radius: 20rpx; padding: 24rpx 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .indicator-card.no-data { opacity: 0.5; }
 .indicator-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
-.indicator-name { font-size: 26rpx; color: #666; font-weight: 500; }
-.indicator-unit { font-size: 22rpx; color: #999; }
+.indicator-name { font-size: 26rpx; color: $app-text-secondary; font-weight: 500; }
+.indicator-unit { font-size: 22rpx; color: $app-text-muted; }
 .indicator-body { margin-bottom: 8rpx; }
 .indicator-value { font-size: 40rpx; font-weight: bold; color: $dim-mind; }
-.indicator-placeholder { font-size: 26rpx; color: #ccc; }
+.indicator-placeholder { font-size: 26rpx; color: $app-border; }
 .indicator-range { font-size: 20rpx; color: #bbb; }
 .bottom-spacer { height: 120rpx; }
 
 /* ===== 肠脑轴 ===== */
 .gut-insight-text {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   margin-bottom: 16rpx;
   padding: 12rpx 16rpx;
   background: #F0FFF4;
@@ -2082,7 +2082,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .gut-indicator-name {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   font-weight: 500;
   display: block;
 }
@@ -2106,7 +2106,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .gut-indicator-value {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   width: 60rpx;
   text-align: right;
 }
@@ -2132,7 +2132,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 
 /* ===== 关键信息(家庭+个人) ===== */
 .key-info-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   margin-top: 20rpx;
@@ -2150,7 +2150,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .key-info-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
 }
 .key-info-body {
   display: flex;
@@ -2166,7 +2166,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .ki-subtitle {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 12rpx;
   font-weight: 500;
 }
@@ -2181,7 +2181,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .ki-label {
   font-size: 22rpx;
-  color: #888;
+  color: $app-text-muted;
   margin-right: 8rpx;
   white-space: nowrap;
 }
@@ -2194,13 +2194,13 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .ki-valuel {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
   white-space: nowrap;
 }
 .ki-valued {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
 }
 .ki-swatch {
@@ -2276,7 +2276,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 
 /* DAN 报告卡片 */
 .dan-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
@@ -2290,7 +2290,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .dan-report-date {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
 }
 .dan-status {
   font-size: 22rpx;
@@ -2307,7 +2307,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .dan-report-desc {
   font-size: 28rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
   margin-bottom: 12rpx;
   display: block;
@@ -2328,7 +2328,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 .section-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #333;
+  color: $app-text;
 }
 .section-more {
   font-size: 26rpx;
@@ -2381,7 +2381,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 /* 维度画像样式 */
 .dimension-portrait-section {
   margin: 24rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 32rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.12);
@@ -2398,7 +2398,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .portrait-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -2425,7 +2425,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .portrait-dim-name {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .portrait-dim-score {
@@ -2449,7 +2449,7 @@ var descList = descMap[this.dominantElement] || descMap.wood
 }
 .portrait-dim-desc {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
   display: block;
 }
 .portrait-tip {

+ 34 - 34
cfc-frontend/pages/wealth/index.vue

@@ -819,16 +819,16 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 
 /* 财富成长 */
 .stream-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
@@ -843,7 +843,7 @@ export default {
   margin: 0 8rpx;
   padding: 20rpx;
   border-radius: 16rpx;
-  background: #F5F9FC;
+  background: $app-bg;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -858,12 +858,12 @@ export default {
 .stage-name {
   font-size: 26rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   margin-top: 8rpx;
 }
 .stage-desc {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-top: 4rpx;
 }
 .stage-range {
@@ -928,7 +928,7 @@ export default {
 }
 .disc-sub-card {
   flex: 1;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   display: flex;
@@ -943,12 +943,12 @@ export default {
 }
 .disc-sub-label {
   font-size: 24rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 .disc-sub-value {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
   margin-top: 8rpx;
 }
 .disc-sub-action {
@@ -960,7 +960,7 @@ export default {
 /* 孩子财富卡 */
 .child-wealth-card {
   display: flex;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 0;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
@@ -982,19 +982,19 @@ export default {
 }
 .child-wealth-label {
   font-size: 22rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-top: 4rpx;
 }
 .child-trend {
   margin-top: 16rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
 }
 .child-trend-title {
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
   font-weight: bold;
 }
 .child-trend-bars {
@@ -1017,14 +1017,14 @@ export default {
   flex: 1;
   text-align: center;
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 
 /* 服务入口 */
 .service-grid {
   display: flex;
   flex-wrap: wrap;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
@@ -1051,7 +1051,7 @@ export default {
 }
 .service-label {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
 }
 
 .logout-item {
@@ -1089,7 +1089,7 @@ export default {
 .product-card {
   width: 220rpx;
   flex-shrink: 0;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
@@ -1097,13 +1097,13 @@ export default {
 .product-img {
   width: 220rpx;
   height: 220rpx;
-  background: #f5f5f5;
+  background: $app-surface-subtle;
 }
 .product-name {
   display: block;
   padding: 12rpx 12rpx 4rpx;
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1118,7 +1118,7 @@ export default {
 
 /* 保单管理 */
 .insurance-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
@@ -1130,10 +1130,10 @@ export default {
   padding: 40rpx 0;
 }
 .insurance-empty-icon { font-size: 60rpx; }
-.insurance-empty-text { font-size: 24rpx; color: #999; margin-top: 12rpx; }
+.insurance-empty-text { font-size: 24rpx; color: $app-text-muted; margin-top: 12rpx; }
 .insurance-item {
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $app-surface-subtle;
 }
 .insurance-item:last-child { border-bottom: none; }
 .insurance-item-header {
@@ -1145,7 +1145,7 @@ export default {
 .insurance-item-name {
   font-size: 26rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
 }
 .insurance-item-status {
   font-size: 20rpx;
@@ -1154,18 +1154,18 @@ export default {
 }
 .insurance-item-status.status-active { background: #DCFCE7; color: #16A34A; }
 .insurance-item-status.status-expired { background: #FEF2F2; color: #DC2626; }
-.insurance-item-status.status-cancelled { background: #F5F5F5; color: #999; }
+.insurance-item-status.status-cancelled { background: $app-surface-subtle; color: $app-text-muted; }
 .insurance-item-row {
   display: flex;
   justify-content: space-between;
   padding: 4rpx 0;
 }
-.insurance-item-label { font-size: 22rpx; color: #999; }
-.insurance-item-value { font-size: 22rpx; color: #666; }
+.insurance-item-label { font-size: 22rpx; color: $app-text-muted; }
+.insurance-item-value { font-size: 22rpx; color: $app-text-secondary; }
 
 /* ===== 财富强项与提升卡片 ===== */
 .wealth-insight {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
 }
@@ -1175,7 +1175,7 @@ export default {
 .insight-group-title {
   font-size: 26rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
   margin-bottom: 10rpx;
   display: block;
 }
@@ -1190,11 +1190,11 @@ export default {
 .insight-item-name {
   flex: 1;
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
 }
 .insight-item-score {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   margin-right: 12rpx;
 }
 .insight-item-tag {
@@ -1224,7 +1224,7 @@ export default {
 /* 维度画像样式 */
 .dimension-portrait-section {
   margin: 24rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 32rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(245, 158, 11, 0.12);
@@ -1241,7 +1241,7 @@ export default {
 }
 .portrait-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -1269,7 +1269,7 @@ export default {
 }
 .portrait-dim-name {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .portrait-dim-score {
@@ -1293,7 +1293,7 @@ export default {
 }
 .portrait-dim-desc {
   font-size: 20rpx;
-  color: #666;
+  color: $app-text-secondary;
   display: block;
 }
 .portrait-tip {

+ 29 - 29
cfc-frontend/pages/wisdom-detail/index.vue

@@ -751,7 +751,7 @@ export default {
 }
 
 .func-grid {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx 16rpx;
   display: flex;
@@ -786,7 +786,7 @@ export default {
 
 .func-label {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
 }
 
@@ -806,7 +806,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
 }
 
 /* 页面说明(独占一行,避免与标题挤在同一行) */
@@ -827,7 +827,7 @@ export default {
 
 /* 得分解读卡片 */
 .score-explain-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 28rpx 24rpx;
   border-left: 8rpx solid $dim-wisdom;
@@ -845,11 +845,11 @@ export default {
 .explain-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $app-text;
 }
 .explain-text {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -857,7 +857,7 @@ export default {
 /* 主按钮 */
 .primary-btn {
   background: linear-gradient(135deg, $dim-wisdom, #4F46E5);
-  color: #fff;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: bold;
   border: none;
@@ -874,20 +874,20 @@ export default {
 /* ===== 底部占位 ===== */
 .indicator-cards-section { margin: 20rpx 30rpx; }
 .indicator-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16rpx; }
-.indicator-card { width: calc(50% - 8rpx); background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.indicator-card { width: calc(50% - 8rpx); background: $app-surface; border-radius: 20rpx; padding: 24rpx 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .indicator-card.no-data { opacity: 0.5; }
 .indicator-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
-.indicator-name { font-size: 26rpx; color: #666; font-weight: 500; }
-.indicator-unit { font-size: 22rpx; color: #999; }
+.indicator-name { font-size: 26rpx; color: $app-text-secondary; font-weight: 500; }
+.indicator-unit { font-size: 22rpx; color: $app-text-muted; }
 .indicator-body { margin-bottom: 8rpx; }
 .indicator-value { font-size: 40rpx; font-weight: bold; color: $dim-wisdom; }
-.indicator-placeholder { font-size: 26rpx; color: #ccc; }
+.indicator-placeholder { font-size: 26rpx; color: $app-border; }
 .indicator-range { font-size: 20rpx; color: #bbb; }
 .bottom-spacer { height: 120rpx; }
 
 /* DAN 报告卡片 */
 .dan-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
@@ -901,7 +901,7 @@ export default {
 }
 .dan-report-date {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
 }
 .dan-status {
   font-size: 22rpx;
@@ -918,7 +918,7 @@ export default {
 }
 .dan-report-desc {
   font-size: 28rpx;
-  color: #333;
+  color: $app-text;
   font-weight: 500;
   margin-bottom: 12rpx;
   display: block;
@@ -931,14 +931,14 @@ export default {
   color: $dim-wisdom;
 }
 .dan-empty {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 40rpx 24rpx;
   text-align: center;
 }
 .dan-empty-text {
   font-size: 24rpx;
-  color: #999;
+  color: $app-text-muted;
 }
 .avg-badge {
   flex: 1 1 100%;
@@ -1005,7 +1005,7 @@ export default {
 }
 .gut-indicator-name {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   font-weight: 500;
   display: block;
 }
@@ -1029,7 +1029,7 @@ export default {
 }
 .gut-indicator-value {
   font-size: 22rpx;
-  color: #666;
+  color: $app-text-secondary;
   width: 60rpx;
   text-align: right;
 }
@@ -1064,12 +1064,12 @@ export default {
 }
 .gut-empty-text {
   font-size: 26rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 24rpx;
 }
 .gut-upload-btn {
   background: linear-gradient(135deg, $dim-wisdom, #818CF8);
-  color: #fff;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: 600;
   border: none;
@@ -1086,7 +1086,7 @@ export default {
 .insight-group-title {
   font-size: 26rpx;
   font-weight: 600;
-  color: #333;
+  color: $app-text;
   margin-bottom: 10rpx;
   display: block;
 }
@@ -1101,11 +1101,11 @@ export default {
 .insight-item-name {
   flex: 1;
   font-size: 26rpx;
-  color: #333;
+  color: $app-text;
 }
 .insight-item-score {
   font-size: 24rpx;
-  color: #666;
+  color: $app-text-secondary;
   margin-right: 12rpx;
 }
 .insight-item-tag {
@@ -1139,12 +1139,12 @@ export default {
 }
 .insight-empty-text {
   font-size: 24rpx;
-  color: #999;
+  color: $app-text-muted;
   margin-bottom: 20rpx;
 }
 .insight-btn {
   background: linear-gradient(135deg, $dim-wisdom, #818CF8);
-  color: #fff;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: 600;
   border: none;
@@ -1157,7 +1157,7 @@ export default {
 /* 维度画像样式 */
 .dimension-portrait-section {
   margin: 24rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 32rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.12);
@@ -1174,7 +1174,7 @@ export default {
 }
 .portrait-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $app-text-secondary;
   line-height: 1.6;
   display: block;
 }
@@ -1201,7 +1201,7 @@ export default {
 }
 .portrait-dim-name {
   font-size: 24rpx;
-  color: #333;
+  color: $app-text;
   flex: 1;
 }
 .portrait-dim-score {
@@ -1225,7 +1225,7 @@ export default {
 }
 .portrait-dim-desc {
   font-size: 20rpx;
-  color: #999;
+  color: $app-text-muted;
   display: block;
 }
 .portrait-tip {