zkxw/docs/my-material-usage-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" />
  </head>
  <body>
    <div class="index-hero">
      <h1>我的物料领用记录 · 双 Tab 样式 Demo</h1>
      <p>
        针对【生产管理 → 我的物料领用记录】页面中【领用记录】【消耗明细】两个 Tab
        不够醒目、首次进入不易发现可点击的问题，提供 7 套可选样式。色值对齐 Fresh Mint（<code>#10b981</code>）。
      </p>
      <div class="index-problem">
        <strong>现状问题：</strong>当前使用居中胶囊 Tab（<code>panel-pill-tabs</code>），字号 13px、灰底轨道，
        夹在标题与筛选区之间视觉权重低，用户容易把它当成静态标签而非可切换的视图。
      </div>
    </div>

    <div class="index-grid">
      <a class="index-card" href="01-current-baseline.html">
        <h2>01 · 现状基线</h2>
        <p>与线上一致的居中胶囊 Tab，作为对比参照。</p>
        <span class="tag tag--baseline">当前线上</span>
        <div class="preview-strip">　　　[ 领用记录 | 消耗明细 ]</div>
      </a>

      <a class="index-card" href="02-full-width-track.html">
        <h2>02 · 全宽双轨滑块</h2>
        <p>50/50 等分全宽轨道，白色滑块平滑移动。点击区域最大，辨识度最高。</p>
        <span class="tag tag--rec">强烈推荐</span>
        <div class="preview-strip">┌────────领用记录────────┬────────消耗明细────────┐</div>
      </a>

      <a class="index-card" href="03-icon-cards.html">
        <h2>03 · 图标信息卡片</h2>
        <p>图标 + 标题 + 副标题说明，双列大卡片。业务含义一目了然。</p>
        <span class="tag tag--rec">推荐</span>
        <div class="preview-strip">[📋 领用记录]　[📊 消耗明细]</div>
      </a>

      <a class="index-card" href="04-left-underline.html">
        <h2>04 · 左对齐下划线</h2>
        <p>加大字号（15px）+ 左对齐 + 绿色底边指示。经典 Tab 模式，改动适中。</p>
        <span class="tag">经典</span>
        <div class="preview-strip">领用记录　消耗明细 ———</div>
      </a>

      <a class="index-card" href="05-inline-header.html">
        <h2>05 · 标题行内嵌 Tab</h2>
        <p>Tab 放在标题右侧同一行，节省纵向空间，与标题形成视觉组合。</p>
        <span class="tag">紧凑</span>
        <div class="preview-strip">| 我的物料领用记录　　　　[ 领用记录 | 消耗明细 ]</div>
      </a>

      <a class="index-card" href="06-pill-with-hint.html">
        <h2>06 · 左对齐胶囊 + 引导提示</h2>
        <p>保留胶囊风格但左对齐、加大尺寸，上方加一行「切换视图」引导文案。</p>
        <span class="tag">渐进改良</span>
        <div class="preview-strip">↕ 点击下方切换查看不同记录　[ 领用记录 | 消耗明细 ]</div>
      </a>

      <a class="index-card" href="07-bar-accent.html">
        <h2>07 · 竖条强调 + 浅绿底</h2>
        <p>激活 Tab 左侧主色竖条 + 浅绿渐变底，与列表标题竖条视觉统一。</p>
        <span class="tag tag--rec">推荐</span>
        <div class="preview-strip">|领用记录　消耗明细</div>
      </a>
    </div>
  </body>
</html>