prop-ai-hr/docs/superpowers/specs/2026-07-11-mobile-login-hifi-design.md

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() 精确覆盖，避免污染全局控件。