style(subscription): limit visible plan cards
This commit is contained in:
@@ -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],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user