073162dc65
- Home: add keyboard number shortcuts (1/2/3) for module navigation - Boxing: add P2 key mode switching with pill-style AppBar header - Registration: replace Switch with pill-style lock header matching boxing design - Add Android keyCode fallback for scanner device compatibility - Simplify home page cards to show only module name + shortcut hint - Add lock redesign HTML preview document Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
444 lines
16 KiB
HTML
444 lines
16 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>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif; background: #f0f2f5; padding: 20px; }
|
||
|
||
h1 { text-align: center; margin-bottom: 24px; color: #333; font-size: 22px; }
|
||
h2 { color: #555; margin-bottom: 12px; font-size: 16px; }
|
||
|
||
.wrapper {
|
||
max-width: 1200px; margin: 0 auto;
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
|
||
}
|
||
.column { display: flex; flex-direction: column; gap: 24px; }
|
||
|
||
.phone {
|
||
width: 360px; margin: 0 auto;
|
||
border: 2px solid #333; border-radius: 24px; overflow: hidden;
|
||
background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
|
||
/* ── AppBar ── */
|
||
.appbar {
|
||
height: 56px; background: #1565C0; color: #fff;
|
||
display: flex; align-items: center; padding: 0 12px;
|
||
font-size: 18px; font-weight: 600;
|
||
}
|
||
.appbar .back { font-size: 22px; margin-right: 12px; cursor: pointer; }
|
||
|
||
/* ── OLD: lock switch in actions ── */
|
||
.appbar-old .title { flex: 0 0 auto; }
|
||
.appbar-old .spacer { flex: 1; }
|
||
.appbar-old .lock-area {
|
||
display: flex; align-items: center; gap: 6px; font-size: 13px;
|
||
}
|
||
.p2-hint {
|
||
padding: 2px 6px; border-radius: 4px;
|
||
font-size: 11px; font-weight: 700;
|
||
}
|
||
.p2-hint.off { background: #e0e0e0; color: #757575; border: 1px solid #bdbdbd; }
|
||
.p2-hint.on { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }
|
||
.switch {
|
||
width: 36px; height: 20px; border-radius: 10px;
|
||
position: relative; transition: .2s;
|
||
}
|
||
.switch.off { background: #bdbdbd; }
|
||
.switch.on { background: #ff9800; }
|
||
.switch::after {
|
||
content: ''; position: absolute; top: 2px;
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
background: #fff; transition: .2s;
|
||
}
|
||
.switch.off::after { left: 2px; }
|
||
.switch.on::after { left: 18px; }
|
||
|
||
/* ── NEW: mode header pill (same as boxing page) ── */
|
||
.appbar-new .title-text { flex: 0 0 auto; }
|
||
.appbar-new .gap { width: 12px; }
|
||
|
||
.mode-pill {
|
||
flex: 1; min-width: 0;
|
||
height: 36px; border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
gap: 6px; cursor: pointer; transition: background .2s;
|
||
user-select: none;
|
||
}
|
||
.mode-pill.blue { background: #1565C0; } /* same blue as boxing single-code */
|
||
.mode-pill.orange { background: #E65100; } /* same orange as boxing multi-code */
|
||
|
||
.mode-pill svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }
|
||
.mode-pill .label {
|
||
color: #fff; font-size: 18px; font-weight: 800;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.mode-pill .shortcut {
|
||
color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Body ── */
|
||
.body { padding: 10px 12px 8px; }
|
||
.section-label { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: #333; }
|
||
|
||
/* ── Input panels ── */
|
||
.panel {
|
||
border: 1px solid #bdbdbd; border-radius: 8px; padding: 10px;
|
||
min-height: 58px; transition: .2s;
|
||
}
|
||
.panel.active { border-color: #4caf50; border-width: 2px; }
|
||
.panel.locked {
|
||
border-color: #fb8c00; border-width: 2px;
|
||
background: linear-gradient(135deg, #fff8e1 0%, #fff 40%);
|
||
}
|
||
|
||
.panel-row { display: flex; align-items: center; }
|
||
.panel-row .loc { font-size: 18px; font-weight: 700; color: #424242; }
|
||
.panel-row .sep { color: #bdbdbd; font-size: 20px; padding: 0 8px; }
|
||
.panel-row .zp { flex: 3; text-align: right; font-size: 18px; font-weight: 700; color: #424242; }
|
||
|
||
.loc-chip {
|
||
display: inline-block; padding: 2px 6px; border-radius: 4px;
|
||
font-size: 11px; font-weight: 700; margin-left: 6px;
|
||
}
|
||
.loc-chip.blue { background: #e3f2fd; color: #1565C0; }
|
||
|
||
.lock-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
||
.lock-row .loc { flex: 1; font-size: 18px; font-weight: 700; color: #424242; }
|
||
.lock-icon { color: #fb8c00; font-size: 18px; }
|
||
|
||
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.zchip {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 16px;
|
||
padding: 2px 6px 2px 10px; font-size: 13px; font-weight: 600;
|
||
}
|
||
.zchip .x { color: #9e9e9e; cursor: pointer; font-size: 16px; line-height: 1; }
|
||
|
||
.submit-btn {
|
||
width: 100%; height: 46px; border: none; border-radius: 8px;
|
||
font-size: 17px; font-weight: 600; color: #fff; margin-top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.submit-btn.off { background: #e0e0e0; color: #757575; }
|
||
.submit-btn.on { background: #1565C0; }
|
||
|
||
.divider { height: 1px; background: #e0e0e0; margin: 0; }
|
||
|
||
.overview { padding: 8px 12px; }
|
||
.overview-label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
|
||
.overview-placeholder {
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #9e9e9e; font-size: 13px; min-height: 200px;
|
||
}
|
||
|
||
.status-bar {
|
||
padding: 10px 16px; font-size: 13px; background: #f5f5f5;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2196F3; }
|
||
|
||
/* ── Labels & captions ── */
|
||
.col-label {
|
||
text-align: center; padding: 8px 16px; border-radius: 8px;
|
||
font-weight: 700; font-size: 15px; margin-bottom: 4px;
|
||
}
|
||
.col-label.old { background: #ffcdd2; color: #c62828; }
|
||
.col-label.new { background: #c8e6c9; color: #2e7d32; }
|
||
.caption {
|
||
text-align: center; color: #888; font-size: 12px;
|
||
margin-top: 8px; line-height: 1.6;
|
||
}
|
||
|
||
/* ── Reference boxing pill ── */
|
||
.ref-section {
|
||
max-width: 760px; margin: 40px auto 0;
|
||
padding: 20px; background: #fff; border-radius: 12px;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,.08);
|
||
}
|
||
.ref-section h2 { font-size: 18px; color: #333; margin-bottom: 16px; }
|
||
.ref-row {
|
||
display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
|
||
}
|
||
.ref-label { font-size: 13px; color: #888; width: 80px; flex-shrink: 0; text-align: right; }
|
||
|
||
.ref-pill {
|
||
height: 36px; border-radius: 8px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
gap: 6px; padding: 0 12px;
|
||
}
|
||
.ref-pill svg { width: 18px; height: 18px; fill: #fff; }
|
||
.ref-pill .lbl { color: #fff; font-size: 18px; font-weight: 800; }
|
||
.ref-pill .p2 { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; }
|
||
|
||
.compare-table {
|
||
width: 100%; border-collapse: collapse; font-size: 14px;
|
||
margin-top: 16px;
|
||
}
|
||
.compare-table th {
|
||
text-align: left; padding: 8px 12px; background: #f5f5f5;
|
||
border-bottom: 2px solid #ddd;
|
||
}
|
||
.compare-table td {
|
||
padding: 8px 12px; border-bottom: 1px solid #eee;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>锁定货位 — 布局重设计预览</h1>
|
||
|
||
<div class="wrapper">
|
||
|
||
<!-- ═══════════ LEFT: OLD ═══════════ -->
|
||
<div class="column">
|
||
<div class="col-label old">现有设计</div>
|
||
|
||
<div>
|
||
<h2 style="text-align:center">未锁定</h2>
|
||
<div class="phone">
|
||
<div class="appbar appbar-old">
|
||
<span class="back">←</span>
|
||
<span class="title">上架登记</span>
|
||
<span class="spacer"></span>
|
||
<div class="lock-area">
|
||
<span>锁定货位</span>
|
||
<span class="p2-hint off">P2</span>
|
||
<div class="switch off"></div>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="section-label">登记操作区</div>
|
||
<div class="panel active">
|
||
<div class="panel-row">
|
||
<span class="loc">A-01-02</span>
|
||
<span class="loc-chip blue">普通货架</span>
|
||
<span class="sep">|</span>
|
||
<span class="zp">ZP2024001</span>
|
||
</div>
|
||
</div>
|
||
<button class="submit-btn on">提 交</button>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="overview">
|
||
<div class="overview-label">排产号货架总览</div>
|
||
<div class="overview-placeholder">扫描总排号后自动显示排产号上架情况</div>
|
||
</div>
|
||
<div class="status-bar"><div class="status-dot"></div>请确认信息并提交</div>
|
||
</div>
|
||
<p class="caption">锁定开关挤在 AppBar 右侧，字小、触控区小</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 style="text-align:center">已锁定</h2>
|
||
<div class="phone">
|
||
<div class="appbar appbar-old">
|
||
<span class="back">←</span>
|
||
<span class="title">上架登记</span>
|
||
<span class="spacer"></span>
|
||
<div class="lock-area">
|
||
<span>锁定货位</span>
|
||
<span class="p2-hint on">P2</span>
|
||
<div class="switch on"></div>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="section-label">登记操作区</div>
|
||
<div class="panel locked">
|
||
<div class="lock-row">
|
||
<span class="loc">A-01-02</span>
|
||
<span class="lock-icon">🔒</span>
|
||
<span class="loc-chip blue">普通货架</span>
|
||
</div>
|
||
<div class="chip-wrap">
|
||
<span class="zchip">ZP2024001 <span class="x">×</span></span>
|
||
<span class="zchip">ZP2024002 <span class="x">×</span></span>
|
||
<span class="zchip">ZP2024003 <span class="x">×</span></span>
|
||
</div>
|
||
</div>
|
||
<button class="submit-btn on">批量提交（3 条）</button>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="overview">
|
||
<div class="overview-label">排产号货架总览</div>
|
||
<div class="overview-placeholder">扫描总排号后自动显示排产号上架情况</div>
|
||
</div>
|
||
<div class="status-bar"><div class="status-dot"></div>货位已锁定，请扫描下一张执行卡</div>
|
||
</div>
|
||
<p class="caption">锁定状态仅靠边框颜色区分，不够醒目</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ RIGHT: NEW ═══════════ -->
|
||
<div class="column">
|
||
<div class="col-label new">新设计（与装箱编号统一设计语言）</div>
|
||
|
||
<!-- NEW — unlocked -->
|
||
<div>
|
||
<h2 style="text-align:center">未锁定</h2>
|
||
<div class="phone">
|
||
<div class="appbar appbar-new">
|
||
<span class="back">←</span>
|
||
<span class="title-text">上架登记</span>
|
||
<span class="gap"></span>
|
||
<!-- same pill as boxing page -->
|
||
<div class="mode-pill blue">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="label">未锁定</span>
|
||
<span class="shortcut">P2</span>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="section-label">登记操作区</div>
|
||
<div class="panel active">
|
||
<div class="panel-row">
|
||
<span class="loc">A-01-02</span>
|
||
<span class="loc-chip blue">普通货架</span>
|
||
<span class="sep">|</span>
|
||
<span class="zp">ZP2024001</span>
|
||
</div>
|
||
</div>
|
||
<button class="submit-btn on">提 交</button>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="overview">
|
||
<div class="overview-label">排产号货架总览</div>
|
||
<div class="overview-placeholder">扫描总排号后自动显示排产号上架情况</div>
|
||
</div>
|
||
<div class="status-bar"><div class="status-dot"></div>请确认信息并提交</div>
|
||
</div>
|
||
<p class="caption">
|
||
蓝色药丸 = 未锁定（与装箱页"单码装箱"同色）<br>
|
||
点击或按 P2 切换为锁定
|
||
</p>
|
||
</div>
|
||
|
||
<!-- NEW — locked -->
|
||
<div>
|
||
<h2 style="text-align:center">已锁定</h2>
|
||
<div class="phone">
|
||
<div class="appbar appbar-new">
|
||
<span class="back">←</span>
|
||
<span class="title-text">上架登记</span>
|
||
<span class="gap"></span>
|
||
<!-- same pill as boxing page — orange when locked -->
|
||
<div class="mode-pill orange">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="label">货位锁定</span>
|
||
<span class="shortcut">P2</span>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="section-label">登记操作区</div>
|
||
<div class="panel locked">
|
||
<div class="lock-row">
|
||
<span class="loc">A-01-02</span>
|
||
<span class="lock-icon">🔒</span>
|
||
<span class="loc-chip blue">普通货架</span>
|
||
</div>
|
||
<div class="chip-wrap">
|
||
<span class="zchip">ZP2024001 <span class="x">×</span></span>
|
||
<span class="zchip">ZP2024002 <span class="x">×</span></span>
|
||
<span class="zchip">ZP2024003 <span class="x">×</span></span>
|
||
</div>
|
||
</div>
|
||
<button class="submit-btn on">批量提交（3 条）</button>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="overview">
|
||
<div class="overview-label">排产号货架总览</div>
|
||
<div class="overview-placeholder">扫描总排号后自动显示排产号上架情况</div>
|
||
</div>
|
||
<div class="status-bar"><div class="status-dot"></div>货位已锁定，请扫描下一张执行卡</div>
|
||
</div>
|
||
<p class="caption">
|
||
橙色药丸 = 已锁定（与装箱页"多码凑箱"同色）<br>
|
||
输入面板下方内容不变，仅切换控件统一风格
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ═══════════ Reference comparison ═══════════ -->
|
||
<div class="ref-section">
|
||
<h2>设计语言对照</h2>
|
||
|
||
<div class="ref-row">
|
||
<span class="ref-label">装箱编号</span>
|
||
<div class="ref-pill" style="background:#1565C0;">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="lbl">单码装箱</span>
|
||
<span class="p2">P2</span>
|
||
</div>
|
||
<div class="ref-pill" style="background:#E65100;">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="lbl">多码凑箱</span>
|
||
<span class="p2">P2</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ref-row">
|
||
<span class="ref-label">上架登记</span>
|
||
<div class="ref-pill" style="background:#1565C0;">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="lbl">未锁定</span>
|
||
<span class="p2">P2</span>
|
||
</div>
|
||
<div class="ref-pill" style="background:#E65100;">
|
||
<svg viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
|
||
<span class="lbl">货位锁定</span>
|
||
<span class="p2">P2</span>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th>属性</th>
|
||
<th>装箱编号</th>
|
||
<th>上架登记（新）</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="font-weight:600;">组件位置</td>
|
||
<td>AppBar 标题行内（标题 + 药丸）</td>
|
||
<td>AppBar 标题行内（标题 + 药丸）</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600;">交互方式</td>
|
||
<td>点击药丸 / 按 P2 切换</td>
|
||
<td>点击药丸 / 按 P2 切换</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600;">默认态（蓝色）</td>
|
||
<td>单码装箱</td>
|
||
<td>未锁定</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600;">切换态（橙色）</td>
|
||
<td>多码凑箱</td>
|
||
<td>货位锁定</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600;">药丸结构</td>
|
||
<td>swap 图标 + 模式名 + P2</td>
|
||
<td>swap 图标 + 状态名 + P2</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600;">圆角 / 字重</td>
|
||
<td>8px / w800</td>
|
||
<td>8px / w800</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|