feat(frontend): 食谱推荐页暖灶主题美化

cfc-frontend/pages/diet/recommendation.vue

@@ -4,8 +4,9 @@
     <scroll-view class="content" scroll-y>
       <!-- 无推荐状态 -->
       <view class="empty-state" v-if="!recommendation">
-        <text class="empty-icon">🍽️</text>
-        <text class="empty-text">暂无今日食谱推荐</text>
+        <view class="empty-icon-wrap"><text class="empty-icon">🍽️</text></view>
+        <text class="empty-title">今日菜单空着</text>
+        <text class="empty-sub">点击生成今日三餐食谱</text>
         <view class="generate-btn" @tap="generateRecipe">
           <text>生成食谱</text>
         </view>
@@ -27,7 +28,9 @@
         <!-- 菜品列表 -->
         <view class="meal-section" v-for="(meal, index) in meals" :key="index">
           <view class="meal-header">
-            <text class="meal-icon">{{ meal.icon }}</text>
+            <view class="meal-icon-wrap" :class="'meal-icon-' + meal.type">
+              <text class="meal-icon">{{ meal.icon }}</text>
+            </view>
             <text class="meal-name">{{ meal.name }}</text>
             <text class="meal-count">{{ meal.participants }} 人份</text>
           </view>
@@ -47,9 +50,9 @@
                 <text class="method-text">🍳 {{ dish.method }}</text>
               </view>
               <view class="dish-actions">
-                <view class="action-btn like-btn" @tap="likeDish(meal.name, dIndex)">👍</view>
-                <view class="action-btn swap-btn" @tap="swapDish(meal.name, dIndex)">🔄</view>
-                <view class="action-btn skip-btn" @tap="skipDish(meal.name, dIndex)">✕</view>
+                <view class="action-btn like-btn" @tap="likeDish(meal.name, dIndex)">👍 好吃</view>
+                <view class="action-btn swap-btn" @tap="swapDish(meal.name, dIndex)">🔄 替换</view>
+                <view class="action-btn skip-btn" @tap="skipDish(meal.name, dIndex)">✕ 跳过</view>
               </view>
             </view>
           </view>
