Kaynağa Gözat

refactor(body-detail): B-2f health-dimensions 令牌化(零观感变化)

- style 块 54 处 hex 全映射全局令牌:#FF8C42×6 映射 $dim-body(body 维度主色归位)+ $mind-accent×4 伴生 + 状态四档 12 处 + 文字/填充 22 处
- uni.scss 新登记 2 枚:$status-info-soft #DBEAFE(blue-100,15 文件)、$facade-hairline #E0E0E0(26 文件)
- 补 lang="scss";脚本区 canvas 7 处运行时色保持原样
- equiv-regression PASS
liaoxg 6 gün önce
ebeveyn
işleme
2c798bf342

+ 47 - 47
cfc-frontend/pages/body-detail/health-dimensions.vue

@@ -340,16 +340,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .hd-container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding-bottom: 120rpx;
 }
 .hd-header {
-  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+  background: linear-gradient(135deg, $dim-body, $mind-accent);
   padding: 40rpx 30rpx 30rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .hd-title {
   font-size: 40rpx;
@@ -366,18 +366,18 @@ export default {
   display: flex;
   justify-content: center;
   padding: 30rpx;
-  background: #fff;
+  background: $app-surface;
 }
 .index-circle {
   width: 160rpx;
   height: 160rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+  background: linear-gradient(135deg, $dim-body, $mind-accent);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: $app-surface;
 }
 .index-value {
   font-size: 48rpx;
@@ -390,14 +390,14 @@ export default {
   margin-top: 8rpx;
 }
 .radar-section {
-  background: #fff;
+  background: $app-surface;
   margin-top: 20rpx;
   padding: 30rpx;
 }
 .radar-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 30rpx;
   text-align: center;
 }
@@ -413,7 +413,7 @@ export default {
   padding: 20rpx 30rpx;
 }
 .dim-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
@@ -427,23 +427,23 @@ export default {
 .dim-label {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .dim-score {
   font-size: 36rpx;
   font-weight: bold;
-  color: #FF8C42;
+  color: $dim-body;
 }
-.dim-score.score-excellent { color: #10B981; }
-.dim-score.score-good { color: #3B82F6; }
-.dim-score.score-fair { color: #F59E0B; }
-.dim-score.score-poor { color: #EF4444; }
+.dim-score.score-excellent { color: $status-success; }
+.dim-score.score-good { color: $status-info; }
+.dim-score.score-fair { color: $status-warning-2; }
+.dim-score.score-poor { color: $status-danger; }
 .dim-bar-wrap {
   margin-bottom: 12rpx;
 }
 .dim-bar-bg {
   height: 16rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 8rpx;
   overflow: hidden;
   margin-bottom: 6rpx;
@@ -451,16 +451,16 @@ export default {
 .dim-bar-fill {
   height: 100%;
   border-radius: 8rpx;
-  background: #FF8C42;
+  background: $dim-body;
   transition: width 0.3s;
 }
-.dim-bar-fill.fill-excellent { background: #10B981; }
-.dim-bar-fill.fill-good { background: #3B82F6; }
-.dim-bar-fill.fill-fair { background: #F59E0B; }
-.dim-bar-fill.fill-poor { background: #EF4444; }
+.dim-bar-fill.fill-excellent { background: $status-success; }
+.dim-bar-fill.fill-good { background: $status-info; }
+.dim-bar-fill.fill-fair { background: $status-warning-2; }
+.dim-bar-fill.fill-poor { background: $status-danger; }
 .dim-norms {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .dim-footer {
   display: flex;
@@ -471,16 +471,16 @@ export default {
   font-size: 22rpx;
   padding: 4rpx 16rpx;
   border-radius: 20rpx;
-  background: #f0f0f0;
-  color: #666;
+  background: $facade-fill;
+  color: $facade-text-body;
 }
-.dim-level-tag.tag-excellent { background: #D1FAE5; color: #10B981; }
-.dim-level-tag.tag-good { background: #DBEAFE; color: #3B82F6; }
-.dim-level-tag.tag-fair { background: #FEF3C7; color: #F59E0B; }
-.dim-level-tag.tag-poor { background: #FEE2E2; color: #EF4444; }
+.dim-level-tag.tag-excellent { background: $status-success-soft; color: $status-success; }
+.dim-level-tag.tag-good { background: $status-info-soft; color: $status-info; }
+.dim-level-tag.tag-fair { background: $status-warning-soft; color: $status-warning-2; }
+.dim-level-tag.tag-poor { background: $status-danger-soft; color: $status-danger; }
 .dim-source {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .hd-empty {
   padding: 100rpx 30rpx;
@@ -488,13 +488,13 @@ export default {
 }
 .empty-tip {
   font-size: 30rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 16rpx;
 }
 .empty-sub {
   font-size: 24rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   display: block;
 }
 .loading-wrap {
@@ -503,7 +503,7 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .fab-upload {
   position: fixed;
@@ -512,7 +512,7 @@ export default {
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+  background: linear-gradient(135deg, $dim-body, $mind-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -520,7 +520,7 @@ export default {
 }
 .fab-icon {
   font-size: 48rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
   line-height: 1;
 }
@@ -538,7 +538,7 @@ export default {
 }
 .modal-content {
   width: 100%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx 24rpx 0 0;
   padding-bottom: 60rpx;
 }
@@ -547,16 +547,16 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 30rpx;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid $facade-fill;
 }
 .modal-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .modal-close {
   font-size: 48rpx;
-  color: #999;
+  color: $facade-text-muted;
   line-height: 1;
 }
 .modal-body {
@@ -567,22 +567,22 @@ export default {
 }
 .form-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 12rpx;
 }
 .picker-value {
   height: 80rpx;
   line-height: 80rpx;
-  border: 1px solid #e0e0e0;
+  border: 1px solid $facade-hairline;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .form-input {
   height: 80rpx;
-  border: 1px solid #e0e0e0;
+  border: 1px solid $facade-hairline;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -597,19 +597,19 @@ export default {
   height: 88rpx;
   line-height: 88rpx;
   text-align: center;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 44rpx;
   font-size: 30rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .btn-confirm {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
   text-align: center;
-  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+  background: linear-gradient(135deg, $dim-body, $mind-accent);
   border-radius: 44rpx;
   font-size: 30rpx;
-  color: #fff;
+  color: $app-surface;
 }
 </style>

+ 2 - 0
cfc-frontend/uni.scss

@@ -606,3 +606,5 @@ $brand-legacy-blue-tint: #F5FAFE; // 旧蓝极浅底(22 文件;旧蓝系页
 $brand-legacy-blue-select:#F0F8FF; // 旧蓝 select 浅底(旧蓝族选中态档;C-2 待翻转)
 $facade-fill-4:        #E8E8E8; // 灰填充·深档(4 文件;vs $facade-fill-3 #EEEEEE)
 $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 文件高频)