修改标签样式

pages/foodDetail/index.vue

@@ -33,7 +33,7 @@
     <view class="food-desc">
       <view class="food-desc-title">{{ detail.name || detail.cuisineName || '—' }}</view>
       <view class="food-desc-tags" v-if="detailTags.length">
-        <view v-for="(tag, ti) in detailTags" :key="ti" class="food-desc-tag" :class="tag.type || 'normal'">{{ tag.text }}</view>
+        <view v-for="(tag, ti) in detailTags" :key="ti" class="food-desc-tag" :class="{ 'food-desc-tag--signature': (tag.text || '').includes('招牌') }">{{ tag.text }}</view>
       </view>
       <view class="food-desc-content">{{ detail.dishReview  }}</view>
     </view>
@@ -365,28 +365,21 @@ onLoad(async (options) => {
 
   .food-desc-tags {
     display: flex;
-    gap: 10rpx;
+    gap: 20rpx;
     margin-top: 10rpx;
   }
 
   .food-desc-tag {
-    padding: 4rpx 12rpx;
+    padding: 6rpx 16rpx;
     border-radius: 4rpx;
     font-size: 20rpx;
+    background: #000;
+    color: #fff;
 
-    &.signature {
+    &--signature {
       background: linear-gradient(90deg, #FCB13F 0%, #FC793D 100%);
       color: #fff;
-    }
-
-    &.spicy {
-      background: #2E2E2E;
-      color: #fff;
-    }
-
-    &.normal {
-      background: #f0f0f0;
-      color: #666;
+      border-radius: 4rpx;
     }
   }
 

pages/orderFood/components/CartModal.vue

@@ -21,7 +21,7 @@
                         <view class="cart-item__remark" v-if="item.remark">{{ item.remark }}</view>
                         <view class="cart-item__tags" v-if="item.tags && item.tags.length > 0">
                             <view v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="cart-item__tag"
-                                :class="tag.type">
+                                :class="{ 'cart-item__tag--signature': (tag.text || '').includes('招牌') }">
                                 {{ tag.text }}
                             </view>
                         </view>
@@ -261,23 +261,21 @@ const handleClear = () => {
 
     &__tags {
         display: flex;
-        gap: 10rpx;
+        gap: 20rpx;
         margin-bottom: 12rpx;
     }
 
     &__tag {
-        padding: 4rpx 12rpx;
+        padding: 6rpx 16rpx;
         border-radius: 4rpx;
         font-size: 20rpx;
+        background: #000;
+        color: #fff;
 
-        &.signature {
+        &--signature {
             background: linear-gradient(90deg, #FCB13F 0%, #FC793D 100%);
             color: #fff;
-        }
-
-        &.spicy {
-            background: #2E2E2E;
-            color: #fff;
+            border-radius: 4rpx;
         }
     }
 

pages/orderFood/components/FoodCard.vue

@@ -13,8 +13,8 @@
         </view>
         <view class="food-desc">{{ food.dishReview }}</view>
         <view class="food-tags" v-if="normalizedTags.length">
-          <view v-for="(tag, tagIndex) in normalizedTags" :key="tagIndex" class="food-tag" :class="tag.type">
-            {{ tag.text }}
+          <view v-for="(tag, tagIndex) in normalizedTags" :key="tagIndex" class="food-tag"
+            :class="{ 'food-tag--signature': (tag.text || '').includes('招牌') }">{{ tag.text }}
           </view>
         </view>
       </view>
@@ -230,25 +230,21 @@ const getPriceDecimal = (price) => {
 
 .food-tags {
   display: flex;
-  gap: 10rpx;
+  gap: 20rpx;
   margin-bottom: 10rpx;
 }
 
 .food-tag {
-  padding: 4rpx 12rpx;
+  padding: 6rpx 16rpx;
   border-radius: 4rpx;
   font-size: 20rpx;
-  color: #333;
-  background-color: #f0f0f0;
+  background: #000;
+  color: #fff;
 
-  &.signature {
+  &--signature {
     background: linear-gradient(90deg, #FCB13F 0%, #FC793D 100%);
     color: #fff;
-  }
-
-  &.spicy {
-    background: #2E2E2E;
-    color: #fff;
+    border-radius: 999rpx;
   }
 }