📰 Article Card · 文章卡片

来源:Figma 「车资讯」「资讯」实例抽取
通用化为"文章卡片"组件 · 4 个 view · 横版大卡 / 竖版标准 / 紧凑列表 / 视频缩略图

① Article Horizontal · 横版大卡

详情页 / 推荐位的横版文章卡。240px 缩略图 + 标题 + 摘要 + 作者 + 浏览量。

📰
市场分析 3 天前

2026 年墨西哥汽车市场报告:电动车销量首次突破 8%

根据 Autocava 研究院最新数据,墨西哥市场电动车销量占比从 2025 年的 5.2% 上升至 8.4%,主要由 MG ZS EV 与 XPENG G6 推动。

👁 3.2k 💬 24 ❤️ 86

② Article Vertical · 竖版标准(网格布局)

首页 / 列表页的 3 列网格。悬停时上移 2px + 黄边 + 阴影。

📊
销量 1 天前

8 月销量榜:Nissan 蝉联榜首

2026 年 8 月墨西哥新车销量数据出炉,Nissan Versa 连续 6 个月居榜首。

👁 1.8k 💬 12
⚡
技术 2 天前

电动车电池技术新突破:续航突破 600km

新一代固态电池即将量产,将解决电动车续航焦虑。

👁 2.4k 💬 18
💡
购车指南 5 天前

新手买车必看:3 步确定预算

从收入到贷款,教你科学计算购车预算。

👁 956 💬 6

③ Article Compact · 紧凑列表

侧边栏 / 嵌入式列表。小缩略图 80×80 + 标题 2 行省略。

📈

9 月汽车金融政策更新:多家银行下调利率

金融 · 2 小时前 · 1.2k 阅读
🏆

XPENG G6 评测:墨西哥市场的搅局者

评测 · 5 小时前 · 3.4k 阅读
🔧

汽车保养指南:每 5000km 必做 3 件事

保养 · 1 天前 · 892 阅读

④ Article Video · 视频缩略图

支持"播放"按钮 + 时长 + 直播标识 + 自动脉动。深色背景突出视频属性。

▶
12:34

Nissan Versa 2026 试驾体验

视频 · 3 天前
▶
LIVE

新车型现场发布会直播

直播 · 2,341 人观看

🎨 对应 Design Tokens

元素用 Token
卡片背景--white
卡片边框--grey-100 默认 / --yellow-500 hover
缩略图占位渐变 --grey-200 → --grey-300
视频缩略图渐变 --grey-700 → --grey-900
分类标签--yellow-50 背景 + --grey-900 文字
播放按钮56×56px 圆 + rgba(255,255,255,0.9)
时长标签rgba(0,0,0,0.75) + 白字
直播标识--red-500 + 脉动动画
正文文字--grey-600 13/12px
标题--grey-900 700