From ff99c8633e88bc037c53fc9b58e7c456b977c064 Mon Sep 17 00:00:00 2001 From: huazhongmin Date: Sat, 7 Mar 2026 18:40:09 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=E8=AE=BE=E8=AE=A1=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 记录登录页面布局优化方案（方案 A - 紧凑型布局） 包括布局调整、尺寸优化、间距优化和视觉优化 Co-Authored-By: Claude Opus 4.6 --- .../2026-03-07-login-page-optimization.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 docs/plans/2026-03-07-login-page-optimization.md diff --git a/docs/plans/2026-03-07-login-page-optimization.md b/docs/plans/2026-03-07-login-page-optimization.md new file mode 100644 index 0000000..8012289 --- /dev/null +++ b/docs/plans/2026-03-07-login-page-optimization.md @@ -0,0 +1,61 @@ +# 登录页面优化设计 + +## 概述 +优化小程序登录页面布局，解决内容区域过于靠下、输入框和按钮尺寸过大的问题。 + +## 问题清单 +1. 内容区域太靠近底部，上方留白过多 +2. 手机号输入框太长（92rpx），超出登录卡片容器 +3. "开启旅程"按钮太大（100rpx），超出登录区域且显得突兀 +4. 整体布局松散，元素间距过大 + +## 设计方案 + +### 1. 布局调整 +| 属性 | 原值 | 新值 | +|------|------|------| +| `.content` 对齐方式 | `align-items: center` | `align-items: flex-start` | +| `.content` 顶部间距 | `40rpx + safe-area` | `18vh + safe-area` | +| `.login-card` 内边距 | `64rpx 40rpx` | `48rpx 40rpx` | +| `.header` 底部间距 | `64rpx` | `48rpx` | + +### 2. 尺寸优化 +| 元素 | 原尺寸 | 新尺寸 | +|------|--------|--------| +| 标题字号 | 48rpx | 42rpx | +| 副标题字号 | 28rpx | 24rpx | +| 输入框高度 | 92rpx | 80rpx | +| 输入框内边距 | `0 32rpx` | `0 28rpx` | +| 输入框字号 | 28rpx | 26rpx | +| 登录按钮高度 | 100rpx | 88rpx | +| 验证码按钮宽度 | 220rpx | 200rpx | +| 验证码按钮高度 | 92rpx | 80rpx | + +### 3. 间距优化 +| 元素 | 原间距 | 新间距 | +|------|--------|--------| +| 输入组间距 | `32rpx` | `24rpx` | +| 表单底部间距 | `48rpx` | `40rpx` | +| 登录按钮底部间距 | `32rpx` | `24rpx` | +| 标签底部间距 | `16rpx` | `12rpx` | + +### 4. 视觉优化 +- 登录按钮添加 `width: 100%` 确保不超出容器 +- 输入框添加 `box-sizing: border-box` 防止内边距导致溢出 +- 验证码按钮组添加 `width: 100%` 确保整体不溢出 + +## 预期效果 +1. 内容区域从顶部约 18% 高度处开始，视觉重心上移 +2. 输入框和按钮尺寸适中，不再超出容器 +3. 整体布局紧凑，符合移动端登录页面最佳实践 +4. 保持原型设计的玻璃态风格和紫色主题 + +## 修改文件 +- `mini-program/src/pages/login/index.vue` + +## 验收标准 +- [ ] 登录卡片上方留有约 18vh 的留白 +- [ ] 输入框高度为 80rpx，不超出卡片容器 +- [ ] 登录按钮高度为 88rpx，不超出卡片容器 +- [ ] 所有元素在卡片容器内正确显示，无溢出 +- [ ] 移动端各种屏幕尺寸下显示正常