feat: add scroll top mask, unify page top spacing and docs

This commit is contained in:
2026-08-08 03:57:47 +08:00
parent 38045073b0
commit a3c3005c04
73 changed files with 1350 additions and 169 deletions
+33
View File
@@ -0,0 +1,33 @@
# 首页 页面设计规范
## 基本信息
- 路由:`pages/index/index`
- 分类:`A类`
- 标题文本:智绘微刻
- TabBar:是
## 组件调用
- **ScrollTopMask**
- `title="智绘微刻"`
- `targetSelector=".home-header"`
- `showBack``否`
- **CustomTabBar**:自动显示,页面无需手动调用。
## 设计要点
- 顶部字距:statusBarHeight + 12px(已实现)。
- 底部安全区:避让 TabBar + env(safe-area-inset-bottom)。
- TopMask 出现阈值由 `.home-header` 测量决定;滚动后标题淡入,位置遵循所在分类通用规范。
## 页面特有说明
大标题左上角;轮播/搜索/分类卡片内容流较长,滚动后 TopMask 淡入。
## 验收要点
- [ ] 顶部字距符合 class 通用规范
- [ ] TopMask 标题/返回按钮符合预期
- [ ] 浅色/深色主题正常
- [ ] iOS / Android 真机表现一致