来源:Figma 「车系收藏 (47)」+「收藏车型卡片」+「collect=true/false」共 57+ 次实例抽取
4 个 view · 图标按钮 / 卡片角标 / 收藏 Tab / 收藏列表行
最基础形式。3 种尺寸 + outline 边框 + 带文字 3 个变体。未收藏=灰色心 / 已收藏=红心。
从 Figma 「车系收藏」「收藏车型卡片」直接抽取。半透明白底+模糊背景 + 右上角定位。
"我的收藏"页面顶部 Tab 切换。激活态黄底+深字,带角标显示数量。
从 Figma 「收藏车型卡片」抽取,含图片 + 名称 + 价格 + 操作按钮。
| 元素 | 用 Token |
|---|---|
| 未收藏图标 | --grey-400 ♡ |
| 已收藏图标 | --red-500 ♥ |
| hover 背景 | --yellow-50 |
| active 背景 | --red-50 + --red-500 边框 |
| 角标模糊 | rgba(255,255,255,0.9) + backdrop-filter: blur(8px) |
| Tab 激活态 | --yellow-500 背景 + --grey-900 文字 |
| Badge 角标 | --red-500 背景 / Tab 激活时 --grey-900 背景 |