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

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

@@ -5,10 +5,10 @@
       <!-- 日期类型切换 -->
       <view class="date-tabs">
         <view class="tab-item" :class="{'tab-active': dateType === 'weekday'}" @tap="switchDateType('weekday')">
-          <text>工作日</text>
+          <text class="tab-text">工作日</text>
         </view>
         <view class="tab-item" :class="{'tab-active': dateType === 'weekend'}" @tap="switchDateType('weekend')">
-          <text>周末</text>
+          <text class="tab-text">周末</text>
         </view>
       </view>
 
@@ -22,15 +22,16 @@
       <!-- 餐次配置 -->
       <view class="meal-section" v-for="meal in mealGroups" :key="meal.value">
         <view class="meal-header">
-          <text class="meal-icon">{{ meal.icon }}</text>
+          <view class="meal-icon-wrap" :class="'meal-icon-' + meal.value"><text class="meal-icon">{{ meal.icon }}</text></view>
           <text class="meal-name">{{ meal.label }}</text>
+          <text class="meal-count" v-if="meal.selectedCount > 0">已选 {{ meal.selectedCount }} 人</text>
         </view>
         <view class="member-list">
           <view class="member-item" v-for="member in meal.members" :key="member.id"
             :class="{'member-selected': member.selected}"
             @tap="toggleMember(meal.value, member.id)">
             <view class="member-check" v-if="member.selected">✓</view>
-            <text class="member-avatar">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
+            <text class="member-avatar" :class="member._avatarCls">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
             <text class="member-name">{{ member.nickname || '未知' }}</text>
           </view>
           <view class="member-empty" v-if="meal.members.length === 0">
@@ -90,14 +91,16 @@ export default {
           return {
             id: m.id,
             nickname: m.nickname,
-            selected: ids.indexOf(m.id) >= 0
+            selected: ids.indexOf(m.id) >= 0,
+            _avatarCls: m.gender === 'male' ? 'member-avatar-male' : (m.gender === 'female' ? 'member-avatar-female' : 'member-avatar-unknown')
           }
         })
         return {
           value: meal.value,
           label: meal.label,
           icon: meal.icon,
-          members: members
+          members: members,
+          selectedCount: ids.length
         }
       })
     }
@@ -206,26 +209,17 @@ export default {
   padding: 30rpx;
 }
 .date-tabs {
-  display: flex;
-  gap: 20rpx;
-  margin-bottom: 30rpx;
+  display: flex; background: #FFF1E6; border-radius: 999rpx;
+  padding: 6rpx; margin-bottom: 30rpx;
 }
 .tab-item {
-  box-sizing: border-box;
-  flex: 1;
-  padding: 20rpx 0;
-  border: 1rpx solid #ddd;
-  border-radius: 30rpx;
-  text-align: center;
-  font-size: 26rpx;
-  color: #666;
-  background-color: #FFFFFF;
+  flex: 1; text-align: center; padding: 18rpx 0;
+  border-radius: 999rpx; font-size: 28rpx; color: #C2410C;
 }
 .tab-active {
-  border-color: #FF8C42;
-  color: #FF8C42;
-  background-color: #FFF5EB;
-  font-weight: 600;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  color: #FFFFFF; font-weight: 600;
+  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
 }
 .meal-section {
   background-color: #FFFFFF;
@@ -240,10 +234,11 @@ export default {
   padding: 24rpx 30rpx;
   border-bottom: 1rpx solid #f0f0f0;
 }
-.meal-icon {
-  font-size: 36rpx;
-  margin-right: 16rpx;
-}
+.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); }
+.meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
+.meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
+.meal-count { font-size: 24rpx; color: #C2410C; }
 .meal-name {
   font-size: 28rpx;
   font-weight: 600;
@@ -256,25 +251,15 @@ export default {
   padding: 24rpx 30rpx;
 }
 .member-item {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16rpx 20rpx;
-  border: 2rpx solid #E0E0E0;
-  border-radius: 16rpx;
-  background-color: #FAFAFA;
-  min-width: 132rpx;
-  max-width: 100%;
+  box-sizing: border-box; position: relative;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 16rpx 20rpx; border: 2rpx solid #E0E0E0; border-radius: 20rpx;
+  background: #FAFAFA; min-width: 132rpx;
   transition: all 0.15s ease;
 }
 .member-selected {
-  border-color: #FF8C42;
-  border-width: 3rpx;
-  background-color: #FFF5EB;
-  box-shadow: 0 0 0 4rpx rgba(255, 140, 66, 0.18);
+  border-color: #FF8C42; border-width: 3rpx;
+  background: #FFF5EB; box-shadow: 0 0 0 4rpx rgba(255, 140, 66, 0.18);
 }
 .member-check {
   position: absolute;
@@ -293,21 +278,13 @@ export default {
   z-index: 2;
 }
 .member-avatar {
-  width: 60rpx;
-  height: 60rpx;
-  border-radius: 50%;
-  background-color: #C8CDD4;
-  color: #FFFFFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24rpx;
-  font-weight: 600;
-  margin-bottom: 8rpx;
-}
-.member-selected .member-avatar {
-  background-color: #FF8C42;
+  width: 60rpx; height: 60rpx; border-radius: 50%;
+  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
+  font-size: 24rpx; font-weight: 600; margin-bottom: 8rpx;
 }
+.member-avatar-male   { background: linear-gradient(135deg, #5B9BD5, #8FC5E8); }
+.member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
+.member-avatar-unknown{ background: linear-gradient(135deg, #FF8C42, #FFB366); }
 .member-name {
   font-size: 22rpx;
   color: #666;
@@ -354,27 +331,15 @@ export default {
   color: #FF8C42;
   margin-left: 8rpx;
 }
-.tip-card {
-  background-color: #E3F2FD;
-  border-radius: 16rpx;
-  padding: 24rpx 30rpx;
-  margin-bottom: 30rpx;
-}
-.tip-text {
-  font-size: 24rpx;
-  color: #1976D2;
-  line-height: 1.6;
-}
+.tip-card { background: #FFF1E6; border-radius: 16rpx; padding: 24rpx 30rpx; margin-bottom: 30rpx; }
+.tip-text { font-size: 24rpx; color: #C2410C; line-height: 1.6; }
 .save-area {
   padding: 40rpx 30rpx;
 }
 .save-btn {
-  background-color: #FF8C42;
-  color: #FFFFFF;
-  text-align: center;
-  padding: 28rpx 0;
-  border-radius: 16rpx;
-  font-size: 30rpx;
-  font-weight: 600;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
+  font-size: 30rpx; font-weight: 600;
+  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
 }
 </style>