Просмотр исходного кода

feat(frontend): 共餐配置页暖灶主题美化

Sisyphus 2 месяцев назад
Родитель
Сommit
4608325814
1 измененных файлов с 8 добавлено и 13 удалено
  1. 8 13
      cfc-frontend/pages/diet/meal-config.vue

+ 8 - 13
cfc-frontend/pages/diet/meal-config.vue

@@ -2,7 +2,7 @@
   <view class="meal-config-page">
 
     <scroll-view class="content" scroll-y>
-      <!-- 日期类型切换 -->
+      <!-- 日期切换:两段式胶囊 tabs -->
       <view class="date-tabs">
         <view class="tab-item" :class="{'tab-active': dateType === 'weekday'}" @tap="switchDateType('weekday')">
           <text class="tab-text">工作日</text>
@@ -12,7 +12,7 @@
         </view>
       </view>
 
-      <!-- 添加共餐人入口(唯一) -->
+      <!-- 添加共餐人入口 -->
       <view class="add-member-entry" @tap="goManageMembers">
         <text class="add-member-entry-icon">+</text>
         <text class="add-member-entry-text">添加共餐人</text>
@@ -40,7 +40,7 @@
         </view>
       </view>
 
-      <!-- 说明 -->
+      <!-- 提示条 -->
       <view class="tip-card">
         <text class="tip-text">💡 提示:选择与您在{{ dateType === 'weekday' ? '工作日' : '周末' }}共餐的家庭成员</text>
       </view>
@@ -194,18 +194,13 @@ export default {
 </script>
 
 <style scoped>
+/* ===== 页面令牌(暖灶·家的味道) ===== */
 .meal-config-page {
   min-height: 100vh;
-  background-color: #F5F7FA;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-.nav-placeholder {
-  width: 80rpx;
+  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
+  overflow: hidden;
 }
 .content {
-  flex: 1;
   padding: 30rpx;
 }
 .date-tabs {
@@ -226,13 +221,13 @@ export default {
   border-radius: 20rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2rpx 12rpx rgba(255, 140, 66, 0.10);
 }
 .meal-header {
   display: flex;
   align-items: center;
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid #FDE8D0;
 }
 .meal-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
 .meal-icon-breakfast { background: linear-gradient(135deg, #FFB366, #FFD48A); }