fix : 调整一下套餐样式

pages/recharge/recharge.vue

@@ -20,11 +20,12 @@
         v-for="item in packages"
         :key="item.id"
         class="product"
-        :class="{ active: current && current.id === item.id }"
+        :class="{ active: current && current.id === item.id, recommend: isRecommendedPackage(item) }"
         @click="current = item"
       >
         <text v-if="item.badge" class="badge">{{ item.badge }}</text>
         <text class="points">{{ item.points }}点</text>
+        <text v-if="isRecommendedPackage(item)" class="recommend-copy">日常创作首选</text>
         <text class="price">￥{{ item.price_yuan }}</text>
         <view v-if="item.old_price_yuan" class="offer-row">
           <text class="old-price">￥{{ item.old_price_yuan }}</text>
@@ -80,6 +81,10 @@ const buyText = computed(() => {
   return `确认充值（${current.value.price_yuan}元）`
 })
 
+function isRecommendedPackage(item = {}) {
+  return String(item.badge || '').includes('推荐')
+}
+
 function ensureLogin() {
   if (!userStore.isLogin) {
     uni.navigateTo({ url: '/pages/login/login' })
@@ -306,6 +311,7 @@ $muted: #8b95a3;
 
 .product {
   position: relative;
+  overflow: hidden;
   min-height: 212rpx;
   padding: 28rpx 16rpx 24rpx;
   border: 4rpx solid transparent;
@@ -318,10 +324,77 @@ $muted: #8b95a3;
   color: #1f2733;
   background: #fff;
   box-shadow: 0 20rpx 44rpx rgba(15, 23, 42, 0.06);
+  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -54rpx;
+    right: -54rpx;
+    width: 136rpx;
+    height: 136rpx;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 20rpx;
+    right: 20rpx;
+    bottom: 14rpx;
+    height: 4rpx;
+    border-radius: 999rpx;
+    background: transparent;
+  }
+
+  .badge,
+  .points,
+  .recommend-copy,
+  .price,
+  .offer-row {
+    position: relative;
+    z-index: 1;
+  }
+
+  &.recommend {
+    border-color: rgba(246, 196, 83, 0.82);
+    color: #fff;
+    background:
+      radial-gradient(circle at 82% 8%, rgba(255, 231, 163, 0.28), transparent 32%),
+      radial-gradient(circle at 8% 92%, rgba(202, 138, 4, 0.18), transparent 36%),
+      linear-gradient(160deg, #1c1917 0%, #111827 52%, #020617 100%);
+    box-shadow:
+      0 30rpx 72rpx rgba(15, 23, 42, 0.26),
+      0 0 0 6rpx rgba(246, 196, 83, 0.12);
+  }
+
+  &.recommend::before {
+    background: radial-gradient(circle, rgba(255, 216, 106, 0.32), transparent 68%);
+  }
 
   &.active {
     border-color: $accent;
-    box-shadow: 0 0 0 8rpx rgba(11, 140, 255, 0.1);
+    background: linear-gradient(180deg, #f4faff 0%, #ffffff 68%);
+    box-shadow:
+      0 26rpx 56rpx rgba(11, 140, 255, 0.18),
+      0 0 0 8rpx rgba(11, 140, 255, 0.1);
+  }
+
+  &.recommend.active {
+    border-color: #f6c453;
+    background:
+      radial-gradient(circle at 82% 8%, rgba(255, 231, 163, 0.38), transparent 32%),
+      radial-gradient(circle at 8% 92%, rgba(202, 138, 4, 0.22), transparent 38%),
+      linear-gradient(160deg, #27201a 0%, #111827 50%, #020617 100%);
+    box-shadow:
+      0 34rpx 78rpx rgba(15, 23, 42, 0.32),
+      0 0 0 8rpx rgba(246, 196, 83, 0.16),
+      inset 0 2rpx 0 rgba(255, 255, 255, 0.86);
+  }
+  &.recommend.active::after {
+    background: linear-gradient(90deg, transparent, rgba(255, 216, 106, 0.72), transparent);
+    box-shadow: 0 0 18rpx rgba(255, 216, 106, 0.3);
   }
   .badge {
     position: absolute;
@@ -337,16 +410,39 @@ $muted: #8b95a3;
     color: $accent;
     background: rgba(11, 140, 255, 0.1);
   }
+  &.recommend .badge {
+    color: #2a1803;
+    background: linear-gradient(135deg, #fff1b8 0%, #f6c453 50%, #d89a22 100%);
+    box-shadow: 0 10rpx 24rpx rgba(216, 154, 34, 0.32);
+  }
   .points {
-    margin-top: 36rpx;
+    margin-top: 34rpx;
     font-size: 40rpx;
     font-weight: 900;
   }
+  .recommend-copy {
+    margin-top: -10rpx;
+    font-size: 20rpx;
+    line-height: 1;
+    font-weight: 800;
+    color: #3b8bd8;
+  }
+  &.recommend .points {
+    color: #fff;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.32);
+  }
+  &.recommend .recommend-copy {
+    color: rgba(255, 220, 138, 0.92);
+  }
   .price {
     font-size: 26rpx;
     font-weight: 800;
     color: $accent;
   }
+  &.recommend .price {
+    color: #ffd76a;
+    text-shadow: 0 2rpx 10rpx rgba(216, 154, 34, 0.22);
+  }
   .offer-row {
     display: flex;
     align-items: center;
@@ -368,6 +464,13 @@ $muted: #8b95a3;
     font-size: 19rpx;
     font-weight: 900;
   }
+  &.recommend .old-price {
+    color: rgba(255, 255, 255, 0.45);
+  }
+  &.recommend .bonus {
+    color: #7a4a00;
+    background: linear-gradient(135deg, rgba(255, 241, 184, 0.96), rgba(255, 215, 106, 0.96));
+  }
 }
 
 /* 确认充值 */