فهرست منبع

refactor(health-main): A-2 门面令牌化——健康 TabBar 页 style 块硬编码色全量收敛(零观感变化)

pages/health-main/index.vue(健康 TabBar,原债务 288 / 96 硬编码色):
- <style scoped> → <style scoped lang="scss">,新增 11 个页面级局部调色板变量
- 88 处 hex + 21 处 rgba → 令牌:全局同值令牌 10 种($brand-primary/
  $brand-primary-light/$dim-body/mind/wisdom/action/wealth/$status-danger/
  $app-surface),页面局部 11 个($c-text-strong/body/deep/muted/faint/ghost/
  slate-2、$c-fill/warm/cool、$c-brand-tint)
- 与 index-home 保持同族:$c-text-strong(#333)/$c-text-muted(#999)/
  $c-brand-tint(#FFF7ED) 同名同值;A 批 6 页完成后统一做「局部→全局」提升

验证:dart-sass 编译 PASS;等价回归 PASS(编译产物归一后逐字节相同);
style hex 残留 11 = 调色板声明数(规则区 0);无死变量;transition:all 0。
liaoxg 1 هفته پیش
والد
کامیت
f48b09b906
1فایلهای تغییر یافته به همراه100 افزوده شده و 85 حذف شده
  1. 100 85
      cfc-frontend/pages/health-main/index.vue

+ 100 - 85
cfc-frontend/pages/health-main/index.vue

@@ -651,141 +651,156 @@ export default {
 }
 </script>
 
-<style scoped>
-  .container { background: #F8F8F8; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// 与 index-home 同族:$c-text-strong/$c-text-muted/$c-brand-tint 等保持同名同值,
+// A 批 6 个门面页完成后统一做「局部 → 全局」提升
+$c-text-strong:   #333;
+$c-text-body:     #666;
+$c-text-deep:     #555;
+$c-text-muted:    #999;
+$c-text-faint:    #888;
+$c-text-ghost:    #CCC;
+$c-text-slate-2:  #6B7280;   // gray-500
+$c-fill:          #F0F0F0;
+$c-fill-warm:     #F8F8F8;
+$c-fill-cool:     #F7F7F7;
+$c-brand-tint:    #FFF7ED;   // 品牌淡底(与 index-home 同值,待提升全局)
+
+  .container { background: $c-fill-warm; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
 .section { margin: 16rpx 24rpx; }
-.tab-bar { display: flex; background: #fff; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.tab-bar { display: flex; background: $app-surface; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
-.tab-item.active { background: #FFF7ED; }
+.tab-item.active { background: $c-brand-tint; }
 .tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
-.tab-label { font-size: 26rpx; color: #666; font-weight: 500; }
-.tab-item.active .tab-label { color: #333; font-weight: bold; }
+.tab-label { font-size: 26rpx; color: $c-text-body; font-weight: 500; }
+.tab-item.active .tab-label { color: $c-text-strong; font-weight: bold; }
 .tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
 .section-chart { position: relative; margin: 0 24rpx 16rpx; }
-.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba(255,255,255,0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
-.chart-empty .empty-text { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
-.chart-empty .empty-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
+.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba($app-surface, 0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
+.chart-empty .empty-text { font-size: 28rpx; color: $c-text-strong; font-weight: 500; display: block; }
+.chart-empty .empty-sub { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 4rpx; }
 .section-dc-header { margin: 20rpx 24rpx 8rpx; }
 .dc-title-row { display: flex; align-items: center; }
 .dc-icon { font-size: 32rpx; margin-right: 8rpx; }
-.dc-title { font-size: 32rpx; font-weight: bold; color: #333; }
+.dc-title { font-size: 32rpx; font-weight: bold; color: $c-text-strong; }
 .section-data-collect { margin: 8rpx 24rpx; }
-.data-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.data-card { display: flex; align-items: center; background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
 .data-card-info { flex: 1; }
-.data-card-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 6rpx; }
-.data-card-desc { font-size: 22rpx; color: #999; }
-.data-card-arrow { font-size: 36rpx; color: #ccc; }
+.data-card-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; display: block; margin-bottom: 6rpx; }
+.data-card-desc { font-size: 22rpx; color: $c-text-muted; }
+.data-card-arrow { font-size: 36rpx; color: $c-text-ghost; }
 .data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
 .data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
-.data-card-subtitle { font-size: 22rpx; color: #999; margin-left: 12rpx; }
-.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; }
+.data-card-subtitle { font-size: 22rpx; color: $c-text-muted; margin-left: 12rpx; }
+.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid $c-fill; }
 .quiz-item:first-of-type { border-top: none; }
 .quiz-info { display: flex; align-items: center; flex: 1; }
 .quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
-.quiz-label { font-size: 28rpx; color: #333; }
+.quiz-label { font-size: 28rpx; color: $c-text-strong; }
 .quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
-.score-value { font-size: 36rpx; font-weight: bold; color: #F97316; }
-.score-unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
+.score-value { font-size: 36rpx; font-weight: bold; color: $brand-primary; }
+.score-unit { font-size: 22rpx; color: $c-text-muted; margin-left: 4rpx; }
 
-.quiz-btn { background: #F97316; color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
+.quiz-btn { background: $brand-primary; color: $app-surface; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
 .section-data-view { margin: 16rpx 24rpx; }
 .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
-.section-title { font-size: 28rpx; font-weight: bold; color: #333; }
-.section-more { font-size: 24rpx; color: #F97316; }
-.report-card { display: flex; align-items: center; background: #fff; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
+.section-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
+.section-more { font-size: 24rpx; color: $brand-primary; }
+.report-card { display: flex; align-items: center; background: $app-surface; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
 .report-type-badge { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; flex-shrink: 0; font-weight: 600; }
-.report-type-badge.badge-gut { background: rgba(249,115,22,0.12); color: #F97316; }
-.report-type-badge.badge-exam { background: rgba(99,102,241,0.12); color: #6366F1; }
-.report-type-badge.badge-tongue { background: rgba(16,185,129,0.12); color: #10B981; }
-.report-type-badge.badge-blood { background: rgba(239,68,68,0.12); color: #EF4444; }
-.report-type-badge.badge-default { background: rgba(107,114,128,0.12); color: #6B7280; }
+.report-type-badge.badge-gut { background: rgba($brand-primary, 0.12); color: $brand-primary; }
+.report-type-badge.badge-exam { background: rgba($dim-wisdom, 0.12); color: $dim-wisdom; }
+.report-type-badge.badge-tongue { background: rgba($dim-action, 0.12); color: $dim-action; }
+.report-type-badge.badge-blood { background: rgba($status-danger, 0.12); color: $status-danger; }
+.report-type-badge.badge-default { background: rgba($c-text-slate-2, 0.12); color: $c-text-slate-2; }
 .report-info { flex: 1; min-width: 0; }
-.report-name { font-size: 26rpx; color: #333; font-weight: 600; display: block; margin-bottom: 4rpx; }
-.report-meta { font-size: 20rpx; color: #999; display: block; }
+.report-name { font-size: 26rpx; color: $c-text-strong; font-weight: 600; display: block; margin-bottom: 4rpx; }
+.report-meta { font-size: 20rpx; color: $c-text-muted; display: block; }
 .report-score-wrap { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8rpx; flex-shrink: 0; }
-.report-score { font-size: 32rpx; font-weight: bold; color: #F97316; line-height: 1; }
+.report-score { font-size: 32rpx; font-weight: bold; color: $brand-primary; line-height: 1; }
 .report-status { font-size: 20rpx; margin-top: 4rpx; }
-.report-status.status-resolved { color: #10B981; }
-.report-status.status-pending { color: #F59E0B; }
-.report-arrow { font-size: 28rpx; color: #ccc; }
-.empty-hint { text-align: center; padding: 30rpx 0; background: #fff; border-radius: 16rpx; }
-.empty-hint .empty-text { font-size: 26rpx; color: #999; display: block; }
-.empty-hint .empty-sub { font-size: 22rpx; color: #ccc; display: block; margin-top: 6rpx; }
+.report-status.status-resolved { color: $dim-action; }
+.report-status.status-pending { color: $dim-wealth; }
+.report-arrow { font-size: 28rpx; color: $c-text-ghost; }
+.empty-hint { text-align: center; padding: 30rpx 0; background: $app-surface; border-radius: 16rpx; }
+.empty-hint .empty-text { font-size: 26rpx; color: $c-text-muted; display: block; }
+.empty-hint .empty-sub { font-size: 22rpx; color: $c-text-ghost; display: block; margin-top: 6rpx; }
 .section-plan { margin: 8rpx 24rpx 16rpx; }
-.plan-card { background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.plan-card { background: $app-surface; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
-.plan-title { font-size: 28rpx; font-weight: bold; color: #333; }
-.plan-btn { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
-.plan-goal { font-size: 24rpx; color: #666; line-height: 1.5; display: block; margin-top: 12rpx; }
-.plan-hint { font-size: 22rpx; color: #999; display: block; margin-top: 12rpx; }
+.plan-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
+.plan-btn { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
+.plan-goal { font-size: 24rpx; color: $c-text-body; line-height: 1.5; display: block; margin-top: 12rpx; }
+.plan-hint { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 12rpx; }
 /* ===== 游客态样式 ===== */
-.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
-.brand-strap-text { font-size: 26rpx; color: #F97316; font-weight: 600; }
-.pain-card { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid #F97316; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.pain-quote { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
-.pain-desc { font-size: 26rpx; color: #888; display: block; }
+.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $c-brand-tint, rgba($brand-primary, 0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
+.brand-strap-text { font-size: 26rpx; color: $brand-primary; font-weight: 600; }
+.pain-card { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid $brand-primary; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.pain-quote { font-size: 32rpx; font-weight: bold; color: $c-text-strong; display: block; margin-bottom: 8rpx; }
+.pain-desc { font-size: 26rpx; color: $c-text-faint; display: block; }
 .guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
-.feat-card { width: 48.5%; box-sizing: border-box; background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.feat-card { width: 48.5%; box-sizing: border-box; background: $app-surface; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
-.feat-title { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 4rpx; }
-.feat-desc { font-size: 22rpx; color: #999; display: block; }
-.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 20rpx; padding: 24rpx 28rpx; }
+.feat-title { font-size: 26rpx; font-weight: 600; color: $c-text-strong; display: block; margin-bottom: 4rpx; }
+.feat-desc { font-size: 22rpx; color: $c-text-muted; display: block; }
+.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 20rpx; padding: 24rpx 28rpx; }
 .self-test-head { display: flex; align-items: center; }
 .self-test-icon { font-size: 40rpx; margin-right: 16rpx; }
 .self-test-info { flex: 1; }
-.self-test-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
-.self-test-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 4rpx; }
-.ai-q-entry { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #F97316, #F59E0B); border-radius: 20rpx; padding: 24rpx 28rpx; }
+.self-test-title { font-size: 28rpx; font-weight: bold; color: $app-surface; display: block; }
+.self-test-sub { font-size: 22rpx; color: rgba($app-surface, 0.8); display: block; margin-top: 4rpx; }
+.ai-q-entry { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $brand-primary, $dim-wealth); border-radius: 20rpx; padding: 24rpx 28rpx; }
 .reminder-icon { font-size: 40rpx; margin-right: 16rpx; flex-shrink: 0; }
 .reminder-body { flex: 1; min-width: 0; }
-.reminder-text { font-size: 26rpx; font-weight: 600; color: #333; display: block; }
-.reminder-sub { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; line-height: 1.4; }
-.reminder-arrow { font-size: 28rpx; color: #F97316; flex-shrink: 0; }
+.reminder-text { font-size: 26rpx; font-weight: 600; color: $c-text-strong; display: block; }
+.reminder-sub { font-size: 22rpx; color: $c-text-muted; margin-top: 4rpx; display: block; line-height: 1.4; }
+.reminder-arrow { font-size: 28rpx; color: $brand-primary; flex-shrink: 0; }
 .ai-q-head { display: flex; align-items: center; }
 .ai-q-icon { font-size: 40rpx; margin-right: 16rpx; }
 .ai-q-info { flex: 1; }
-.q-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
-.ai-q-sub { font-size: 22rpx; color: rgba(255,255,255,0.85); display: block; margin-top: 4rpx; }
-.self-test-arrow { font-size: 36rpx; color: rgba(255,255,255,0.7); }
+.q-title { font-size: 28rpx; font-weight: bold; color: $app-surface; display: block; }
+.ai-q-sub { font-size: 22rpx; color: rgba($app-surface, 0.85); display: block; margin-top: 4rpx; }
+.self-test-arrow { font-size: 36rpx; color: rgba($app-surface, 0.7); }
 .demo-section { margin: 0 24rpx 16rpx; }
 .demo-section-head { margin-bottom: 8rpx; }
-.demo-section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
-.demo-section-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
+.demo-section-title { font-size: 30rpx; font-weight: bold; color: $c-text-strong; display: block; }
+.demo-section-sub { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 4rpx; }
 .demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
-.demo-chart-name { font-size: 26rpx; font-weight: 600; color: #333; }
-.demo-chart-tag { font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
+.demo-chart-name { font-size: 26rpx; font-weight: 600; color: $c-text-strong; }
+.demo-chart-tag { font-size: 20rpx; color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
 .login-guide-section { margin: 0 24rpx 24rpx; }
 
 /* ===== 五维闭环体系样式 ===== */
-.wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
-.wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
+.wuxing-section { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
+.wuxing-title { font-size: 30rpx; font-weight: bold; color: $c-text-strong; text-align: center; margin-bottom: 6rpx; }
+.wuxing-desc { font-size: 22rpx; color: $c-text-muted; text-align: center; margin-bottom: 20rpx; }
 .wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
 .wuxing-relations { margin-top: 8rpx; }
 .rel-group { margin-bottom: 16rpx; }
-.rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
+.rel-title { font-size: 24rpx; font-weight: bold; color: $c-text-strong; margin-bottom: 8rpx; display: block; }
 .rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
-.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
-.rel-arrow { font-size: 20rpx; color: #F97316; font-weight: bold; }
-.rel-dot { font-size: 20rpx; color: #ccc; }
-.rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: $c-fill-cool; color: $c-text-deep; }
+.rel-arrow { font-size: 20rpx; color: $brand-primary; font-weight: bold; }
+.rel-dot { font-size: 20rpx; color: $c-text-ghost; }
+.rel-hint { font-size: 20rpx; color: $c-text-muted; line-height: 1.5; display: block; }
 .wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
-.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
+.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid $c-fill; }
 .wc-card:active { opacity: 0.85; }
 .wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
 .wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
-.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
-.wc-body .wc-name { color: #FF8C42; }
-.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
-.wc-wisdom .wc-name { color: #6366F1; }
-.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
-.wc-wealth .wc-name { color: #F59E0B; }
-.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
-.wc-action .wc-name { color: #10B981; }
-.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
-.wc-mind .wc-name { color: #FF6B9D; }
-.survey-pending-tag { flex-shrink: 0; font-size: 20rpx; color: #fff; background: #F97316; padding: 6rpx 16rpx; border-radius: 999rpx; }
+.wc-text { font-size: 20rpx; color: $c-text-muted; display: block; margin-top: 4rpx; white-space: normal; }
+.wc-body { border-color: rgba($dim-body, 0.3); background: rgba($dim-body, 0.04); border-left: 8rpx solid $dim-body; }
+.wc-body .wc-name { color: $dim-body; }
+.wc-wisdom { border-color: rgba($dim-wisdom, 0.3); background: rgba($dim-wisdom, 0.04); border-left: 8rpx solid $dim-wisdom; }
+.wc-wisdom .wc-name { color: $dim-wisdom; }
+.wc-wealth { border-color: rgba($dim-wealth, 0.3); background: rgba($dim-wealth, 0.04); border-left: 8rpx solid $dim-wealth; }
+.wc-wealth .wc-name { color: $dim-wealth; }
+.wc-action { border-color: rgba($dim-action, 0.3); background: rgba($dim-action, 0.04); border-left: 8rpx solid $dim-action; }
+.wc-action .wc-name { color: $dim-action; }
+.wc-mind { border-color: rgba($dim-mind, 0.3); background: rgba($dim-mind, 0.04); border-left: 8rpx solid $dim-mind; }
+.wc-mind .wc-name { color: $dim-mind; }
+.survey-pending-tag { flex-shrink: 0; font-size: 20rpx; color: $app-surface; background: $brand-primary; padding: 6rpx 16rpx; border-radius: 999rpx; }
 </style>