This commit is contained in:
zlwu committed 2026-08-11 11:13:01 +08:00
1 parent 80138c6388
commit 693e8a678e
682 files changed
+211375 -5306

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

@@ -0,0 +1,465 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>中科兴皖 · 登录确认弹窗 UI Demo</title>
<style>
:root {
--brand-green: #0a9f6d;
--brand-green-dark: #087f57;
--brand-green-soft: #e9f9f2;
--barley-yellow: #d6a343;
--bg-page: #f5f8f7;
--surface: #ffffff;
--text-primary: #1f2a26;
--text-muted: #6b7b74;
--border: #dcebe4;
--shadow-soft: 0 4px 16px rgba(8, 127, 87, 0.08);
--shadow-modal: 0 16px 40px rgba(8, 127, 87, 0.18);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
color: var(--text-primary);
background:
radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
radial-gradient(700px 380px at 90% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
}
body { padding: 24px 16px 48px; }
.page {
max-width: 1180px;
margin: 0 auto;
}
.hero {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 22px 18px;
box-shadow: var(--shadow-soft);
margin-bottom: 20px;
}
.hero h1 {
margin: 0 0 6px;
font-size: 22px;
color: var(--brand-green-dark);
}
.hero .sub {
margin: 0 0 14px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
max-width: 720px;
}
.token-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.token-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-muted);
background: #fff; border: 1px solid var(--border);
border-radius: 999px; padding: 4px 8px 4px 4px;
}
.token-chip i {
width: 14px; height: 14px; border-radius: 50%; display: block;
}
.notes {
margin: 0; padding: 0; list-style: none;
font-size: 12px; color: var(--text-muted); line-height: 1.55;
display: grid; gap: 4px;
}
.notes li { position: relative; padding-left: 12px; }
.notes li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 5px; height: 5px; border-radius: 50%; background: var(--brand-green);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.card {
background: rgba(255,255,255,.94);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
}
.card.is-rec { border-color: rgba(10, 159, 109, 0.45); box-shadow: 0 8px 24px rgba(8, 127, 87, 0.12); }
.preview {
height: 420px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px;
background:
radial-gradient(320px 180px at 18% 0%, rgba(10,159,109,.14), transparent 60%),
linear-gradient(180deg, #eaf6f1, #f5f8f7);
}
.preview.align-end { align-items: flex-end; }
.mask {
position: absolute; inset: 0;
background: rgba(15, 30, 24, 0.32);
}
.meta { padding: 16px 18px 18px; border-top: 1px solid var(--border); }
.meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.letter {
width: 24px; height: 24px; border-radius: 50%;
background: var(--brand-green); color: #fff;
font-size: 12px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.meta h2 { margin: 0; font-size: 16px; }
.tag {
font-size: 10px; font-weight: 650; color: var(--brand-green-dark);
background: var(--brand-green-soft); border-radius: 999px; padding: 2px 8px;
}
.meta p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.meta code {
font-size: 11px; background: #f3f6f5; padding: 1px 5px; border-radius: 4px;
}
/* ===== Dialog shared ===== */
.dlg {
position: relative; z-index: 1;
width: 100%; max-width: 286px;
}
.dlg a { color: var(--brand-green); text-decoration: none; font-weight: 500; }
.dlg a:hover { text-decoration: underline; }
/* A */
.a-box {
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow-modal);
}
.a-body { padding: 24px 20px 18px; text-align: center; }
.a-icon {
width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
background: var(--brand-green-soft); color: var(--brand-green-dark);
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700;
}
.a-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.a-desc { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.a-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.a-btns button {
border: 0; background: transparent; padding: 14px 8px; font-size: 15px; cursor: pointer;
}
.a-btns .cancel { color: var(--text-muted); border-right: 1px solid var(--border); }
.a-btns .ok { color: var(--brand-green); font-weight: 650; }
.a-btns button:active { background: #f7faf9; }
/* B */
.b-sheet {
background: #fff;
border-radius: 20px 20px 14px 14px;
padding: 10px 18px 16px;
box-shadow: 0 -10px 32px rgba(8, 127, 87, 0.16);
width: 100%;
max-width: 320px;
}
.b-handle {
width: 40px; height: 4px; border-radius: 99px;
background: #d5e5de; margin: 0 auto 14px;
}
.b-title { margin: 0 0 8px; font-size: 18px; font-weight: 650; }
.b-desc { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.b-ok {
width: 100%; border: 0; border-radius: 12px; padding: 14px;
background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
color: #fff; font-size: 15px; font-weight: 650; cursor: pointer;
}
.b-cancel {
width: 100%; border: 0; background: transparent;
color: var(--text-muted); font-size: 14px; padding: 12px 0 2px; cursor: pointer;
}
/* C */
.c-box {
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow-modal);
}
.c-body { padding: 22px 18px 12px; }
.c-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; text-align: center; }
.c-desc { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.55; text-align: center; }
.c-links { display: flex; flex-direction: column; gap: 8px; }
.c-link {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
font-size: 13px; color: var(--text-primary); background: #fafcfb; cursor: pointer;
}
.c-link span { color: var(--brand-green); font-size: 12px; font-weight: 500; }
.c-btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 12px 14px 16px; }
.c-btns button {
border: 0; border-radius: 10px; padding: 12px 8px; font-size: 14px; cursor: pointer;
}
.c-btns .cancel { background: #f3f6f5; color: var(--text-muted); }
.c-btns .ok { background: var(--brand-green); color: #fff; font-weight: 650; }
/* D */
.d-box {
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: var(--shadow-modal); text-align: center;
}
.d-hero {
background: linear-gradient(160deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
padding: 24px 16px 20px; color: #fff;
}
.d-badge {
width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
}
.d-hero h3 { margin: 0; font-size: 17px; font-weight: 650; }
.d-body { padding: 14px 18px 6px; }
.d-desc { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.d-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 18px; }
.d-btns button {
border: 0; border-radius: 10px; padding: 12px 8px; font-size: 14px; cursor: pointer;
}
.d-btns .cancel { background: #f3f6f5; color: var(--text-muted); }
.d-btns .ok { background: var(--brand-green); color: #fff; font-weight: 650; }
/* E */
.e-box {
background: #fff; border-radius: 16px; padding: 24px 18px 16px;
box-shadow: var(--shadow-modal); text-align: center;
}
.e-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.e-desc { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.e-ok {
width: 100%; border: 0; border-radius: 12px; padding: 14px;
background: var(--brand-green); color: #fff; font-size: 15px; font-weight: 650;
margin-bottom: 4px; cursor: pointer;
}
.e-cancel {
width: 100%; border: 0; background: transparent;
color: var(--text-muted); font-size: 14px; padding: 12px; cursor: pointer;
}
/* F */
.f-box {
background: #fff; border-radius: 14px; overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.f-body { padding: 22px 18px 16px; text-align: center; }
.f-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.f-desc { margin: 0; font-size: 13px; color: #555; line-height: 1.5; }
.f-desc a { color: var(--brand-green); text-decoration: none; font-weight: 500; }
.f-desc a:hover { text-decoration: underline; }
.f-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e8e8e8; }
.f-btns button {
border: 0; background: transparent; padding: 13px; font-size: 16px; cursor: pointer;
}
.f-btns .cancel { color: #666; border-right: 1px solid #e8e8e8; }
.f-btns .ok { color: var(--brand-green); font-weight: 600; }
.live-hint {
margin-top: 18px;
padding: 14px 16px;
border-radius: 12px;
background: var(--brand-green-soft);
color: var(--brand-green-dark);
font-size: 12px;
line-height: 1.55;
}
</style>
</head>
<body>
<div class="page">
<header class="hero">
<h1>登录确认弹窗 · UI Demo</h1>
<p class="sub">
场景:员工登录页未勾选协议时点击「登录 / 微信授权」,拦截并弹出确认。
<strong>登录页已选定方案 F(精简系统风)</strong>;A–F 六套样例全部保留,供其它场景对照选型。
设计说明:<code>docs/superpowers/specs/2026-08-10-login-confirm-dialog-design.md</code>
</p>
<div class="token-row">
<span class="token-chip"><i style="background:#0a9f6d"></i>#0a9f6d</span>
<span class="token-chip"><i style="background:#087f57"></i>#087f57</span>
<span class="token-chip"><i style="background:#e9f9f2"></i>#e9f9f2</span>
<span class="token-chip"><i style="background:#6b7b74"></i>muted</span>
<span class="token-chip"><i style="background:#dcebe4"></i>border</span>
</div>
<ul class="notes">
<li>视觉对齐三墙 Token,与登录页 Demo(<code>zkxw-mobile-login-ui-demo.html</code>)一致</li>
<li>文案基线:标题「请先同意协议」;主按钮「同意并登录」;次按钮「取消」</li>
<li>协议名可点击跳转协议页(样例 A/B/C/D/E);选定方案后落到自定义组件,替代 <code>uni.showModal</code></li>
</ul>
</header>
<div class="grid">
<!-- A -->
<article class="card" id="A">
<div class="preview">
<div class="mask"></div>
<div class="dlg a-box">
<div class="a-body">
<div class="a-icon" aria-hidden="true">✓</div>
<h3 class="a-title">请先同意协议</h3>
<p class="a-desc">登录前需阅读并同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私政策》</a>。是否同意并继续登录?</p>
</div>
<div class="a-btns">
<button type="button" class="cancel">取消</button>
<button type="button" class="ok">同意并登录</button>
</div>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">A</span>
<h2>居中图标双钮</h2>
</div>
<p>居中卡片 + 软绿勾选图标 + 底部分割线双按钮。最接近微信原生确认框,品牌感清晰,落地成本低,适合作为全局确认弹窗标准。</p>
</div>
</article>
<!-- B -->
<article class="card" id="B">
<div class="preview align-end">
<div class="mask"></div>
<div class="dlg b-sheet">
<div class="b-handle" aria-hidden="true"></div>
<h3 class="b-title">请先同意协议</h3>
<p class="b-desc">登录前需阅读并同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私政策》</a>。</p>
<button type="button" class="b-ok">同意并登录</button>
<button type="button" class="b-cancel">取消</button>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">B</span>
<h2>底部抽屉</h2>
</div>
<p>底部滑出 + 全宽渐变主按钮。拇指操作友好、更「App 化」;后续可复用于筛选 / 操作菜单类场景。</p>
</div>
</article>
<!-- C -->
<article class="card" id="C">
<div class="preview">
<div class="mask"></div>
<div class="dlg c-box">
<div class="c-body">
<h3 class="c-title">请先同意协议</h3>
<p class="c-desc">登录前请阅读以下协议,同意后继续。</p>
<div class="c-links">
<div class="c-link">用户协议 <span>查看</span></div>
<div class="c-link">隐私政策 <span>查看</span></div>
</div>
</div>
<div class="c-btns">
<button type="button" class="cancel">取消</button>
<button type="button" class="ok">同意并登录</button>
</div>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">C</span>
<h2>协议入口强化</h2>
</div>
<p>弹窗内提供协议「查看」行,合规可读性最强。结构略重,适合强监管 / 首次授权场景。</p>
</div>
</article>
<!-- D -->
<article class="card" id="D">
<div class="preview">
<div class="mask"></div>
<div class="dlg d-box">
<div class="d-hero">
<div class="d-badge" aria-hidden="true">🛡</div>
<h3>请先同意协议</h3>
</div>
<div class="d-body">
<p class="d-desc">登录前需阅读并同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私政策》</a>。是否同意并继续?</p>
</div>
<div class="d-btns">
<button type="button" class="cancel">取消</button>
<button type="button" class="ok">同意并登录</button>
</div>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">D</span>
<h2>品牌顶栏</h2>
</div>
<p>绿色头图强化信任感,视觉冲击最强。注意与登录页绿头图可能略重复,适合作为「重要确认」专用样式。</p>
</div>
</article>
<!-- E -->
<article class="card" id="E">
<div class="preview">
<div class="mask"></div>
<div class="dlg e-box">
<h3 class="e-title">请先同意协议</h3>
<p class="e-desc">登录前需阅读并同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私政策》</a>。是否同意并继续登录?</p>
<button type="button" class="e-ok">同意并登录</button>
<button type="button" class="e-cancel">取消</button>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">E</span>
<h2>竖排主次按钮</h2>
</div>
<p>主按钮全宽置顶、取消弱化文字。转化路径明确,接近部分 App 授权弹窗习惯。</p>
</div>
</article>
<!-- F -->
<article class="card is-rec" id="F">
<div class="preview">
<div class="mask"></div>
<div class="dlg f-box">
<div class="f-body">
<h3 class="f-title">请先同意协议</h3>
<p class="f-desc">登录前需阅读并同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私政策》</a>。是否同意并继续登录?</p>
</div>
<div class="f-btns">
<button type="button" class="cancel">取消</button>
<button type="button" class="ok">同意并登录</button>
</div>
</div>
</div>
<div class="meta">
<div class="meta-top">
<span class="letter">F</span>
<h2>精简系统风</h2>
<span class="tag">登录采用</span>
</div>
<p>最接近系统确认框形态:标题 + 正文 + 底部分割双按钮;确认字色为品牌绿 <code>#0a9f6d</code>。正文中《用户协议》《隐私政策》为快捷链接。<strong>本次登录页落地此方案。</strong></p>
</div>
</article>
</div>
<p class="live-hint">
<strong>登录页:方案 F。</strong> A–F 样例全部保留。其它场景需要确认弹窗时,对照本页选型后再复用或扩展 <code>ConfirmDialog</code>。
</p>
</div>
</body>
</html>
+671
View File
@@ -0,0 +1,671 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>中科兴皖 · 登录页 UI Demo</title>
<style>
:root {
--brand-green: #0a9f6d;
--brand-green-dark: #087f57;
--brand-green-soft: #e9f9f2;
--barley-yellow: #d6a343;
--barley-yellow-soft: #fff7e8;
--bg-page: #f5f8f7;
--surface: #ffffff;
--text-primary: #1f2a26;
--text-muted: #6b7b74;
--border: #dcebe4;
--danger: #d14343;
--radius-card: 16px;
--radius-ctrl: 12px;
--shadow-soft: 0 4px 16px rgba(8, 127, 87, 0.08);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
color: var(--text-primary);
background:
radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
radial-gradient(700px 380px at 90% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
}
body {
display: flex;
justify-content: center;
padding: 24px 16px 40px;
}
#app {
width: 100%;
max-width: 980px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 860px) {
#app { grid-template-columns: 1fr; }
.doc-panel { position: static; }
}
.doc-panel {
position: sticky;
top: 24px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px 18px;
box-shadow: var(--shadow-soft);
}
.doc-panel h1 {
margin: 0 0 6px;
font-size: 20px;
line-height: 1.3;
color: var(--brand-green-dark);
}
.doc-panel .sub {
margin: 0 0 16px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.token-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.token-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-muted);
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 8px 4px 4px;
}
.token-chip i {
width: 14px;
height: 14px;
border-radius: 50%;
display: block;
}
.notes {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
color: var(--text-muted);
line-height: 1.55;
}
.notes li {
position: relative;
padding-left: 12px;
margin-bottom: 6px;
}
.notes li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brand-green);
}
.phone-stage {
display: flex;
justify-content: center;
}
.phone {
width: 390px;
height: 844px;
background: #111;
border-radius: 42px;
padding: 12px;
box-shadow:
0 24px 60px rgba(15, 40, 30, 0.18),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
position: relative;
}
.phone::before {
content: "";
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 118px;
height: 28px;
background: #0a0a0a;
border-radius: 20px;
z-index: 5;
}
.phone-screen {
width: 100%;
height: 100%;
border-radius: 32px;
overflow: hidden;
background: var(--bg-page);
position: relative;
display: flex;
flex-direction: column;
}
.status-bar {
height: 54px;
padding: 16px 22px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
position: relative;
z-index: 2;
flex-shrink: 0;
}
.status-bar .icons {
display: flex;
gap: 5px;
align-items: center;
opacity: 0.75;
font-size: 10px;
}
.login-scroll {
flex: 1;
overflow-y: auto;
padding: 12px 24px 28px;
background:
radial-gradient(260px 160px at 8% -8%, rgba(10, 159, 109, 0.16), transparent 60%),
radial-gradient(220px 140px at 96% 4%, rgba(214, 163, 67, 0.14), transparent 55%),
linear-gradient(180deg, #eef6f2 0%, #f5f8f7 48%, #f3f6f5 100%);
}
.brand {
text-align: center;
padding: 28px 0 22px;
}
.brand-mark {
width: 64px;
height: 64px;
margin: 0 auto 12px;
border-radius: 18px;
background: linear-gradient(145deg, var(--brand-green-dark), var(--brand-green));
color: #fff;
font-size: 26px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(8, 127, 87, 0.28);
letter-spacing: 0.02em;
}
.brand h2 {
margin: 0;
font-size: 22px;
font-weight: 650;
letter-spacing: 0.03em;
}
.brand p {
margin: 8px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 20px 18px 18px;
box-shadow: var(--shadow-soft);
}
.field {
margin-bottom: 14px;
}
.field label {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 6px;
}
.field-control {
position: relative;
display: flex;
align-items: center;
}
.field-control input {
width: 100%;
height: 44px;
border: 1px solid var(--border);
border-radius: 10px;
background: #f8fbfa;
padding: 0 12px;
font-size: 14px;
color: var(--text-primary);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.field-control input:focus {
border-color: var(--brand-green);
box-shadow: 0 0 0 3px rgba(10, 159, 109, 0.12);
background: #fff;
}
.field-control input.is-error {
border-color: var(--danger);
}
.field-control.with-action input {
padding-right: 52px;
}
.field-action {
position: absolute;
right: 10px;
appearance: none;
border: none;
background: transparent;
color: var(--brand-green);
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 6px;
min-height: 32px;
}
.field-error {
margin-top: 6px;
font-size: 12px;
color: var(--danger);
display: none;
}
.field-error.show { display: block; }
.btn-primary {
width: 100%;
height: 44px;
border: none;
border-radius: var(--radius-ctrl);
background: var(--brand-green);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .15s, opacity .15s;
}
.btn-primary:hover { background: var(--brand-green-dark); }
.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-primary .spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #fff;
border-radius: 50%;
animation: spin .7s linear infinite;
display: none;
}
.btn-primary.is-loading .spinner { display: block; }
.btn-primary.is-loading .btn-text { opacity: 0.9; }
@keyframes spin { to { transform: rotate(360deg); } }
.agree {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 14px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
cursor: pointer;
user-select: none;
}
.agree input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.agree-box {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--brand-green);
flex-shrink: 0;
margin-top: 1px;
position: relative;
transition: background .15s;
}
.agree input:checked + .agree-box {
background: var(--brand-green);
}
.agree input:checked + .agree-box::after {
content: "";
position: absolute;
left: 4px;
top: 2px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.agree a {
color: var(--brand-green);
text-decoration: none;
}
.agree a:hover { text-decoration: underline; }
.divider {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0 14px;
font-size: 12px;
color: var(--text-muted);
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
.btn-wechat {
width: 100%;
height: 44px;
border-radius: var(--radius-ctrl);
border: 1px solid var(--border);
background: #fff;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .15s, border-color .15s;
}
.btn-wechat:hover {
background: #f8fbfa;
border-color: #b7d9cb;
}
.btn-wechat:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-wechat img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.home-indicator {
height: 22px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
flex-shrink: 0;
background: transparent;
position: absolute;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.home-indicator span {
width: 120px;
height: 4px;
border-radius: 4px;
background: rgba(31, 42, 38, 0.22);
}
.toast {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
background: rgba(31, 42, 38, 0.88);
color: #fff;
font-size: 13px;
padding: 10px 16px;
border-radius: 10px;
max-width: 78%;
text-align: center;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
z-index: 20;
}
.toast.show { opacity: 1; }
</style>
</head>
<body>
<div id="app">
<aside class="doc-panel">
<h1>登录页 Demo</h1>
<p class="sub">方案 B · 账号密码为主 · 微信授权为次<br/>权威说明见设计文档</p>
<div class="token-row">
<span class="token-chip"><i style="background:#0a9f6d"></i>#0a9f6d</span>
<span class="token-chip"><i style="background:#087f57"></i>#087f57</span>
<span class="token-chip"><i style="background:#f5f8f7;border:1px solid #dcebe4"></i>#f5f8f7</span>
</div>
<ul class="notes">
<li>账号:用户名 / 工号(与 web-admin 一致)</li>
<li>未勾选协议时拦截两种登录</li>
<li>微信按钮使用 <code>assets/wechat-logo.png</code></li>
<li>本期仅 UI 模拟,不联调 API</li>
<li>设计文档:<code>docs/superpowers/specs/2026-08-10-miniprogram-login-ui-design.md</code></li>
</ul>
</aside>
<div class="phone-stage">
<div class="phone">
<div class="phone-screen">
<div class="status-bar">
<span>9:41</span>
<span class="icons">▌▌▌ Wi‑Fi 100%</span>
</div>
<div class="login-scroll">
<div class="brand">
<div class="brand-mark" aria-hidden="true">兴</div>
<h2>中科兴皖</h2>
<p>员工工作台登录</p>
</div>
<form class="form-card" id="loginForm" novalidate>
<div class="field">
<label for="username">账号</label>
<div class="field-control">
<input id="username" name="username" type="text" autocomplete="username" placeholder="请输入用户名 / 工号" />
</div>
<div class="field-error" id="usernameError">请输入用户名 / 工号</div>
</div>
<div class="field">
<label for="password">密码</label>
<div class="field-control with-action">
<input id="password" name="password" type="password" autocomplete="current-password" placeholder="请输入密码" />
<button type="button" class="field-action" id="togglePwd" aria-label="显示或隐藏密码">显示</button>
</div>
<div class="field-error" id="passwordError">请输入密码</div>
</div>
<button type="submit" class="btn-primary" id="loginBtn">
<span class="spinner" aria-hidden="true"></span>
<span class="btn-text">登录</span>
</button>
<label class="agree">
<input type="checkbox" id="agree" />
<span class="agree-box" aria-hidden="true"></span>
<span>已阅读并同意 <a href="javascript:void(0)" id="linkUser">《用户协议》</a> 和 <a href="javascript:void(0)" id="linkPrivacy">《隐私政策》</a></span>
</label>
</form>
<div class="divider">或</div>
<button type="button" class="btn-wechat" id="wechatBtn">
<img src="assets/wechat-logo.png" alt="" width="22" height="22" />
微信授权登录
</button>
</div>
<div class="home-indicator"><span></span></div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
</div>
</div>
</div>
</div>
<script>
(function () {
var toastEl = document.getElementById('toast')
var toastTimer = null
function toast(msg) {
toastEl.textContent = msg
toastEl.classList.add('show')
clearTimeout(toastTimer)
toastTimer = setTimeout(function () {
toastEl.classList.remove('show')
}, 1800)
}
function ensureAgree() {
if (!document.getElementById('agree').checked) {
toast('请先同意用户协议与隐私政策')
return false
}
return true
}
function clearErrors() {
document.getElementById('username').classList.remove('is-error')
document.getElementById('password').classList.remove('is-error')
document.getElementById('usernameError').classList.remove('show')
document.getElementById('passwordError').classList.remove('show')
}
document.getElementById('togglePwd').addEventListener('click', function () {
var input = document.getElementById('password')
var show = input.type === 'password'
input.type = show ? 'text' : 'password'
this.textContent = show ? '隐藏' : '显示'
})
document.getElementById('linkUser').addEventListener('click', function (e) {
e.preventDefault()
e.stopPropagation()
toast('用户协议(Demo 占位)')
})
document.getElementById('linkPrivacy').addEventListener('click', function (e) {
e.preventDefault()
e.stopPropagation()
toast('隐私政策(Demo 占位)')
})
document.getElementById('loginForm').addEventListener('submit', function (e) {
e.preventDefault()
clearErrors()
if (!ensureAgree()) return
var username = document.getElementById('username').value.trim()
var password = document.getElementById('password').value
var ok = true
if (!username) {
document.getElementById('username').classList.add('is-error')
document.getElementById('usernameError').classList.add('show')
ok = false
}
if (!password) {
document.getElementById('password').classList.add('is-error')
document.getElementById('passwordError').classList.add('show')
ok = false
}
if (!ok) return
var btn = document.getElementById('loginBtn')
btn.disabled = true
btn.classList.add('is-loading')
setTimeout(function () {
btn.disabled = false
btn.classList.remove('is-loading')
toast('登录成功(Demo)')
}, 900)
})
document.getElementById('wechatBtn').addEventListener('click', function () {
if (!ensureAgree()) return
var btn = this
btn.disabled = true
toast('唤起微信授权(Demo)')
setTimeout(function () {
btn.disabled = false
}, 900)
})
})()
</script>
</body>
</html>