🛒 Product Card · 商品 / 车型卡片

来源：Figma 「车型 (73)」+「收藏车型卡片 (57)」+「品牌车型卡片_有优惠/无优惠」+「车型融资计划」实例抽取
通用化为"商品卡片"组件 · 5 个 view · 竖版标准 / 横版大卡 / 极简文字 / 优惠角标

① Product Card Standard · 竖版标准

3 列网格 · 含品牌 + 名称 + 规格 + 价格 + 月供 + 收藏按钮 + 4 种标签。

🚗
NEW
NISSAN
Versa 2026 Exclusive
1.6L · CVT · 4 门 · 轿车
$ 389,900
$429,900
💰 月供 $6,499 起
🚙
HOT
MG
ZS 2025 Luxury
1.5T · 自动 · SUV
$ 429,900
💰 月供 $7,165 起
🚘
9% 折扣
KIA
Rio 2025 LX
1.6L · 手动 · 轿车
$ 329,900
$359,900
💰 月供 $5,498 起

② Product Card Horizontal · 横版大卡

详情页 / 推荐位 · 240px 缩略图 + 完整信息 + 行动按钮。

🚗
NISSAN · 紧凑型轿车
Versa 2026 Exclusive CVT
1.6L 自然吸气 · CVT 无级变速 · 4 门 5 座
⛽ 汽油 🛡 安全气囊 6 个 📱 CarPlay
$ 389,900 MXN
月供 $6,499 起 · 60 期

③ Product Compact · 极简文字版

侧边栏 / 嵌入式列表 · 56×56 缩略图 + 名称 + 价格 + 利率。

🚗
Nissan Versa 2026 Exclusive
$389,900 8.9% APR
🚙
MG ZS 2025 Luxury
$429,900 9.5% APR
🚘
Kia Rio 2025 LX
$329,900 7.9% APR

④ Product with Discount · 优惠角标

从 Figma 「品牌车型卡片_有优惠」抽取。斜带角标 + 黄底信息区 + 双 tag 强化促销感。

9%
🚗
优惠 $40,000 省 9%
Nissan Versa 2026
$ 389,900
$429,900

🎨 对应 Design Tokens

元素用 Token
卡片背景--white
卡片边框--grey-100 / --yellow-500 hover
缩略图占位渐变 --grey-50 → --grey-100
NEW 标签--green-500
HOT 标签--red-500
折扣标签--yellow-500 + --grey-900 文字
收藏按钮rgba(255,255,255,0.9) + backdrop-filter: blur
月供金融区--yellow-50 背景 + --grey-900 文字
价格--grey-900 20px / 700 + tabular-nums
原价--grey-400 + 删除线
折扣优惠卡--yellow-50 信息区 + 斜带 45° --red-500