fix: calibrate A01 entry visual layout

This commit is contained in:
rain
2026-07-13 15:35:16 +08:00
parent bd50f15d5c
commit f7d6d3cfb1
8 changed files with 139 additions and 129 deletions
@@ -16,7 +16,7 @@
- 使用现有 `static/assets/backgrounds/auth-ancestral-header-v1.png``auth-rice-paper-v1.jpg``auth-ink-scenery-v1.png` 作为独立认证页背景;使用 `login-outline-v1.png``wechat-licensed-v1.png` 作为本地图标。
- 顺序固定为:朱砂家祠头图、标题“家谱”、副标题“为家族留存可传承的记忆”、朱砂主按钮“登录”、描边按钮“微信登录”、单行文字“还没有账号?注册账号”、未勾选协议行。
- 页面遵循 A-01 记录中的 750rpx 栅格、638rpx 内容宽度、108rpx 按钮高和安全区规则
- A-01 的运行时布局唯一遵循 `docs/design/A01_启动登录引导_设计记录.md` 中的“412 × 915 运行时校准表”;本文件不再重复或定义按钮与间距数值
## A-02 双标签登录页
@@ -4,29 +4,15 @@
`docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` 的协议未勾选状态作为唯一视觉基准,把 `pages/auth/entry.vue` 的真实 DOM 校准到同一比例。此次只修正标题区、两条分隔饰线、双按钮、注册入口和协议行;现有认证背景图不在本次视觉校准范围内,接口、路由和 A-02 均不变。
## 基准坐标
## Contract ownership
以下为 412 x 915 设计图的可见边界;实现按 `750rpx / 412px` 换算并保持纵向流式滚动。
| 元素 | 设计图像素 | 750rpx 基准 | 实现约束 |
| --- | --- | --- | --- |
| 朱砂家祠头图 | y=0, h=139 | h≈253rpx | 头图与印章作为独立层,不能用页面留白补高度。 |
| 标题字面 | y≈222286 | y≈404521rpx | 标题区从红头后开始独立校准,不能沿用 196rpx 的未验证留白。 |
| 上分隔饰线 | x≈89323, y≈316 | x≈162588rpx, y≈575rpx | 使用与图一致的小型居中金饰;上、下分隔线分别控制间距。 |
| 副标题 | y≈345366 | y≈628666rpx | 保持单行、居中。 |
| 下分隔饰线 | x≈89323, y≈385 | x≈162588rpx, 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 误差;最终仍以同尺寸运行截图叠图确认。
`docs/design/A01_启动登录引导_设计记录.md` owns the calibrated 412 × 915 coordinate table and acceptance thresholds. This implementation specification records scope and component strategy only; it does not define duplicate layout values.
## 组件策略
- 页面继续使用真实 DOM 与现有本地认证背景,不使用整图作为页面内容。
- 标题两侧云纹和分隔线中心饰物拆成各自的语义元素;不能再把 `create-cloud-v2.png` 同时用作两类饰物
- 两个按钮共享尺寸,不共享未经校准的通用“方括号”角饰直线边框由 CSS 承担;可见角饰必须使用与参考图一致的透明 PNG 资产
- 标题两侧云纹和标题分隔线中心饰物保持独立语义元素;注册链接不得增加设计图中不存在的左右短线
- 两个按钮共享经过校准的外框尺寸,不使用通用“方括号”角饰直线边框由 scoped CSS 承担。
- 登录图标保持白色、微信图标保持其许可的原色;按钮文字按参考图缩小并移除全局通用按钮样式造成的额外字重或圆角干扰。
- 视觉常量只定义在 `pages/auth/entry.vue` 的 A-01 样式中;旧的 A-01 实现合同中互相冲突的 `638rpx/108rpx` 说明不再作为运行时布局依据。