rain
39 lines
3.0 KiB
Markdown
39 lines
3.0 KiB
Markdown
# A-01 运行时视觉校准设计
|
||
|
||
## 目标与范围
|
||
|
||
以 `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` 的协议未勾选状态作为唯一视觉基准，把 `pages/auth/entry.vue` 的真实 DOM 校准到同一比例。此次只修正标题区、两条分隔饰线、双按钮、注册入口和协议行；现有认证背景图不在本次视觉校准范围内，接口、路由和 A-02 均不变。
|
||
|
||
## 基准坐标
|
||
|
||
以下为 412 x 915 设计图的可见边界；实现按 `750rpx / 412px` 换算并保持纵向流式滚动。
|
||
|
||
| 元素 | 设计图像素 | 750rpx 基准 | 实现约束 |
|
||
| --- | --- | --- | --- |
|
||
| 朱砂家祠头图 | y=0, h=139 | h≈253rpx | 头图与印章作为独立层，不能用页面留白补高度。 |
|
||
| 标题字面 | y≈222–286 | y≈404–521rpx | 标题区从红头后开始独立校准，不能沿用 196rpx 的未验证留白。 |
|
||
| 上分隔饰线 | x≈89–323, y≈316 | x≈162–588rpx, y≈575rpx | 使用与图一致的小型居中金饰；上、下分隔线分别控制间距。 |
|
||
| 副标题 | y≈345–366 | y≈628–666rpx | 保持单行、居中。 |
|
||
| 下分隔饰线 | x≈89–323, y≈385 | x≈162–588rpx, y≈701rpx | 不能复用上分隔线的通用外边距。 |
|
||
| 登录按钮 | x≈60, y≈463, w≈291, h≈65 | x≈109, y≈843, w≈530, h≈118 | 朱砂实底、细金内外框和小角饰均以参考图为准。 |
|
||
| 微信登录按钮 | x≈60, y≈555, w≈291, h≈65 | x≈109, y≈1,010, w≈530, h≈118 | 宣纸底、细金框，和主按钮保持相同外框尺寸。 |
|
||
| 注册入口 | y≈675 | y≈1,229rpx | 不加左右装饰短线。 |
|
||
| 协议行 | y≈767 | y≈1,397rpx | 保留安全区和小屏滚动能力。 |
|
||
|
||
坐标以图像可见内容为准，边缘抗锯齿可允许约 2px 误差；最终仍以同尺寸运行截图叠图确认。
|
||
|
||
## 组件策略
|
||
|
||
- 页面继续使用真实 DOM 与现有本地认证背景，不使用整图作为页面内容。
|
||
- 标题两侧云纹和分隔线中心饰物拆成各自的语义元素；不能再把 `create-cloud-v2.png` 同时用作两类饰物。
|
||
- 两个按钮共享尺寸，不共享未经校准的通用“方括号”角饰。直线边框由 CSS 承担；可见角饰必须使用与参考图一致的透明 PNG 资产。
|
||
- 登录图标保持白色、微信图标保持其许可的原色；按钮文字按参考图缩小并移除全局通用按钮样式造成的额外字重或圆角干扰。
|
||
- 视觉常量只定义在 `pages/auth/entry.vue` 的 A-01 样式中；旧的 A-01 实现合同中互相冲突的 `638rpx/108rpx` 说明不再作为运行时布局依据。
|
||
|
||
## 验收
|
||
|
||
1. 运行 `tests/a01-a02-ui-contract.ps1`，确认协议与本地路由合同不变。
|
||
2. 在 HBuilderX 或 Android 以 `412 x 915` 截取协议未勾选状态，去除浏览器外框后与参考图同尺度叠加比对。
|
||
3. 确认红头、标题、两条分隔饰线、按钮四边、注册入口和协议行的误差均不超过约 2px；再复核 `320 x 568` 不会裁切协议或安全区。
|
||
4. 没有这两张运行截图，不能声明视觉校准完成。
|