432 lines
15 KiB
HTML
432 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<title>山峡化工 · 全局空态 Empty State Demo</title>
|
|
<link rel="stylesheet" href="shanxia-mp-base.css" />
|
|
<style>
|
|
body { background: #e8eeeb; }
|
|
.page-wrap {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 20px 16px 48px;
|
|
}
|
|
.hero {
|
|
background: var(--header-gradient);
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
padding: 22px 20px;
|
|
margin-bottom: 16px;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.hero h1 { font-size: 20px; margin-bottom: 6px; }
|
|
.hero p { font-size: 13px; opacity: 0.92; line-height: 1.55; }
|
|
.pick-bar {
|
|
position: sticky;
|
|
top: 8px;
|
|
z-index: 20;
|
|
background: rgba(255,255,255,0.96);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
margin-bottom: 16px;
|
|
box-shadow: var(--shadow-sm);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.pick-bar__label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.pick-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.pick-tabs { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
.pick-tab {
|
|
border: 1px solid var(--border);
|
|
background: #f6faf8;
|
|
border-radius: 12px;
|
|
padding: 10px 8px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
line-height: 1.35;
|
|
}
|
|
.pick-tab small {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
margin-top: 2px;
|
|
opacity: 0.9;
|
|
}
|
|
.pick-tab.active {
|
|
color: var(--brand-green-dark);
|
|
background: var(--brand-green-soft);
|
|
border-color: #b7e6d2;
|
|
box-shadow: 0 0 0 2px rgba(10, 159, 109, 0.12);
|
|
}
|
|
.note {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
margin: 0 0 16px;
|
|
padding: 12px 14px;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
.note strong { color: var(--text-primary); }
|
|
.stage {
|
|
display: none;
|
|
}
|
|
.stage.active { display: block; }
|
|
.phone-frame {
|
|
max-width: 390px;
|
|
margin: 0 auto;
|
|
background: var(--bg-page);
|
|
border-radius: 22px;
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-md);
|
|
overflow: hidden;
|
|
min-height: 640px;
|
|
}
|
|
.mp-subpage-back { color: #fff; font-size: 13px; opacity: 0.95; }
|
|
|
|
/* ════════ 方案公共 ════════ */
|
|
.empty {
|
|
padding: 48px 28px 40px;
|
|
text-align: center;
|
|
}
|
|
.empty__title {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
color: var(--text-primary);
|
|
}
|
|
.empty__desc {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
}
|
|
.empty__actions {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ════════ A · 柔和圆底 + 清单图标 ════════ */
|
|
.empty-a__badge {
|
|
width: 88px;
|
|
height: 88px;
|
|
margin: 0 auto 16px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #e9f9f2, #dcebe4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: inset 0 0 0 1px rgba(10, 159, 109, 0.08);
|
|
}
|
|
.empty-a__badge svg { width: 42px; height: 42px; }
|
|
|
|
/* ════════ B · 插画卡片（文件夹） ════════ */
|
|
.empty-b__art {
|
|
width: 148px;
|
|
height: 112px;
|
|
margin: 0 auto 18px;
|
|
position: relative;
|
|
}
|
|
.empty-b__shadow {
|
|
position: absolute;
|
|
left: 24px; right: 24px; bottom: 6px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: rgba(15, 30, 25, 0.08);
|
|
filter: blur(2px);
|
|
}
|
|
.empty-b__folder {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 10px;
|
|
transform: translateX(-50%);
|
|
width: 108px;
|
|
height: 78px;
|
|
}
|
|
.empty-b__folder-back {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 12px 12px 14px 14px;
|
|
background: linear-gradient(160deg, #b7e6d2, #7dcea0);
|
|
}
|
|
.empty-b__folder-tab {
|
|
position: absolute;
|
|
left: 10px; top: -10px;
|
|
width: 38px; height: 16px;
|
|
border-radius: 8px 8px 0 0;
|
|
background: #87d4b0;
|
|
}
|
|
.empty-b__folder-front {
|
|
position: absolute;
|
|
left: 0; right: 0; bottom: 0;
|
|
height: 58px;
|
|
border-radius: 10px 14px 14px 14px;
|
|
background: linear-gradient(180deg, #ecfdf5, #dff7ec);
|
|
border: 1px solid rgba(8, 127, 87, 0.18);
|
|
box-shadow: 0 8px 18px rgba(10, 159, 109, 0.12);
|
|
}
|
|
.empty-b__lines {
|
|
position: absolute;
|
|
left: 18px; right: 18px; top: 18px;
|
|
}
|
|
.empty-b__lines i {
|
|
display: block;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: #cfe9dc;
|
|
margin-bottom: 8px;
|
|
}
|
|
.empty-b__lines i:nth-child(2) { width: 70%; }
|
|
.empty-b__lines i:nth-child(3) { width: 48%; margin-bottom: 0; }
|
|
|
|
/* ════════ C · 极简线条图标 ════════ */
|
|
.empty-c__glyph {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin: 0 auto 14px;
|
|
color: #9aa8a1;
|
|
}
|
|
.empty-c__glyph svg { width: 100%; height: 100%; }
|
|
.empty-c .empty__title { font-weight: 600; color: #5f6f68; }
|
|
.empty-c .empty__desc { max-width: 220px; margin-left: auto; margin-right: auto; }
|
|
|
|
/* ════════ D · 虚线卡片容器 ════════ */
|
|
.empty-d__panel {
|
|
margin: 8px 8px 0;
|
|
border: 1.5px dashed #b7d9c8;
|
|
border-radius: 18px;
|
|
background: #fbfefc;
|
|
padding: 36px 20px 28px;
|
|
}
|
|
.empty-d__icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin: 0 auto 14px;
|
|
border-radius: 16px;
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 搜索无结果变体提示条 */
|
|
.scene-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 12px 16px 0;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
background: #fff7e8;
|
|
color: #a67a1f;
|
|
border: 1px solid #f0e0b8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="proto-nav">
|
|
<strong>Demo 导航</strong>
|
|
<a href="shanxia-mp-index.html">索引</a>
|
|
<a href="shanxia-mp-pattern-index.html">Pattern</a>
|
|
<a class="active" href="shanxia-mp-empty-state-demo.html">空态</a>
|
|
</nav>
|
|
|
|
<div class="page-wrap">
|
|
<header class="hero">
|
|
<h1>全局空态 Empty State</h1>
|
|
<p>用于列表无数据 / 搜索无结果。<strong>已采用方案 B · 插画文件夹</strong>，落地组件 <code>miniprogram/components/mp-empty</code>。下方可继续对比未选方案。</p>
|
|
</header>
|
|
|
|
<div class="pick-bar">
|
|
<div class="pick-bar__label">已采用 B；点击可切换对比其他方案</div>
|
|
<div class="pick-tabs">
|
|
<button class="pick-tab" type="button" data-stage="a">A 圆底图标<small>未采用</small></button>
|
|
<button class="pick-tab active" type="button" data-stage="b">B 插画文件夹<small>已采用</small></button>
|
|
<button class="pick-tab" type="button" data-stage="c">C 极简线条<small>未采用</small></button>
|
|
<button class="pick-tab" type="button" data-stage="d">D 虚线卡片<small>未采用</small></button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="note" id="note-a" style="display:none">
|
|
<strong>方案 A · 柔和圆底 + SVG 清单图标</strong><br />
|
|
保留「圆底」结构，补上可识别图形与标题/说明/主按钮。选型时备选，未采用。
|
|
</p>
|
|
<p class="note" id="note-b">
|
|
<strong>方案 B · 插画风文件夹（已采用）</strong><br />
|
|
用 CSS 拼出文件夹，品牌绿更明显。对应实现：<code>mp-empty</code> + <code>mp-biz.scss</code> / <code>shanxia-mp-base.css</code> 中的 <code>.mp-empty__*</code>。
|
|
</p>
|
|
<p class="note" id="note-c" style="display:none">
|
|
<strong>方案 C · 极简线条</strong><br />
|
|
单色 stroke 图标，信息密度最低。适合「搜索无结果」或希望页面更安静的场景。
|
|
</p>
|
|
<p class="note" id="note-d" style="display:none">
|
|
<strong>方案 D · 虚线卡片容器</strong><br />
|
|
把空态放进虚线面板，CTA 更突出。适合「尚未创建任何数据，引导新增」的首次空态。
|
|
</p>
|
|
|
|
<!-- ── A ── -->
|
|
<section class="stage" id="stage-a">
|
|
<div class="phone-frame">
|
|
<header class="mp-header">
|
|
<div class="mp-header__row">
|
|
<a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
|
|
<button class="mp-header__action" type="button">+ 新增</button>
|
|
</div>
|
|
<h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
|
|
<div class="mp-header__search" style="margin-top:10px">
|
|
<span class="mp-header__search-dot"></span>搜索分类名称
|
|
</div>
|
|
</header>
|
|
<span class="scene-tag">场景：列表无数据</span>
|
|
<div class="empty empty-a">
|
|
<div class="empty-a__badge" aria-hidden="true">
|
|
<svg viewBox="0 0 48 48" fill="none">
|
|
<rect x="10" y="8" width="28" height="34" rx="4" stroke="#0a9f6d" stroke-width="2.2"/>
|
|
<path d="M16 18h16M16 25h16M16 32h10" stroke="#0a9f6d" stroke-width="2.2" stroke-linecap="round"/>
|
|
<circle cx="34" cy="34" r="9" fill="#e9f9f2" stroke="#087f57" stroke-width="2"/>
|
|
<path d="M34 30v8M30 34h8" stroke="#087f57" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<p class="empty__title">暂无产品分类</p>
|
|
<p class="empty__desc">还没有分类数据，可先新增一个顶级分类</p>
|
|
<div class="empty__actions">
|
|
<button class="mp-btn mp-btn--primary" type="button">新增分类</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── B（已采用） ── -->
|
|
<section class="stage active" id="stage-b">
|
|
<div class="phone-frame">
|
|
<header class="mp-header">
|
|
<div class="mp-header__row">
|
|
<a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
|
|
<button class="mp-header__action" type="button">+ 新增</button>
|
|
</div>
|
|
<h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
|
|
<div class="mp-header__search" style="margin-top:10px">
|
|
<span class="mp-header__search-dot"></span>搜索分类名称
|
|
</div>
|
|
</header>
|
|
<span class="scene-tag">场景：列表无数据</span>
|
|
<div class="empty empty-b">
|
|
<div class="empty-b__art" aria-hidden="true">
|
|
<div class="empty-b__shadow"></div>
|
|
<div class="empty-b__folder">
|
|
<div class="empty-b__folder-tab"></div>
|
|
<div class="empty-b__folder-back"></div>
|
|
<div class="empty-b__folder-front">
|
|
<div class="empty-b__lines"><i></i><i></i><i></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="empty__title">暂无产品分类</p>
|
|
<p class="empty__desc">分类树为空，创建后即可在产品中引用</p>
|
|
<div class="empty__actions">
|
|
<button class="mp-btn mp-btn--ghost" type="button">刷新</button>
|
|
<button class="mp-btn mp-btn--primary" type="button">新增分类</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── C ── -->
|
|
<section class="stage" id="stage-c">
|
|
<div class="phone-frame">
|
|
<header class="mp-header">
|
|
<div class="mp-header__row">
|
|
<a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
|
|
<button class="mp-header__action" type="button">+ 新增</button>
|
|
</div>
|
|
<h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
|
|
<div class="mp-header__search" style="margin-top:10px">
|
|
<span class="mp-header__search-dot"></span>有机溶剂zzz
|
|
</div>
|
|
</header>
|
|
<span class="scene-tag">场景：搜索无结果</span>
|
|
<div class="empty empty-c">
|
|
<div class="empty-c__glyph" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<circle cx="28" cy="28" r="14" stroke="currentColor" stroke-width="2.4"/>
|
|
<path d="M38 38l12 12" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
|
|
<path d="M22 28h12M28 22v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
|
|
</svg>
|
|
</div>
|
|
<p class="empty__title">未找到相关分类</p>
|
|
<p class="empty__desc">试试更短的关键词，或清除筛选后查看全部</p>
|
|
<div class="empty__actions">
|
|
<button class="mp-btn mp-btn--ghost" type="button">清除条件</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── D ── -->
|
|
<section class="stage" id="stage-d">
|
|
<div class="phone-frame">
|
|
<header class="mp-header">
|
|
<div class="mp-header__row">
|
|
<a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
|
|
<button class="mp-header__action" type="button">+ 新增</button>
|
|
</div>
|
|
<h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
|
|
</header>
|
|
<span class="scene-tag">场景：首次引导创建</span>
|
|
<div class="empty empty-d">
|
|
<div class="empty-d__panel">
|
|
<div class="empty-d__icon" aria-hidden="true">+</div>
|
|
<p class="empty__title">还没有产品分类</p>
|
|
<p class="empty__desc">建议先建一级分类（如原料、助剂），再按需添加子类</p>
|
|
<div class="empty__actions">
|
|
<button class="mp-btn mp-btn--primary" type="button">立即新增</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const notes = {
|
|
a: document.getElementById('note-a'),
|
|
b: document.getElementById('note-b'),
|
|
c: document.getElementById('note-c'),
|
|
d: document.getElementById('note-d')
|
|
}
|
|
document.querySelectorAll('.pick-tab').forEach((tab) => {
|
|
tab.addEventListener('click', () => {
|
|
const key = tab.dataset.stage
|
|
document.querySelectorAll('.pick-tab').forEach((t) => t.classList.remove('active'))
|
|
document.querySelectorAll('.stage').forEach((s) => s.classList.remove('active'))
|
|
Object.values(notes).forEach((n) => { n.style.display = 'none' })
|
|
tab.classList.add('active')
|
|
document.getElementById('stage-' + key).classList.add('active')
|
|
notes[key].style.display = 'block'
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|