# 登录页面优化设计

## 概述
优化小程序登录页面布局，解决内容区域过于靠下、输入框和按钮尺寸过大的问题。

## 问题清单
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，不超出卡片容器
- [ ] 所有元素在卡片容器内正确显示，无溢出
- [ ] 移动端各种屏幕尺寸下显示正常