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