Forráskód Böngészése

refactor(c-2): C-2a-2 旧蓝分流第二批四页 48 处(diet/article/discover/reminder)

- meal-config 17 处:tab-active/member-selected/add-member-entry/meal-count
  选中态与入口 → $brand-primary;.tip-text 提示卡 → $uni-info;两条渐变
  整条同族翻(#8FC5E8 浅档 → $brand-primary-light,防渐变断裂);
  add-member-entry:active 配套浅底 #F0F7FF → $uni-primary-pale
- article-detail 11 处:spinner/meta-author/badge/category/listen 信息簇
  → $uni-info + rgba(14,165,233,x);retry-btn solid 主按钮 → $brand-primary
- discover 8 处:旧蓝=商品价格/选中 chip/卡片横幅的页面主 accent → 全品牌橙
- reminder-config 12 处:switch-on/channel-selected/timing-active 选中态 → 橙;
  channel-tip-text/tip-text 信息提示 → $uni-info(块级例外);
  timing-active name 选中文字 → $brand-primary-dark;配套浅底 → pale
- 四页 style 均由裸 <style scoped> 补 lang="scss"(原块零 $ 零 //,零风险)
- meal-config 页面令牌注释「品牌蓝」同步刷新为「品牌橙」
- 验证:4/4 页 C-2 预期替换验证 PASS;style 块旧蓝残留 0;
  verify 脚本新增块级规则支持 + norm() rgba 空格归一(sass 编译会规范化
  rgba 逗号空格,规则形态需与归一对齐)
liaoxg 6 napja
szülő
commit
ebd62ddba6

+ 9 - 9
cfc-frontend/pages/article-center/article-detail.vue

@@ -432,30 +432,30 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .detail-container { min-height: 100vh; background: #fff; }
 .loading-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
-.loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid #e0e0e0; border-top-color: #5B9BD5; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; }
+.loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid #e0e0e0; border-top-color: $uni-info; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; }
 @keyframes spin { 0% { transform: rotate(0deg); } 360% { transform: rotate(360deg); } }
 .loading-text { font-size: 26rpx; color: #999; }
 .error-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
 .error-icon { font-size: 100rpx; margin-bottom: 24rpx; }
 .error-text { font-size: 28rpx; color: #999; margin-bottom: 30rpx; }
-.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: #5B9BD5; color: #fff; font-size: 28rpx; border-radius: 36rpx; text-align: center; border: none; }
+.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: #fff; font-size: 28rpx; border-radius: 36rpx; text-align: center; border: none; }
 .content-scroll { height: calc(100vh - 120rpx); }
 .detail-cover { width: 100%; display: block; }
 .detail-title { display: block; font-size: calc(36rpx * var(--font-scale, 1)); font-weight: bold; color: #333; line-height: 1.4; padding: 30rpx 30rpx 0; }
 .detail-meta { display: flex; align-items: center; padding: 16rpx 30rpx 0; font-size: 22rpx; color: #999; flex-wrap: wrap; }
-.meta-author { color: #5B9BD5; }
+.meta-author { color: $uni-info; }
 .meta-sep { margin: 0 12rpx; color: #ddd; }
-.reading-time-badge { margin-left: auto; font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.08); padding: 4rpx 12rpx; border-radius: 20rpx; white-space: nowrap; }
+.reading-time-badge { margin-left: auto; font-size: 20rpx; color: $uni-info; background: rgba(14, 165, 233, 0.08); padding: 4rpx 12rpx; border-radius: 20rpx; white-space: nowrap; }
 .reading-time-badge.completed { color: #10B981; background: rgba(16,185,129,0.1); }
 .meta-readcount {
   font-size: 20rpx;
   color: #bbb;
 }
 .detail-category-row { padding: 16rpx 30rpx 0; }
-.detail-category { display: inline-block; font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.1); padding: 4rpx 16rpx; border-radius: 8rpx; }
+.detail-category { display: inline-block; font-size: 20rpx; color: $uni-info; background: rgba(14, 165, 233, 0.1); padding: 4rpx 16rpx; border-radius: 8rpx; }
 .detail-dimensions { padding: 16rpx 30rpx 0; display: flex; gap: 12rpx; }
 .dim-bar-item { flex: 1; }
 .dim-bar { height: 8rpx; border-radius: 4rpx; }
@@ -477,10 +477,10 @@ export default {
 .share-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
 .share-btn-text { font-size: 26rpx; color: #fff; font-weight: 600; }
 
-.listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(91,155,213,0.1); border: 2rpx solid #5B9BD5; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
-.listen-btn.playing { background: rgba(91,155,213,0.2); }
+.listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
+.listen-btn.playing { background: rgba(14, 165, 233, 0.2); }
 .listen-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
-.listen-btn-text { font-size: 26rpx; color: #5B9BD5; font-weight: 600; }
+.listen-btn-text { font-size: 26rpx; color: $uni-info; font-weight: 600; }
 
 /* 答题弹窗 */
 .quiz-mask, .result-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }

+ 19 - 19
cfc-frontend/pages/diet/meal-config.vue

@@ -205,8 +205,8 @@ export default {
 }
 </script>
 
-<style scoped>
-/* ===== 页面令牌(品牌蓝·专业信任) ===== */
+<style scoped lang="scss">
+/* ===== 页面令牌(品牌橙·专业信任) ===== */
 .meal-config-page {
   box-sizing: border-box;
   min-height: 100vh;
@@ -229,16 +229,16 @@ export default {
   transition: all 0.2s ease;
 }
 .tab-active {
-  background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   color: #FFFFFF; font-weight: 600;
-  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.3);
 }
 .meal-section {
   background-color: #FFFFFF;
   border-radius: 24rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
-  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
+  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
 }
 .meal-header {
   display: flex;
@@ -250,7 +250,7 @@ export default {
 .meal-icon-breakfast { background: linear-gradient(135deg, #8FC5E8, #D6EAF8); }
 .meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
 .meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
-.meal-count { font-size: 24rpx; color: #5B9BD5; margin-left: auto; }
+.meal-count { font-size: 24rpx; color: $brand-primary; margin-left: auto; }
 .meal-name {
   font-size: 28rpx;
   font-weight: 600;
@@ -273,9 +273,9 @@ export default {
   display: flex; align-items: center; gap: 12rpx;
 }
 .member-selected {
-  border-color: #5B9BD5;
-  background: #5B9BD5;
-  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
+  border-color: $brand-primary;
+  background: $brand-primary;
+  box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.3);
   transform: translateY(-2rpx);
 }
 .member-check {
@@ -286,7 +286,7 @@ export default {
   height: 32rpx;
   border-radius: 50%;
   background-color: #FFFFFF;
-  color: #5B9BD5;
+  color: $brand-primary;
   font-size: 20rpx;
   font-weight: 900;
   display: flex;
@@ -300,7 +300,7 @@ export default {
   color: #FFFFFF; display: flex; align-items: center; justify-content: center;
   font-size: 24rpx; font-weight: 600;
 }
-.member-avatar-male   { background: linear-gradient(135deg, #5B9BD5, #8FC5E8); }
+.member-avatar-male   { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); }
 .member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
 .member-avatar-unknown{ background: linear-gradient(135deg, #CBD5E1, #E2E8F0); }
 .member-name {
@@ -333,28 +333,28 @@ export default {
   align-items: center;
   justify-content: center;
   background-color: #FFFFFF;
-  border: 2rpx dashed #5B9BD5;
+  border: 2rpx dashed $brand-primary;
   border-radius: 20rpx;
   padding: 24rpx 30rpx;
   margin-bottom: 30rpx;
   transition: all 0.2s ease;
 }
 .add-member-entry:active {
-  background-color: #F0F7FF;
+  background-color: $uni-primary-pale;
 }
 .add-member-entry-icon {
   font-size: 30rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
   margin-right: 12rpx;
 }
 .add-member-entry-text {
   font-size: 28rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
   font-weight: 600;
 }
 .add-member-entry-arrow {
   font-size: 30rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
   margin-left: 8rpx;
 }
 .tip-card { 
@@ -365,17 +365,17 @@ export default {
 }
 .tip-text { 
   font-size: 24rpx; 
-  color: #3A7CC4; 
+  color: $uni-info; 
   line-height: 1.6; 
 }
 .save-area {
   padding: 40rpx 30rpx;
 }
 .save-btn {
-  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
   font-size: 30rpx; font-weight: 600;
-  box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
+  box-shadow: 0 6rpx 20rpx rgba(249, 115, 22, 0.3);
   transition: all 0.2s ease;
 }
 .save-btn:active {

+ 9 - 9
cfc-frontend/pages/discover/index.vue

@@ -244,7 +244,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .discover-container {
   min-height: 100vh;
   background: #f5f7fa;
@@ -268,7 +268,7 @@ export default {
 }
 .section-more {
   font-size: 24rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
 }
 .type-filter-scroll {
   white-space: nowrap;
@@ -284,7 +284,7 @@ export default {
   margin-right: 16rpx;
 }
 .filter-chip.active {
-  background: #5B9BD5;
+  background: $brand-primary;
   color: #fff;
 }
 .loading-state,
@@ -334,7 +334,7 @@ export default {
 }
 .product-price {
   font-size: 28rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
   font-weight: bold;
   margin-right: 10rpx;
 }
@@ -360,7 +360,7 @@ export default {
 }
 .card-banner {
   padding: 14rpx 20rpx;
-  background: #5B9BD5;
+  background: $brand-primary;
   color: #fff;
   font-size: 22rpx;
   font-weight: bold;
@@ -390,13 +390,13 @@ export default {
 }
 .card-price {
   font-size: 26rpx;
-  color: #5B9BD5;
+  color: $brand-primary;
   font-weight: bold;
 }
 .card-tag {
   font-size: 18rpx;
-  color: #5B9BD5;
-  background: rgba(91,155,213,0.1);
+  color: $brand-primary;
+  background: rgba(249, 115, 22, 0.1);
   padding: 2rpx 10rpx;
   border-radius: 10rpx;
 }
@@ -552,7 +552,7 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   color: #fff;
   font-size: 32rpx;
   font-weight: bold;

+ 13 - 13
cfc-frontend/pages/reminder-config/index.vue

@@ -243,7 +243,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .reminder-config-page {
   box-sizing: border-box;
   min-height: 100vh;
@@ -261,7 +261,7 @@ export default {
   border-radius: 24rpx;
   padding: 30rpx;
   margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
+  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
 }
 .cfg-card-header {
   display: flex;
@@ -288,7 +288,7 @@ export default {
   color: #64748B;
 }
 .cfg-switch-on {
-  background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   color: #FFFFFF;
   font-weight: 600;
 }
@@ -310,8 +310,8 @@ export default {
   min-width: 200rpx;
 }
 .channel-selected {
-  border-color: #5B9BD5;
-  background: #5B9BD5;
+  border-color: $brand-primary;
+  background: $brand-primary;
 }
 .channel-disabled {
   opacity: 0.55;
@@ -324,7 +324,7 @@ export default {
   height: 32rpx;
   border-radius: 50%;
   background-color: #FFFFFF;
-  color: #5B9BD5;
+  color: $brand-primary;
   font-size: 20rpx;
   font-weight: 900;
   display: flex;
@@ -356,7 +356,7 @@ export default {
 }
 .channel-tip-text {
   font-size: 24rpx;
-  color: #5B9BD5;
+  color: $uni-info;
 }
 .timing-list {
   display: flex;
@@ -374,8 +374,8 @@ export default {
   gap: 8rpx;
 }
 .timing-active {
-  border-color: #5B9BD5;
-  background: #F0F7FF;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .timing-name {
   font-size: 28rpx;
@@ -383,7 +383,7 @@ export default {
   color: #1E293B;
 }
 .timing-active .timing-name {
-  color: #3A7CC4;
+  color: $brand-primary-dark;
 }
 .timing-desc {
   font-size: 22rpx;
@@ -426,21 +426,21 @@ export default {
 }
 .tip-text {
   font-size: 24rpx;
-  color: #3A7CC4;
+  color: $uni-info;
   line-height: 1.6;
 }
 .save-area {
   padding: 40rpx 30rpx;
 }
 .save-btn {
-  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   color: #FFFFFF;
   text-align: center;
   padding: 28rpx 0;
   border-radius: 999rpx;
   font-size: 30rpx;
   font-weight: 600;
-  box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
+  box-shadow: 0 6rpx 20rpx rgba(249, 115, 22, 0.3);
 }
 .save-btn:active {
   opacity: 0.9;