来源:Figma 「车资讯」「资讯」实例抽取
通用化为"文章卡片"组件 · 4 个 view · 横版大卡 / 竖版标准 / 紧凑列表 / 视频缩略图
详情页 / 推荐位的横版文章卡。240px 缩略图 + 标题 + 摘要 + 作者 + 浏览量。
根据 Autocava 研究院最新数据,墨西哥市场电动车销量占比从 2025 年的 5.2% 上升至 8.4%,主要由 MG ZS EV 与 XPENG G6 推动。
首页 / 列表页的 3 列网格。悬停时上移 2px + 黄边 + 阴影。
2026 年 8 月墨西哥新车销量数据出炉,Nissan Versa 连续 6 个月居榜首。
新一代固态电池即将量产,将解决电动车续航焦虑。
从收入到贷款,教你科学计算购车预算。
侧边栏 / 嵌入式列表。小缩略图 80×80 + 标题 2 行省略。
支持"播放"按钮 + 时长 + 直播标识 + 自动脉动。深色背景突出视频属性。
| 元素 | 用 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 |