提交
This commit is contained in:
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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user