270 lines
7.5 KiB
HTML
270 lines
7.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Web 管理端 · 主题选型 B（不同风格）</title>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
:root {
|
||
--text: #1e293b;
|
||
--text-muted: #64748b;
|
||
--border: #e2e8f0;
|
||
--surface: #fff;
|
||
--bg: #f8fafc;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter, -apple-system, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: var(--bg);
|
||
padding: 32px 24px 48px;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0 0 8px;
|
||
font-size: 22px;
|
||
}
|
||
|
||
h2.section-title {
|
||
margin: 36px 0 16px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.lead {
|
||
margin: 0 0 12px;
|
||
color: var(--text-muted);
|
||
max-width: 760px;
|
||
}
|
||
|
||
.hint {
|
||
margin: 0 0 28px;
|
||
padding: 12px 16px;
|
||
max-width: 760px;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
border: 1px solid var(--border);
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 16px;
|
||
max-width: 1100px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 18px;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition:
|
||
box-shadow 0.2s,
|
||
border-color 0.2s;
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: #cbd5e1;
|
||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.card h2 {
|
||
margin: 0 0 6px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card p {
|
||
margin: 0 0 14px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.colors {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-bottom: 12px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.colors span {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.colors .logo-chip {
|
||
width: auto;
|
||
height: auto;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
background: #ecfdf5;
|
||
color: #047857;
|
||
border-color: #a7f3d0;
|
||
}
|
||
|
||
.colors .dark-chip {
|
||
background: #0f172a;
|
||
}
|
||
|
||
.meta {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-family: ui-monospace, monospace;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
background: #f1f5f9;
|
||
color: #475569;
|
||
}
|
||
|
||
.badge.recommend {
|
||
background: #eff6ff;
|
||
color: #1d4ed8;
|
||
}
|
||
|
||
.badge.style {
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
|
||
.footer-links {
|
||
margin-top: 32px;
|
||
max-width: 760px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.footer-links a {
|
||
color: #2563eb;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Web 管理端 · 主题选型 B</h1>
|
||
<p class="lead">
|
||
上一批（蓝/靛/青绿）若仍不满意，这批换<strong>布局气质</strong>：深色侧栏、暖灰米白、经典医院蓝、极简无色、薄雾紫、墨蓝权威。Logo
|
||
仍为真实绿色。
|
||
</p>
|
||
<p class="hint">
|
||
<strong>打开：</strong><code>docs/theme-demos-alt/index.html</code> · 每页顶部可切换 01～06
|
||
</p>
|
||
|
||
<div class="grid">
|
||
<a class="card" href="01-dark-sidebar.html">
|
||
<span class="badge recommend">推荐</span>
|
||
<span class="badge style">深色侧栏</span>
|
||
<h2>01 · 深色侧栏藏青</h2>
|
||
<p>侧栏藏青 + 白天蓝点缀；Logo 绿在暗底上非常跳。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span class="dark-chip"></span>
|
||
<span style="background: #38bdf8"></span>
|
||
<span style="background: #f8fafc"></span>
|
||
</div>
|
||
<div class="meta">侧栏 #0f172a · 点缀 #38bdf8</div>
|
||
</a>
|
||
|
||
<a class="card" href="02-warm-stone.html">
|
||
<span class="badge style">暖中性</span>
|
||
<h2>02 · 暖石米灰</h2>
|
||
<p>米白底 + 暖灰主色，不冷也不艳，像纸质档案系统。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span style="background: #57534e"></span>
|
||
<span style="background: #fafaf9"></span>
|
||
<span style="background: #e7e5e4"></span>
|
||
</div>
|
||
<div class="meta">#57534e · #fafaf9 · #e7e5e4</div>
|
||
</a>
|
||
|
||
<a class="card" href="03-medical-blue.html">
|
||
<span class="badge style">医院感</span>
|
||
<h2>03 · 经典医院蓝</h2>
|
||
<p>传统 HIS/LIS 常见蓝，比 Tailwind 蓝更「医疗」。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span style="background: #0077b6"></span>
|
||
<span style="background: #023e8a"></span>
|
||
<span style="background: #e8f4fa"></span>
|
||
</div>
|
||
<div class="meta">#0077b6 · #023e8a · #e8f4fa</div>
|
||
</a>
|
||
|
||
<a class="card" href="04-zinc-minimal.html">
|
||
<span class="badge style">极简</span>
|
||
<h2>04 · 锌灰极简</h2>
|
||
<p>界面几乎无色，黑按钮 + 绿 Logo，数据页不抢戏。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span style="background: #52525b"></span>
|
||
<span style="background: #18181b"></span>
|
||
<span style="background: #fafafa"></span>
|
||
</div>
|
||
<div class="meta">按钮 #18181b · 底 #fafafa</div>
|
||
</a>
|
||
|
||
<a class="card" href="05-soft-violet.html">
|
||
<span class="badge style">康养</span>
|
||
<h2>05 · 薄雾紫</h2>
|
||
<p>低饱和紫，偏医疗康养、客服档案气质。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span style="background: #7c6fad"></span>
|
||
<span style="background: #6b5b95"></span>
|
||
<span style="background: #f3f0f8"></span>
|
||
</div>
|
||
<div class="meta">#7c6fad · #6b5b95 · #f3f0f8</div>
|
||
</a>
|
||
|
||
<a class="card" href="06-navy-authority.html">
|
||
<span class="badge style">权威</span>
|
||
<h2>06 · 墨蓝权威</h2>
|
||
<p>深藏青，审批/协议/合规感强，传统企业门户。</p>
|
||
<div class="colors">
|
||
<span class="logo-chip">Logo 绿</span>
|
||
<span style="background: #1e3a5f"></span>
|
||
<span style="background: #152a45"></span>
|
||
<span style="background: #eef2f6"></span>
|
||
</div>
|
||
<div class="meta">#1e3a5f · #152a45 · #eef2f6</div>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="footer-links">
|
||
上一批方案见 <a href="../theme-demos/index.html">主题选型 A（00～04）</a> · 全绿色系见
|
||
<a href="../green-theme-demos/index.html">深绿变体（01～06）</a>
|
||
</p>
|
||
</body>
|
||
</html>
|