fix: refine A01 runtime visual calibration

This commit is contained in:
rain
2026-07-13 15:41:51 +08:00
parent f7d6d3cfb1
commit 83d58268ac
5 changed files with 46 additions and 27 deletions
+5 -5
View File
@@ -3,17 +3,17 @@
- Source visual truth: `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` - Source visual truth: `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png`
- Target state: `412 × 915`, agreement unchecked. - Target state: `412 × 915`, agreement unchecked.
- Static contract: passed on 2026-07-13. - Static contract: passed on 2026-07-13.
- Runtime screenshot: pending. - Runtime screenshot: first capture reviewed on 2026-07-13; second capture pending.
## Evidence ## Evidence
- `pages/auth/entry.vue` uses real DOM and local background assets; the whole-image page layer remains absent. - 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 static contract verifies the calibrated header height, title spacing, divider width, button dimensions and all four vertical anchors. - 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 rejected registration side lines and four-corner button brackets are forbidden by the contract. - 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 ## 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. - [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. - Confirm that selecting the agreement enables only the existing A-02 login route; the other entries remain local prepared-state prompts.
@@ -34,12 +34,15 @@
| 元素 | 412 × 915 像素基准 | 750rpx 实现基准 | | 元素 | 412 × 915 像素基准 | 750rpx 实现基准 |
| --- | --- | --- | | --- | --- | --- |
| 朱砂家祠头图 | 高 139px | 高 253rpx | | 朱砂家祠头图 | 高 139px | 高 253rpx |
| 红头谱印 | 比头图顶边低约 38px | `top: 70rpx` |
| 标题区起点 | 红头后约 82px | `padding-top: 150rpx` | | 标题区起点 | 红头后约 82px | `padding-top: 150rpx` |
| 标题两侧云纹 | 紧贴标题两侧,不扩张标题组宽度 | `56rpx × 34rpx`,标题左右各 12rpx |
| 标题分隔饰线 | 宽约 234px | 宽 426rpx;上、下间距独立 | | 标题分隔饰线 | 宽约 234px | 宽 426rpx;上、下间距独立 |
| 两个按钮 | x=60px,宽约 291px,高约 65px | `margin: 95rpx 110rpx 0`,高 118rpx | | 两个按钮 | x=60px,宽约 291px,高约 65px | `margin: 95rpx 110rpx 0`,高 118rpx |
| 两按钮间距 | 约 28px | `margin-top: 51rpx` | | 两按钮间距 | 约 28px | `margin-top: 51rpx` |
| 按钮内框与内容组 | 内框距外边约 3px;图标与文字整体偏左 | `inset: 6rpx`,内容组 `translateX(-20rpx)` |
| 注册入口 | 微信按钮后约 56px;无左右短线 | `margin-top: 98rpx` | | 注册入口 | 微信按钮后约 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)` - 上表是 A-01 运行时布局数值的唯一所有者。320 × 568 时页面允许纵向滚动,根容器不得以 `overflow: hidden` 截断协议行或系统安全区;底部内边距包含 `env(safe-area-inset-bottom)`
- 仅作静态设计验证,不代表 uni-app 运行时验收;页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。 - 仅作静态设计验证,不代表 uni-app 运行时验收;页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。
@@ -67,7 +70,7 @@
- 此结论只验证设计稿与固定栅格,不替代 uni-app 页面实现后的 Android 运行时验收。 - 此结论只验证设计稿与固定栅格,不替代 uni-app 页面实现后的 Android 运行时验收。
- 仍未确定《家谱用户协议》与《隐私政策》的最终页面去向及返回路径;在这两页完成设计前,A-01 不得标记为完整设计完成。 - 仍未确定《家谱用户协议》与《隐私政策》的最终页面去向及返回路径;在这两页完成设计前,A-01 不得标记为完整设计完成。
- 页面实现阶段仍须按本记录在 Android 实机或同等运行环境复核四个尺寸的安全区、滚动与文字折行。 - 页面实现阶段仍须按本记录在 Android 实机或同等运行环境复核四个尺寸的安全区、滚动与文字折行。
- 2026-07-13 已按 412 × 915 参考图重新校准真实 DOM 的标题区、分隔饰线、双按钮、注册入口与协议行;静态合同通过,但仍须由同尺寸 HBuilderX 或 Android 截图叠图确认,未确认前不得标记 A-01 完成。 - 2026-07-13 已按 412 × 915 参考图完成第一轮真实 DOM 校准;运行时截图显示容器位置已接近基准,但红头谱印、标题云纹、按钮内容组和协议行仍有子元素偏差,已进入第二轮校准。未取得第二轮同尺寸截图确认前不得标记 A-01 完成。
## 5. 推进约束 ## 5. 推进约束
+22 -14
View File
@@ -30,14 +30,18 @@
<view class="entry-actions"> <view class="entry-actions">
<view class="entry-button entry-button--primary" hover-class="entry-button--pressed" @click="openLogin"> <view class="entry-button entry-button--primary" hover-class="entry-button--pressed" @click="openLogin">
<view class="entry-button__content">
<image class="entry-button__icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" /> <image class="entry-button__icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
<text>登录</text> <text>登录</text>
</view> </view>
</view>
<view class="entry-button entry-button--secondary" hover-class="entry-button--pressed" @click="prepareWechatLogin"> <view class="entry-button entry-button--secondary" hover-class="entry-button--pressed" @click="prepareWechatLogin">
<view class="entry-button__content">
<image class="entry-button__icon entry-button__icon--wechat" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" /> <image class="entry-button__icon entry-button__icon--wechat" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
<text>微信登录</text> <text>微信登录</text>
</view> </view>
</view>
<view class="register-link" hover-class="link-hover" @click="prepareRegister"> <view class="register-link" hover-class="link-hover" @click="prepareRegister">
<text>还没有账号<text class="register-emphasis">注册账号</text></text> <text>还没有账号<text class="register-emphasis">注册账号</text></text>
@@ -135,7 +139,7 @@ const prepareAgreement = () => {
.header-seal { .header-seal {
position: absolute; position: absolute;
top: 44rpx; top: 70rpx;
left: 50%; left: 50%;
width: 136rpx; width: 136rpx;
height: 136rpx; height: 136rpx;
@@ -158,7 +162,7 @@ const prepareAgreement = () => {
} }
.brand-title { .brand-title {
margin: 0 24rpx; margin: 0 12rpx;
font-family: STKaiti, KaiTi, serif; font-family: STKaiti, KaiTi, serif;
font-size: 112rpx; font-size: 112rpx;
font-weight: 700; font-weight: 700;
@@ -167,12 +171,12 @@ const prepareAgreement = () => {
} }
.title-cloud { .title-cloud {
width: 76rpx; width: 56rpx;
height: 46rpx; height: 34rpx;
} }
.title-cloud-left { margin-right: 10rpx; } .title-cloud-left { margin-right: 0; }
.title-cloud-right { margin-left: 10rpx; transform: scaleX(-1); } .title-cloud-right { margin-left: 0; transform: scaleX(-1); }
.brand-divider { .brand-divider {
display: flex; display: flex;
@@ -224,7 +228,7 @@ const prepareAgreement = () => {
.entry-button::after { .entry-button::after {
position: absolute; position: absolute;
inset: 10rpx; inset: 6rpx;
border: 1rpx solid rgba(225, 180, 105, 0.92); border: 1rpx solid rgba(225, 180, 105, 0.92);
border-radius: 2rpx; border-radius: 2rpx;
content: ''; content: '';
@@ -246,8 +250,6 @@ const prepareAgreement = () => {
} }
.entry-button__icon { .entry-button__icon {
position: relative;
z-index: 1;
width: 46rpx; width: 46rpx;
height: 46rpx; height: 46rpx;
margin-right: 18rpx; margin-right: 18rpx;
@@ -255,7 +257,13 @@ const prepareAgreement = () => {
.entry-button__icon--wechat { width: 52rpx; } .entry-button__icon--wechat { width: 52rpx; }
.entry-button--primary .entry-button__icon { filter: brightness(0) invert(1); } .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; } .entry-button--pressed { opacity: 0.84; }
.register-link { .register-link {
@@ -278,10 +286,10 @@ const prepareAgreement = () => {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
margin-top: 128rpx; margin-top: 141rpx;
padding: 0 44rpx calc(32rpx + env(safe-area-inset-bottom)); padding: 0 44rpx calc(32rpx + env(safe-area-inset-bottom));
color: #6b5a4a; color: #6b5a4a;
font-size: 24rpx; font-size: 20rpx;
line-height: 1.7; line-height: 1.7;
} }
@@ -291,8 +299,8 @@ const prepareAgreement = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
width: 28rpx; width: 30rpx;
height: 28rpx; height: 30rpx;
margin: 7rpx 12rpx 0 0; margin: 7rpx 12rpx 0 0;
border: 2rpx solid #b88d4b; border: 2rpx solid #b88d4b;
border-radius: 50%; border-radius: 50%;
+9 -1
View File
@@ -86,7 +86,15 @@ foreach ($requiredVisualAnchor in @(
'height: 118rpx', 'height: 118rpx',
'margin-top: 51rpx', 'margin-top: 51rpx',
'margin-top: 98rpx', '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" Assert-Contains -Content $entry -Expected $requiredVisualAnchor -Message "Missing A-01 calibrated visual anchor: $requiredVisualAnchor"
} }
+1 -1
View File
@@ -31,7 +31,7 @@ $layoutRules = @(
(ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogNTFycHg='), (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogNTFycHg='),
(ConvertFrom-Utf8Base64 '5peg5bem5Y+z55+t57q/'), (ConvertFrom-Utf8Base64 '5peg5bem5Y+z55+t57q/'),
(ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogOThycHg='), (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogOThycHg='),
(ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogMTI4cnB4'), (ConvertFrom-Utf8Base64 'bWFyZ2luLXRvcDogMTQxcnB4'),
(ConvertFrom-Utf8Base64 'ZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20p'), (ConvertFrom-Utf8Base64 'ZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20p'),
(ConvertFrom-Utf8Base64 '5b2T5YmN6L+Q6KGM5pe26KeG6KeJ5Z+65YeG') (ConvertFrom-Utf8Base64 '5b2T5YmN6L+Q6KGM5pe26KeG6KeJ5Z+65YeG')
) )