Эх сурвалжийг харах

refactor(growth-main): A-4 门面令牌化——成长 TabBar 页 style 块硬编码色全量收敛(零观感变化)

pages/growth-main/index.vue(成长 TabBar,原债务 219 / 73 硬编码色):
- <style scoped> → <style scoped lang="scss">,新增 14 个页面级局部调色板变量
- 73 处 hex + 11 处 rgba → 令牌:全局同值令牌 10 种($brand-primary/
  $dim-body/mind/wisdom/action/wealth/$uni-warning/$dim-action-tint/$app-surface),
  页面局部 14 个(文字阶 6 / 填充阶 3 / 品牌淡底双阶 / Material 暖阶 2 / Element 红)
- 本页 script/template 区零 hex,是 4 个门面页中最干净的
- 与前三页同族:$c-text-strong/$c-text-muted/$c-fill-cool/$c-brand-tint 同名同值

验证:dart-sass 编译 PASS;等价回归 PASS;style hex 残留 14 = 调色板声明数;
无死变量;transition:all 0。
liaoxg 1 долоо хоног өмнө
parent
commit
9e8ee0622f

+ 88 - 71
cfc-frontend/pages/growth-main/index.vue

@@ -459,115 +459,132 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .container{background:#FFF7ED;min-height:100vh;padding-bottom:calc(160rpx + env(safe-area-inset-bottom))}
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// 与 index-home / health-main / profile-main 同族:文字阶与品牌淡底同名同值
+$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-fill:           #F0F0F0;
+$c-fill-2:         #F5F5F5;
+$c-fill-cool:      #F7F7F7;
+$c-brand-tint:     #FFF7ED;   // 品牌淡底(3 页复用,待提升全局)
+$c-brand-tint-2:   #FFEDD5;   // orange-100(2 页复用,待提升全局)
+$c-warm-tint-mat:  #FFF3E0;   // Material orange-50
+$c-brand-ink-mat:  #E65100;   // Material orange-900
+$c-danger-el:      #F56C6C;   // Element 红
+
+  .container{background:$c-brand-tint;min-height:100vh;padding-bottom:calc(160rpx + env(safe-area-inset-bottom))}
 .section{margin:16rpx 24rpx}
 /* 游客态 */
-.brand-strap{margin:0 24rpx 16rpx;background:linear-gradient(135deg,#F0FFF4,rgba(16,185,129,0.1));border-radius:16rpx;padding:20rpx 24rpx}
-.brand-strap-text{font-size:26rpx;color:#10B981;font-weight:600}
-.concept-card{margin:0 24rpx 16rpx;background:#fff;border-radius:20rpx;padding:28rpx;border-left:6rpx solid #10B981;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
-.concept-quote{font-size:30rpx;font-weight:bold;color:#333;display:block;margin-bottom:8rpx}
-.concept-desc{font-size:24rpx;color:#888;display:block;line-height:1.6}
-.case-card{margin:0 24rpx 16rpx;background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.brand-strap{margin:0 24rpx 16rpx;background:linear-gradient(135deg,$dim-action-tint,rgba($dim-action, 0.1));border-radius:16rpx;padding:20rpx 24rpx}
+.brand-strap-text{font-size:26rpx;color:$dim-action;font-weight:600}
+.concept-card{margin:0 24rpx 16rpx;background:$app-surface;border-radius:20rpx;padding:28rpx;border-left:6rpx solid $dim-action;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.concept-quote{font-size:30rpx;font-weight:bold;color:$c-text-strong;display:block;margin-bottom:8rpx}
+.concept-desc{font-size:24rpx;color:$c-text-faint;display:block;line-height:1.6}
+.case-card{margin:0 24rpx 16rpx;background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .case-header{margin-bottom:12rpx}
-.case-label{font-size:24rpx;color:#10B981;font-weight:bold}
+.case-label{font-size:24rpx;color:$dim-action;font-weight:bold}
 .case-body{padding:8rpx 0}
-.case-name{font-size:26rpx;color:#333;font-weight:600;display:block;margin-bottom:6rpx}
-.case-change{font-size:24rpx;color:#666;display:block;margin-bottom:12rpx}
+.case-name{font-size:26rpx;color:$c-text-strong;font-weight:600;display:block;margin-bottom:6rpx}
+.case-change{font-size:24rpx;color:$c-text-body;display:block;margin-bottom:12rpx}
 .case-metrics{display:flex;gap:16rpx;margin-bottom:12rpx}
-.metric-item{display:flex;flex-direction:column;align-items:center;flex:1;background:#F0FFF4;border-radius:12rpx;padding:12rpx 8rpx}
-.metric-up{font-size:26rpx;font-weight:bold;color:#10B981}
-.metric-label{font-size:20rpx;color:#999;margin-top:4rpx}
-.case-note{font-size:22rpx;color:#888;display:block}
+.metric-item{display:flex;flex-direction:column;align-items:center;flex:1;background:$dim-action-tint;border-radius:12rpx;padding:12rpx 8rpx}
+.metric-up{font-size:26rpx;font-weight:bold;color:$dim-action}
+.metric-label{font-size:20rpx;color:$c-text-muted;margin-top:4rpx}
+.case-note{font-size:22rpx;color:$c-text-faint;display:block}
 .guest-features{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 24rpx 16rpx}
-.feat-card{width:calc(50% - 8rpx);box-sizing:border-box;background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.feat-card{width:calc(50% - 8rpx);box-sizing:border-box;background:$app-surface;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .feat-icon{font-size:40rpx;display:block;margin-bottom:8rpx}
-.feat-title{font-size:26rpx;font-weight:600;color:#333;display:block;margin-bottom:4rpx}
-.feat-desc{font-size:22rpx;color:#999;display:block}
+.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}
 .login-guide-section{margin:0 24rpx 24rpx}
 /* 成长行动卡片 */
-.action-card{display:flex;align-items:center;padding:24rpx 28rpx;background:#fff;border-radius:16rpx;margin:0 24rpx 16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.action-card{display:flex;align-items:center;padding:24rpx 28rpx;background:$app-surface;border-radius:16rpx;margin:0 24rpx 16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .action-card:active{opacity:0.85}
 .action-icon{font-size:44rpx;margin-right:20rpx}
 .action-info{flex:1}
-.action-title{font-size:28rpx;font-weight:600;color:#333;display:block}
-.action-desc{font-size:22rpx;color:#888;margin-top:4rpx;display:block}
-.action-arrow{font-size:32rpx;color:#ccc}
+.action-title{font-size:28rpx;font-weight:600;color:$c-text-strong;display:block}
+.action-desc{font-size:22rpx;color:$c-text-faint;margin-top:4rpx;display:block}
+.action-arrow{font-size:32rpx;color:$c-text-ghost}
 /* section-header 组件通用样式 */
 .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12rpx}
-.section-title{font-size:28rpx;font-weight:600;color:#333}
-.section-more{font-size:24rpx;color:#F97316}
+.section-title{font-size:28rpx;font-weight:600;color:$c-text-strong}
+.section-more{font-size:24rpx;color:$brand-primary}
 /* 登录后 */
-.reminder-bar{margin:12rpx 24rpx;background:#FFF3E0;border:1rpx solid #FFB74D;border-radius:12rpx;padding:14rpx 20rpx;display:flex;align-items:center;justify-content:space-between}
-.reminder-text{font-size:24rpx;color:#E65100}
-.reminder-close{font-size:28rpx;color:#999}
+.reminder-bar{margin:12rpx 24rpx;background:$c-warm-tint-mat;border:1rpx solid $uni-warning;border-radius:12rpx;padding:14rpx 20rpx;display:flex;align-items:center;justify-content:space-between}
+.reminder-text{font-size:24rpx;color:$c-brand-ink-mat}
+.reminder-close{font-size:28rpx;color:$c-text-muted}
 /* 里程碑 */
-.milestone-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
-.section-title-row{font-size:26rpx;font-weight:bold;color:#333;margin-bottom:16rpx;display:block}
+.milestone-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.section-title-row{font-size:26rpx;font-weight:bold;color:$c-text-strong;margin-bottom:16rpx;display:block}
 .milestone-grid{display:flex;justify-content:space-between}
 .milestone-item{display:flex;flex-direction:column;align-items:center;flex:1}
 .milestone-icon{font-size:40rpx;margin-bottom:4rpx}
-.milestone-value{font-size:28rpx;font-weight:bold;color:#F97316;margin-bottom:2rpx}
-.milestone-label{font-size:22rpx;color:#999}
+.milestone-value{font-size:28rpx;font-weight:bold;color:$brand-primary;margin-bottom:2rpx}
+.milestone-label{font-size:22rpx;color:$c-text-muted}
 /* 今日成长 */
-.progress-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.progress-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16rpx}
-.progress-title{font-size:28rpx;font-weight:bold;color:#333}
-.progress-date{font-size:22rpx;color:#999}
+.progress-title{font-size:28rpx;font-weight:bold;color:$c-text-strong}
+.progress-date{font-size:22rpx;color:$c-text-muted}
 .progress-grid{display:flex;justify-content:space-between}
-.progress-grid-item{flex:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20rpx 8rpx;background:#FFF7ED;border-radius:16rpx;margin-right:12rpx}
+.progress-grid-item{flex:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20rpx 8rpx;background:$c-brand-tint;border-radius:16rpx;margin-right:12rpx}
 .progress-grid-item:last-child{margin-right:0}
-.progress-grid-item:active{opacity:0.85;background:#FFEDD5}
+.progress-grid-item:active{opacity:0.85;background:$c-brand-tint-2}
 .progress-grid-icon{font-size:40rpx;margin-bottom:8rpx}
-.progress-grid-label{font-size:24rpx;color:#333;margin-bottom:8rpx;text-align:center}
+.progress-grid-label{font-size:24rpx;color:$c-text-strong;margin-bottom:8rpx;text-align:center}
 .progress-grid-status{font-size:20rpx;flex-shrink:0}
-.status-done{color:#10B981}
-.status-pending{color:#ccc}
-.progress-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16rpx;padding-top:16rpx;border-top:1rpx solid #f5f5f5}
-.footer-text{font-size:24rpx;color:#666;font-weight:bold}
-.footer-streak{font-size:24rpx;color:#F97316;font-weight:bold}
+.status-done{color:$dim-action}
+.status-pending{color:$c-text-ghost}
+.progress-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16rpx;padding-top:16rpx;border-top:1rpx solid $c-fill-2}
+.footer-text{font-size:24rpx;color:$c-text-body;font-weight:bold}
+.footer-streak{font-size:24rpx;color:$brand-primary;font-weight:bold}
 /* 任务中心预览 */
-.task-preview-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
+.task-preview-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
 .task-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16rpx}
-.task-preview-title{font-size:28rpx;font-weight:bold;color:#333}
-.task-preview-more{font-size:24rpx;color:#F97316}
+.task-preview-title{font-size:28rpx;font-weight:bold;color:$c-text-strong}
+.task-preview-more{font-size:24rpx;color:$brand-primary}
 .task-preview-list{display:flex;flex-direction:column}
-.task-preview-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1rpx solid #f5f5f5}
+.task-preview-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1rpx solid $c-fill-2}
 .task-preview-item:last-child{border-bottom:none}
 .task-preview-left{flex:1;min-width:0}
-.task-preview-name{font-size:26rpx;color:#333;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.task-preview-name{font-size:26rpx;color:$c-text-strong;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .task-preview-meta{display:flex;align-items:center;gap:12rpx;margin-top:6rpx}
-.task-preview-points{font-size:22rpx;color:#F97316;font-weight:bold}
-.task-preview-deadline{font-size:20rpx;color:#999}
-.task-preview-arrow{font-size:28rpx;color:#ccc;flex-shrink:0;margin-left:12rpx}
+.task-preview-points{font-size:22rpx;color:$brand-primary;font-weight:bold}
+.task-preview-deadline{font-size:20rpx;color:$c-text-muted}
+.task-preview-arrow{font-size:28rpx;color:$c-text-ghost;flex-shrink:0;margin-left:12rpx}
 /* ===== 五维闭环体系样式 ===== */
-.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-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: #10B981; font-weight: bold; }
-.rel-op { font-size: 20rpx; color: #f56c6c; 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: $dim-action; font-weight: bold; }
+.rel-op { font-size: 20rpx; color: $c-danger-el; 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; }
+.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; }
 </style>