From 9874cadb49a95d87859415d8391ec4721f522079 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Tue, 23 Jun 2026 17:40:50 +0800
Subject: [PATCH] style(subscription): limit visible plan cards

---
 .../components/subscription-plan-card.tsx         | 15 +++++++--------
 src/app/subscription/subscription-screen.tsx      |  1 +
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/subscription/components/subscription-plan-card.tsx b/src/app/subscription/components/subscription-plan-card.tsx
index e3436b62..d98508bc 100644
--- a/src/app/subscription/components/subscription-plan-card.tsx
+++ b/src/app/subscription/components/subscription-plan-card.tsx
@@ -5,18 +5,17 @@
  * 视觉规格（与设计稿对齐）：
  *   - 卡片顶部：套餐名（12px / secondary）
  *   - 中部：大字价格（28px / 300）+ 划线原价（12px / line-through / 999）
- *   - 底部 28px 高渐变条：白字 12px/600 每日折算价
+ *   - 底部 28px 高色条：白字 12px/600 每日折算价
  *   - 选中：2px 粉色边框 + 浅粉阴影
- *   - 三个卡片底部渐变不同：粉 → 紫红 → 紫
+ *   - 三个卡片底部色条不同：粉 → 亮粉 → 紫
  */
 
 import styles from "./subscription-plan-card.module.css";
 
-const PER_DAY_GRADIENTS = [
-  "linear-gradient(90deg, #ff7ab8 0%, #ff5d9c 100%)",
-  "linear-gradient(90deg, #d16bff 0%, #ff5da3 100%)",
-  "linear-gradient(90deg, #9a4dff 0%, #c44dff 100%)",
-  "linear-gradient(90deg, #32c7b5 0%, #2f8fd8 100%)",
+const PER_DAY_COLORS = [
+  "#f657a0",
+  "#fa77e3",
+  "#bb72f9",
 ] as const;
 
 export interface SubscriptionPlanView {
@@ -53,7 +52,7 @@ export function SubscriptionPlanCard({
     .join(" ");
 
   const perDayStyle = {
-    background: PER_DAY_GRADIENTS[gradientIndex % PER_DAY_GRADIENTS.length],
+    backgroundColor: PER_DAY_COLORS[gradientIndex % PER_DAY_COLORS.length],
   };
 
   return (
diff --git a/src/app/subscription/subscription-screen.tsx b/src/app/subscription/subscription-screen.tsx
index 471a71f0..532713ee 100644
--- a/src/app/subscription/subscription-screen.tsx
+++ b/src/app/subscription/subscription-screen.tsx
@@ -136,6 +136,7 @@ export function SubscriptionScreen({
     () =>
       payment.plans
         .filter((plan) => isPlanForType(plan, subscriptionType))
+        .slice(0, 3)
         .map((plan) => toPlanView(plan, subscriptionType)),
     [payment.plans, subscriptionType],
   );