feat: 新增驻场人员全部页面，补全SITE_MAP页面登记，修复共享页面角色跳转
- 新增驻场人员(onsite)工作台、知识库、我的共12个页面 - 修复AI助手和消息页面底部Tab导航缺少onsite角色映射的问题 - 补登SITE_MAP中24个遗漏的HTML页面条目（管理员/操作人员/员工端/应急APP） - 移除不存在的center-seat.html条目 - 包含操作人员、专业人员已有页面的暂存提交 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,157 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="window.location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);"></div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var KB_DATA = {
|
||||
'blood-routine': {
|
||||
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
|
||||
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0-10.0 × 10⁹/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
|
||||
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5-5.5 × 10¹²/L；女性：3.8-5.1 × 10¹²/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
|
||||
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100-300 × 10⁹/L。降低有出血风险，升高见于炎症或血小板增多症。' }
|
||||
]
|
||||
},
|
||||
'ecg': {
|
||||
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
|
||||
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低≥0.1mV提示心肌缺血；ST段抬高需警惕急性心肌梗死，需立即就医。' },
|
||||
{ color: '#fa8c16', name: '心律失常', desc: '包括窦性心动过速（>100次/分）、窦性心动过缓（<60次/分）、房颤等，需结合症状评估。' },
|
||||
{ color: '#1677ff', name: '束支传导阻滞', desc: '完全性左束支传导阻滞常提示器质性心脏病；右束支传导阻滞可见于正常人，需随访观察。' }
|
||||
]
|
||||
},
|
||||
'liver': {
|
||||
icon: '🔬', bg: '#fff7e6', title: '肝功能指标详解', cat: '体检知识', date: '2026-03-12',
|
||||
summary: '肝功能检查通过检测血液中多种酶和蛋白质水平，评估肝脏的合成、代谢和排泄功能，是发现肝脏疾病的重要手段。',
|
||||
items: [
|
||||
{ color: '#fa8c16', name: '谷丙转氨酶（ALT）', desc: '正常值：男≤50 U/L，女≤40 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
|
||||
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：≤40 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
|
||||
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4-17.1 μmol/L。升高引起黄疸，需区分溶血性、肝细胞性和梗阻性黄疸。' }
|
||||
]
|
||||
},
|
||||
'glucose': {
|
||||
icon: '💉', bg: '#fff1f0', title: '血糖检测与糖尿病筛查', cat: '体检知识', date: '2026-03-08',
|
||||
summary: '血糖检测是糖尿病筛查和管理的核心手段，包括空腹血糖、餐后2小时血糖和糖化血红蛋白三项主要指标。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '空腹血糖（FPG）', desc: '正常：<6.1 mmol/L；糖尿病前期：6.1-7.0 mmol/L；糖尿病诊断标准：≥7.0 mmol/L（需两次确认）。' },
|
||||
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8-11.1 mmol/L；≥11.1 mmol/L结合症状可诊断糖尿病。' },
|
||||
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2-3个月平均血糖水平。正常<5.7%；5.7-6.4%为糖尿病前期；≥6.5%可诊断糖尿病。' }
|
||||
]
|
||||
},
|
||||
'antihypertensive': {
|
||||
icon: '💊', bg: '#e6f4ff', title: '常用降压药物对比', cat: '药品知识', date: '2026-02-20',
|
||||
summary: '降压药物分为五大类，各有适应症和禁忌症，临床选药需结合患者合并症、年龄、肾功能等综合考量。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: 'ACEI/ARB类', desc: '代表药：依那普利、缬沙坦。适用于合并糖尿病、蛋白尿、心衰患者。禁用于妊娠、双侧肾动脉狭窄。' },
|
||||
{ color: '#52c41a', name: '钙通道阻滞剂（CCB）', desc: '代表药：氨氯地平、硝苯地平。适用于老年、单纯收缩期高血压。不良反应：踝部水肿、头痛。' },
|
||||
{ color: '#fa8c16', name: '利尿剂', desc: '代表药：氢氯噻嗪、螺内酯。适用于容量负荷过重、心衰患者。注意监测血钾、血糖、血尿酸。' }
|
||||
]
|
||||
},
|
||||
'statin': {
|
||||
icon: '🧪', bg: '#f6ffed', title: '他汀类药物使用指南', cat: '药品知识', date: '2026-02-15',
|
||||
summary: '他汀类药物是目前最有效的调脂药物，通过抑制HMG-CoA还原酶降低LDL-C，同时具有抗炎、稳定斑块等多效性作用。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '适应症与目标值', desc: '适用于LDL-C升高、动脉粥样硬化性心血管病（ASCVD）患者。高危患者LDL-C目标<1.8 mmol/L。' },
|
||||
{ color: '#fa8c16', name: '常用药物与剂量', desc: '阿托伐他汀10-80mg/日；瑞舒伐他汀5-40mg/日；辛伐他汀20-40mg/日（晚间服用效果更佳）。' },
|
||||
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4-8周复查ALT/AST；血糖轻度升高。' }
|
||||
]
|
||||
},
|
||||
'hypertension': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
|
||||
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140-159/90-99 mmHg；2级：160-179/100-109 mmHg；3级：≥180/110 mmHg。非同日3次测量均达标方可诊断。' },
|
||||
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周≥150分钟）、减少精神压力。' },
|
||||
{ color: '#1677ff', name: '药物治疗原则', desc: '小剂量起始，优先选用长效制剂，联合用药，个体化治疗。血压目标：一般患者<140/90 mmHg，高危患者<130/80 mmHg。' }
|
||||
]
|
||||
},
|
||||
'migraine': {
|
||||
icon: '🧠', bg: '#fff1f0', title: '偏头痛的诊断与治疗', cat: '疾病知识', date: '2026-03-05',
|
||||
summary: '偏头痛是一种反复发作的神经血管性头痛，以单侧搏动性头痛为主要特征，常伴恶心、畏光、畏声，严重影响生活质量。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断要点', desc: '发作5次以上；持续4-72小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
|
||||
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50-100mg）为首选，发作早期使用效果最佳。' },
|
||||
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作≥4次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
|
||||
]
|
||||
},
|
||||
'nutrition': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
|
||||
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50-65%，蛋白质15-20%，脂肪20-30%。' },
|
||||
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
|
||||
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500-1700ml；避免久坐后立即进食。' }
|
||||
]
|
||||
},
|
||||
'exercise': {
|
||||
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
|
||||
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '运动推荐量', desc: '每周≥150分钟中等强度有氧运动（如快走、游泳、骑车），或≥75分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
|
||||
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50-70%，可说话但不能唱歌。高强度：心率达70-85%，说话困难。' },
|
||||
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5-10分钟，运动后拉伸放松，避免突然停止。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
function renderDetail() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var key = params.get('key') || 'blood-routine';
|
||||
var d = KB_DATA[key];
|
||||
if (!d) d = KB_DATA['blood-routine'];
|
||||
document.getElementById('kd-nav-title').textContent = d.title;
|
||||
var itemsHtml = d.items.map(function(it) {
|
||||
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
|
||||
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
|
||||
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
document.getElementById('kd-content').innerHTML =
|
||||
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
|
||||
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
|
||||
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' · 更新于 ' + d.date + '</div></div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
|
||||
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
|
||||
itemsHtml;
|
||||
}
|
||||
renderDetail();
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab { font-size: 12px; padding: 4px 14px; border-radius: 16px; background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s; }
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.kb-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.kb-item__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.kb-item__info { flex: 1; }
|
||||
.kb-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.kb-item__desc { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.pdf-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.pdf-item__icon { width: 44px; height: 44px; border-radius: 10px; background: #fff1f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pdf-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.pdf-item__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">驻场工作参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTopTab(this,'panel-article')">知识文章</div>
|
||||
<div class="seg-tab" onclick="switchTopTab(this,'panel-rule')">规章制度</div>
|
||||
</div>
|
||||
<div id="panel-article" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-dispatch')">调度流程</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-first-aid')">急救知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-comm')">沟通技巧</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div id="kb-dispatch"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=dispatch-flow'"><div class="kb-item__icon" style="background:#e6f4ff;">📋</div><div class="kb-item__info"><div class="kb-item__name">应急调度标准流程</div><div class="kb-item__desc">从接警到结案的完整调度操作规范</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=triage'"><div class="kb-item__icon" style="background:#fff1f0;">🚨</div><div class="kb-item__info"><div class="kb-item__name">紧急程度分级标准</div><div class="kb-item__desc">如何快速判断应急事件的紧急等级</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=ambulance'"><div class="kb-item__icon" style="background:#fff7e6;">🚑</div><div class="kb-item__info"><div class="kb-item__name">救护车调度规范</div><div class="kb-item__desc">救护车派遣条件、路线规划与交接流程</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=handover'"><div class="kb-item__icon" style="background:#f6ffed;">🔄</div><div class="kb-item__info"><div class="kb-item__name">交接班操作指南</div><div class="kb-item__desc">值班交接的标准流程与注意事项</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-first-aid" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=cpr'"><div class="kb-item__icon" style="background:#fff1f0;">❤️</div><div class="kb-item__info"><div class="kb-item__name">心肺复苏（CPR）指导要点</div><div class="kb-item__desc">电话指导现场人员进行CPR的话术与步骤</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=chest-pain'"><div class="kb-item__icon" style="background:#fff7e6;">🫀</div><div class="kb-item__info"><div class="kb-item__name">胸痛应急处置流程</div><div class="kb-item__desc">胸痛患者的快速评估与调度决策</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=trauma'"><div class="kb-item__icon" style="background:#e6f4ff;">🩹</div><div class="kb-item__info"><div class="kb-item__name">创伤急救电话指导</div><div class="kb-item__desc">骨折、出血等创伤的远程指导要点</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-comm" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=calm-caller'"><div class="kb-item__icon" style="background:#f6ffed;">🗣️</div><div class="kb-item__info"><div class="kb-item__name">安抚求助者情绪技巧</div><div class="kb-item__desc">如何在电话中稳定求助者情绪获取关键信息</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=multi-party'"><div class="kb-item__icon" style="background:#e6f4ff;">👥</div><div class="kb-item__info"><div class="kb-item__name">多方协调沟通规范</div><div class="kb-item__desc">操作人员与专业人员、驻场人员的协作沟通</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="panel-rule" style="display:none;flex:1;overflow-y:auto;background:#f7f8fa;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急调度管理办法（2026版）</div><div class="pdf-item__meta"><span>PDF · 2.1MB</span><span>2026-01-10</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急救护操作规范</div><div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">大病就医审批流程细则</div><div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-11-20</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">值班排班管理制度</div><div class="pdf-item__meta"><span>PDF · 0.8MB</span><span>2025-10-05</span></div></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
var dm = { 'panel-article': 'flex', 'panel-rule': 'block' };
|
||||
['panel-article','panel-rule'].forEach(function(id) { var p = document.getElementById(id); if (p) p.style.display = id === panelId ? dm[id] : 'none'; });
|
||||
}
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['kb-dispatch','kb-first-aid','kb-comm'].forEach(function(id) { var p = document.getElementById(id); if (p) p.style.display = id === panelId ? 'block' : 'none'; });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">修改成功</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">密码已更新，下次登录请使用新密码。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.duty-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg,#e6f4ff,#f0f5ff); margin-bottom: 12px; }
|
||||
.duty-summary__main { font-size: 14px; font-weight: 600; color: #1677ff; }
|
||||
.duty-summary__tag { padding: 4px 10px; border-radius: 999px; background: #1677ff; color: #fff; font-size: 11px; font-weight: 600; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.cal-header__month { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.cal-header__nav { display: flex; gap: 6px; }
|
||||
.cal-header__btn { width: 28px; height: 28px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-week { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 11px; color: #999; margin-bottom: 4px; }
|
||||
.cal-week span { padding: 4px 0; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
|
||||
.cal-day { min-height: 42px; border-radius: 10px; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #1a1a1a; position: relative; }
|
||||
.cal-day--other { color: #bbb; background: transparent; }
|
||||
.cal-day--today { background: #1677ff; color: #fff; font-weight: 700; }
|
||||
.cal-day--duty { border: 1px solid #91caff; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.cal-day--today.cal-day--duty { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #1677ff; margin-top: 3px; }
|
||||
.cal-day--today .cal-dot { background: #fff; }
|
||||
.legend { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 11px; color: #666; }
|
||||
.legend-item { display: flex; align-items: center; gap: 5px; }
|
||||
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.legend-dot--today { background: #1677ff; }
|
||||
.legend-dot--duty { background: #91caff; }
|
||||
.duty-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.duty-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #fafafa; }
|
||||
.duty-item__avatar { width: 38px; height: 38px; border-radius: 50%; background: #e6f4ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.duty-item__info { flex: 1; min-width: 0; }
|
||||
.duty-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.duty-item__role { font-size: 11px; color: #999; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">值班信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="card-title">值班日历</div>
|
||||
<div class="duty-summary">
|
||||
<div>
|
||||
<div class="duty-summary__main">长庆油田职工医院</div>
|
||||
</div>
|
||||
<span class="duty-summary__tag">今日当班</span>
|
||||
</div>
|
||||
<div class="cal-header">
|
||||
<span class="cal-header__month" id="calMonth"></span>
|
||||
<div class="cal-header__nav">
|
||||
<button class="cal-header__btn" onclick="changeMonth(-1)">‹</button>
|
||||
<button class="cal-header__btn" onclick="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal-grid" id="calGrid"></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--today"></span><span>今天</span></div>
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--duty"></span><span>排班日</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">今日值班人员</div>
|
||||
<div class="duty-list">
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">赵</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">赵磊</div>
|
||||
</div>
|
||||
<div class="duty-item__role">驻场人员</div>
|
||||
</div>
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">李</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">李明</div>
|
||||
</div>
|
||||
<div class="duty-item__role">操作人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole','onsite');
|
||||
var _calYear, _calMonth;
|
||||
var _dutyDays = {
|
||||
2026: {
|
||||
4: [1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30],
|
||||
5: [6,7,8,11,12,13,14,18,19,20,21,25,26,27,28],
|
||||
6: [1,2,3,4,8,9,10,11,15,16,17,18,22,23,24,25,29,30]
|
||||
}
|
||||
};
|
||||
function initCalendar() {
|
||||
var d = new Date(2026, 3, 24);
|
||||
_calYear = d.getFullYear();
|
||||
_calMonth = d.getMonth() + 1;
|
||||
renderCalendar();
|
||||
}
|
||||
function changeMonth(dir) {
|
||||
_calMonth += dir;
|
||||
if (_calMonth < 1) { _calMonth = 12; _calYear--; }
|
||||
if (_calMonth > 12) { _calMonth = 1; _calYear++; }
|
||||
renderCalendar();
|
||||
}
|
||||
function renderCalendar() {
|
||||
document.getElementById('calMonth').textContent = _calYear + '年' + _calMonth + '月';
|
||||
var grid = document.getElementById('calGrid');
|
||||
grid.innerHTML = '';
|
||||
var firstDay = new Date(_calYear, _calMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(_calYear, _calMonth, 0).getDate();
|
||||
var prevDays = new Date(_calYear, _calMonth - 1, 0).getDate();
|
||||
var todayYear = 2026, todayMonth = 4, todayDate = 24;
|
||||
var duties = (_dutyDays[_calYear] && _dutyDays[_calYear][_calMonth]) || [];
|
||||
for (var i = firstDay - 1; i >= 0; i--) {
|
||||
var prevEl = document.createElement('div');
|
||||
prevEl.className = 'cal-day cal-day--other';
|
||||
prevEl.textContent = prevDays - i;
|
||||
grid.appendChild(prevEl);
|
||||
}
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'cal-day';
|
||||
var isToday = _calYear === todayYear && _calMonth === todayMonth && d === todayDate;
|
||||
var isDuty = duties.indexOf(d) > -1;
|
||||
if (isToday) el.className += ' cal-day--today';
|
||||
if (isDuty) el.className += ' cal-day--duty';
|
||||
el.innerHTML = '<span>' + d + '</span>';
|
||||
if (isDuty) { var dot = document.createElement('span'); dot.className = 'cal-dot'; el.appendChild(dot); }
|
||||
grid.appendChild(el);
|
||||
}
|
||||
var total = firstDay + daysInMonth;
|
||||
var remain = total % 7 === 0 ? 0 : 7 - total % 7;
|
||||
for (var j = 1; j <= remain; j++) {
|
||||
var nextEl = document.createElement('div');
|
||||
nextEl.className = 'cal-day cal-day--other';
|
||||
nextEl.textContent = j;
|
||||
grid.appendChild(nextEl);
|
||||
}
|
||||
}
|
||||
initCalendar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.avatar-section { display: flex; flex-direction: column; align-items: center; padding: 32px 0 24px; background: #fff; }
|
||||
.avatar-wrap { position: relative; cursor: pointer; }
|
||||
.avatar-img { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid #f0f0f0; }
|
||||
.avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #1677ff; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-hint { font-size: 13px; color: #999; margin-top: 10px; }
|
||||
.form-group { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 15px; color: #1a1a1a; width: 72px; flex-shrink: 0; }
|
||||
.form-input { flex: 1; font-size: 15px; color: #1a1a1a; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.bottom-action { padding: 16px; flex-shrink: 0; background: #f7f8fa; }
|
||||
.btn-save { width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
|
||||
.action-sheet-mask.active { display: block; }
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 20px; z-index: 201; transform: translateY(100%); transition: transform 0.3s ease; }
|
||||
.action-sheet-mask.active .action-sheet { transform: translateY(0); }
|
||||
.action-sheet-item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet-item:active { background: #f5f5f5; }
|
||||
.action-sheet-cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; background: #f7f8fa; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a href="./index.html" class="back-btn">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</a>
|
||||
<span class="nav-title">修改个人信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap" onclick="openSheet()">
|
||||
<div class="avatar-img" id="avatarDisplay">🏥</div>
|
||||
<div class="avatar-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="1.5"><path d="M7 3v8M3 7h8"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-hint">点击更换头像</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-label">姓名</span>
|
||||
<input class="form-input" id="inputName" type="text" value="赵磊" placeholder="请输入姓名" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-action">
|
||||
<button class="btn-save" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
<div id="avatarSheet" class="action-sheet-mask" onclick="closeSheet(event)">
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-item" onclick="pickAvatar('camera')">拍照</div>
|
||||
<div class="action-sheet-item" onclick="pickAvatar('album')">从相册选择</div>
|
||||
<div class="action-sheet-cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
<script>
|
||||
function openSheet() {
|
||||
document.getElementById('avatarSheet').classList.add('active');
|
||||
}
|
||||
function closeSheet(e) {
|
||||
if (!e || e.target.id === 'avatarSheet' || e.target.closest('.action-sheet-cancel')) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
}
|
||||
}
|
||||
function pickAvatar(source) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
showToast('已选择：' + (source === 'camera' ? '拍照' : '从相册选择'));
|
||||
}
|
||||
function handleSave() {
|
||||
var name = document.getElementById('inputName').value.trim();
|
||||
if (!name) { showToast('请输入姓名'); return; }
|
||||
showToast('保存成功');
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function() { t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.menu-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.logout-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: #fff1f0; color: #ff4d4f; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:60px 20px 24px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">🏥</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">驻场人员</div>
|
||||
<div style="color:rgba(255,255,255,0.78);font-size:12px;margin-top:4px;">所属医院：长庆油田职工医院</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div class="menu-card">
|
||||
<div class="menu-item" onclick="location.href='./duty-schedule.html'"><span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">值班信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./edit-profile.html'"><span style="font-size:18px;margin-right:12px;">📝</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改个人信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./change-pwd.html'"><span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;">
|
||||
<button class="logout-btn" onclick="openModal('modal-logout')">退出登录</button>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">退出登录</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认退出当前账号？</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ff4d4f;font-weight:600;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
.case-card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.case-head { display: flex; align-items: center; gap: 10px; }
|
||||
.case-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.case-avatar-emergency { background: linear-gradient(135deg,#fff1f0,#ffccc7); }
|
||||
.case-main { flex: 1; min-width: 0; }
|
||||
.case-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.case-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.case-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属医院：长庆油田职工医院</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">驻场人员</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急待处理</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待处理</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab active" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待处理 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待处理<span class="badge">2</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 待处理 -->
|
||||
<div id="panel-pending" class="content-panel active">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./work-order-detail-ongoing.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">陈伟<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">47岁</span></div>
|
||||
<span class="tag tag-orange">待处理</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-27 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./work-order-detail-ongoing.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">刘海波<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">55岁</span></div>
|
||||
<span class="tag tag-orange">待处理</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-27 10:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./work-order-detail.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">赵志强<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">61岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-25 08:15</div>
|
||||
<div class="case-meta">结束时间：2026-04-25 18:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./work-order-detail.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">孙莉<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">29岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 09:10</div>
|
||||
<div class="case-meta">结束时间：2026-04-24 15:05</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
|
||||
var defaultTab = sessionStorage.getItem('onsiteWorkbenchTab');
|
||||
if (defaultTab === 'done') {
|
||||
var doneTab = document.querySelectorAll('.seg-tab')[1];
|
||||
switchTab(doneTab, 'panel-done');
|
||||
sessionStorage.removeItem('onsiteWorkbenchTab');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #52c41a; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()"><svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已完成</div>
|
||||
<div class="status-area__desc">已完成挂号，排队序号：05</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">冯凯</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">男</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">38岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY4-20150321</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油四厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">137-0012-8899</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610104198803XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约时间</span><span class="info-card__value">2026-04-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">腰椎间盘突出压迫神经，行走困难需复查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="result-card">
|
||||
<div class="info-card__header" onclick="toggleCard('result-card', this)">
|
||||
<div class="info-card__title">挂号结果</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">就诊科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊时段</span><span class="info-card__value">2026-04-24 09:00–09:20</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">排队序号</span><span class="info-card__value">05</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">备注</span><span class="info-card__value">复查结果正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id, trigger) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #fa8c16; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.form-field { margin-bottom: 14px; }
|
||||
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: flex; align-items: center; gap: 3px; }
|
||||
.form-label .req { color: #ff4d4f; }
|
||||
.form-input { width: 100%; height: 38px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #333; outline: none; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.form-textarea { width: 100%; min-height: 68px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #333; outline: none; resize: none; font-family: inherit; line-height: 1.6; }
|
||||
.form-textarea:focus { border-color: #1677ff; }
|
||||
.bottom-btns { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 12px; }
|
||||
.bottom-btns__btn { flex: 1; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.bottom-btns__btn--secondary { background: #fff; color: #666; border: 1px solid #d9d9d9; }
|
||||
.bottom-btns__btn--primary { background: #1677ff; color: #fff; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()"><svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">待处理</div>
|
||||
<div class="status-area__desc">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">周敏</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">女</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">42岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY3-20180156</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油三厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">138-9201-5567</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610102198401XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">心血管内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">李建国</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约时间</span><span class="info-card__value">2026-04-28 09:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">心脏瓣膜病变加重，需专家会诊评估手术方案</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="result-card">
|
||||
<div class="info-card__header" onclick="toggleCard('result-card', this)">
|
||||
<div class="info-card__title">填写挂号结果</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="req">*</span>就诊时段</div>
|
||||
<input class="form-input" type="text" placeholder="如：2026-04-28 09:00-09:20" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="req">*</span>排队序号</div>
|
||||
<input class="form-input" type="text" placeholder="如：05" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">备注</div>
|
||||
<textarea class="form-textarea" placeholder="如有特殊情况请备注说明"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-btns">
|
||||
<button class="bottom-btns__btn bottom-btns__btn--secondary" onclick="openModal('modal-contact')">联系操作人员</button>
|
||||
<button class="bottom-btns__btn bottom-btns__btn--primary" onclick="openModal('modal-submit')">提交挂号结果</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-submit" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">提交挂号结果</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认提交挂号结果？提交后将通知操作人员和申请员工。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-submit')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-submit');location.href='./serious-illness-list.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-contact" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">联系操作人员</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">操作人员：李明<br>电话：138-9201-3001</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">关闭</button>
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">拨打电话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id, trigger) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform .15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--pending { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--done { background: #f6ffed; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info .card__employee { color: #1a1a1a; font-weight: 500; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属医院：长庆油田职工医院</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急待处理</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待处理</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab active" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待处理 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待处理<span class="badge">3</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 待处理 -->
|
||||
<div id="panel-pending" class="content-panel active">
|
||||
<div style="height:10px;"></div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">周敏 · 采油三厂</span></div>
|
||||
<div>科室：心血管内科 · 李建国</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>预约时间：2026-04-28 09:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">西安交大一附院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">韩涛 · 采油五厂</span></div>
|
||||
<div>科室：肿瘤放疗科 · 王明辉</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>预约时间：2026-04-28 14:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">长庆油田职工医院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">李建华 · 采油二厂</span></div>
|
||||
<div>科室：骨科 · 赵伟民</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>预约时间：2026-04-29 10:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<div style="height:10px;"></div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">长庆油田职工医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">冯凯 · 采油四厂</span></div>
|
||||
<div>科室：骨科 · 陈志远</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>就诊时段：2026-04-24 09:00–09:20</div>
|
||||
</div>
|
||||
<div class="card__tip">已完成挂号，排队序号：05</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">张伟 · 采油一厂</span></div>
|
||||
<div>科室：神经内科 · 刘芳</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>就诊时段：2026-04-22 14:00–14:20</div>
|
||||
</div>
|
||||
<div class="card__tip">已完成挂号，排队序号：12</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.form-textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #333; background: #fff; outline: none; min-height: 82px; resize: none; line-height: 1.7; font-family: inherit; }
|
||||
.form-textarea:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,0.12); }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
.photo-item__mask { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,0.42); color: #fff; font-size: 10px; text-align: center; padding: 3px 0; }
|
||||
.photo-add { width: 90px; height: 68px; border-radius: 8px; border: 1px dashed #91caff; background: #f7fbff; color: #1677ff; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
|
||||
.photo-add span:first-child { font-size: 18px; line-height: 1; }
|
||||
.bottom-action { padding: 12px 16px; background: #fff; border-top: 1px solid #e8e8e8; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-primary { flex: 1; height: 44px; border: none; border-radius: 10px; background: #1677ff; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { flex: 1; height: 44px; border: 1px solid #d9d9d9; border-radius: 10px; background: #fff; color: #666; font-size: 15px; font-weight: 500; cursor: pointer; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-card')">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633280</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">陈伟（47岁）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">采油一厂 · 第一作业区</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-27 14:30</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省庆阳市华池县采油一厂作业区</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">李明</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">张旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-orange">待处理</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-card')">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议患者保持制动，持续观察左膝肿胀情况，需尽快转送医院进一步检查。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text" style="color:#999;">暂未填写</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-card')">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-04-27 14:35</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单说明</span><span class="info-item__value">请尽快前往现场协助员工就医，需陪同前往华池县人民医院急诊科</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="onsite-card">
|
||||
<div class="card__header" onclick="toggleCard('onsite-card')">
|
||||
<div class="card__title">驻场处理</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<textarea class="form-textarea" placeholder="请填写现场处理情况，如：已到达现场、已陪同就医、已完成挂号等"></textarea>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">现场照片：</div>
|
||||
<div class="photo-list">
|
||||
<button class="photo-add" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-action">
|
||||
<button class="btn-secondary" onclick="openModal('modal-contact')">联系操作人员</button>
|
||||
<button class="btn-primary" onclick="openModal('modal-complete')">完成处理</button>
|
||||
</div>
|
||||
|
||||
<!-- 完成确认弹窗 -->
|
||||
<div id="modal-complete" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">完成处理</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认已完成现场处理？提交后将通知操作人员。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-complete')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-complete');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系操作人员弹窗 -->
|
||||
<div id="modal-contact" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">联系操作人员</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">操作人员：李明<br>电话：138-9201-3001</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">关闭</button>
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">拨打电话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = card.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-card')">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633256</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">赵志强（61岁）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">公司机关 · 健康科</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-25 08:15</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">李明</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-04-25 18:20</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-card')">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text">员工已送达长庆油田职工医院急诊科，完成头颅CT检查，排除脑出血，诊断为高血压引起的眩晕，已开具降压药物并留观。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-card')">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-04-25 08:25</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单说明</span><span class="info-item__value">给这个员工紧急挂号就诊，需要拍头颅CT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="onsite-card">
|
||||
<div class="card__header" onclick="toggleCard('onsite-card')">
|
||||
<div class="card__title">驻场处理</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">现场照片：</div>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item">现场照片 1</div>
|
||||
<div class="photo-item">现场照片 2</div>
|
||||
<div class="photo-item">现场照片 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-04-25 18:15</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = card.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user