zkxw/docs/panel-tab-demos/06-full-track.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06 全宽滑轨 · 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" />
    <style>
      .tabs-06-inner {
        position: relative;
      }
    </style>
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1><span class="demo-badge">06 全宽滑轨</span> 质检物料库 · Tab 样式 Demo</h1>
        <p>三等分全宽轨道，白色滑块随 Tab 平滑移动</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">
          <div class="tabs-06" data-active="0">
            <div class="tabs-06-inner">
              <div class="tabs-06-slider"></div>
              <div class="tabs-06-track" role="tablist">
                <button type="button" class="tab-btn is-active" data-tab="list" role="tab">物料列表</button>
                <button type="button" class="tab-btn" data-tab="usage" role="tab">变动记录</button>
                <button type="button" class="tab-btn" data-tab="stockCheck" role="tab">库存盘点</button>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-panel is-active" data-panel="list" id="content"></div>
      </section>
      <p class="style-note"><strong>实现：</strong>可用 CSS <code>transform: translateX</code> 或 Vue 计算激活 index；三 Tab 等分最协调，Tab 数量变化需重算宽度。</p>
    </div>

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