From 83d58268ac226665fe188cafe9ca98d693561a5a Mon Sep 17 00:00:00 2001 From: rain Date: Mon, 13 Jul 2026 15:41:51 +0800 Subject: [PATCH] fix: refine A01 runtime visual calibration --- design-qa.md | 10 +++--- docs/design/A01_启动登录引导_设计记录.md | 7 ++-- pages/auth/entry.vue | 44 ++++++++++++++---------- tests/a01-a02-ui-contract.ps1 | 10 +++++- tests/a01-design-record-audit.ps1 | 2 +- 5 files changed, 46 insertions(+), 27 deletions(-) diff --git a/design-qa.md b/design-qa.md index f09949e..01717f9 100644 --- a/design-qa.md +++ b/design-qa.md @@ -3,17 +3,17 @@ - Source visual truth: `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` - Target state: `412 × 915`, agreement unchecked. - Static contract: passed on 2026-07-13. -- Runtime screenshot: pending. +- Runtime screenshot: first capture reviewed on 2026-07-13; second capture pending. ## Evidence -- `pages/auth/entry.vue` uses real DOM and local background assets; the whole-image page layer remains absent. -- The static contract verifies the calibrated header height, title spacing, divider width, button dimensions and all four vertical anchors. -- The rejected registration side lines and four-corner button brackets are forbidden by the contract. +- The first `412 × 915` runtime capture confirms that the red-header height, divider width, both button frames and registration-entry height are close to the reference. +- The same capture shows the seal too high, title clouds too wide, both button content groups too far right, and an agreement row that is too wide and high. +- The second calibration adds sub-element anchors for those differences; the whole-image layer, registration side lines and four-corner button brackets remain forbidden. ## Remaining runtime evidence -- [P1] Capture the unchecked A-01 page at `412 × 915` in HBuilderX or Android, without browser chrome, and compare it against the source at the same scale. +- [P1] Capture the unchecked A-01 page at `412 × 915` in HBuilderX or Android, without browser chrome, after the second calibration and compare it against the source at the same scale. - [P1] Capture `320 × 568` after scrolling to confirm the agreement row and safe area are not clipped. - Confirm that selecting the agreement enables only the existing A-02 login route; the other entries remain local prepared-state prompts. diff --git a/docs/design/A01_启动登录引导_设计记录.md b/docs/design/A01_启动登录引导_设计记录.md index 8eb8483..be96f74 100644 --- a/docs/design/A01_启动登录引导_设计记录.md +++ b/docs/design/A01_启动登录引导_设计记录.md @@ -34,12 +34,15 @@ | 元素 | 412 × 915 像素基准 | 750rpx 实现基准 | | --- | --- | --- | | 朱砂家祠头图 | 高 139px | 高 253rpx | +| 红头谱印 | 比头图顶边低约 38px | `top: 70rpx` | | 标题区起点 | 红头后约 82px | `padding-top: 150rpx` | +| 标题两侧云纹 | 紧贴标题两侧，不扩张标题组宽度 | `56rpx × 34rpx`，标题左右各 12rpx | | 标题分隔饰线 | 宽约 234px | 宽 426rpx；上、下间距独立 | | 两个按钮 | x=60px，宽约 291px，高约 65px | `margin: 95rpx 110rpx 0`，高 118rpx | | 两按钮间距 | 约 28px | `margin-top: 51rpx` | +| 按钮内框与内容组 | 内框距外边约 3px；图标与文字整体偏左 | `inset: 6rpx`，内容组 `translateX(-20rpx)` | | 注册入口 | 微信按钮后约 56px；无左右短线 | `margin-top: 98rpx` | -| 协议行 | 注册入口后约 70px | `margin-top: 128rpx` 加安全区 | +| 协议行 | 注册入口后约 77px；文案不应撑宽整行 | `margin-top: 141rpx`，字号 20rpx，复选框 30rpx，加安全区 | - 上表是 A-01 运行时布局数值的唯一所有者。320 × 568 时页面允许纵向滚动，根容器不得以 `overflow: hidden` 截断协议行或系统安全区；底部内边距包含 `env(safe-area-inset-bottom)`。 - 仅作静态设计验证，不代表 uni-app 运行时验收；页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。 @@ -67,7 +70,7 @@ - 此结论只验证设计稿与固定栅格，不替代 uni-app 页面实现后的 Android 运行时验收。 - 仍未确定《家谱用户协议》与《隐私政策》的最终页面去向及返回路径；在这两页完成设计前，A-01 不得标记为完整设计完成。 - 页面实现阶段仍须按本记录在 Android 实机或同等运行环境复核四个尺寸的安全区、滚动与文字折行。 -- 2026-07-13 已按 412 × 915 参考图重新校准真实 DOM 的标题区、分隔饰线、双按钮、注册入口与协议行；静态合同通过，但仍须由同尺寸 HBuilderX 或 Android 截图叠图确认，未确认前不得标记 A-01 完成。 +- 2026-07-13 已按 412 × 915 参考图完成第一轮真实 DOM 校准；运行时截图显示容器位置已接近基准，但红头谱印、标题云纹、按钮内容组和协议行仍有子元素偏差，已进入第二轮校准。未取得第二轮同尺寸截图确认前不得标记 A-01 完成。 ## 5. 推进约束 diff --git a/pages/auth/entry.vue b/pages/auth/entry.vue index 2c94b9d..0e4166d 100644 --- a/pages/auth/entry.vue +++ b/pages/auth/entry.vue @@ -30,13 +30,17 @@ - - 登录 + + + 登录 + - - 微信登录 + + + 微信登录 + @@ -135,7 +139,7 @@ const prepareAgreement = () => { .header-seal { position: absolute; - top: 44rpx; + top: 70rpx; left: 50%; width: 136rpx; height: 136rpx; @@ -158,7 +162,7 @@ const prepareAgreement = () => { } .brand-title { - margin: 0 24rpx; + margin: 0 12rpx; font-family: STKaiti, KaiTi, serif; font-size: 112rpx; font-weight: 700; @@ -167,12 +171,12 @@ const prepareAgreement = () => { } .title-cloud { - width: 76rpx; - height: 46rpx; + width: 56rpx; + height: 34rpx; } -.title-cloud-left { margin-right: 10rpx; } -.title-cloud-right { margin-left: 10rpx; transform: scaleX(-1); } +.title-cloud-left { margin-right: 0; } +.title-cloud-right { margin-left: 0; transform: scaleX(-1); } .brand-divider { display: flex; @@ -224,7 +228,7 @@ const prepareAgreement = () => { .entry-button::after { position: absolute; - inset: 10rpx; + inset: 6rpx; border: 1rpx solid rgba(225, 180, 105, 0.92); border-radius: 2rpx; content: ''; @@ -246,8 +250,6 @@ const prepareAgreement = () => { } .entry-button__icon { - position: relative; - z-index: 1; width: 46rpx; height: 46rpx; margin-right: 18rpx; @@ -255,7 +257,13 @@ const prepareAgreement = () => { .entry-button__icon--wechat { width: 52rpx; } .entry-button--primary .entry-button__icon { filter: brightness(0) invert(1); } -.entry-button > text { position: relative; z-index: 1; } +.entry-button__content { + position: relative; + z-index: 1; + display: flex; + align-items: center; + transform: translateX(-20rpx); +} .entry-button--pressed { opacity: 0.84; } .register-link { @@ -278,10 +286,10 @@ const prepareAgreement = () => { display: flex; align-items: flex-start; justify-content: center; - margin-top: 128rpx; + margin-top: 141rpx; padding: 0 44rpx calc(32rpx + env(safe-area-inset-bottom)); color: #6b5a4a; - font-size: 24rpx; + font-size: 20rpx; line-height: 1.7; } @@ -291,8 +299,8 @@ const prepareAgreement = () => { align-items: center; justify-content: center; box-sizing: border-box; - width: 28rpx; - height: 28rpx; + width: 30rpx; + height: 30rpx; margin: 7rpx 12rpx 0 0; border: 2rpx solid #b88d4b; border-radius: 50%; diff --git a/tests/a01-a02-ui-contract.ps1 b/tests/a01-a02-ui-contract.ps1 index 98ddfce..b787331 100644 --- a/tests/a01-a02-ui-contract.ps1 +++ b/tests/a01-a02-ui-contract.ps1 @@ -86,7 +86,15 @@ foreach ($requiredVisualAnchor in @( 'height: 118rpx', 'margin-top: 51rpx', 'margin-top: 98rpx', - 'margin-top: 128rpx' + 'margin-top: 141rpx', + 'top: 70rpx', + 'width: 56rpx', + 'inset: 6rpx', + 'entry-button__content', + 'translateX(-20rpx)', + 'font-size: 20rpx', + 'width: 30rpx', + 'height: 30rpx' )) { Assert-Contains -Content $entry -Expected $requiredVisualAnchor -Message "Missing A-01 calibrated visual anchor: $requiredVisualAnchor" } diff --git a/tests/a01-design-record-audit.ps1 b/tests/a01-design-record-audit.ps1 index 6a27db6..73843c9 100644 --- a/tests/a01-design-record-audit.ps1 +++ b/tests/a01-design-record-audit.ps1 @@ -31,7 +31,7 @@ $layoutRules = @( (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogNTFycHg='), (ConvertFrom-Utf8Base64 '5peg5bem5Y+z55+t57q/'), (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogOThycHg='), - (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogMTI4cnB4'), + (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogMTQxcnB4'), (ConvertFrom-Utf8Base64 'ZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20p'), (ConvertFrom-Utf8Base64 '5b2T5YmN6L+Q6KGM5pe26KeG6KeJ5Z+65YeG') )