style(subscription): limit visible plan cards

This commit is contained in:
2026-06-23 17:40:50 +08:00
parent 3e148f5c0d
commit 9874cadb49
2 changed files with 8 additions and 8 deletions
@@ -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 (
@@ -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],
);