f964c76382
Merge box number and paichan info into a single header bar, compress list rows to 40px with left color bars, fix bottom operation area (scan/submit/finish) above status bar, and shrink notification bars and status bar for more list space. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1147 lines
32 KiB
HTML
1147 lines
32 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 ── */
|
||
.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;
|
||
}
|
||
.mode-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 9px;
|
||
border-radius: 12px;
|
||
background: var(--orange);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
.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;
|
||
}
|
||
/* spacer */
|
||
.app-bar-spacer { flex: 1; }
|
||
|
||
/* ── 通知条 ── */
|
||
.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.dup { background: var(--amber-lt); color: var(--amber); border-color: #ffe57f; }
|
||
|
||
.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); } }
|
||
|
||
/* ── 顶部紧凑头部（箱号 + 排产信息合一） ── */
|
||
.header-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
background: #fafafa;
|
||
}
|
||
|
||
.boxno-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.boxno-label {
|
||
font-size: 11px;
|
||
color: var(--text-2);
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
.boxno-input {
|
||
width: 52px;
|
||
height: 32px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
border: 1.5px solid #bdbdbd;
|
||
border-radius: 6px;
|
||
outline: none;
|
||
color: var(--text);
|
||
background: #fff;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.boxno-input:focus { border-color: var(--blue); }
|
||
|
||
.header-divider {
|
||
width: 1px;
|
||
height: 28px;
|
||
background: var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.paichan-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.paichan-no {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.2;
|
||
}
|
||
.paichan-meta {
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.detail-link {
|
||
font-size: 11px;
|
||
color: var(--blue);
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.detail-link.disabled { color: var(--text-3); cursor: default; }
|
||
|
||
/* ── 已装入列表区 ── */
|
||
.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: 20px;
|
||
font-size: 13px;
|
||
color: var(--text-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 每一行 */
|
||
.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: 26px;
|
||
border-radius: 2px;
|
||
flex-shrink: 0;
|
||
background: #bdbdbd;
|
||
}
|
||
.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-code {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.3;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.item-wo {
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.item-qty {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--green);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 编辑中的数量输入 */
|
||
.item-edit-input {
|
||
width: 52px;
|
||
height: 26px;
|
||
text-align: center;
|
||
border: 1.5px solid var(--amber);
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
outline: none;
|
||
background: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.icon-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
flex-shrink: 0;
|
||
transition: background 0.12s;
|
||
}
|
||
.icon-btn:hover { background: #eeeeee; }
|
||
.icon-btn.save { color: var(--green); }
|
||
.icon-btn.cancel { color: var(--grey); }
|
||
.icon-btn.edit { color: #ff9800; }
|
||
.icon-btn.del { color: var(--red); }
|
||
|
||
/* 删除确认行 */
|
||
.del-confirm {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 12px 5px 34px;
|
||
background: #ffebee;
|
||
border-bottom: 1px solid #ffcdd2;
|
||
}
|
||
.del-confirm-text {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: var(--red);
|
||
font-weight: 500;
|
||
}
|
||
.del-btn {
|
||
border: none;
|
||
background: none;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
.del-btn.yes { color: var(--red); background: #ffcdd2; }
|
||
.del-btn.no { color: var(--grey); }
|
||
|
||
/* ── 底部操作区（固定） ── */
|
||
.bottom-area {
|
||
border-top: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 扫码条 */
|
||
.scan-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.scan-bar.waiting {
|
||
background: #fafafa;
|
||
}
|
||
.scan-bar.scanned {
|
||
background: var(--green-lt);
|
||
border-bottom-color: #a5d6a7;
|
||
}
|
||
.scan-icon { font-size: 16px; }
|
||
.scan-text {
|
||
flex: 1;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.scan-bar.waiting .scan-text { color: var(--text-3); font-weight: 400; }
|
||
.scan-bar.scanned .scan-text { color: var(--green); }
|
||
.scan-check { font-size: 15px; color: var(--green); flex-shrink: 0; }
|
||
|
||
/* 提交行 */
|
||
.submit-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 12px;
|
||
}
|
||
.qty-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: 1;
|
||
}
|
||
.qty-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-3);
|
||
white-space: nowrap;
|
||
}
|
||
.qty-label.active { color: var(--text-2); }
|
||
.qty-input {
|
||
flex: 1;
|
||
height: 34px;
|
||
border: 1.5px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
padding: 0 10px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
background: #fff;
|
||
}
|
||
.qty-input:focus { border-color: var(--blue); }
|
||
.qty-input:disabled { background: #f5f5f5; color: #ccc; border-color: #eee; }
|
||
.qty-input.error { border-color: var(--red); }
|
||
|
||
.submit-btn {
|
||
height: 34px;
|
||
padding: 0 18px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.submit-btn.active { background: var(--blue); color: #fff; }
|
||
.submit-btn.active:hover { background: #1976d2; }
|
||
.submit-btn.off { background: #eeeeee; color: #bbb; cursor: default; }
|
||
|
||
/* 完成本箱按钮 */
|
||
.finish-row {
|
||
padding: 6px 12px 8px;
|
||
}
|
||
.finish-btn {
|
||
width: 100%;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
border: 1.5px solid #9e9e9e;
|
||
background: #fff;
|
||
color: var(--text);
|
||
}
|
||
.finish-btn:hover { background: #f5f5f5; border-color: #616161; }
|
||
.finish-btn.off { border-color: #e0e0e0; color: #ccc; cursor: default; }
|
||
.finish-btn.off:hover { background: #fff; border-color: #e0e0e0; }
|
||
|
||
/* ── 状态栏 ── */
|
||
.status-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 6px 12px;
|
||
background: #f5f5f5;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.sdot {
|
||
width: 7px; height: 7px;
|
||
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: 12px;
|
||
color: var(--text-2);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ── 说明区 ── */
|
||
.notes { max-width: 800px; margin: 32px auto 0; }
|
||
.note-card {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
}
|
||
.note-card h3 {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--blue);
|
||
border-bottom: 1px solid var(--blue-lt);
|
||
padding-bottom: 6px;
|
||
margin-bottom: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.note-card p, .note-card li {
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
color: var(--text-2);
|
||
}
|
||
.note-card ul { padding-left: 18px; }
|
||
.note-card code {
|
||
background: #f5f5f5; padding: 1px 5px;
|
||
border-radius: 3px; font-size: 12px; color: #d32f2f;
|
||
}
|
||
.legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-2);
|
||
}
|
||
.legend-dot {
|
||
width: 9px; height: 9px;
|
||
border-radius: 50%;
|
||
}
|
||
.flow {
|
||
background: #fafafa;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
white-space: pre;
|
||
overflow-x: auto;
|
||
color: #333;
|
||
}
|
||
|
||
/* 优化说明高亮 */
|
||
.diff-tag {
|
||
display: inline-block;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
padding: 1px 5px;
|
||
border-radius: 3px;
|
||
background: var(--blue-lt);
|
||
color: var(--blue);
|
||
vertical-align: middle;
|
||
margin-left: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-title">装箱编号 — 多码凑箱 · 优化布局 v2</div>
|
||
<p class="page-sub">紧凑信息密度 · 固定操作底栏 · 清晰状态层次</p>
|
||
|
||
<!-- ── Tabs ── -->
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="show('s1',this)">① 初始</div>
|
||
<div class="tab" onclick="show('s2',this)">② 扫码识别</div>
|
||
<div class="tab" onclick="show('s3',this)">③ 已装多项</div>
|
||
<div class="tab" onclick="show('s4',this)">④ 编辑/删除</div>
|
||
<div class="tab" onclick="show('s5',this)">⑤ 排产号切换</div>
|
||
<div class="tab" onclick="show('s6',this)">⑥ 自动同步</div>
|
||
</div>
|
||
|
||
<!-- ── 手机 ── -->
|
||
<div class="phone-wrap">
|
||
|
||
<!-- ===== 场景1：初始 ===== -->
|
||
<div id="s1">
|
||
<div class="phone-label">场景1 · 初始状态（等待扫码）</div>
|
||
<div class="phone">
|
||
<!-- AppBar -->
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="app-bar-spacer"></div>
|
||
<div class="mode-pill">⇄ 多码凑箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- Header：箱号 + 排产信息 -->
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="1" />
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00009</div>
|
||
<div class="paichan-meta">已有 0 箱 · 最大箱号 0</div>
|
||
</div>
|
||
<button class="detail-link disabled">详情</button>
|
||
</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="scan-bar waiting">
|
||
<span class="scan-icon">📷</span>
|
||
<span class="scan-text">请扫描执行卡二维码</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label">数量</span>
|
||
<input class="qty-input" disabled placeholder="—" />
|
||
</div>
|
||
<button class="submit-btn off">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn off">完成本箱</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="app-bar-spacer"></div>
|
||
<div class="mode-pill">⇄ 多码凑箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="1" />
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00009</div>
|
||
<div class="paichan-meta">已有 0 箱 · 最大箱号 0</div>
|
||
</div>
|
||
<button class="detail-link disabled">详情</button>
|
||
</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="scan-bar scanned">
|
||
<span class="scan-check">✓</span>
|
||
<span class="scan-text">26BW0011 · WO-2026-001 · 80件</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label active">数量</span>
|
||
<input class="qty-input" value="80" />
|
||
</div>
|
||
<button class="submit-btn active">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn off">完成本箱</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 · 已装入 3 项，等待继续扫码</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="app-bar-spacer"></div>
|
||
<div class="mode-pill">⇄ 多码凑箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="1" />
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00009</div>
|
||
<div class="paichan-meta">已有 1 箱 · 最大箱号 1</div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</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-code">26BW0011</div>
|
||
<div class="item-wo">WO-2026-001</div>
|
||
</div>
|
||
<span class="item-qty">80 / 80</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-code">26BW0012</div>
|
||
<div class="item-wo">WO-2026-002</div>
|
||
</div>
|
||
<span class="item-qty">60 / 60</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-code">26BW0013</div>
|
||
<div class="item-wo">WO-2026-003</div>
|
||
</div>
|
||
<span class="item-qty">40 / 40</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="scan-bar waiting">
|
||
<span class="scan-icon">📷</span>
|
||
<span class="scan-text">请扫描执行卡二维码</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label">数量</span>
|
||
<input class="qty-input" disabled placeholder="—" />
|
||
</div>
|
||
<button class="submit-btn off">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn">完成本箱</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot green"></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="app-bar-spacer"></div>
|
||
<div class="mode-pill">⇄ 多码凑箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="1" />
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00009</div>
|
||
<div class="paichan-meta">已有 1 箱 · 最大箱号 1</div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="list-header">
|
||
<span class="list-title">已装入本箱</span>
|
||
<span class="list-count">3 项</span>
|
||
</div>
|
||
|
||
<!-- 编辑中 -->
|
||
<div class="item editing">
|
||
<span class="item-idx">1</span>
|
||
<div class="item-bar editing"></div>
|
||
<div class="item-main">
|
||
<div class="item-code">26BW0011</div>
|
||
<div class="item-wo">WO-2026-001</div>
|
||
</div>
|
||
<input class="item-edit-input" value="75" />
|
||
<button class="icon-btn save">✓</button>
|
||
<button class="icon-btn cancel">✕</button>
|
||
</div>
|
||
|
||
<!-- 正常 -->
|
||
<div class="item">
|
||
<span class="item-idx">2</span>
|
||
<div class="item-bar ok"></div>
|
||
<div class="item-main">
|
||
<div class="item-code">26BW0012</div>
|
||
<div class="item-wo">WO-2026-002</div>
|
||
</div>
|
||
<span class="item-qty">60 / 60</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
|
||
<!-- 删除确认 -->
|
||
<div class="item deleting">
|
||
<span class="item-idx">3</span>
|
||
<div class="item-bar deleting"></div>
|
||
<div class="item-main">
|
||
<div class="item-code">26BW0013</div>
|
||
<div class="item-wo">WO-2026-003</div>
|
||
</div>
|
||
<span class="item-qty" style="color:var(--red)">40 / 40</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
<div class="del-confirm">
|
||
<span class="del-confirm-text">确认删除？</span>
|
||
<button class="del-btn yes">删除</button>
|
||
<button class="del-btn no">取消</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="scan-bar waiting">
|
||
<span class="scan-icon">📷</span>
|
||
<span class="scan-text">请扫描执行卡二维码</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label">数量</span>
|
||
<input class="qty-input" disabled placeholder="—" />
|
||
</div>
|
||
<button class="submit-btn off">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn">完成本箱</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot blue"></div>
|
||
<span class="stext">请继续扫码或完成本箱</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="app-bar-spacer"></div>
|
||
<div class="mode-pill">⇄ 多码凑箱 <span class="p-key">P2</span></div>
|
||
</div>
|
||
|
||
<!-- 蓝色通知条 -->
|
||
<div class="notice info">
|
||
<span>ℹ</span>
|
||
<span>排产号已切换：W00010 · 箱号已重置</span>
|
||
</div>
|
||
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="2" style="border-color:#1565c0"/>
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00010</div>
|
||
<div class="paichan-meta">已有 0 箱 · 最大箱号 1</div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</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="scan-bar scanned">
|
||
<span class="scan-check">✓</span>
|
||
<span class="scan-text">26BW0020 · WO-2026-010 · 100件</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label active">数量</span>
|
||
<input class="qty-input" value="100" />
|
||
</div>
|
||
<button class="submit-btn active">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn off">完成本箱</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="sdot blue"></div>
|
||
<span class="stext">排产号已切换，箱号已重置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 场景6：自动同步 ===== -->
|
||
<div id="s6" style="display:none">
|
||
<div class="phone-label">场景6 · 从转运同步自动装箱（处理中）</div>
|
||
<div class="phone">
|
||
<div class="app-bar">
|
||
<span class="app-title">装箱编号</span>
|
||
<div class="app-bar-spacer"></div>
|
||
<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>26BW0099 未找到排产号信息，已忽略</span>
|
||
</div>
|
||
|
||
<div class="header-bar">
|
||
<div class="boxno-group">
|
||
<span class="boxno-label">箱号</span>
|
||
<input class="boxno-input" value="3" />
|
||
</div>
|
||
<div class="header-divider"></div>
|
||
<div class="paichan-info">
|
||
<div class="paichan-no">W00009</div>
|
||
<div class="paichan-meta">已有 2 箱 · 最大箱号 2</div>
|
||
</div>
|
||
<button class="detail-link">详情</button>
|
||
</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-code">26BW0015</div>
|
||
<div class="item-wo">WO-2026-005</div>
|
||
</div>
|
||
<span class="item-qty">30 / 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-code">26BW0016</div>
|
||
<div class="item-wo">WO-2026-006</div>
|
||
</div>
|
||
<span class="item-qty">50 / 50</span>
|
||
<button class="icon-btn edit">✏️</button>
|
||
<button class="icon-btn del">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-area">
|
||
<div class="scan-bar waiting">
|
||
<span class="scan-icon">📷</span>
|
||
<span class="scan-text">请扫描执行卡二维码</span>
|
||
</div>
|
||
<div class="submit-row">
|
||
<div class="qty-group">
|
||
<span class="qty-label">数量</span>
|
||
<input class="qty-input" disabled placeholder="—" />
|
||
</div>
|
||
<button class="submit-btn off">确认</button>
|
||
</div>
|
||
<div class="finish-row">
|
||
<button class="finish-btn">完成本箱</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 高度从 ~52px 压缩至 44px</strong>，标题与模式徽章并排，省去独占一行的模式按钮区</li>
|
||
<li><strong>箱号 + 排产信息合并为一个 header-bar</strong>（高度 ~48px），原版两行拆开共需 ~80px；节省约 32px 垂直空间</li>
|
||
<li><strong>已装入列表每行压缩至 40px</strong>（原 ~48-52px），信息分两行展示（总排号 / 工单号）但视觉上紧凑</li>
|
||
<li><strong>扫码区 + 数量输入 + 确认按钮 + 完成本箱组成固定底栏</strong>，不参与滚动，列表区可充分展示多条记录</li>
|
||
<li><strong>删除确认行内联展开</strong>（不弹框），高度约 26px，减少视觉干扰</li>
|
||
<li><strong>通知条高度从 ~36px 压缩至 ~30px</strong>，字号 12px，满足阅读同时节省空间</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:#ff9800"></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 │ 可选
|
||
├──────────────────────────────────────────┤ 48px
|
||
│ 箱号 [ 1 ] │ W00009 已有1箱·最大箱1 详情│ header-bar
|
||
├──────────────────────────────────────────┤
|
||
│ 已装入本箱 3 项 │ list-header (sticky)
|
||
│ 1 ▌ 26BW0011 WO-2026-001 80/80 ✏🗑 │ 40px/行
|
||
│ 2 ▌ 26BW0012 WO-2026-002 60/60 ✏🗑 │
|
||
│ 3 ▌ 26BW0013 WO-2026-003 40/40 ✏🗑 │ ← 可滚动区域
|
||
│ ... │
|
||
├──────────────────────────────────────────┤
|
||
│ [✓ 26BW0014 · WO-004 · 50件] │ ~38px 扫码条
|
||
│ 数量 [ 50 ] [确认] │ ~48px 提交行
|
||
│ [ 完成本箱 ] │ ~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>
|