62 lines
2.9 KiB
HTML
62 lines
2.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>登记未用完物料 · 弹窗样式选型</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>登记未用完物料 · 弹窗样式 Demo</h1>
|
||
<p>
|
||
针对【库存盘点 → 登记未用完】弹窗，当前实现为每行一张 5 列栅格卡片（17+ 字段、28px
|
||
控件），多条时密集难填。以下 5 套方案对齐 Fresh Mint（<code>#10b981</code>），模拟
|
||
10 条明细，侧重<strong>批量登记效率</strong>与<strong>视觉层次</strong>。选定后可落地到
|
||
<code>QcMaterialStockCheckTab.vue</code>。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="index-grid">
|
||
<a class="index-card" href="01-inline-table.html">
|
||
<h2>01 · 可编辑表格</h2>
|
||
<p>固定表头 + 横向滚动；批次信息只读列 + 核心字段 inline 编辑。类似 Excel，适合 10～50 条快速扫填。</p>
|
||
<span class="card-tag card-tag--rec">推荐 · 批量效率最高</span>
|
||
<div class="preview-strip">| # | 物料 | 批号 | … | 数量▾ | 持有人 | × |</div>
|
||
</a>
|
||
|
||
<a class="index-card" href="02-split-panel.html">
|
||
<h2>02 · 左右分栏</h2>
|
||
<p>左侧紧凑列表（可搜索）+ 右侧完整表单。一次专注编辑一条，字段清晰，适合需要核对全部信息的场景。</p>
|
||
<span class="card-tag card-tag--rec">推荐 · 单条精度高</span>
|
||
<div class="preview-strip">[列表 40%] | [详情表单 60%]</div>
|
||
</a>
|
||
|
||
<a class="index-card" href="03-collapsible.html">
|
||
<h2>03 · 折叠摘要行</h2>
|
||
<p>默认一行摘要 + 行内改数量；点击展开完整字段。兼顾扫视与深度编辑，改动量适中。</p>
|
||
<span class="card-tag">平衡方案</span>
|
||
<div class="preview-strip">▸ 胎牛血清 · 2瓶 · 张三 [展开]</div>
|
||
</a>
|
||
|
||
<a class="index-card" href="04-quick-add.html">
|
||
<h2>04 · 检索优先 + 精简表</h2>
|
||
<p>顶部突出批次检索添加入口；表格仅保留 6～8 列核心字段，手工登记走侧滑/弹层。</p>
|
||
<span class="card-tag">批次驱动工作流</span>
|
||
<div class="preview-strip">🔍 检索批次并添加 → 精简表格</div>
|
||
</a>
|
||
|
||
<a class="index-card" href="05-current-baseline.html">
|
||
<h2>05 · 现状基线（优化版）</h2>
|
||
<p>保留卡片栅格结构，加大控件、分区展示批次/登记字段，便于与现实现状对比。</p>
|
||
<span class="card-tag">现状对照</span>
|
||
<div class="preview-strip">[卡片] 6列栅格 × N 行（当前方案）</div>
|
||
</a>
|
||
</div>
|
||
</body>
|
||
</html>
|