69 lines
3.4 KiB
HTML
69 lines
3.4 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>03 图标信息卡片 · 我的物料领用记录 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" />
|
|
<style>
|
|
.btn { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: default; }
|
|
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="demo-banner">
|
|
<div>
|
|
<h1><span class="demo-badge">03 图标信息卡片</span> 我的物料领用记录 · Tab 样式 Demo</h1>
|
|
<p>图标 + 标题 + 副标题说明，双列大卡片 · 业务含义一目了然</p>
|
|
</div>
|
|
<div class="demo-banner__actions">
|
|
<a href="index.html">← 选型索引</a>
|
|
<a href="02-full-width-track.html">02 全宽滑轨</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-03" role="tablist">
|
|
<button type="button" class="tab-btn is-active" data-tab="usage" role="tab">
|
|
<span class="tab-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
|
|
</span>
|
|
<span class="tab-text">
|
|
<span class="tab-title">领用记录</span>
|
|
<span class="tab-desc">查看本人出库、任务使用等变动</span>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="tab-btn" data-tab="consumption" role="tab">
|
|
<span class="tab-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
|
|
</span>
|
|
<span class="tab-text">
|
|
<span class="tab-title">消耗明细</span>
|
|
<span class="tab-desc">配制消耗的子物料明细</span>
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<div class="tab-panel is-active" data-panel="usage" id="content"></div>
|
|
</section>
|
|
<p class="style-note">
|
|
<strong>推荐：</strong>副标题帮助用户理解两个 Tab 的区别，图标增强模块识别度。落地时图标可用 Element Plus Icons（如 Document / DataLine）。
|
|
<div class="pros-cons">
|
|
<div class="pro">✓ 信息量大、可发现性最强、适合业务含义不易区分的场景</div>
|
|
<div class="con">✗ 占用约 72px 纵向空间，横向在小屏需考虑换行</div>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
|
|
<script src="_demo-shell.js"></script>
|
|
<script>
|
|
document.getElementById('content').innerHTML = mockContent('usage')
|
|
initPanelTabs('panel-root')
|
|
</script>
|
|
</body>
|
|
</html>
|