zlwuandCursor
169781a702
Record the dashed soft-card empty state as the global van-empty default, with a visual demo for review. Co-authored-by: Cursor <cursoragent@cursor.com>
374 lines
13 KiB
HTML
374 lines
13 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, viewport-fit=cover" />
|
|
<title>中科兴皖 · 空态 Empty State UI Demo</title>
|
|
<style>
|
|
:root {
|
|
--brand-green: #0a9f6d;
|
|
--brand-green-dark: #087f57;
|
|
--brand-green-soft: #e9f9f2;
|
|
--barley-yellow: #d6a343;
|
|
--barley-yellow-soft: #fff7e8;
|
|
--bg-page: #f5f8f7;
|
|
--surface: #ffffff;
|
|
--text-primary: #1f2a26;
|
|
--text-muted: #6b7b74;
|
|
--border: #dcebe4;
|
|
--shadow-soft: 0 4px 16px rgba(8, 127, 87, 0.08);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
|
|
color: var(--text-primary);
|
|
background:
|
|
radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
|
|
radial-gradient(700px 380px at 90% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
|
|
linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
|
|
}
|
|
body { padding: 24px 16px 48px; }
|
|
|
|
.page { max-width: 1180px; margin: 0 auto; }
|
|
|
|
.hero {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
padding: 22px 22px 18px;
|
|
box-shadow: var(--shadow-soft);
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 22px;
|
|
color: var(--brand-green-dark);
|
|
}
|
|
.hero .sub {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
max-width: 720px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
.card-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid #eef3f1;
|
|
background: #fafcfb;
|
|
}
|
|
.badge {
|
|
width: 24px; height: 24px; border-radius: 7px;
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-dark);
|
|
font-size: 12px; font-weight: 700;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.card-label h3 { margin: 0; font-size: 14px; }
|
|
.card-label p { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
|
|
|
|
.phone {
|
|
background: var(--bg-page);
|
|
padding: 14px;
|
|
min-height: 260px;
|
|
}
|
|
.phone-header {
|
|
background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
|
|
color: #fff;
|
|
border-radius: 14px 14px 18px 18px;
|
|
padding: 12px 14px 16px;
|
|
margin: -14px -14px 12px;
|
|
}
|
|
.phone-header .brand { font-size: 11px; opacity: .9; }
|
|
.phone-header .hello { font-size: 15px; font-weight: 600; margin-top: 4px; }
|
|
|
|
.panel {
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--border);
|
|
padding: 12px;
|
|
}
|
|
.panel-hd {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.panel-hd .t { font-size: 13px; font-weight: 600; }
|
|
.panel-hd .h { font-size: 11px; color: var(--text-muted); }
|
|
|
|
.card-foot {
|
|
padding: 12px 14px 14px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
border-top: 1px solid #eef3f1;
|
|
}
|
|
|
|
/* A */
|
|
.empty-a {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 36px 12px; gap: 8px;
|
|
}
|
|
.empty-a .ico { font-size: 36px; color: #b7c7bf; line-height: 1; }
|
|
.empty-a .txt { font-size: 13px; color: var(--text-muted); }
|
|
|
|
/* B */
|
|
.empty-b {
|
|
border-radius: 14px;
|
|
background: linear-gradient(165deg, #eef9f3 0%, #ffffff 55%);
|
|
border: 1.5px dashed #b7e5d0;
|
|
padding: 28px 14px 22px;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 8px;
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
|
|
}
|
|
.empty-b .blob {
|
|
width: 72px; height: 72px; border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 30%, #fff, #d8f3e7 70%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.empty-b .blob svg { width: 30px; height: 30px; }
|
|
.empty-b .txt { font-size: 13px; color: #5d746a; }
|
|
.empty-b .tip { font-size: 11px; color: #8aa198; text-align: center; line-height: 1.4; }
|
|
|
|
/* C */
|
|
.empty-c {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 40px 12px; gap: 12px;
|
|
}
|
|
.empty-c .ico-wrap {
|
|
width: 56px; height: 56px; border-radius: 16px;
|
|
background: var(--brand-green-soft);
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.empty-c .ico-wrap svg { width: 26px; height: 26px; }
|
|
.empty-c .txt { font-size: 13px; color: var(--text-muted); font-weight: 500; }
|
|
|
|
/* D */
|
|
.empty-d {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 32px 12px; gap: 10px;
|
|
}
|
|
.empty-d .ring {
|
|
width: 72px; height: 72px; border-radius: 50%;
|
|
background: var(--barley-yellow-soft);
|
|
border: 2px solid #f0d9a8;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.empty-d .ring svg { width: 30px; height: 30px; }
|
|
.empty-d .txt { font-size: 13px; color: var(--text-primary); font-weight: 500; }
|
|
.empty-d .tip { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* E */
|
|
.empty-e {
|
|
display: flex; align-items: center; justify-content: center; gap: 12px;
|
|
padding: 40px 12px;
|
|
}
|
|
.empty-e .dot {
|
|
width: 40px; height: 40px; border-radius: 12px;
|
|
background: var(--brand-green-soft);
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
}
|
|
.empty-e .dot svg { width: 20px; height: 20px; }
|
|
.empty-e .col { display: flex; flex-direction: column; gap: 2px; }
|
|
.empty-e .txt { font-size: 13px; color: var(--text-primary); font-weight: 500; }
|
|
.empty-e .tip { font-size: 11px; color: var(--text-muted); }
|
|
|
|
.note {
|
|
margin-top: 20px;
|
|
padding: 14px 16px;
|
|
background: rgba(255,255,255,.9);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.55;
|
|
}
|
|
.note strong { color: var(--brand-green-dark); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="hero">
|
|
<h1>空态 Empty State · 方案对比</h1>
|
|
<p class="sub">对齐三墙 Token（品牌绿 #0a9f6d）。选定后将统一到 <code>mobile-h5/components/van-empty</code>，主页 / 列表 / 组件演示页共用。</p>
|
|
</div>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
|
<symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
|
|
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
|
|
</symbol>
|
|
<symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
</symbol>
|
|
<symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="#d6a343" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
|
</symbol>
|
|
<symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="7"/>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<div class="grid">
|
|
<!-- A -->
|
|
<article class="card">
|
|
<div class="card-label">
|
|
<span class="badge">A</span>
|
|
<div>
|
|
<h3>现状 · 符号空态</h3>
|
|
<p>当前 ∅ 实现</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="phone-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">功能菜单</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
|
|
<div class="empty-a">
|
|
<div class="ico">∅</div>
|
|
<div class="txt">暂无可用菜单权限</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">简洁但偏弱，辨识度一般，不建议作为全局定稿。</div>
|
|
</article>
|
|
|
|
<!-- B -->
|
|
<article class="card">
|
|
<div class="card-label">
|
|
<span class="badge">B</span>
|
|
<div>
|
|
<h3>虚线软卡 · 推荐</h3>
|
|
<p>对齐 vant Demo 组件区</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="phone-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">功能菜单</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
|
|
<div class="empty-b">
|
|
<div class="blob"><svg><use href="#i-inbox"/></svg></div>
|
|
<div class="txt">暂无可用菜单权限</div>
|
|
<div class="tip">请联系管理员开通功能入口</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">薄荷绿渐变虚线框 + 圆形插画 + 主副文案，适合作为全局默认空态。</div>
|
|
</article>
|
|
|
|
<!-- C -->
|
|
<article class="card">
|
|
<div class="card-label">
|
|
<span class="badge">C</span>
|
|
<div>
|
|
<h3>极简徽章</h3>
|
|
<p>圆角图标底板</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="phone-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">功能菜单</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
|
|
<div class="empty-c">
|
|
<div class="ico-wrap"><svg><use href="#i-folder"/></svg></div>
|
|
<div class="txt">暂无可用菜单权限</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">留白多、视觉轻；适合卡片内嵌，副文案可选。</div>
|
|
</article>
|
|
|
|
<!-- D -->
|
|
<article class="card">
|
|
<div class="card-label">
|
|
<span class="badge">D</span>
|
|
<div>
|
|
<h3>大麦黄点缀</h3>
|
|
<p>辅助色圆环</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="phone-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">功能菜单</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
|
|
<div class="empty-d">
|
|
<div class="ring"><svg><use href="#i-box"/></svg></div>
|
|
<div class="txt">暂无可用菜单权限</div>
|
|
<div class="tip">当前角色暂无功能入口</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">更醒目，适合「权限不足 / 需关注」类提示；日常空列表可能略抢眼。</div>
|
|
</article>
|
|
|
|
<!-- E -->
|
|
<article class="card">
|
|
<div class="card-label">
|
|
<span class="badge">E</span>
|
|
<div>
|
|
<h3>横向紧凑</h3>
|
|
<p>列表矮空态变体</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="phone-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">待办列表</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-hd"><span class="t">待办列表</span><span class="h">0 条</span></div>
|
|
<div class="empty-e">
|
|
<div class="dot"><svg><use href="#i-search"/></svg></div>
|
|
<div class="col">
|
|
<div class="txt">暂无数据</div>
|
|
<div class="tip">可下拉刷新或调整筛选条件</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot">图标与文案横排，适合列表矮区域；可与 B/C 主样式通过 layout 属性切换。</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>建议：</strong>全局默认选 <strong>B</strong> 或 <strong>C</strong>；列表矮场景可加 <strong>E</strong> 作为变体。
|
|
选定后改 <code>van-empty</code> 一处，主页 / demo 列表 / 组件页自动一致。
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|