292 lines
18 KiB
HTML
292 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>批量转运 · 点击开启相机 / 接收医院 hr-sheet 预览</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
background: #EEF2F7; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
color: #1F2937; padding: 28px 24px 40px;
|
||
}
|
||
h1 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||
.sub { font-size: 13px; color: #6B7280; margin-bottom: 22px; }
|
||
.row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
|
||
.col { display: flex; flex-direction: column; gap: 10px; }
|
||
.cap { font-size: 12.5px; color: #475569; font-weight: 600; }
|
||
.cap span { color: #2563EB; }
|
||
.phone {
|
||
width: 375px; height: 812px; background: #F3F4F6; border-radius: 26px;
|
||
overflow: hidden; position: relative; box-shadow: 0 14px 40px rgba(15,23,42,.16);
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.nav {
|
||
height: 88px; background: #fff; display: flex; align-items: flex-end;
|
||
padding: 0 16px 12px; position: relative; flex: none;
|
||
}
|
||
.nav-t { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 16px; font-weight: 700; }
|
||
.nav-r { margin-left: auto; font-size: 14.6px; color: #6B7280; }
|
||
|
||
/* ---------- 顶部取景区 ---------- */
|
||
.cm { background: #0B1220; padding: 8px 14px 9px; flex: none; }
|
||
.cm-view {
|
||
height: 108px; border-radius: 14px; overflow: hidden; position: relative;
|
||
background: #10192A; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.cm-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
.cm-idle svg { display: block; }
|
||
.cm-idle-t { font-size: 14px; font-weight: 700; color: #E5E7EB; margin-top: 7px; }
|
||
.cm-idle-s { font-size: 11.2px; color: rgba(148,163,184,.92); margin-top: 4px; }
|
||
.cm-cnt {
|
||
position: absolute; left: 10px; top: 10px; background: rgba(17,24,39,.62);
|
||
border-radius: 7px; padding: 3px 8px; font-size: 11.8px; font-weight: 700; color: #fff;
|
||
}
|
||
.cm-cnt b { color: #60A5FA; }
|
||
.cm-frame { width: 86px; height: 86px; border-radius: 16px; background: rgba(255,255,255,.03); position: relative; }
|
||
.cm-cf { position: absolute; width: 22px; height: 22px; border: 3px solid #60A5FA; border-radius: 7px; }
|
||
.cm-cf.tl { left: 0; top: 0; border-right-width: 0; border-bottom-width: 0; }
|
||
.cm-cf.tr { right: 0; top: 0; border-left-width: 0; border-bottom-width: 0; }
|
||
.cm-cf.bl { left: 0; bottom: 0; border-right-width: 0; border-top-width: 0; }
|
||
.cm-cf.br { right: 0; bottom: 0; border-left-width: 0; border-top-width: 0; }
|
||
.cm-laser { position: absolute; left: 7px; right: 7px; top: 60px; height: 2px; border-radius: 2px; background: #93C5FD; }
|
||
.cm-acts { display: flex; margin-top: 9px; }
|
||
.cm-act {
|
||
flex: 1; height: 34px; border-radius: 9px; background: rgba(255,255,255,.10);
|
||
display: flex; align-items: center; justify-content: center; margin-right: 8px;
|
||
}
|
||
.cm-act:last-child { margin-right: 0; }
|
||
.cm-act.on { background: rgba(16,185,129,.20); }
|
||
.cm-act-t { font-size: 12.9px; font-weight: 700; color: rgba(255,255,255,.9); margin-left: 5px; }
|
||
.cm-act-t.on { color: #6EE7B7; }
|
||
|
||
/* ---------- 中部记录列表 ---------- */
|
||
.rec { flex: 1; padding: 8px 14px 0; overflow: hidden; }
|
||
.rec-h { display: flex; align-items: center; margin-bottom: 7px; }
|
||
.rec-h-t { font-size: 13.4px; font-weight: 700; }
|
||
.rec-h-n { font-size: 11.8px; color: #6B7280; margin-left: 6px; }
|
||
.rec-h-c { margin-left: auto; font-size: 11.8px; font-weight: 700; color: #DC2626; }
|
||
.rec-i {
|
||
background: #fff; border-radius: 12px; padding: 9px 12px; margin-bottom: 7px;
|
||
display: flex; align-items: center;
|
||
}
|
||
.wb { width: 4px; height: 26px; border-radius: 2px; margin-right: 9px; }
|
||
.rec-n { font-size: 13.4px; font-weight: 700; margin-right: 6px; }
|
||
.rec-c { font-size: 10.8px; color: #9CA3AF; margin-top: 2px; }
|
||
.lv { font-size: 10px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 8px; }
|
||
.rec-x { margin-left: auto; font-size: 15px; color: #D1D5DB; }
|
||
|
||
/* ---------- 底部表单 ---------- */
|
||
.form { background: #fff; border-top: 1px solid #E5E7EB; border-radius: 16px 16px 0 0; padding: 11px 16px 14px; position: relative; flex: none; }
|
||
.lb { font-size: 12.9px; font-weight: 700; color: #6B7280; margin-bottom: 6px; }
|
||
.lb.g { margin-top: 9px; }
|
||
.pick {
|
||
display: flex; align-items: center; background: #F9FAFB; border: 1px solid #E5E7EB;
|
||
border-radius: 10px; padding: 10px 12px;
|
||
}
|
||
.pick-n { flex: 1; font-size: 14px; font-weight: 700; }
|
||
.pick-b { font-size: 11.2px; font-weight: 700; color: #059669; margin-right: 6px; }
|
||
.pick-b.no { color: #DC2626; }
|
||
.seg { display: flex; background: #E5E7EB; border-radius: 10px; padding: 2px; }
|
||
.seg-i { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
|
||
.seg-i.on { background: #fff; }
|
||
.seg-t { font-size: 14.6px; color: #6B7280; }
|
||
.seg-t.on { color: #2563EB; font-weight: 700; }
|
||
.foot { display: flex; padding-right: 70px; }
|
||
.foot-c { flex: 1; margin-right: 8px; }
|
||
.foot-c:last-child { margin-right: 0; }
|
||
.field { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; padding: 8px 12px; }
|
||
.field-l { font-size: 10.6px; color: #9CA3AF; }
|
||
.field-i { font-size: 13.4px; font-weight: 600; margin-top: 2px; }
|
||
.send {
|
||
position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 28px;
|
||
background: linear-gradient(to bottom right, #2563EB, #1D4ED8); display: flex; align-items: center;
|
||
justify-content: center; box-shadow: 0 6px 18px rgba(37,99,235,.42);
|
||
}
|
||
|
||
/* ---------- hr-sheet ---------- */
|
||
.mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
|
||
.sheet {
|
||
position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
|
||
border-radius: 18px 18px 0 0; padding: 14px 16px 20px;
|
||
}
|
||
.sheet-h { display: flex; align-items: center; margin-bottom: 10px; }
|
||
.sheet-h-b { font-size: 16.8px; font-weight: 700; }
|
||
.sheet-h-x { margin-left: auto; font-size: 18px; color: #9CA3AF; }
|
||
.opt { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid #F3F4F6; }
|
||
.opt.last { border-bottom: 0; }
|
||
.opt-txt { flex: 1; display: flex; flex-direction: column; }
|
||
.opt-n { font-size: 15px; font-weight: 700; color: #1F2937; }
|
||
.opt-n.on { color: #2563EB; }
|
||
.opt-n.dim { color: #6B7280; }
|
||
.opt-m { font-size: 11.2px; color: #9CA3AF; margin-top: 3px; }
|
||
.opt-b { font-size: 11.2px; font-weight: 700; color: #059669; margin-right: 6px; }
|
||
.opt-b.no { color: #DC2626; }
|
||
.tick { color: #2563EB; font-size: 15px; font-weight: 700; }
|
||
|
||
.notes { margin-top: 24px; max-width: 780px; }
|
||
.notes h2 { font-size: 14px; margin-bottom: 8px; }
|
||
.notes ul { font-size: 13px; color: #475569; line-height: 1.9; padding-left: 18px; }
|
||
.notes code { background: #E2E8F0; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>批量转运 · 顶部点击开启相机 + 接收医院 hr-sheet 弹层</h1>
|
||
<div class="sub">设计基准 375 × 812。左：进入页面（相机未启动，接收医院为折叠字段）；右：点击「接收医院」整行后唤起底部弹层。</div>
|
||
|
||
<div class="row">
|
||
<!-- ============ 状态 A：相机未开启 ============ -->
|
||
<div class="col">
|
||
<div class="cap">状态 A · 初始态 — 取景区显示 <span>「点击开启摄像头」</span>，不再自动占有摄像头</div>
|
||
<div class="phone">
|
||
<div class="nav"><span class="nav-r">历史</span><span class="nav-t">批量转运</span></div>
|
||
|
||
<div class="cm">
|
||
<div class="cm-view">
|
||
<div class="cm-idle">
|
||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#60A5FA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M9 3h6l1.5 2H20a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3.5L9 3z"/>
|
||
<circle cx="12" cy="12" r="3.4"/>
|
||
</svg>
|
||
<div class="cm-idle-t">点击开启摄像头</div>
|
||
<div class="cm-idle-s">对准伤员腕带二维码，自动连续识别</div>
|
||
</div>
|
||
<div class="cm-cnt">已识别 <b>4</b> 人</div>
|
||
</div>
|
||
<div class="cm-acts">
|
||
<div class="cm-act">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M10 8.5l6 3.5-6 3.5z" fill="#fff" stroke="none"/></svg>
|
||
<span class="cm-act-t">开启扫码</span>
|
||
</div>
|
||
<div class="cm-act">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h.01M11 9h.01M15 9h.01M7 13h.01M11 13h.01M15 13h.01M7 17h10"/></svg>
|
||
<span class="cm-act-t">手动输入编号</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rec">
|
||
<div class="rec-h">
|
||
<span class="rec-h-t">已扫码伤员</span><span class="rec-h-n">4 / 12</span>
|
||
<span class="rec-h-c">清空</span>
|
||
</div>
|
||
<div class="rec-i"><div class="wb" style="background:#DC2626"></div><div><div style="display:flex;align-items:center"><span class="rec-n">王建国</span><span class="lv" style="background:#DC2626">危重</span></div><div class="rec-c">男 · 52 岁 · TRIAGE-20260922-0001</div></div><span class="rec-x">✕</span></div>
|
||
<div class="rec-i"><div class="wb" style="background:#F59E0B"></div><div><div style="display:flex;align-items:center"><span class="rec-n">李华</span><span class="lv" style="background:#F59E0B">重伤</span></div><div class="rec-c">男 · 35 岁 · TRIAGE-20260922-0003</div></div><span class="rec-x">✕</span></div>
|
||
<div class="rec-i"><div class="wb" style="background:#10B981"></div><div><div style="display:flex;align-items:center"><span class="rec-n">陈小梅</span><span class="lv" style="background:#10B981">轻伤</span></div><div class="rec-c">女 · 28 岁 · TRIAGE-20260922-0006</div></div><span class="rec-x">✕</span></div>
|
||
<div class="rec-i"><div class="wb" style="background:#F59E0B"></div><div><div style="display:flex;align-items:center"><span class="rec-n">赵国强</span><span class="lv" style="background:#F59E0B">重伤</span></div><div class="rec-c">男 · 41 岁 · TRIAGE-20260922-0008</div></div><span class="rec-x">✕</span></div>
|
||
</div>
|
||
|
||
<div class="form">
|
||
<div class="lb">接收医院</div>
|
||
<div class="pick">
|
||
<span class="pick-n">协和医院 · 急诊创伤中心</span>
|
||
<span class="pick-b">床位 2</span>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
||
</div>
|
||
<div class="lb g">转运方式</div>
|
||
<div class="seg">
|
||
<div class="seg-i on"><span class="seg-t on">救护车 🚑</span></div>
|
||
<div class="seg-i"><span class="seg-t">直升机 🚁</span></div>
|
||
</div>
|
||
<div class="lb g">随车联系人</div>
|
||
<div class="foot">
|
||
<div class="foot-c"><div class="field"><div class="field-l">姓名</div><div class="field-i">刘伟</div></div></div>
|
||
<div class="foot-c"><div class="field"><div class="field-l">联系电话</div><div class="field-i">13800006621</div></div></div>
|
||
</div>
|
||
<div class="send"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 状态 B：弹层展开 ============ -->
|
||
<div class="col">
|
||
<div class="cap">状态 B · 点击「接收医院」— 唤起 <span>hr-sheet</span>（名称 + 距离，满员置灰不可选）</div>
|
||
<div class="phone">
|
||
<div class="nav"><span class="nav-r">历史</span><span class="nav-t">批量转运</span></div>
|
||
|
||
<div class="cm">
|
||
<div class="cm-view">
|
||
<div class="cm-frame">
|
||
<div class="cm-cf tl"></div><div class="cm-cf tr"></div><div class="cm-cf bl"></div><div class="cm-cf br"></div>
|
||
<div class="cm-laser"></div>
|
||
</div>
|
||
<div class="cm-cnt">已识别 <b>6</b> 人</div>
|
||
</div>
|
||
<div class="cm-acts">
|
||
<div class="cm-act on">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#6EE7B7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2"/><path d="M4 12h16"/></svg>
|
||
<span class="cm-act-t on">连续扫码中</span>
|
||
</div>
|
||
<div class="cm-act">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h.01M11 9h.01M15 9h.01M7 13h.01M11 13h.01M15 13h.01M7 17h10"/></svg>
|
||
<span class="cm-act-t">手动输入编号</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rec">
|
||
<div class="rec-h">
|
||
<span class="rec-h-t">已扫码伤员</span><span class="rec-h-n">6 / 12</span>
|
||
<span class="rec-h-c">清空</span>
|
||
</div>
|
||
<div class="rec-i"><div class="wb" style="background:#DC2626"></div><div><div style="display:flex;align-items:center"><span class="rec-n">王建国</span><span class="lv" style="background:#DC2626">危重</span></div><div class="rec-c">男 · 52 岁 · TRIAGE-20260922-0001</div></div><span class="rec-x">✕</span></div>
|
||
<div class="rec-i"><div class="wb" style="background:#F59E0B"></div><div><div style="display:flex;align-items:center"><span class="rec-n">李华</span><span class="lv" style="background:#F59E0B">重伤</span></div><div class="rec-c">男 · 35 岁 · TRIAGE-20260922-0003</div></div><span class="rec-x">✕</span></div>
|
||
<div class="rec-i"><div class="wb" style="background:#10B981"></div><div><div style="display:flex;align-items:center"><span class="rec-n">陈小梅</span><span class="lv" style="background:#10B981">轻伤</span></div><div class="rec-c">女 · 28 岁 · TRIAGE-20260922-0006</div></div><span class="rec-x">✕</span></div>
|
||
</div>
|
||
|
||
<div class="form">
|
||
<div class="lb">接收医院</div>
|
||
<div class="pick">
|
||
<span class="pick-n">协和医院 · 急诊创伤中心</span>
|
||
<span class="pick-b">床位 2</span>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
||
</div>
|
||
<div class="lb g">转运方式</div>
|
||
<div class="seg">
|
||
<div class="seg-i on"><span class="seg-t on">救护车 🚑</span></div>
|
||
<div class="seg-i"><span class="seg-t">直升机 🚁</span></div>
|
||
</div>
|
||
<div class="lb g">随车联系人</div>
|
||
<div class="foot">
|
||
<div class="foot-c"><div class="field"><div class="field-l">姓名</div><div class="field-i">刘伟</div></div></div>
|
||
<div class="foot-c"><div class="field"><div class="field-l">联系电话</div><div class="field-i">13800006621</div></div></div>
|
||
</div>
|
||
<div class="send"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg></div>
|
||
</div>
|
||
|
||
<!-- 弹层 -->
|
||
<div class="mask"></div>
|
||
<div class="sheet">
|
||
<div class="sheet-h">
|
||
<span class="sheet-h-b">选择接收医院</span>
|
||
<span class="sheet-h-x">✕</span>
|
||
</div>
|
||
<div class="opt">
|
||
<div class="opt-txt"><span class="opt-n on">协和医院 · 急诊创伤中心</span><span class="opt-m">距现场 6.2 km · 约 14 分钟</span></div>
|
||
<span class="opt-b">床位 2</span><span class="tick">✓</span>
|
||
</div>
|
||
<div class="opt">
|
||
<div class="opt-txt"><span class="opt-n">市第一人民医院 · 急诊</span><span class="opt-m">距现场 8.9 km · 约 21 分钟</span></div>
|
||
<span class="opt-b">床位 5</span>
|
||
</div>
|
||
<div class="opt last">
|
||
<div class="opt-txt"><span class="opt-n dim">同仁医院 · 急诊</span><span class="opt-m">距现场 4.1 km · 但急诊已满</span></div>
|
||
<span class="opt-b no">满员 ✕</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notes">
|
||
<h2>改动说明</h2>
|
||
<ul>
|
||
<li><code>hr-scan-cam</code>：<code>cameraOn</code> 默认 <code>false</code>，取景区新增 <code>@click="openCamera"</code>；未开启时展示居中引导「点击开启摄像头」，不再进页面即占用摄像头。</li>
|
||
<li>底部按钮文案由「已暂停扫码」改为「开启扫码」（图标 <code>play-circle-line</code>），点击即可开启/暂停。</li>
|
||
<li>扫描线定时器改为随相机开关启停（<code>openCamera</code> / <code>toggleCamera</code> 内 <code>startLaser</code> / <code>stopLaser</code>），不再 <code>onMounted</code> 空跑。</li>
|
||
<li><code>op-hos</code> 内联单选列表 → 折叠字段「医院名 + 床位数 + ⌄」，点击整行唤起 <code>hr-mask</code> + <code>hr-sheet</code>（与 伤员查询 / 检伤建档 同一套类）。</li>
|
||
<li>弹层选项补上 <code>hospitalMeta</code>（距现场km · 约N分钟），满员医院名置灰、床位红字，点击弹 toast 且不关闭弹层。</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|