zkxw/docs/panel-tab-demos/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>质检物料库 · 面板 Tab 样式选型</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>
      .index-hero {
        max-width: 960px;
        margin: 0 auto;
        padding: 32px 24px 16px;
      }

      .index-hero h1 {
        margin: 0 0 8px;
        font-size: 22px;
      }

      .index-hero p {
        margin: 0;
        color: var(--text-muted);
        max-width: 640px;
      }

      .index-grid {
        max-width: 960px;
        margin: 0 auto;
        padding: 16px 24px 48px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }

      .index-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .index-card:hover {
        border-color: #a7f3d0;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
      }

      .index-card h2 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--primary-dark);
      }

      .index-card p {
        margin: 0;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.5;
      }

      .index-card .tag {
        display: inline-block;
        margin-top: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        background: #f1f5f9;
        color: var(--text-muted);
      }

      .index-card .tag--rec {
        background: var(--primary-bg);
        color: var(--primary-dark);
      }

      .preview-strip {
        margin-top: 14px;
        padding: 10px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid var(--border);
        font-size: 12px;
        color: var(--text-muted);
      }
    </style>
  </head>
  <body>
    <div class="index-hero">
      <h1>质检物料库 · 三 Tab 样式 Demo</h1>
      <p>
        针对【物料列表】【变动记录】【库存盘点】三个 Tab，提供 7 套可选样式。色值与间距对齐
        Fresh Mint（<code>#10b981</code>）。选定样式后可落地到
        <code>qc-material/index.vue</code> 的 <code>panel-tabs</code>。
      </p>
    </div>

    <div class="index-grid">
      <a class="index-card" href="01-underline-default.html">
        <h2>01 · 下划线默认</h2>
        <p>与当前 Element Plus 默认 Tab 接近，底边绿线指示激活项。改动最小。</p>
        <span class="tag">现状基线</span>
        <div class="preview-strip">物料列表　变动记录　库存盘点 ———</div>
      </a>

      <a class="index-card" href="02-pill-segmented.html">
        <h2>02 · 胶囊分段</h2>
        <p>灰底轨道 + 白底激活块，类似 Segmented Control，层次清晰、适合 3～5 个 Tab。</p>
        <span class="tag tag--rec">推荐</span>
        <div class="preview-strip">[ 物料列表 | 变动记录 | 库存盘点 ]</div>
      </a>

      <a class="index-card" href="03-card-tabs.html">
        <h2>03 · 卡片 Tab</h2>
        <p>每个 Tab 像小卡片，激活项与内容区顶边融合，适合强调「分区」感。</p>
        <span class="tag">分区感强</span>
        <div class="preview-strip">┌物料列表┐ 变动记录  库存盘点</div>
      </a>

      <a class="index-card" href="04-icon-blocks.html">
        <h2>04 · 图标信息块</h2>
        <p>图标 + 文案横向块，信息量大，适合 Tab 需要快速识别的业务模块。</p>
        <span class="tag">信息丰富</span>
        <div class="preview-strip">[📦 物料] [📋 变动] [✓ 盘点]</div>
      </a>

      <a class="index-card" href="05-bar-accent.html">
        <h2>05 · 竖条 + 浅绿底</h2>
        <p>激活 Tab 左侧主色竖条 + 浅绿渐变底，与列表标题竖条视觉统一。</p>
        <span class="tag tag--rec">推荐</span>
        <div class="preview-strip">|物料列表  变动记录  库存盘点</div>
      </a>

      <a class="index-card" href="06-full-track.html">
        <h2>06 · 全宽滑轨</h2>
        <p>三等分全宽轨道，白色滑块平滑移动，现代感强，移动端也友好。</p>
        <span class="tag">现代感</span>
        <div class="preview-strip">████░░░░░░░░  （滑块随 Tab 移动）</div>
      </a>

      <a class="index-card" href="07-minimal-dot.html">
        <h2>07 · 极简圆点</h2>
        <p>纯文字 Tab，激活项下方绿点指示，最轻量，适合内容区需要更多纵向空间。</p>
        <span class="tag">极简</span>
        <div class="preview-strip">物料列表·  变动记录  库存盘点·</div>
      </a>
    </div>
  </body>
</html>