浏览代码

refactor(body-detail): B-2e dimension-questionnaire 令牌化(零观感变化)

- style 块 42 处 hex 全映射全局令牌:旧蓝族 14 处(C-2)+ 文字 10 + 填充 4 + Material 四等级 8
- uni.scss 新登记 4 枚:$brand-legacy-blue-select #F0F8FF(旧蓝 select 档)、$facade-fill-4 #E8E8E8、$mat-amber-strong #F57F17(§12 mat 族 amber 档)、$status-danger-strong-2 #C62828
- 补 lang="scss";#FFEBEE 按 single-source 映射既有 $fortune-0-tint(red-50)
- equiv-regression PASS
liaoxg 1 周之前
父节点
当前提交
57b3d4837f
共有 2 个文件被更改,包括 41 次插入 和 37 次删除
  1. 37 37
      cfc-frontend/pages/body-detail/dimension-questionnaire.vue
  2. 4 0
      cfc-frontend/uni.scss

+ 37 - 37
cfc-frontend/pages/body-detail/dimension-questionnaire.vue

@@ -440,10 +440,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .qd-container {
   min-height: 100vh;
-  background: #F5FAFE;
+  background: $brand-legacy-blue-tint;
   padding: 20rpx 30rpx 100rpx;
 }
 .qd-loading {
@@ -454,7 +454,7 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .qd-step {
   animation: fadeIn 0.3s ease;
@@ -470,11 +470,11 @@ export default {
 .qd-title {
   font-size: 36rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .qd-desc {
   font-size: 26rpx;
-  color: #888;
+  color: $facade-text-faint;
   margin-top: 10rpx;
 }
 .qd-dim-list {
@@ -485,19 +485,19 @@ export default {
 }
 .qd-dim-item {
   width: 45%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 30rpx 20rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 2rpx solid #eee;
+  border: 2rpx solid $facade-fill-3;
   position: relative;
   box-sizing: border-box;
 }
 .qd-dim-item.active {
-  border-color: #4A9BD7;
-  background: #F0F8FF;
+  border-color: $brand-legacy-blue;
+  background: $brand-legacy-blue-select;
 }
 .qd-dim-icon {
   font-size: 48rpx;
@@ -505,7 +505,7 @@ export default {
 }
 .qd-dim-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 .qd-dim-check {
@@ -514,8 +514,8 @@ export default {
   right: 10rpx;
   width: 36rpx;
   height: 36rpx;
-  background: #4A9BD7;
-  color: #fff;
+  background: $brand-legacy-blue;
+  color: $app-surface;
   border-radius: 50%;
   text-align: center;
   line-height: 36rpx;
@@ -523,23 +523,23 @@ export default {
 }
 .qd-progress {
   font-size: 26rpx;
-  color: #4A9BD7;
+  color: $brand-legacy-blue;
   margin-top: 10rpx;
 }
 .qd-progress-bar {
   height: 6rpx;
-  background: #E8E8E8;
+  background: $facade-fill-4;
   border-radius: 3rpx;
   margin: 20rpx 0;
 }
 .qd-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #4A9BD7, #63B3ED);
+  background: linear-gradient(90deg, $brand-legacy-blue, $brand-legacy-blue-light);
   border-radius: 3rpx;
   transition: width 0.3s ease;
 }
 .qd-question-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 40rpx 30rpx;
   margin: 20rpx 0;
@@ -548,7 +548,7 @@ export default {
 .qd-q-text {
   font-size: 32rpx;
   font-weight: 500;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.5;
 }
 .qd-options {
@@ -559,25 +559,25 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 24rpx 20rpx;
-  border: 2rpx solid #eee;
+  border: 2rpx solid $facade-fill-3;
   border-radius: 12rpx;
   margin-bottom: 16rpx;
   transition: all 0.2s;
 }
 .qd-option.selected {
-  border-color: #4A9BD7;
-  background: #F0F8FF;
+  border-color: $brand-legacy-blue;
+  background: $brand-legacy-blue-select;
 }
 .qd-opt-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
 }
 .qd-opt-check {
   width: 36rpx;
   height: 36rpx;
-  background: #4A9BD7;
-  color: #fff;
+  background: $brand-legacy-blue;
+  color: $app-surface;
   border-radius: 50%;
   text-align: center;
   line-height: 36rpx;
@@ -593,8 +593,8 @@ export default {
   flex: 1;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #4A9BD7, #63B3ED);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-legacy-blue, $brand-legacy-blue-light);
+  color: $app-surface;
   font-size: 32rpx;
   border-radius: 44rpx;
   border: none;
@@ -605,13 +605,13 @@ export default {
 }
 .qd-btn-prev {
   flex: 0.4;
-  background: #f0f0f0;
-  color: #666;
+  background: $facade-fill;
+  color: $facade-text-body;
 }
 .qd-btn-outline {
-  background: #fff;
-  color: #4A9BD7;
-  border: 2rpx solid #4A9BD7;
+  background: $app-surface;
+  color: $brand-legacy-blue;
+  border: 2rpx solid $brand-legacy-blue;
 }
 .qd-result {
   text-align: center;
@@ -623,12 +623,12 @@ export default {
 .qd-result-title {
   font-size: 40rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin: 20rpx 0;
 }
 .qd-result-score {
   font-size: 32rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 20rpx;
 }
 .qd-result-level {
@@ -638,13 +638,13 @@ export default {
   display: inline-block;
   margin-bottom: 20rpx;
 }
-.qd-result-level.level-excellent { background: #E8F5E9; color: #2E7D32; }
-.qd-result-level.level-good { background: #E3F2FD; color: #1565C0; }
-.qd-result-level.level-fair { background: #FFF8E1; color: #F57F17; }
-.qd-result-level.level-poor { background: #FFEBEE; color: #C62828; }
+.qd-result-level.level-excellent { background: $mat-green-tint; color: $mat-green-strong; }
+.qd-result-level.level-good { background: $mat-blue-tint; color: $mat-blue-strong; }
+.qd-result-level.level-fair { background: $mat-amber-tint; color: $mat-amber-strong; }
+.qd-result-level.level-poor { background: $fortune-0-tint; color: $status-danger-strong-2; }
 .qd-result-tip {
   font-size: 28rpx;
-  color: #888;
+  color: $facade-text-faint;
   margin-top: 20rpx;
   line-height: 1.6;
   padding: 0 30rpx;

+ 4 - 0
cfc-frontend/uni.scss

@@ -47,6 +47,7 @@ $mat-green-tint:   #E8F5E9; // green-50 极浅底(38 文件)
 $mat-green-strong: #2E7D32; // green-800 深文字(25 文件)
 // 琥珀(警示 / 提示 / 选中浅底)
 $mat-amber-tint:   #FFF8E1; // amber-50 极浅底(14 文件)
+$mat-amber-strong: #F57F17; // amber-800 深文字(6 文件;vs $status-warning-strong #92400E 同角色不同值)
 // 橙(警示文字)
 $mat-orange-strong:#E65100; // orange-900 深文字(24 文件)
 // 蓝(信息态)
@@ -602,3 +603,6 @@ $facade-fill-ghost-2:  #F9F9F9;  // 近白填充·副档(emotion-checkin + emo
 $brand-legacy-blue:      #4A9BD7; // 旧蓝主色(16 文件;dimension-detail 渐变起点/百分位/序号徽章)
 $brand-legacy-blue-light:#63B3ED; // 旧蓝亮档(2 文件;旧蓝渐变终点伴生)
 $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)