peanut
ff99c8633e
记录登录页面布局优化方案（方案 A - 紧凑型布局） 包括布局调整、尺寸优化、间距优化和视觉优化 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
2.2 KiB
Markdown
62 lines
2.2 KiB
Markdown
# 登录页面优化设计
|
|
|
|
## 概述
|
|
优化小程序登录页面布局，解决内容区域过于靠下、输入框和按钮尺寸过大的问题。
|
|
|
|
## 问题清单
|
|
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，不超出卡片容器
|
|
- [ ] 所有元素在卡片容器内正确显示，无溢出
|
|
- [ ] 移动端各种屏幕尺寸下显示正常
|