提交
This commit is contained in:
1 parent
a79aee2614
commit
427bcb1551
274 files changed
+59416
-38342
No files matched your search
@@ -0,0 +1,301 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>01 · 深色侧栏藏青 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #38bdf8;
|
||||
--primary-dark: #0ea5e9;
|
||||
--primary-bg: rgba(56, 189, 248, 0.14);
|
||||
--text: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--bg-page: #fefefe;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f8fafc;
|
||||
--row-alt: #fafafa;
|
||||
--row-hover: #f1f5f9;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
--sidebar-bg: #0f172a;
|
||||
--sidebar-border: #1e293b;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1><span class="demo-badge">推荐</span>01 · 深色侧栏藏青</h1>
|
||||
<p>侧栏 #0f172a · 点缀天蓝 · Logo 绿最跳眼</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#0f172a"></i>侧栏</span><span class="swatch"><i style="background:#38bdf8"></i>点缀</span><span class="swatch"><i style="background:#f8fafc"></i>内容</span><span class="swatch"><i style="background:#e2e8f0"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="is-current" href="01-dark-sidebar.html">01</a><a class="" href="02-warm-stone.html">02</a><a class="" href="03-medical-blue.html">03</a><a class="" href="04-zinc-minimal.html">04</a><a class="" href="05-soft-violet.html">05</a><a class="" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar sidebar--dark">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">风格差异大:深色导航 + 白内容区,很多 LIS/HIS 系统采用;Logo 绿色会非常醒目。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>02 · 暖石米灰 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #57534e;
|
||||
--primary-dark: #44403c;
|
||||
--primary-bg: #f5f5f4;
|
||||
--text: #292524;
|
||||
--text-muted: #78716c;
|
||||
--border: #e7e5e4;
|
||||
--bg-page: #fafaf9;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f5f5f4;
|
||||
--row-alt: #f5f5f4;
|
||||
--row-hover: #ececea;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body class="layout-warm">
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>02 · 暖石米灰</h1>
|
||||
<p>暖灰主色 #57534e · 米白底 · 不冷不艳</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#57534e"></i>主色</span><span class="swatch"><i style="background:#44403c"></i>深</span><span class="swatch"><i style="background:#fafaf9"></i>浅底</span><span class="swatch"><i style="background:#e7e5e4"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="" href="01-dark-sidebar.html">01</a><a class="is-current" href="02-warm-stone.html">02</a><a class="" href="03-medical-blue.html">03</a><a class="" href="04-zinc-minimal.html">04</a><a class="" href="05-soft-violet.html">05</a><a class="" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">偏纸质/档案感,长时间看不疲劳;适合财务、合规、大量表格录入。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>03 · 经典医院蓝 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #0077b6;
|
||||
--primary-dark: #023e8a;
|
||||
--primary-bg: #e8f4fa;
|
||||
--text: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #bde0fe;
|
||||
--bg-page: #fefefe;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f8fafc;
|
||||
--row-alt: #fafafa;
|
||||
--row-hover: #f1f5f9;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>03 · 经典医院蓝</h1>
|
||||
<p>主色 #0077b6 · 传统医疗信息系统气质</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#0077b6"></i>主色</span><span class="swatch"><i style="background:#023e8a"></i>深</span><span class="swatch"><i style="background:#e8f4fa"></i>浅底</span><span class="swatch"><i style="background:#bde0fe"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="" href="01-dark-sidebar.html">01</a><a class="" href="02-warm-stone.html">02</a><a class="is-current" href="03-medical-blue.html">03</a><a class="" href="04-zinc-minimal.html">04</a><a class="" href="05-soft-violet.html">05</a><a class="" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">比 Tailwind 蓝更「医院感」;稳重、熟悉,中老年用户接受度高。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,301 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>04 · 锌灰极简 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #52525b;
|
||||
--primary-dark: #3f3f46;
|
||||
--primary-bg: #f4f4f5;
|
||||
--text: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #e4e4e7;
|
||||
--bg-page: #fefefe;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f8fafc;
|
||||
--row-alt: #fafafa;
|
||||
--row-hover: #f1f5f9;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
--cta: #18181b;
|
||||
--cta-dark: #27272a;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>04 · 锌灰极简</h1>
|
||||
<p>几乎无彩色 · 主按钮 #18181b · Logo 是唯一亮点</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#52525b"></i>导航</span><span class="swatch"><i style="background:#18181b"></i>按钮</span><span class="swatch"><i style="background:#fafafa"></i>浅底</span><span class="swatch"><i style="background:#e4e4e7"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="" href="01-dark-sidebar.html">01</a><a class="" href="02-warm-stone.html">02</a><a class="" href="03-medical-blue.html">03</a><a class="is-current" href="04-zinc-minimal.html">04</a><a class="" href="05-soft-violet.html">05</a><a class="" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">极简 B 端:界面本身不抢戏,状态 Tag 保留语义色;适合数据密集页面。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>05 · 薄雾紫 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #7c6fad;
|
||||
--primary-dark: #6b5b95;
|
||||
--primary-bg: #f3f0f8;
|
||||
--text: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #ddd6fe;
|
||||
--bg-page: #fefefe;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f8fafc;
|
||||
--row-alt: #fafafa;
|
||||
--row-hover: #f1f5f9;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>05 · 薄雾紫</h1>
|
||||
<p>主色 #7c6fad · 舒缓、偏医疗康养</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#7c6fad"></i>主色</span><span class="swatch"><i style="background:#6b5b95"></i>深</span><span class="swatch"><i style="background:#f3f0f8"></i>浅底</span><span class="swatch"><i style="background:#ddd6fe"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="" href="01-dark-sidebar.html">01</a><a class="" href="02-warm-stone.html">02</a><a class="" href="03-medical-blue.html">03</a><a class="" href="04-zinc-minimal.html">04</a><a class="is-current" href="05-soft-violet.html">05</a><a class="" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">低饱和紫,比靛蓝更柔;适合客服、客户档案类模块,主列表页需实测。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>06 · 墨蓝权威 · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1e3a5f;
|
||||
--primary-dark: #152a45;
|
||||
--primary-bg: #eef2f6;
|
||||
--text: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #c5d0dc;
|
||||
--bg-page: #fefefe;
|
||||
--surface: #ffffff;
|
||||
--table-head: #f8fafc;
|
||||
--row-alt: #fafafa;
|
||||
--row-hover: #f1f5f9;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>06 · 墨蓝权威</h1>
|
||||
<p>主色 #1e3a5f · 传统企业门户</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row"><span class="swatch"><i style="background:#1e3a5f"></i>主色</span><span class="swatch"><i style="background:#152a45"></i>深</span><span class="swatch"><i style="background:#eef2f6"></i>浅底</span><span class="swatch"><i style="background:#c5d0dc"></i>边</span></div>
|
||||
<div class="theme-jump"><a class="" href="01-dark-sidebar.html">01</a><a class="" href="02-warm-stone.html">02</a><a class="" href="03-medical-blue.html">03</a><a class="" href="04-zinc-minimal.html">04</a><a class="" href="05-soft-violet.html">05</a><a class="is-current" href="06-navy-authority.html">06</a></div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">深藏青,权威合规感强;与绿色 Logo 对比清晰,适合审批流、协议类页面。</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,734 @@
|
||||
/* 管理端主题 Demo B(布局/气质与 batch A 不同) */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: Inter, -apple-system, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
.demo-banner {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: 10px 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.demo-banner h1 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-banner p {
|
||||
margin: 2px 0 0;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.demo-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.demo-banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.theme-jump {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.theme-jump a {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: #64748b;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.theme-jump a:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.theme-jump a.is-current {
|
||||
background: var(--primary-bg);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.swatch-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.swatch i {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.link-back {
|
||||
font-size: 12px;
|
||||
color: var(--primary-dark);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 18px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar--dark {
|
||||
background: var(--sidebar-bg, #0f172a);
|
||||
border-right-color: var(--sidebar-border, #1e293b);
|
||||
}
|
||||
|
||||
.sidebar--dark .brand {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar--dark .brand-text {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.sidebar--dark .brand-text small {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sidebar--dark .nav-group-title {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.sidebar--dark .nav a {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sidebar--dark .nav a::before {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar--dark .nav a:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.sidebar--dark .nav a.active {
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.sidebar--dark .nav a.active::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px 10px 16px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.brand-text small {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nav-group-title {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
margin: 1px 0;
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav a::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
background: var(--row-alt);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: var(--row-alt);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav a.active {
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav a.active::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.main-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 56px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.crumb {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.crumb b {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--primary-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.work-tabs {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
padding: 10px 24px 0;
|
||||
background: var(--bg-page);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.work-tab {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: var(--surface);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.work-tab.is-active {
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 2px 0 var(--cta, var(--primary));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.panel-top {
|
||||
padding: 16px 20px 0;
|
||||
}
|
||||
|
||||
.title-bar-heading {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.title-bar-heading::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: var(--cta, var(--primary));
|
||||
}
|
||||
|
||||
.entity-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 12px 16px 12px;
|
||||
}
|
||||
|
||||
.entity-card {
|
||||
flex: 0 1 168px;
|
||||
min-width: 152px;
|
||||
max-width: 180px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.entity-card.is-active {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-bg);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.entity-card__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.entity-card.is-active .entity-card__icon {
|
||||
background: #fff;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.entity-card__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.entity-card.is-active .entity-card__title {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.entity-card__desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.filter-block {
|
||||
padding: 16px 20px 4px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.select:focus {
|
||||
outline: none;
|
||||
border-color: var(--cta, var(--primary));
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta, var(--primary)) 20%, transparent);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 0 16px;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--table-head);
|
||||
}
|
||||
|
||||
.sel-num {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.sel-num b {
|
||||
color: var(--cta-dark, var(--primary-dark));
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--cta, var(--primary));
|
||||
border-color: var(--cta, var(--primary));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--cta-dark, var(--primary-dark));
|
||||
border-color: var(--cta-dark, var(--primary-dark));
|
||||
}
|
||||
|
||||
.btn-op {
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn-op.primary {
|
||||
color: var(--cta-dark, var(--primary-dark));
|
||||
border-color: color-mix(in srgb, var(--cta, var(--primary)) 35%, var(--border));
|
||||
background: var(--primary-bg);
|
||||
}
|
||||
|
||||
.list-body {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
background: var(--table-head);
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: var(--row-hover);
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background: var(--row-alt);
|
||||
}
|
||||
|
||||
tr:nth-child(even):hover td {
|
||||
background: var(--row-hover);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-info {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.tag-success {
|
||||
background: #d1fae5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.tag-warning {
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.tag-danger {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.pager {
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pager-btn {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pager-btn.is-active {
|
||||
background: var(--cta, var(--primary));
|
||||
border-color: var(--cta, var(--primary));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo-bottom {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.demo-bottom {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
margin-top: 4px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--cta-dark, var(--primary-dark));
|
||||
}
|
||||
|
||||
.stat-card.warn .value {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.dialog-preview {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 16px 18px;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dialog-foot {
|
||||
padding: 12px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
background: var(--table-head);
|
||||
}
|
||||
|
||||
.theme-note {
|
||||
margin-top: 16px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary-bg);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -0,0 +1,433 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const themes = [
|
||||
{
|
||||
id: '01',
|
||||
file: '01-dark-sidebar.html',
|
||||
title: '01 · 深色侧栏藏青',
|
||||
desc: '侧栏 #0f172a · 点缀天蓝 · Logo 绿最跳眼',
|
||||
note: '风格差异大:深色导航 + 白内容区,很多 LIS/HIS 系统采用;Logo 绿色会非常醒目。',
|
||||
primary: '#38bdf8',
|
||||
dark: '#0ea5e9',
|
||||
bg: 'rgba(56, 189, 248, 0.14)',
|
||||
border: '#e2e8f0',
|
||||
swatches: ['#0f172a', '#38bdf8', '#f8fafc', '#e2e8f0'],
|
||||
darkSidebar: true,
|
||||
recommended: true
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
file: '02-warm-stone.html',
|
||||
title: '02 · 暖石米灰',
|
||||
desc: '暖灰主色 #57534e · 米白底 · 不冷不艳',
|
||||
note: '偏纸质/档案感,长时间看不疲劳;适合财务、合规、大量表格录入。',
|
||||
primary: '#57534e',
|
||||
dark: '#44403c',
|
||||
bg: '#f5f5f4',
|
||||
border: '#e7e5e4',
|
||||
pageBg: '#fafaf9',
|
||||
tableHead: '#f5f5f4',
|
||||
text: '#292524',
|
||||
textMuted: '#78716c',
|
||||
swatches: ['#57534e', '#44403c', '#fafaf9', '#e7e5e4'],
|
||||
warm: true
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
file: '03-medical-blue.html',
|
||||
title: '03 · 经典医院蓝',
|
||||
desc: '主色 #0077b6 · 传统医疗信息系统气质',
|
||||
note: '比 Tailwind 蓝更「医院感」;稳重、熟悉,中老年用户接受度高。',
|
||||
primary: '#0077b6',
|
||||
dark: '#023e8a',
|
||||
bg: '#e8f4fa',
|
||||
border: '#bde0fe',
|
||||
swatches: ['#0077b6', '#023e8a', '#e8f4fa', '#bde0fe']
|
||||
},
|
||||
{
|
||||
id: '04',
|
||||
file: '04-zinc-minimal.html',
|
||||
title: '04 · 锌灰极简',
|
||||
desc: '几乎无彩色 · 主按钮 #18181b · Logo 是唯一亮点',
|
||||
note: '极简 B 端:界面本身不抢戏,状态 Tag 保留语义色;适合数据密集页面。',
|
||||
primary: '#52525b',
|
||||
dark: '#3f3f46',
|
||||
bg: '#f4f4f5',
|
||||
border: '#e4e4e7',
|
||||
cta: '#18181b',
|
||||
ctaDark: '#27272a',
|
||||
swatches: ['#52525b', '#18181b', '#fafafa', '#e4e4e7']
|
||||
},
|
||||
{
|
||||
id: '05',
|
||||
file: '05-soft-violet.html',
|
||||
title: '05 · 薄雾紫',
|
||||
desc: '主色 #7c6fad · 舒缓、偏医疗康养',
|
||||
note: '低饱和紫,比靛蓝更柔;适合客服、客户档案类模块,主列表页需实测。',
|
||||
primary: '#7c6fad',
|
||||
dark: '#6b5b95',
|
||||
bg: '#f3f0f8',
|
||||
border: '#ddd6fe',
|
||||
swatches: ['#7c6fad', '#6b5b95', '#f3f0f8', '#ddd6fe']
|
||||
},
|
||||
{
|
||||
id: '06',
|
||||
file: '06-navy-authority.html',
|
||||
title: '06 · 墨蓝权威',
|
||||
desc: '主色 #1e3a5f · 传统企业门户',
|
||||
note: '深藏青,权威合规感强;与绿色 Logo 对比清晰,适合审批流、协议类页面。',
|
||||
primary: '#1e3a5f',
|
||||
dark: '#152a45',
|
||||
bg: '#eef2f6',
|
||||
border: '#c5d0dc',
|
||||
swatches: ['#1e3a5f', '#152a45', '#eef2f6', '#c5d0dc']
|
||||
}
|
||||
]
|
||||
|
||||
function themeJump(currentId) {
|
||||
return themes
|
||||
.map((t) => {
|
||||
const cls = t.id === currentId ? 'is-current' : ''
|
||||
return `<a class="${cls}" href="${t.file}">${t.id}</a>`
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
function swatchesHtml(theme) {
|
||||
const labels = theme.cta
|
||||
? ['导航', '按钮', '浅底', '边']
|
||||
: theme.darkSidebar
|
||||
? ['侧栏', '点缀', '内容', '边']
|
||||
: ['主色', '深', '浅底', '边']
|
||||
return theme.swatches
|
||||
.map((c, i) => `<span class="swatch"><i style="background:${c}"></i>${labels[i]}</span>`)
|
||||
.join('')
|
||||
}
|
||||
|
||||
function rootVars(theme) {
|
||||
const lines = [
|
||||
` --primary: ${theme.primary};`,
|
||||
` --primary-dark: ${theme.dark};`,
|
||||
` --primary-bg: ${theme.bg};`,
|
||||
` --text: ${theme.text || '#1e293b'};`,
|
||||
` --text-muted: ${theme.textMuted || '#64748b'};`,
|
||||
` --border: ${theme.border};`,
|
||||
` --bg-page: ${theme.pageBg || '#fefefe'};`,
|
||||
` --surface: #ffffff;`,
|
||||
` --table-head: ${theme.tableHead || '#f8fafc'};`,
|
||||
` --row-alt: ${theme.warm ? '#f5f5f4' : '#fafafa'};`,
|
||||
` --row-hover: ${theme.warm ? '#ececea' : '#f1f5f9'};`,
|
||||
` --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);`,
|
||||
` --radius: 10px;`
|
||||
]
|
||||
if (theme.darkSidebar) {
|
||||
lines.push(` --sidebar-bg: #0f172a;`, ` --sidebar-border: #1e293b;`)
|
||||
}
|
||||
if (theme.cta) {
|
||||
lines.push(` --cta: ${theme.cta};`, ` --cta-dark: ${theme.ctaDark};`)
|
||||
}
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
function renderPage(theme) {
|
||||
const badge = theme.recommended ? '<span class="demo-badge">推荐</span>' : ''
|
||||
const bodyClass = theme.warm ? ' class="layout-warm"' : ''
|
||||
const sidebarClass = theme.darkSidebar ? 'sidebar sidebar--dark' : 'sidebar'
|
||||
|
||||
return `<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>${theme.title} · 管理端界面 Demo B</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
${rootVars(theme)}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="_demo-styles.css" />
|
||||
</head>
|
||||
<body${bodyClass}>
|
||||
<div class="demo-banner">
|
||||
<div>
|
||||
<h1>${badge}${theme.title}</h1>
|
||||
<p>${theme.desc}</p>
|
||||
</div>
|
||||
<div class="demo-banner__actions">
|
||||
<div class="swatch-row">${swatchesHtml(theme)}</div>
|
||||
<div class="theme-jump">${themeJump(theme.id)}</div>
|
||||
<a class="link-back" href="index.html">选型入口</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-layout">
|
||||
<aside class="${sidebarClass}">
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="../../web-admin/public/logo.png" alt="中科兴皖" width="36" height="36" />
|
||||
<div class="brand-text">中科兴皖<small>一体化门户</small></div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">市场运营</div>
|
||||
<a href="#">工作台</a>
|
||||
<a href="#" class="active">采集协议单</a>
|
||||
<a href="#">样本接收</a>
|
||||
<a href="#">缴费确认</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">质量管理</div>
|
||||
<a href="#">质检工单</a>
|
||||
<a href="#">环境检测</a>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">系统</div>
|
||||
<a href="#">用户管理</a>
|
||||
<a href="#">角色权限</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-col">
|
||||
<header class="topbar">
|
||||
<div class="crumb">市场运营 / <b>采集协议单</b></div>
|
||||
<div class="topbar-right">
|
||||
<span>管理员</span>
|
||||
<div class="avatar">管</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="work-tabs">
|
||||
<div class="work-tab">工作台</div>
|
||||
<div class="work-tab is-active">采集协议单</div>
|
||||
<div class="work-tab">样本接收</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section class="panel">
|
||||
<div class="panel-top">
|
||||
<h2 class="title-bar-heading">采集协议单</h2>
|
||||
</div>
|
||||
|
||||
<div class="entity-switch">
|
||||
<div class="entity-card is-active">
|
||||
<div class="entity-card__icon">📄</div>
|
||||
<div>
|
||||
<div class="entity-card__title">协议单管理</div>
|
||||
<div class="entity-card__desc">协议审核与状态维护</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">💰</div>
|
||||
<div>
|
||||
<div class="entity-card__title">缴费信息</div>
|
||||
<div class="entity-card__desc">缴费计划与到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">🏅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">储存证管理</div>
|
||||
<div class="entity-card__desc">储存证开具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity-card">
|
||||
<div class="entity-card__icon">📅</div>
|
||||
<div>
|
||||
<div class="entity-card__title">满月待办</div>
|
||||
<div class="entity-card__desc">满月事项跟进</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-block">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" placeholder="协议编号 / 客户姓名 / 手机号" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<select class="select"><option>全部</option><option>生效中</option><option>待生效</option></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期起</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>预产期止</label>
|
||||
<input class="input" type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button type="button" class="btn btn-primary">查询</button>
|
||||
<button type="button" class="btn">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<span class="sel-num">已选 <b>2</b> 项</span>
|
||||
<button type="button" class="btn btn-primary">新增协议</button>
|
||||
<button type="button" class="btn">批量审核</button>
|
||||
<button type="button" class="btn">导出</button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" checked /></th>
|
||||
<th>序号</th>
|
||||
<th>状态</th>
|
||||
<th>协议编号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>预产期</th>
|
||||
<th>缴费状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>1</td>
|
||||
<td><span class="tag tag-primary">生效中</span></td>
|
||||
<td>XY-2026-0042</td>
|
||||
<td>张女士</td>
|
||||
<td>138****6621</td>
|
||||
<td>2026-08-12</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-03-01 10:22</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">审核</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked /></td>
|
||||
<td>2</td>
|
||||
<td><span class="tag tag-info">待生效</span></td>
|
||||
<td>XY-2026-0038</td>
|
||||
<td>李先生</td>
|
||||
<td>139****8890</td>
|
||||
<td>2026-07-20</td>
|
||||
<td><span class="tag tag-warning">缴费确认中</span></td>
|
||||
<td>2026-02-28 15:06</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">编辑</button>
|
||||
<button class="btn-op">生效</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>3</td>
|
||||
<td><span class="tag tag-warning">已过期</span></td>
|
||||
<td>XY-2025-1201</td>
|
||||
<td>王女士</td>
|
||||
<td>136****3345</td>
|
||||
<td>2025-12-08</td>
|
||||
<td><span class="tag tag-success">已缴费</span></td>
|
||||
<td>2026-02-28 09:18</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
<button class="btn-op">续签</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>4</td>
|
||||
<td><span class="tag tag-danger">已作废</span></td>
|
||||
<td>XY-2025-0899</td>
|
||||
<td>赵先生</td>
|
||||
<td>137****2210</td>
|
||||
<td>2025-10-15</td>
|
||||
<td><span class="tag tag-info">待缴费</span></td>
|
||||
<td>2025-09-20 14:40</td>
|
||||
<td>
|
||||
<button class="btn-op primary">查看</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<span>共 128 条</span>
|
||||
<button class="pager-btn">‹</button>
|
||||
<button class="pager-btn is-active">1</button>
|
||||
<button class="pager-btn">2</button>
|
||||
<button class="pager-btn">3</button>
|
||||
<button class="pager-btn">›</button>
|
||||
<span>10 条/页</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="demo-bottom">
|
||||
<div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="label">本月新增协议</div>
|
||||
<div class="value">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">生效中</div>
|
||||
<div class="value">86</div>
|
||||
</div>
|
||||
<div class="stat-card warn">
|
||||
<div class="label">待缴费</div>
|
||||
<div class="value">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="theme-note">${theme.note}</p>
|
||||
</div>
|
||||
|
||||
<div class="dialog-preview">
|
||||
<div class="dialog-head">查看协议 · XY-2026-0042</div>
|
||||
<div class="dialog-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="field">
|
||||
<label>协议状态</label>
|
||||
<div><span class="tag tag-primary">生效中</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>缴费状态</label>
|
||||
<div><span class="tag tag-success">已缴费</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>客户姓名</label>
|
||||
<input class="input" value="张女士" readonly />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>手机号</label>
|
||||
<input class="input" value="138****6621" readonly />
|
||||
</div>
|
||||
<div class="field" style="grid-column: 1 / -1">
|
||||
<label>备注</label>
|
||||
<input class="input" value="—" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-foot">
|
||||
<button class="btn">关闭</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
|
||||
for (const theme of themes) {
|
||||
fs.writeFileSync(path.join(__dirname, theme.file), renderPage(theme))
|
||||
console.log('written', theme.file)
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user