wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
30 lines
1.9 KiB
Markdown
30 lines
1.9 KiB
Markdown
# 穿山甲 VPN — 官网宣传页 UI Kit
|
|
|
|
品牌官网落地页,沿用暖大地色设计系统。含 **产品 / 定价 / 下载 / 文档 / Blog** 全部板块,定价结构参考 Bitwarden(分档 + 功能对比表)但配色保持 clay 暖调。
|
|
|
|
## 运行
|
|
打开 `index.html`(响应式:≤980px 单列堆叠,>980px 桌面两列/多列)。
|
|
- **顶栏**:品牌标 + 锚点导航(产品/定价/下载/文档/Blog)+ 中/EN 切换 + 登录 + 立即下载;滚动时毛玻璃 + 描边。
|
|
- **Hero**:大标题 + 连接卡(success 态 orb + 速率 + 当前节点)+ 平台条。
|
|
- **产品**:6 个功能卡(一键连接/智能分流/80+节点/无日志/Kill Switch/多端同步)。
|
|
- **定价**:月/年切换(年付 -20%)+ 3 档套餐(专业版 clay 渐变高亮「最受欢迎」)+ **为何无支付按钮**说明 + 渠道 chips + 功能对比表。
|
|
- **下载**:5 平台卡(iOS/Android/macOS/Windows/Linux)。
|
|
- **文档**:4 个文档入口(快速开始/常见问题/协议安全/隐私政策)。
|
|
- **Blog**:3 篇文章卡。
|
|
- **CTA band** + **页脚**(渠道/资源/服务时间)。
|
|
|
|
## 文件
|
|
| 文件 | 内容 |
|
|
|---|---|
|
|
| `index.html` | 页面结构(语义化 + `data-i18n` 键) |
|
|
| `website.css` | 全部样式,基于 `../../colors_and_type.css` 令牌 |
|
|
| `site.js` | i18n 字典(中/EN 全量切换,持久化)+ 月/年定价切换 + 滚动毛玻璃 |
|
|
|
|
## 关键模式
|
|
- 颜色/字体/圆角/阴影全部走设计系统语义 token;暖大地色,无蓝紫。
|
|
- **单语言显示**:中/EN 通过顶栏段控整页切换(`data-i18n` + JS 字典),不并排。
|
|
- **App 内无支付** 原则延伸到官网:定价区不放支付表单,CTA 为「获取激活码」+ 外部渠道(自助发卡/Telegram/LINE/邮箱),并有显式说明。
|
|
- 连接卡 orb 复用 App 核心连接键的 success 态视觉(满白环 + 盾勾 + 计时 + 绿光晕)。
|
|
- 图标 Lucide(CDN);品牌标内联 SVG(行走穿山甲,与全系统一致)。
|
|
- 演示渠道/价格为占位,落地替换。
|