f60745607f
- Info bar: left-right layout with progress bar below, detail button on right - Scan bar: remove '已识别' badge, show 工令号/总件数/已装X with larger font - Mode switch: move to title right side, adopt rectangular style with 18px bold font Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1507 lines
46 KiB
HTML
1507 lines
46 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>单码装箱 UI v2 — 重构布局</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--blue: #1565c0;
|
||
--blue-lt: #e3eef9;
|
||
--green: #2e7d32;
|
||
--green-lt: #e8f5e9;
|
||
--orange: #e65100;
|
||
--orange-lt: #fff3e0;
|
||
--amber: #f57f17;
|
||
--amber-lt: #fffde7;
|
||
--red: #c62828;
|
||
--red-lt: #ffebee;
|
||
--grey: #616161;
|
||
--grey-lt: #f5f5f5;
|
||
--border: #e0e0e0;
|
||
--text: #1a1a1a;
|
||
--text-2: #555;
|
||
--text-3: #9e9e9e;
|
||
}
|
||
|
||
body {
|
||
font-family: 'PingFang SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: #eceff1;
|
||
color: var(--text);
|
||
padding: 20px 16px 40px;
|
||
}
|
||
|
||
/* ── 页面标题 ── */
|
||
.page-title {
|
||
text-align: center;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #37474f;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.page-sub {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #90a4ae;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* ── 场景 Tab ── */
|
||
.tabs {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.tab {
|
||
padding: 5px 13px;
|
||
border: 1.5px solid #b0bec5;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #607d8b;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
.tab:hover { border-color: var(--blue); color: var(--blue); }
|
||
.tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
|
||
|
||
/* ── 手机容器 ── */
|
||
.phone-wrap { display: flex; justify-content: center; }
|
||
.phone-label {
|
||
text-align: center;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #78909c;
|
||
margin-bottom: 8px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* ── 手机框 ── */
|
||
.phone {
|
||
width: 375px;
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* ── AppBar 44px ── */
|
||
.app-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 44px;
|
||
padding: 0 12px;
|
||
background: #fff;
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
gap: 8px;
|
||
}
|
||
.app-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
}
|
||
.mode-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 9px;
|
||
border-radius: 12px;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
flex-shrink: 0;
|
||
}
|
||
.mode-pill .p-key {
|
||
font-size: 10px;
|
||
opacity: 0.82;
|
||
font-weight: 600;
|
||
background: rgba(255,255,255,0.22);
|
||
border-radius: 4px;
|
||
padding: 0px 4px;
|
||
}
|
||
|
||
/* ── 通知条 ~30px ── */
|
||
.notice {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.notice.sync { background: var(--orange-lt); color: var(--orange); border-color: #ffd0a8; }
|
||
.notice.warn { background: var(--amber-lt); color: var(--amber); border-color: #ffe57f; }
|
||
.notice.info { background: var(--blue-lt); color: var(--blue); border-color: #90caf9; }
|
||
.notice.success { background: var(--green-lt); color: var(--green); border-color: #a5d6a7; }
|
||
|
||
.spinner {
|
||
width: 12px; height: 12px;
|
||
border: 1.5px solid currentColor;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.7s linear infinite;
|
||
flex-shrink: 0;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* ── 扫码条 ~38px ── */
|
||
.scan-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 12px;
|
||
height: 38px;
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
.scan-bar.waiting {
|
||
background: var(--grey-lt);
|
||
color: var(--text-3);
|
||
}
|
||
.scan-bar.scanned {
|
||
background: var(--green-lt);
|
||
border-bottom-color: #a5d6a7;
|
||
}
|
||
.scan-icon { font-size: 14px; }
|
||
.scan-check {
|
||
width: 18px; height: 18px;
|
||
background: var(--green);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 10px; font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.scan-code {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.scan-zongpai-extra {
|
||
font-size: 11px;
|
||
color: var(--text-2);
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
margin-right: 4px;
|
||
}
|
||
.scan-badge {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: var(--green);
|
||
background: #c8e6c9;
|
||
padding: 1px 6px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.scan-text {
|
||
font-size: 13px;
|
||
color: var(--text-3);
|
||
}
|
||
|
||
/* ── 排产信息 header-bar ~52px ── */
|
||
.info-bar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
padding: 8px 12px 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
background: #fafafa;
|
||
gap: 3px;
|
||
}
|
||
.info-row1 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.info-paichan {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.info-wo {
|
||
font-size: 12px;
|
||
color: var(--text-2);
|
||
white-space: nowrap;
|
||
}
|
||
.info-erp {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 进度条+详情同行 */
|
||
.progress-with-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
/* 进度条 */
|
||
.progress-wrap {
|
||
flex: 1;
|
||
height: 3px;
|
||
background: #e0e0e0;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: var(--blue);
|
||
border-radius: 2px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
.progress-fill.full { background: var(--green); }
|
||
|
||
.detail-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 28px;
|
||
min-width: 48px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
background: var(--blue-lt);
|
||
border: 1px solid var(--blue);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
padding: 0 10px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.detail-link::before {
|
||
content: "▤";
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
.detail-link.disabled {
|
||
color: var(--text-3);
|
||
background: var(--grey-lt);
|
||
border-color: #e0e0e0;
|
||
cursor: default;
|
||
}
|
||
|
||
.info-row2 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.info-meta-text {
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
flex: 1;
|
||
}
|
||
.info-meta-text .hl { color: var(--amber); font-weight: 700; }
|
||
.info-meta-text .packed { color: var(--blue); font-weight: 600; }
|
||
|
||
/* 空状态的 info-bar */
|
||
.info-bar.empty .info-paichan,
|
||
.info-bar.empty .info-meta-text { color: #ccc; }
|
||
|
||
/* ── 已分配列表区 (可滚动) ── */
|
||
.list-area {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
.list-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 7px 12px 5px;
|
||
border-bottom: 1px solid var(--border);
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
z-index: 1;
|
||
}
|
||
.list-title {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--text-2);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
flex: 1;
|
||
}
|
||
.list-count {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
}
|
||
|
||
.list-empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 18px;
|
||
font-size: 13px;
|
||
color: var(--text-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 每一行 40px */
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
height: 40px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
gap: 6px;
|
||
transition: background 0.1s;
|
||
}
|
||
.item:last-child { border-bottom: none; }
|
||
.item.editing { background: #fff8e1; }
|
||
.item.deleting { background: #ffebee; }
|
||
|
||
.item-idx {
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
font-weight: 600;
|
||
width: 14px;
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
/* 左侧彩色状态条 */
|
||
.item-bar {
|
||
width: 3px;
|
||
height: 22px;
|
||
border-radius: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
.item-bar.ok { background: var(--green); }
|
||
.item-bar.editing { background: var(--amber); }
|
||
.item-bar.deleting{ background: var(--red); }
|
||
|
||
/* 箱号 + 工单 */
|
||
.item-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.item-boxno {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.item-wo {
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
line-height: 1.3;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.item-qty {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-2);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 图标按钮 */
|
||
.icon-btn {
|
||
width: 28px; height: 28px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: none; border: none; cursor: pointer;
|
||
font-size: 14px; padding: 0;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
transition: background 0.1s;
|
||
}
|
||
.icon-btn:hover { background: rgba(0,0,0,0.06); }
|
||
.icon-btn.save { color: var(--green); }
|
||
.icon-btn.cancel { color: var(--grey); }
|
||
.icon-btn.edit { color: var(--grey); }
|
||
.icon-btn.del { color: var(--red); }
|
||
|
||
/* 行内编辑输入 */
|
||
.item-edit-input {
|
||
width: 52px; height: 28px;
|
||
text-align: center;
|
||
font-size: 14px; font-weight: 700;
|
||
border: 1.5px solid var(--amber);
|
||
border-radius: 5px;
|
||
outline: none;
|
||
color: var(--text);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 删除确认条 */
|
||
.del-confirm {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 12px 4px 30px;
|
||
background: var(--red-lt);
|
||
border-bottom: 1px solid #ffcdd2;
|
||
height: 28px;
|
||
}
|
||
.del-confirm-text {
|
||
font-size: 12px;
|
||
color: var(--red);
|
||
flex: 1;
|
||
}
|
||
.del-btn {
|
||
padding: 2px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
.del-btn.yes { background: var(--red); color: #fff; }
|
||
.del-btn.no { background: #fff; color: var(--grey); border: 1px solid var(--border); }
|
||
|
||
/* ── 固定底栏 ── */
|
||
.bottom-area {
|
||
flex-shrink: 0;
|
||
border-top: 1px solid var(--border);
|
||
background: #fff;
|
||
}
|
||
|
||
/* 输入行 ~50px */
|
||
.input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.field-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.field-label {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--text-2);
|
||
white-space: nowrap;
|
||
}
|
||
.field-input {
|
||
height: 34px;
|
||
border: 1.5px solid #bdbdbd;
|
||
border-radius: 6px;
|
||
outline: none;
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
background: #fff;
|
||
text-align: center;
|
||
transition: border-color 0.15s;
|
||
padding: 0 6px;
|
||
}
|
||
.field-input.boxno { width: 52px; }
|
||
.field-input.qty { width: 70px; }
|
||
.field-input:focus { border-color: var(--blue); }
|
||
.field-input:disabled { background: var(--grey-lt); color: #bdbdbd; border-color: #e0e0e0; }
|
||
.field-input.warn-amber { border-color: var(--amber) !important; }
|
||
.field-input.warn-red { border-color: var(--red) !important; }
|
||
|
||
.input-spacer { flex: 1; }
|
||
|
||
.confirm-btn {
|
||
height: 34px;
|
||
padding: 0 16px;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: background 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.confirm-btn:disabled { background: #cfd8dc; color: #90a4ae; cursor: default; }
|
||
.confirm-btn.submitting { background: var(--blue); opacity: 0.8; }
|
||
|
||
|
||
|
||
/* ── 状态栏 ~28px ── */
|
||
.status-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 0 12px;
|
||
height: 28px;
|
||
background: #f5f5f5;
|
||
border-top: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
.sdot {
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.sdot.blue { background: var(--blue); }
|
||
.sdot.green { background: var(--green); }
|
||
.sdot.orange { background: var(--orange); }
|
||
.sdot.red { background: var(--red); }
|
||
.sdot.amber { background: var(--amber); }
|
||
.stext {
|
||
font-size: 11px;
|
||
color: var(--text-2);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ── 文档说明区 ── */
|
||
.notes {
|
||
max-width: 740px;
|
||
margin: 24px auto 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.note-card {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 16px 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||
}
|
||
.note-card h3 {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: #37474f;
|
||
margin-bottom: 10px;
|
||
}
|
||
.note-card ul {
|
||
padding-left: 16px;
|
||
font-size: 12px;
|
||
color: #455a64;
|
||
line-height: 2;
|
||
}
|
||
.note-card ul li strong { color: #1a1a1a; }
|
||
.legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px 20px;
|
||
font-size: 12px;
|
||
color: #455a64;
|
||
}
|
||
.legend-item { display: flex; align-items: center; gap: 6px; }
|
||
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||
.flow {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 11px;
|
||
color: #546e7a;
|
||
line-height: 1.7;
|
||
background: var(--grey-lt);
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
white-space: pre;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-title">单码装箱 UI v2 — 重构布局</div>
|
||
<div class="page-sub">参考多码凑箱设计语言 · 竖向空间最优 · 固定底栏 + 可滚动已分配区</div>
|
||
|
||
<!-- ── Tab 切换 ── -->
|
||
<div class="tabs">
|
||
<button class="tab active" onclick="show('s1',this)">场景1 · 等待扫码</button>
|
||
<button class="tab" onclick="show('s2',this)">场景2 · 已扫码</button>
|
||
<button class="tab" onclick="show('s3',this)">场景3 · 已有分配</button>
|
||
<button class="tab" onclick="show('s4',this)">场景4 · 编辑分配</button>
|
||
<button class="tab" onclick="show('s5',this)">场景5 · 删除确认</button>
|
||
<button class="tab" onclick="show('s6',this)">场景6 · 提交中</button>
|
||
<button class="tab" onclick="show('s7',this)">场景7 · 箱号重复</button>
|
||
<button class="tab" onclick="show('s8',this)">场景8 · 数量超限</button>
|
||
<button class="tab" onclick="show('s9',this)">场景9 · 已全部装完</button>
|
||
<button class="tab" onclick="show('s10',this)">场景10 · 同步中</button>
|
||
</div>
|
||
|
||
<div class="phone-wrap">
|
||
|
||
<!-- ===== 场景1：等待扫码 ===== -->
|
||
<div id="s1">
|
||
<div class="phone-label">场景1 · 等待扫码（初始状态）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 扫码条：等待 -->
|
||
<div class="scan-bar waiting">
|
||
<span class="scan-icon">📷</span>
|
||
<span class="scan-text">请扫描执行卡二维码</span>
|
||
</div>
|
||
|
||
<!-- 排产信息：空状态 -->
|
||
<div class="info-bar empty">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">排产号 —</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:0%"></div>
|
||
</div>
|
||
<button class="detail-link disabled">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 — 箱 · 最大箱号 —</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已分配列表：空 -->
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">0 条</span>
|
||
</div>
|
||
<div class="list-empty">扫码后显示已分配箱号记录</div>
|
||
</div>
|
||
|
||
<!-- 固定底栏 -->
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" disabled placeholder="—" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" disabled placeholder="—" />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn" disabled>确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot blue"></div>
|
||
<span class="stext">等待扫码</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景2：已扫码（无历史分配） ===== -->
|
||
<div id="s2" style="display:none">
|
||
<div class="phone-label">场景2 · 已扫码，自动填充箱号/数量（最常见）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 扫码条：已识别 -->
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<!-- 排产信息 -->
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:25%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 已装 50/200</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已分配列表：空 -->
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">0 条</span>
|
||
</div>
|
||
<div class="list-empty">本次扫码尚未分配箱号</div>
|
||
</div>
|
||
|
||
<!-- 固定底栏 -->
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="3" style="border-color:var(--blue)"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="150" style="border-color:var(--blue);width:70px"/>
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn">确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot blue"></div>
|
||
<span class="stext">数量已填入，请确认或修改</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景3：已扫码 + 已有分配记录 ===== -->
|
||
<div id="s3" style="display:none">
|
||
<div class="phone-label">场景3 · 已扫码 + 已有分配记录（可滚动）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:75%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已分配列表 -->
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">2 条</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">3 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">50 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">7 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">100 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 固定底栏 -->
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="8" style="border-color:var(--blue)"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="50" style="border-color:var(--blue)"/>
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn">确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot blue"></div>
|
||
<span class="stext">数量已填入，请确认或修改</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景4：已分配行 编辑中 ===== -->
|
||
<div id="s4" style="display:none">
|
||
<div class="phone-label">场景4 · 已分配行 — 行内编辑（琥珀色背景）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:75%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">2 条</span>
|
||
</div>
|
||
|
||
<!-- 正常行 -->
|
||
<div class="item">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">3 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">50 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<!-- 编辑中行 -->
|
||
<div class="item editing">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar editing"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">7 号箱</div>
|
||
</div>
|
||
<input class="item-edit-input" value="80" />
|
||
<span style="font-size:11px;color:var(--text-3);flex-shrink:0">件</span>
|
||
<button class="icon-btn save">✓</button>
|
||
<button class="icon-btn cancel">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="8" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="50" />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn">确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot amber"></div>
|
||
<span class="stext">正在编辑 7 号箱数量</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景5：删除确认 ===== -->
|
||
<div id="s5" style="display:none">
|
||
<div class="phone-label">场景5 · 已分配行 — 删除确认（行内展开）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:75%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">2 条</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">3 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">50 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<!-- 待删除行 -->
|
||
<div class="item deleting">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar deleting"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">7 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty" style="color:var(--red)">100 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
<!-- 确认条 -->
|
||
<div class="del-confirm">
|
||
<span class="del-confirm-text">确认删除 7 号箱记录？</span>
|
||
<button class="del-btn yes">删除</button>
|
||
<button class="del-btn no">取消</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="8" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="50" />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn">确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot red"></div>
|
||
<span class="stext">请确认是否删除 7 号箱记录</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景6：正在提交 ===== -->
|
||
<div id="s6" style="display:none">
|
||
<div class="phone-label">场景6 · 正在提交（按钮 loading，全局禁用）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:25%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">0 条</span>
|
||
</div>
|
||
<div class="list-empty">提交完成后将显示记录</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="3" disabled />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="150" disabled />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn submitting" disabled>
|
||
<div class="spinner"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot orange"></div>
|
||
<span class="stext">正在提交…</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景7：箱号重复 ===== -->
|
||
<div id="s7" style="display:none">
|
||
<div class="phone-label">场景7 · 箱号重复（琥珀色通知 + 输入框高亮）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 通知条：箱号重复 -->
|
||
<div class="notice warn">
|
||
<span>⚠</span>
|
||
<span>箱号 5 已存在，请重新输入</span>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:25%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">2 箱</span> · 最大箱号 <span class="hl">5</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">0 条</span>
|
||
</div>
|
||
<div class="list-empty">本次扫码尚未分配箱号</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno warn-amber" value="5" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="50" />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn" disabled>确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot amber"></div>
|
||
<span class="stext">箱号 5 已存在，请重新输入</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景8：数量超限 ===== -->
|
||
<div id="s8" style="display:none">
|
||
<div class="phone-label">场景8 · 数量超限（红色通知 + 输入框高亮）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 通知条：超限 -->
|
||
<div class="notice" style="background:#ffebee;color:var(--red);border-color:#ef9a9a">
|
||
<span>✕</span>
|
||
<span>超出可装数量上限（最多可装 150 件）</span>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:25%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 剩余可装 150</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">0 条</span>
|
||
</div>
|
||
<div class="list-empty">本次扫码尚未分配箱号</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="3" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty warn-red" value="200" style="width:70px"/>
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn" disabled>确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot red"></div>
|
||
<span class="stext">超出可装数量上限</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景9：全部装箱完毕 ===== -->
|
||
<div id="s9" style="display:none">
|
||
<div class="phone-label">场景9 · 已全部装完（保留明细，输入禁用）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 通知条：全部装完 -->
|
||
<div class="notice success">
|
||
<span>✓</span>
|
||
<span>ZP202605180002 已全部装箱完毕，无需操作</span>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180002</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0901 / 100件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-B202</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill full" style="width:100%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">3</span> · <span style="color:var(--green);font-weight:700">100/100 已装完</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">3 条</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">1 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">30 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">2 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">30 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">3</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">3 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty" style="color:var(--green);font-weight:700">40 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" disabled placeholder="—" />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" disabled placeholder="—" />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn" disabled>确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot green"></div>
|
||
<span class="stext">全部装箱完毕，可继续扫码</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景10：自动同步中 ===== -->
|
||
<div id="s10" style="display:none">
|
||
<div class="phone-label">场景10 · 自动同步转运数据（processing）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="mode-pill">⇄ 单码装箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 通知条：同步中 -->
|
||
<div class="notice sync">
|
||
<div class="spinner"></div>
|
||
<span>正在同步转运数据...</span>
|
||
</div>
|
||
<!-- 通知条：警告 -->
|
||
<div class="notice warn">
|
||
<span>⚠</span>
|
||
<span>ZP202605180099 未找到排产号信息，已忽略</span>
|
||
</div>
|
||
|
||
<div class="scan-bar scanned">
|
||
<div class="scan-check">✓</div>
|
||
<span class="scan-code">ZP202605180001</span>
|
||
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
|
||
<span class="scan-badge">已识别</span>
|
||
</div>
|
||
|
||
<div class="info-bar">
|
||
<div class="info-row1">
|
||
<span class="info-paichan">PC-2605-A101</span>
|
||
</div>
|
||
<div class="progress-with-detail">
|
||
<div class="progress-wrap">
|
||
<div class="progress-fill" style="width:75%"></div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
<div class="info-row2">
|
||
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">此总排号已分配</span>
|
||
<span class="list-count">2 条</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">3 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">50 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
<div class="item">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-boxno">7 号箱</div>
|
||
<div class="item-wo">本次扫码</div>
|
||
</div>
|
||
<span class="item-qty">100 件</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="input-row">
|
||
<div class="field-group">
|
||
<span class="field-label">箱号</span>
|
||
<input class="field-input boxno" value="8" disabled />
|
||
</div>
|
||
<div class="field-group">
|
||
<span class="field-label">数量</span>
|
||
<input class="field-input qty" value="50" disabled />
|
||
</div>
|
||
<div class="input-spacer"></div>
|
||
<button class="confirm-btn" disabled>确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot orange"></div>
|
||
<span class="stext">正在同步转运数据...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- phone-wrap -->
|
||
|
||
|
||
<!-- ── 说明文档 ── -->
|
||
<div class="notes">
|
||
|
||
<div class="note-card">
|
||
<h3>v2 布局优化要点（对比原版）</h3>
|
||
<ul>
|
||
<li><strong>AppBar 44px</strong>：标题 + 模式徽章一行，去掉原版独占区域；蓝色 Pill 明确区分单码/多码</li>
|
||
<li><strong>扫码条 38px</strong>：从原版 ~52px 大卡片压缩为紧凑横条，等待/已识别两态颜色清晰</li>
|
||
<li><strong>排产信息 header 约 52px</strong>：左侧三行合并（排产号+工单+ERP件数 / 进度条 / 已有箱数），右侧固定醒目的详情按钮；原版散落两块约 80px，节省 ~28px</li>
|
||
<li><strong>已装入进度条</strong>：新增 3px 高度进度条直观显示已装/总量比例，不占额外空间</li>
|
||
<li><strong>已分配列表每行 40px</strong>：与多码设计对齐（序号+彩色条+箱号/扫码标注+件数+操作），可滚动</li>
|
||
<li><strong>全部装箱完毕仍保留明细</strong>：顶部绿色提示 + 进度条全绿 + 底栏禁用，列表继续展示已分配箱号，便于核对结果</li>
|
||
<li><strong>删除确认行内 28px 条</strong>：不弹框，与多码保持一致</li>
|
||
<li><strong>固定底栏</strong>：箱号输入 + 数量输入 + 确认按钮 横排一行（~50px），不参与滚动</li>
|
||
<li><strong>通知条 ~30px</strong>：橙/琥珀/蓝/绿四色语义，替代原版内嵌 banner，可叠加</li>
|
||
<li><strong>状态栏 28px</strong>：圆点 + 简短文字，去掉原版 ~38px 的高度</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="note-card">
|
||
<h3>状态颜色含义</h3>
|
||
<div class="legend">
|
||
<div class="legend-item"><div class="legend-dot" style="background:#1565c0"></div>蓝 — 空闲/等待/正常</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#e65100"></div>橙 — 提交中/同步中</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#2e7d32"></div>绿 — 操作成功/装完</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#c62828"></div>红 — 错误/超限</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#f57f17"></div>琥珀 — 警告/重复/编辑中</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note-card">
|
||
<h3>UI 结构（v2）</h3>
|
||
<div class="flow">┌──────────────────────────────────────────┐ 44px
|
||
│ "装箱编号" [⇄ 单码装箱 P2] │ AppBar
|
||
├──────────────────────────────────────────┤
|
||
│ [通知条] 可叠加显示，每条 ~30px │ 可选
|
||
├──────────────────────────────────────────┤ ~50px
|
||
│ ✓ ZP202605180001 WO-0882 / 200件 已识别 │ 扫码条
|
||
├──────────────────────────────────────────┤ ~45px
|
||
│ PC-2605-A101 [详情] │
|
||
│ ▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 进度条 │ info-bar
|
||
│ 已有 2箱 · 最大箱号 5 · 已装50/200 │
|
||
├──────────────────────────────────────────┤
|
||
│ 此总排号已分配 2 条 │ list-header
|
||
│ 1 ▌ 3号箱 本次扫码 50件 ✏🗑 │ 40px/行
|
||
│ 2 ▌ 7号箱 本次扫码 100件 ✏🗑 │
|
||
│ ... │ ← 可滚动区域
|
||
├──────────────────────────────────────────┤
|
||
│ 箱号[8] 数量[50 ] [确认] │ ~50px
|
||
├──────────────────────────────────────────┤ 28px
|
||
│ ● 数量已填入，请确认或修改 │ 状态栏
|
||
└──────────────────────────────────────────┘</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function show(id, tab) {
|
||
document.querySelectorAll('.phone-wrap > div').forEach(el => el.style.display = 'none');
|
||
document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
|
||
document.getElementById(id).style.display = '';
|
||
tab.classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|