zkxw/mobile-ui/zkxw-mobile-empty-state-demo.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>