diff --git a/docs/superpowers/specs/2026-07-11-mobile-login-hifi-design.md b/docs/superpowers/specs/2026-07-11-mobile-login-hifi-design.md new file mode 100644 index 00000000..2e58dc39 --- /dev/null +++ b/docs/superpowers/specs/2026-07-11-mobile-login-hifi-design.md @@ -0,0 +1,43 @@ +# 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()` 精确覆盖,避免污染全局控件。