小程序登录页 UI 设计
日期：2026-08-10
适用范围：中科兴皖员工专用小程序（单端，无供应商/配送员端）
视觉 Demo：mobile-ui/zkxw-mobile-login-ui-demo.html
品牌 Token：对齐 docs/miniprogram-ui-spec-sanqiang.md §2（非 web-admin Fresh Mint）
关联：docs/superpowers/specs/2026-08-10-mobile-h5-vant-ui-design.md
1. 目标与约束
1.1 目标
- 提供员工登录入口：账号密码登录为主，微信授权登录为次。
- 固化布局方案 B（居中品牌 + 白卡片表单 + 底部微信次要按钮）的视觉与交互。
- 以可打开的 HTML Demo 作为后续 uni-app / Vant 实现的权威参考。
1.2 已确认需求
| 项 |
约定 |
| 受众 |
公司员工，仅一套登录 UI |
| 主登录 |
用户名 / 工号 + 密码（与 web-admin 账号一致） |
| 次登录 |
微信授权登录（按钮前为微信官方 Logo） |
| 辅助 |
可含《用户协议》《隐私政策》勾选 |
| 不做 |
忘记密码、注册、记住密码；本期不联调真实 API |
1.3 硬约束
| 项 |
约定 |
| 主色 |
#0a9f6d / #087f57 / #e9f9f2 |
| 禁止 |
使用 web-admin #10b981 作为主色 |
| 基线宽度 |
375px，兼容 414px |
| 触达 |
主按钮高度 ≥ 44px |
| 微信图标 |
mobile-ui/assets/wechat-logo.png（由 wx-logo.jpeg 去黑底导出） |
2. 布局方案（已选 B）
2.1 结构（自上而下）
- 品牌区（居中）：Logo 方标 +「中科兴皖」+ 副文案「员工工作台登录」
- 表单白卡片：账号 → 密码（可显隐）→ 主色「登录」→ 协议勾选
- 次要区：「或」分隔线 → 描边「微信授权登录」（左侧微信 Logo）
2.2 背景
- 页面底：
#f5f8f7，叠加浅绿 / 大麦黄径向渐变光斑（与 mobile-h5 Demo 氛围一致）
- 不使用大色块绿渐变 Header（方案 A / C 已否决）
2.3 未选方案摘要
| 方案 |
说明 |
结论 |
| A Header + 浮卡 |
与工作台顶栏一致 |
未选 |
| B 居中卡片 |
轻背景 + 居中品牌 + 白卡片 |
已选 |
| C 大品牌区 + 抽屉 |
上半屏强品牌 |
未选 |
3. 组件与字段
| 元素 |
规格 |
| 账号 |
label「账号」；placeholder「请输入用户名 / 工号」 |
| 密码 |
label「密码」；placeholder「请输入密码」；右侧明文/密文切换 |
| 登录按钮 |
主色实心，文案「登录」；高度 44px；圆角约 12px |
| 协议 |
圆形勾选 +「已阅读并同意《用户协议》和《隐私政策》」；链接色为主色 |
| 微信按钮 |
白底描边；左侧 wechat-logo.png；文案「微信授权登录」 |
4. 交互与状态
- 协议门禁：未勾选时，点击「登录」或「微信授权登录」均提示「请先同意用户协议与隐私政策」（Toast）。
- 空校验：账号或密码为空时提示补全。
- 失败：账号或密码错误时 Toast 或字段级错误文案（Demo 可模拟）。
- 加载：提交中按钮禁用并显示 loading，防重复点击。
- 成功（Demo）：Toast「登录成功」即可；真实落地后跳转工作台首页。
- 微信授权（Demo）：仅模拟点击反馈；真实落地调用小程序登录能力后再换票。
5. 交付物
| 角色 |
路径 |
| HTML Demo |
mobile-ui/zkxw-mobile-login-ui-demo.html |
| 微信 Logo |
mobile-ui/assets/wechat-logo.png、wechat-logo-32.png；工程内 mobile-h5/static/wechat-logo.png |
| 本设计说明 |
docs/superpowers/specs/2026-08-10-miniprogram-login-ui-design.md |
| 实现计划 |
docs/superpowers/plans/2026-08-10-miniprogram-login-ui.md |
| uni-app 登录页（Mock） |
mobile-h5/pages/login/index.vue |
后续业务实现 SHALL 以 Demo 为准；Token SHALL 以三墙色板为准。
6. 非目标（后续另开）
- 后端账号 / 微信绑定与换票接口联调
- 《用户协议》《隐私政策》正文页内容撰写
已落地（Mock，非真实 API）： mobile-h5 登录页 UI、mock 鉴权、启动路由、工作台退出；UI 规范已追加登录页指向。
