# mobile-uni 登录页高保真设计

## 目标

将 `mobile-uni` 短信登录页按银城员工端高保真原型重做。主要验收尺寸为 375–430px 宽的手机 H5；平板和桌面端采用居中限宽布局，不同比放大。

## 范围

- 只调整 `mobile-uni/src/pages/auth/login/index.vue` 的页面结构与视觉样式。
- 保留现有手机号校验、验证码发送、短信登录、认证信息保存、原路跳转与已登录自动跳转逻辑。
- 复用 `/static/brand-logo.png`，不新增图片或第三方依赖。
- 不修改后端接口、认证协议、岗位确认流程和其他业务页面。

## 视觉设计

- 页面使用柔和灰白背景和轻微径向高光，整体保持克制、清洁的企业服务气质。
- 品牌区按“银城物业 | 数字师傅”横向排布，使用现有品牌图标；“数字师傅”使用品牌绿。
- 主标题为“银城员工端”，副标题为“高效协同 · 贴心服务 · 让工作更简单”。
- 表单使用白色圆角卡片、银城红顶边和轻阴影。
- 手机号、验证码采用顶部标签；输入框使用线性手机/盾牌图标。
- 验证码输入与获取按钮在 375px 及以上保持并排，按钮使用红色描边。
- 登录按钮通栏显示，使用银城红、白色大字号和轻微高光。
- 表单校验错误和接口反馈继续显示在卡片内，不遮挡主要操作。

## 响应式与可用性

- 页面主体最大宽度约 720px，手机端使用 22–30px 水平留白。
- 375–430px 宽度下优先保持原型比例和表单操作密度。
- 极窄屏通过压缩字号、间距和验证码按钮宽度保持并排；不把验证码按钮拆成独立整行。
- 输入框保持数字键盘、长度限制、纯数字归一化和清晰的聚焦边界。
- 发送中、登录中继续禁用对应按钮，防止重复请求。

## 验证

- 运行 `mobile-uni` 现有测试和 H5 构建。
- 使用本地 H5 页面在手机视口检查品牌区、标题、卡片、验证码行和登录按钮。
- 检查 375px、390px、430px 以及桌面宽度下的溢出和对齐。
- 确认 `/resource/sms/code` 与 `/auth/mobile/sms-login` 请求逻辑未改变。

## 风险控制

- 当前登录页已有未提交修改，实现时以现有工作区为基线做最小增量调整，不覆盖其他文件。
- `uni-easyinput` 包含内部样式，使用页面作用域内的 `:deep()` 精确覆盖，避免污染全局控件。