78 lines
3.6 KiB
HTML
78 lines
3.6 KiB
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>
|