157 lines
5.0 KiB
HTML
157 lines
5.0 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" />
|
||
<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>
|