40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
|
# H5/Admin 首页信息架构与主题规范
|
|||
|
|
|
|||
|
|
## 目标
|
|||
|
|
- 补齐 H5 首页（分享入口 + 活动规则 + 排行榜预览）与管理端首页（数据概览 + 活动列表 + 异常/告警）。
|
|||
|
|
- 引入统一冷静科技主题（深蓝 + 青绿），沉淀可复用的视觉规范与空态/引导文案。
|
|||
|
|
- 保持与现有组件库风格一致，避免新增复杂依赖。
|
|||
|
|
|
|||
|
|
## 信息架构
|
|||
|
|
### H5 首页
|
|||
|
|
- 顶部活动摘要：活动名称、状态、周期、奖励概览。
|
|||
|
|
- 核心 CTA：立即分享（跳转分享页）。
|
|||
|
|
- 活动规则卡：3-5 条规则要点，附“完整规则”锚点。
|
|||
|
|
- 排行榜预览：Top3 预览与“查看完整榜单”入口；未配置鉴权时展示配置引导空态。
|
|||
|
|
- 底部导航：首页/分享/排行（固定底部，保证可达性）。
|
|||
|
|
|
|||
|
|
### 管理端首页
|
|||
|
|
- 数据概览卡：访问/分享/转化/新增四宫格，数字为空时展示引导文案。
|
|||
|
|
- 活动列表卡：列表为空显示空态 + “创建活动”按钮。
|
|||
|
|
- 异常/告警卡：无异常时显示“系统运行正常”空态。
|
|||
|
|
- 顶部工具条：品牌标识 + 导航 + 快捷操作（新建/导出）。
|
|||
|
|
|
|||
|
|
## 主题规范（冷静科技）
|
|||
|
|
- 主色：深蓝 `#0B1C2C`
|
|||
|
|
- 强调色：青绿 `#16B9A5`
|
|||
|
|
- 高亮：`#6AA7FF`
|
|||
|
|
- 背景：`#F3F6F9`
|
|||
|
|
- 边框：`#E0E6ED`
|
|||
|
|
- 字体：标题 `IBM Plex Sans`，正文 `Source Sans 3`/`Noto Sans SC`，数字 `IBM Plex Mono`
|
|||
|
|
|
|||
|
|
## 组件规范
|
|||
|
|
- 卡片：12px 圆角、浅阴影、标题+辅助说明。
|
|||
|
|
- KPI：标题 + 数值 + 趋势/状态标签。
|
|||
|
|
- 空态：图标 + 一句说明 + 主操作按钮。
|
|||
|
|
- 按钮：主/次/禁用/加载态统一色系。
|
|||
|
|
|
|||
|
|
## 验收标准
|
|||
|
|
- H5 与 Admin 首页均有导航、数据/空态、引导文案。
|
|||
|
|
- 页面风格统一、颜色和字体一致。
|
|||
|
|
- 组件库色系与页面主题一致。
|