peanut/happy-life-star

Files

T

peanut ff99c8633e docs: 添加登录页面优化设计文档

记录登录页面布局优化方案（方案 A - 紧凑型布局）
包括布局调整、尺寸优化、间距优化和视觉优化

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-07 18:40:09 +08:00

2.2 KiB

Raw Blame History

登录页面优化设计

概述

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

问题清单

内容区域太靠近底部，上方留白过多
手机号输入框太长（92rpx），超出登录卡片容器
"开启旅程"按钮太大（100rpx），超出登录区域且显得突兀
整体布局松散，元素间距过大

设计方案

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% 确保整体不溢出

预期效果

内容区域从顶部约 18% 高度处开始，视觉重心上移
输入框和按钮尺寸适中，不再超出容器
整体布局紧凑，符合移动端登录页面最佳实践
保持原型设计的玻璃态风格和紫色主题

修改文件

mini-program/src/pages/login/index.vue

验收标准

登录卡片上方留有约 18vh 的留白
输入框高度为 80rpx，不超出卡片容器
登录按钮高度为 88rpx，不超出卡片容器
所有元素在卡片容器内正确显示，无溢出
移动端各种屏幕尺寸下显示正常