fix : 调整样式

app/pages/index.vue

@@ -173,9 +173,9 @@
         <div
           v-for="(pkg, idx) in packages"
           :key="pkg.id"
-          class="relative rounded-3xl border-2 bg-[var(--c-ffffff)] p-7 transition-all duration-300"
+          class="home-pricing-card relative overflow-hidden rounded-3xl border-2 bg-[var(--c-ffffff)] p-7 transition-all duration-300"
           :class="isFeatured(pkg, idx)
-            ? 'border-[var(--c-0b8cff)] shadow-[0_24px_50px_var(--sh-11-140-255-180)] sm:-mt-4 sm:pb-10'
+            ? 'is-featured border-[var(--c-0b8cff)] shadow-[0_24px_50px_var(--sh-11-140-255-180)] sm:-mt-4 sm:pb-10'
             : 'border-[var(--c-eef2f7)] hover:border-[var(--c-0b8cff)]/30 hover:shadow-[0_16px_36px_var(--sh-23-58-110-100)]'"
         >
           <span
@@ -702,4 +702,50 @@ watch(isLogin, () => loadPackages())
 .h-13 {
   height: 3.25rem;
 }
+
+.home-pricing-card::before {
+  content: '';
+  position: absolute;
+  top: -54px;
+  right: -52px;
+  width: 148px;
+  height: 148px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.home-pricing-card::after {
+  content: '';
+  position: absolute;
+  right: 28px;
+  bottom: 22px;
+  left: 28px;
+  height: 3px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.home-pricing-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.home-pricing-card.is-featured {
+  background:
+    radial-gradient(circle at 82% 10%, rgba(32, 167, 255, 0.28), transparent 32%),
+    linear-gradient(180deg, #dff2ff 0%, #f3fbff 48%, #ffffff 100%);
+  box-shadow:
+    0 28px 60px rgba(11, 140, 255, 0.22),
+    0 0 0 6px rgba(11, 140, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.home-pricing-card.is-featured::before {
+  background: radial-gradient(circle, rgba(32, 167, 255, 0.3), transparent 68%);
+}
+
+.home-pricing-card.is-featured::after {
+  background: linear-gradient(90deg, transparent, rgba(11, 140, 255, 0.55), transparent);
+  box-shadow: 0 0 16px rgba(11, 140, 255, 0.22);
+}
 </style>

app/pages/recharge.vue

@@ -42,23 +42,22 @@
                 v-for="pkg in packages"
                 :key="pkg.id"
                 type="button"
-                class="relative flex min-h-[124px] flex-col items-center justify-center gap-2 rounded-2xl border-2 p-4 transition-all"
-                :class="current && current.id === pkg.id
-                  ? 'border-[var(--c-0b8cff)] bg-[var(--c-f4faff)] shadow-[0_0_0_4px_var(--sh-11-140-255-100)]'
-                  : 'border-transparent bg-[var(--c-f7f9fd)] hover:border-[var(--c-e5edf7)]'"
+                class="recharge-package relative flex min-h-[124px] flex-col items-center justify-center gap-2 rounded-2xl border-2 p-4 transition-all"
+                :class="{ 'is-active': current && current.id === pkg.id, 'is-recommended': isRecommendedPackage(pkg) }"
                 @click="selectPackage(pkg)"
               >
                 <span
                   v-if="pkg.badge"
-                  class="absolute left-1/2 top-2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[var(--c-0b8cff)]/10 px-2 py-0.5 text-[10px] font-extrabold text-[var(--c-0b8cff)]"
+                  class="recharge-package-badge absolute left-1/2 top-2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[var(--c-0b8cff)]/10 px-2 py-0.5 text-[10px] font-extrabold text-[var(--c-0b8cff)]"
                 >{{ pkg.badge }}</span>
-                <span class="mt-4 text-xl font-extrabold text-[var(--c-172033)]">{{ pkg.points }}点</span>
-                <span class="text-sm font-extrabold text-[var(--c-0b8cff)]">￥{{ pkg.price_yuan }}</span>
-                <span v-if="pkg.old_price_yuan" class="flex items-center gap-1.5 text-xs">
-                  <span class="text-[var(--c-a0aabb)] line-through">￥{{ pkg.old_price_yuan }}</span>
+                <span class="recharge-package-points mt-4 text-xl font-extrabold text-[var(--c-172033)]">{{ pkg.points }}点</span>
+                <span v-if="isRecommendedPackage(pkg)" class="recharge-package-copy">日常创作首选</span>
+                <span class="recharge-package-price text-sm font-extrabold text-[var(--c-0b8cff)]">￥{{ pkg.price_yuan }}</span>
+                <span v-if="pkg.old_price_yuan" class="recharge-package-offer flex items-center gap-1.5 text-xs">
+                  <span class="recharge-package-old-price text-[var(--c-a0aabb)] line-through">￥{{ pkg.old_price_yuan }}</span>
                   <span
                     v-if="pkg.bonus_percent"
-                    class="rounded-full bg-[var(--c-edfdf4)] px-1.5 py-0.5 font-extrabold text-[var(--c-159a54)]"
+                    class="recharge-package-bonus rounded-full bg-[var(--c-edfdf4)] px-1.5 py-0.5 font-extrabold text-[var(--c-159a54)]"
                   >多送{{ pkg.bonus_percent }}%</span>
                 </span>
               </button>
@@ -244,6 +243,10 @@ function showMsg(msg, color = 'error') {
   toast.add({ title: msg, color })
 }
 
+function isRecommendedPackage(pkg = {}) {
+  return String(pkg.badge || '').includes('推荐')
+}
+
 // ==================== 套餐 & 余额 ====================
 async function loadPackages() {
   loading.value = true
@@ -470,3 +473,122 @@ watch(isLogin, async (loggedIn) => {
 
 onUnmounted(() => clearInterval(pollingTimer))
 </script>
+
+<style scoped>
+.recharge-package {
+  overflow: hidden;
+  border-color: transparent;
+  background: var(--c-f7f9fd);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
+  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.recharge-package:hover {
+  border-color: var(--c-e5edf7);
+}
+
+.recharge-package::before {
+  content: '';
+  position: absolute;
+  top: -34px;
+  right: -34px;
+  width: 92px;
+  height: 92px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.recharge-package::after {
+  content: '';
+  position: absolute;
+  right: 14px;
+  bottom: 10px;
+  left: 14px;
+  height: 2px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.recharge-package > * {
+  position: relative;
+  z-index: 1;
+}
+
+.recharge-package.is-recommended {
+  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 18px 42px rgba(15, 23, 42, 0.26),
+    0 0 0 4px rgba(246, 196, 83, 0.12);
+}
+
+.recharge-package.is-recommended::before {
+  background: radial-gradient(circle, rgba(255, 216, 106, 0.32), transparent 68%);
+}
+
+.recharge-package.is-active {
+  border-color: var(--c-0b8cff);
+  background: linear-gradient(180deg, #f4faff 0%, #ffffff 68%);
+  box-shadow:
+    0 16px 34px rgba(11, 140, 255, 0.18),
+    0 0 0 4px var(--sh-11-140-255-100);
+}
+
+.recharge-package.is-recommended.is-active {
+  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%);
+  border-color: #f6c453;
+  box-shadow:
+    0 20px 48px rgba(15, 23, 42, 0.32),
+    0 0 0 5px rgba(246, 196, 83, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.recharge-package.is-recommended.is-active::after {
+  background: linear-gradient(90deg, transparent, rgba(255, 216, 106, 0.72), transparent);
+  box-shadow: 0 0 10px rgba(255, 216, 106, 0.3);
+}
+
+.recharge-package.is-recommended .recharge-package-badge {
+  color: #2a1803;
+  background: linear-gradient(135deg, #fff1b8 0%, #f6c453 50%, #d89a22 100%);
+  box-shadow: 0 6px 16px rgba(216, 154, 34, 0.32);
+}
+
+.recharge-package-copy {
+  margin-top: -0.25rem;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+  color: #3b8bd8;
+}
+
+.recharge-package.is-recommended .recharge-package-points {
+  color: #fff;
+  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
+}
+
+.recharge-package.is-recommended .recharge-package-copy {
+  color: rgba(255, 220, 138, 0.92);
+}
+
+.recharge-package.is-recommended .recharge-package-price {
+  color: #ffd76a;
+  text-shadow: 0 1px 6px rgba(216, 154, 34, 0.22);
+}
+
+.recharge-package.is-recommended .recharge-package-old-price {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.recharge-package.is-recommended .recharge-package-bonus {
+  color: #7a4a00;
+  background: linear-gradient(135deg, rgba(255, 241, 184, 0.96), rgba(255, 215, 106, 0.96));
+}
+</style>