登录确认弹窗 · UI Demo

场景：员工登录页未勾选协议时点击「登录 / 微信授权」，拦截并弹出确认。 登录页已选定方案 F（精简系统风）；A–F 六套样例全部保留，供其它场景对照选型。 设计说明：docs/superpowers/specs/2026-08-10-login-confirm-dialog-design.md

#0a9f6d #087f57 #e9f9f2 muted border

请先同意协议

登录前需阅读并同意《用户协议》和《隐私政策》。是否同意并继续登录？

A

居中图标双钮

居中卡片 + 软绿勾选图标 + 底部分割线双按钮。最接近微信原生确认框，品牌感清晰，落地成本低，适合作为全局确认弹窗标准。

请先同意协议

登录前需阅读并同意《用户协议》和《隐私政策》。

B

底部抽屉

底部滑出 + 全宽渐变主按钮。拇指操作友好、更「App 化」；后续可复用于筛选 / 操作菜单类场景。

请先同意协议

登录前请阅读以下协议，同意后继续。

用户协议 查看
隐私政策 查看
C

协议入口强化

弹窗内提供协议「查看」行，合规可读性最强。结构略重，适合强监管 / 首次授权场景。

请先同意协议

登录前需阅读并同意《用户协议》和《隐私政策》。是否同意并继续？

D

品牌顶栏

绿色头图强化信任感，视觉冲击最强。注意与登录页绿头图可能略重复，适合作为「重要确认」专用样式。

请先同意协议

登录前需阅读并同意《用户协议》和《隐私政策》。是否同意并继续登录？

E

竖排主次按钮

主按钮全宽置顶、取消弱化文字。转化路径明确，接近部分 App 授权弹窗习惯。

请先同意协议

登录前需阅读并同意《用户协议》和《隐私政策》。是否同意并继续登录？

F

精简系统风

登录采用

最接近系统确认框形态：标题 + 正文 + 底部分割双按钮；确认字色为品牌绿 #0a9f6d。正文中《用户协议》《隐私政策》为快捷链接。本次登录页落地此方案。

登录页：方案 F。 A–F 样例全部保留。其它场景需要确认弹窗时，对照本页选型后再复用或扩展 ConfirmDialog。