45 lines
1.9 KiB
HTML
45 lines
1.9 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>02 胶囊分段 · 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" />
|
|
</head>
|
|
<body>
|
|
<header class="demo-banner">
|
|
<div>
|
|
<h1><span class="demo-badge">02 胶囊分段</span> 质检物料库 · Tab 样式 Demo</h1>
|
|
<p>灰底轨道 + 白底激活块 · B 端常用 Segmented 风格</p>
|
|
</div>
|
|
<div class="demo-banner__actions">
|
|
<a href="index.html">← 选型索引</a>
|
|
<a href="01-underline-default.html">01 下划线</a>
|
|
<a href="06-full-track.html">06 滑轨</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">
|
|
<nav class="tabs-02" 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>
|
|
</nav>
|
|
</div>
|
|
<div class="tab-panel is-active" data-panel="list" id="content"></div>
|
|
</section>
|
|
<p class="style-note"><strong>推荐：</strong>三 Tab 等宽感好、点击区域明确；实现时可放在 <code>panel-top</code> 与内容区之间，用自定义 class 覆盖 <code>el-tabs</code> 或改用 div + v-show。</p>
|
|
</div>
|
|
|
|
<script src="_demo-shell.js"></script>
|
|
<script>
|
|
document.getElementById('content').innerHTML = mockContent('list')
|
|
initPanelTabs('panel-root')
|
|
</script>
|
|
</body>
|
|
</html>
|