264 lines
7.5 KiB
HTML
264 lines
7.5 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 12px;
|
||
}
|
||
|
||
.index-hero h1 {
|
||
margin: 0 0 8px;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.index-hero p {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
max-width: 720px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.index-cta {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 8px 24px 12px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.index-cta a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
height: 44px;
|
||
padding: 0 20px;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.index-cta a.primary {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
|
||
}
|
||
|
||
.index-cta a.primary:hover {
|
||
background: var(--primary-dark);
|
||
}
|
||
|
||
.index-cta a.secondary {
|
||
background: var(--surface);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.index-cta a.secondary:hover {
|
||
border-color: #a7f3d0;
|
||
background: var(--primary-bg);
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.batch-section {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 16px 24px 8px;
|
||
}
|
||
|
||
.batch-section h2 {
|
||
margin: 0 0 4px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.batch-section p {
|
||
margin: 0 0 12px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.index-grid {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 0 24px 32px;
|
||
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;
|
||
}
|
||
|
||
.index-card h3 {
|
||
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);
|
||
border: 1px solid #a7f3d0;
|
||
}
|
||
|
||
.index-card .tag--new {
|
||
background: #fffbeb;
|
||
color: #b45309;
|
||
border: 1px solid #fcd34d;
|
||
}
|
||
|
||
.context-box {
|
||
max-width: 960px;
|
||
margin: 0 auto 8px;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.context-box-inner {
|
||
padding: 14px 16px;
|
||
background: #fffbeb;
|
||
border: 1px solid #fcd34d;
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
color: #92400e;
|
||
line-height: 1.55;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="index-hero">
|
||
<h1>质检工单 · 细胞存储 · 同样本多工单 Tab 选型</h1>
|
||
<p>
|
||
针对 <code>QcWorkOrderSampleGroup.vue</code> 中「同一样本下样本接收 + 生产过程两条工单」的切换区域。
|
||
共两组 HTML 原型，均可点击交互。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="context-box">
|
||
<div class="context-box-inner">
|
||
<strong>问题：</strong>用户难以感知卡片内存在两类不同质检工单，且需要点击切换。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-cta">
|
||
<a class="primary" href="independent-pills.html">独立胶囊 Tab（最新）→</a>
|
||
<a class="secondary" href="compare-all-v2.html">第二组 · 强对比方案</a>
|
||
<a class="secondary" href="compare-all.html">第一组 · 渐进改良方案</a>
|
||
</div>
|
||
|
||
<div class="batch-section">
|
||
<h2>独立胶囊 Tab（现网结构 + 分离间距）</h2>
|
||
<p>去掉轨道连体容器，每个 Tab 独立白底胶囊，间距 16 / 24 / 32px 三档对比。</p>
|
||
</div>
|
||
<div class="index-grid">
|
||
<div class="index-card">
|
||
<h3>A · 轨道内连体</h3>
|
||
<p>现网对照：<code>panel-pill-tabs__track</code> 绿底容器。</p>
|
||
<span class="tag">对照</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>B · 独立胶囊 16px</h3>
|
||
<p>独立边框 + 来源色，间距 16px。</p>
|
||
<span class="tag tag--rec">推荐</span>
|
||
<span class="tag tag--new">最新</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>C · 独立胶囊 24px</h3>
|
||
<p>分离感更强。</p>
|
||
<span class="tag tag--new">最新</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>D · 独立胶囊 32px 放大</h3>
|
||
<p>最大间距 + 略放大点击区域。</p>
|
||
<span class="tag tag--new">最新</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="batch-section">
|
||
<h2>第二组 · 强对比（推荐先看）</h2>
|
||
<p>加大色块面积、两条工单始终可见、未选中显式「切换/点击」 affordance。</p>
|
||
</div>
|
||
<div class="index-grid">
|
||
<div class="index-card">
|
||
<h3>N1 · 双色分栏顶栏</h3>
|
||
<p>整宽 50/50 绿/琥珀分栏，未选中降饱和 + 👆 动画提示。</p>
|
||
<span class="tag tag--rec">推荐</span>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>N2 · 双行 Radio 清单</h3>
|
||
<p>列表单选形态，未选中行「切换至此」按钮。</p>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>N3 · 大开关 Toggle</h3>
|
||
<p>居中 oversized 二选一开关，emoji + 粗体类别名。</p>
|
||
<span class="tag tag--rec">推荐</span>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>N4 · 图标宫格</h3>
|
||
<p>56px 大图标 + 虚线边框 = 可点击，视觉重量最大。</p>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>N5 · 双摘要条</h3>
|
||
<p>提示横幅 + 并排 Chip，未选中绿色「切换」按钮。</p>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
<div class="index-card">
|
||
<h3>N6 · 左导航 + 右预览</h3>
|
||
<p>Master-Detail，左侧工单列表始终可见。</p>
|
||
<span class="tag tag--new">第二组</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="batch-section">
|
||
<h2>第一组 · 渐进改良</h2>
|
||
<p>在现有 pill-tab 形态上微调，改动量较小。</p>
|
||
</div>
|
||
<div class="index-grid">
|
||
<div class="index-card">
|
||
<h3>V0–V5</h3>
|
||
<p>胶囊 Tab、双卡片、步骤条、Segmented、色条 Tab 等 6 套。</p>
|
||
<span class="tag">第一组</span>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|