zkxw/docs/panel-tab-demos/04-icon-blocks.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04 图标信息块 · Tab Demo</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="_shared.css" />
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1><span class="demo-badge">04 图标信息块</span> 质检物料库 · Tab 样式 Demo</h1>
        <p>图标 + 文案块，模块识别度更高</p>
      </div>
      <div class="demo-banner__actions">
        <a href="index.html">← 选型索引</a>
      </div>
    </header>

    <div class="page-wrap">
      <section class="panel" id="panel-root">
        <div class="panel-top"><h2>质检物料库</h2></div>
        <div class="panel-tab-zone">
          <nav class="tabs-04" role="tablist">
            <button type="button" class="tab-btn is-active" data-tab="list" role="tab">
              <span class="tab-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
              </span>
              <span>物料列表</span>
            </button>
            <button type="button" class="tab-btn" data-tab="usage" role="tab">
              <span class="tab-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
              </span>
              <span>变动记录</span>
            </button>
            <button type="button" class="tab-btn" data-tab="stockCheck" role="tab">
              <span class="tab-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
              </span>
              <span>库存盘点</span>
            </button>
          </nav>
        </div>
        <div class="tab-panel is-active" data-panel="list" id="content"></div>
      </section>
      <p class="style-note"><strong>落地提示：</strong>图标可用 Element Plus Icons，与侧栏/按钮图标体系一致；占用略多横向空间。</p>
    </div>

    <script src="_demo-shell.js"></script>
    <script>
      document.getElementById('content').innerHTML = mockContent('list')
      initPanelTabs('panel-root')
    </script>
  </body>
</html>