@@ -159,6 +162,8 @@ export default {
             self.meals.push({
               name: config.name,
               icon: config.icon,
+              type: meal.type,
+              iconCls: 'meal-icon-' + meal.type,
               participants: meal.participants || 1,
               dishes: meal.dishes || []
             })
@@ -229,29 +234,22 @@ export default {
   flex: 1;
   padding: 30rpx;
 }
-.empty-state {
-  text-align: center;
-  padding: 100rpx 40rpx;
-}
-.empty-icon {
-  font-size: 120rpx;
-  display: block;
-  margin-bottom: 30rpx;
-}
-.empty-text {
-  font-size: 28rpx;
-  color: #999;
-  display: block;
+.empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 40rpx; }
+.empty-icon-wrap {
+  width: 160rpx; height: 160rpx; border-radius: 50%;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 10rpx 30rpx rgba(255, 140, 66, 0.3);
   margin-bottom: 40rpx;
 }
+.empty-icon { font-size: 72rpx; }
+.empty-title { font-size: 34rpx; font-weight: 700; color: #333; display: block; margin-bottom: 16rpx; }
+.empty-sub { font-size: 26rpx; color: #999; display: block; margin-bottom: 48rpx; }
 .generate-btn {
-  background-color: #FF8C42;
-  color: #FFFFFF;
-  padding: 28rpx 60rpx;
-  border-radius: 30rpx;
-  font-size: 30rpx;
-  font-weight: 600;
-  display: inline-block;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  color: #FFFFFF; padding: 28rpx 60rpx; border-radius: 999rpx;
+  font-size: 30rpx; font-weight: 600;
+  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
 }
 .card {
   display: flex;
@@ -261,11 +259,7 @@ export default {
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;
 }
-.card-accent {
-  width: 8rpx;
-  background-color: #FF8C42;
-  flex-shrink: 0;
-}
+.card-accent { width: 8rpx; background: linear-gradient(180deg, #FF8C42, #FFB366); flex-shrink: 0; }
 .card-body {
   flex: 1;
   padding: 30rpx;
@@ -292,10 +286,7 @@ export default {
   border-radius: 20rpx;
   font-size: 24rpx;
 }
-.status-pending {
-  background-color: #FFF3E0;
-  color: #FF9800;
-}
+.status-pending { background: #FFF1E6; color: #C2410C; }
 .status-accepted {
   background-color: #E3F2FD;
   color: #2196F3;
@@ -311,12 +302,11 @@ export default {
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
-.meal-header {
-  display: flex;
-  align-items: center;
-  padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
+.meal-header { display: flex; align-items: center; padding: 24rpx 30rpx; border-bottom: 1rpx solid #FDE8D0; }
+.meal-icon-wrap { width: 64rpx; height: 64rpx; border-radius: 20rpx; 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-icon {
   font-size: 36rpx;
   margin-right: 12rpx;
@@ -334,27 +324,15 @@ export default {
 .dish-list {
   padding: 20rpx 30rpx;
 }
-.dish-item {
-  padding: 24rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-.dish-item:last-child {
-  border-bottom: none;
-}
+.dish-item { padding: 24rpx; border-radius: 20rpx; background: #FFF9F0; margin-bottom: 16rpx; }
+.dish-item:last-child { margin-bottom: 0; }
 .dish-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 12rpx;
 }
-.dish-name {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #333;
-}
-.dish-cal {
-  font-size: 24rpx;
-  color: #FF8C42;
-}
+.dish-name { font-size: 28rpx; font-weight: 600; color: #333; }
+.dish-cal { font-size: 24rpx; color: #C2410C; font-weight: 600; }
 .dish-ingredients {
   display: flex;
   flex-wrap: wrap;
@@ -375,27 +353,11 @@ export default {
   font-size: 24rpx;
   color: #999;
 }
-.dish-actions {
-  display: flex;
-  gap: 16rpx;
-}
-.action-btn {
-  padding: 12rpx 24rpx;
-  border-radius: 20rpx;
-  font-size: 24rpx;
-}
-.like-btn {
-  background-color: #E8F5E9;
-  color: #4CAF50;
-}
-.swap-btn {
-  background-color: #E3F2FD;
-  color: #2196F3;
-}
-.skip-btn {
-  background-color: #FFEBEE;
-  color: #F44336;
-}
+.dish-actions { display: flex; gap: 16rpx; margin-top: 8rpx; }
+.action-btn { padding: 12rpx 26rpx; border-radius: 999rpx; font-size: 24rpx; }
+.like-btn { background: #E8F5E9; color: #4CAF50; }
+.swap-btn { background: #E8F1FB; color: #2196F3; }
+.skip-btn { background: #FFEBEE; color: #F44336; }
 .nutrition-grid {
   display: flex;
   justify-content: space-around;
@@ -403,12 +365,8 @@ export default {
 .nutrition-item {
   text-align: center;
 }
-.nutrition-value {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #FF8C42;
-  display: block;
-}
+.nutrition-card .card-body { background: #FFF9F0; border-radius: 0 0 20rpx 20rpx; }
+.nutrition-value { font-size: 40rpx; font-weight: 700; color: #C2410C; display: block; }
 .nutrition-unit {
   font-size: 22rpx;
   color: #999;
@@ -427,23 +385,15 @@ export default {
   gap: 20rpx;
 }
 .btn-secondary {
-  flex: 1;
-  padding: 28rpx 0;
-  background-color: #FFFFFF;
-  border: 1rpx solid #ddd;
-  border-radius: 16rpx;
-  text-align: center;
-  font-size: 28rpx;
-  color: #666;
+  flex: 1; padding: 28rpx 0; background: #FFFFFF;
+  border: 2rpx solid #FF8C42; border-radius: 999rpx;
+  text-align: center; font-size: 28rpx; color: #C2410C;
 }
 .btn-primary {
-  flex: 1;
-  padding: 28rpx 0;
-  background-color: #FF8C42;
-  border-radius: 16rpx;
-  text-align: center;
-  font-size: 28rpx;
-  color: #FFFFFF;
-  font-weight: 600;
+  flex: 1; padding: 28rpx 0;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  border-radius: 999rpx; text-align: center;
+  font-size: 28rpx; color: #FFFFFF; font-weight: 600;
+  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
 }
 </style>