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,188 @@
|
||||
<!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);">
|
||||
<!-- 由JS动态填充内容 -->
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 知识库数据集合
|
||||
* 每个key对应一个知识条目的完整内容
|
||||
*/
|
||||
var KB_DATA = {
|
||||
'blood-routine': {
|
||||
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
|
||||
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0\u201310.0 \u00d7 10\u2079/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
|
||||
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5\u20135.5 \u00d7 10\u00b9\u00b2/L；女性：3.8\u20135.1 \u00d7 10\u00b9\u00b2/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
|
||||
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100\u2013300 \u00d7 10\u2079/L。降低有出血风险，升高见于炎症或血小板增多症。' }
|
||||
]
|
||||
},
|
||||
'ecg': {
|
||||
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
|
||||
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低\u22650.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: '正常值：男\u226450 U/L，女\u226440 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
|
||||
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：\u226440 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
|
||||
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4\u201317.1 \u03bcmol/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\u20137.0 mmol/L；糖尿病诊断标准：\u22657.0 mmol/L（需两次确认）。' },
|
||||
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8\u201311.1 mmol/L；\u226511.1 mmol/L结合症状可诊断糖尿病。' },
|
||||
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2\u20133个月平均血糖水平。正常<5.7%；5.7\u20136.4%为糖尿病前期；\u22656.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\u201380mg/日；瑞舒伐他汀5\u201340mg/日；辛伐他汀20\u201340mg/日（晚间服用效果更佳）。' },
|
||||
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4\u20138周复查ALT/AST；血糖轻度升高。' }
|
||||
]
|
||||
},
|
||||
'hypertension': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
|
||||
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140\u2013159/90\u201399 mmHg；2级：160\u2013179/100\u2013109 mmHg；3级：\u2265180/110 mmHg。非同日3次测量均达标方可诊断。' },
|
||||
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周\u2265150分钟）、减少精神压力。' },
|
||||
{ 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\u201372小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
|
||||
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50\u2013100mg）为首选，发作早期使用效果最佳。' },
|
||||
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作\u22654次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
|
||||
]
|
||||
},
|
||||
'nutrition': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
|
||||
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50\u201365%，蛋白质15\u201320%，脂肪20\u201330%。' },
|
||||
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
|
||||
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500\u20131700ml；避免久坐后立即进食。' }
|
||||
]
|
||||
},
|
||||
'exercise': {
|
||||
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
|
||||
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '运动推荐量', desc: '每周\u2265150分钟中等强度有氧运动（如快走、游泳、骑车），或\u226575分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
|
||||
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50\u201370%，可说话但不能唱歌。高强度：心率达70\u201385%，说话困难。' },
|
||||
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5\u201310分钟，运动后拉伸放松，避免突然停止。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 页面加载时根据URL参数渲染知识详情
|
||||
* 从URL的key参数获取知识条目标识，查找数据并填充页面
|
||||
*/
|
||||
function renderDetail() {
|
||||
// 解析URL参数获取知识条目key
|
||||
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;
|
||||
|
||||
// 生成主要内容条目的HTML
|
||||
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 + ' \u00b7 更新于 ' + 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', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,298 @@
|
||||
<!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; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ========== 分段Tab样式 ========== */
|
||||
.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; }
|
||||
|
||||
/* ========== 底部Tab栏样式 ========== */
|
||||
.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; text-decoration: none; }
|
||||
.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; }
|
||||
/* ========== 子分类Tab ========== */
|
||||
.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; }
|
||||
|
||||
/* ========== PDF文档条目 ========== */
|
||||
.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__info { flex: 1; }
|
||||
.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; }
|
||||
</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>
|
||||
|
||||
<!-- 一级分类Tab -->
|
||||
<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;">
|
||||
<!-- 子分类Tab -->
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-exam')">体检知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-drug')">药品知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-disease')">疾病知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-health')">保健知识</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识条目列表 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 体检知识 -->
|
||||
<div id="kb-exam">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 血常规检查解读指南 -->
|
||||
<div style="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;" onclick="goDetail('blood-routine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🩺</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血常规检查解读指南</div><div style="font-size:12px;color:#999;margin-top:3px;">了解各项血常规指标的正常范围与临床意义</div></div>
|
||||
<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="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;" onclick="goDetail('ecg')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">❤️</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">心电图异常结果说明</div><div style="font-size:12px;color:#999;margin-top:3px;">常见心电图异常表现及处理建议</div></div>
|
||||
<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="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;" onclick="goDetail('liver')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🔬</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">肝功能指标详解</div><div style="font-size:12px;color:#999;margin-top:3px;">ALT、AST等肝功能指标的临床意义</div></div>
|
||||
<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="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;" onclick="goDetail('glucose')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💉</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血糖检测与糖尿病筛查</div><div style="font-size:12px;color:#999;margin-top:3px;">空腹血糖、糖化血红蛋白的判读标准</div></div>
|
||||
<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="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 药品知识 -->
|
||||
<div id="kb-drug" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 常用降压药物对比 -->
|
||||
<div style="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;" onclick="goDetail('antihypertensive')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💊</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">常用降压药物对比</div><div style="font-size:12px;color:#999;margin-top:3px;">各类降压药的适应症与注意事项</div></div>
|
||||
<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="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;" onclick="goDetail('statin')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧪</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">他汀类药物使用指南</div><div style="font-size:12px;color:#999;margin-top:3px;">调脂药物的用法用量与副作用监测</div></div>
|
||||
<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="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 疾病知识 -->
|
||||
<div id="kb-disease" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 高血压诊断与管理 -->
|
||||
<div style="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;" onclick="goDetail('hypertension')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🫀</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高血压诊断与管理</div><div style="font-size:12px;color:#999;margin-top:3px;">高血压分级标准及生活方式干预</div></div>
|
||||
<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="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;" onclick="goDetail('migraine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧠</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">偏头痛的诊断与治疗</div><div style="font-size:12px;color:#999;margin-top:3px;">偏头痛的临床特征、诱因及处理方案</div></div>
|
||||
<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="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 保健知识 -->
|
||||
<div id="kb-health" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 职场人群营养膳食指南 -->
|
||||
<div style="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;" onclick="goDetail('nutrition')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🥗</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">职场人群营养膳食指南</div><div style="font-size:12px;color:#999;margin-top:3px;">针对久坐办公人群的饮食建议</div></div>
|
||||
<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="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;" onclick="goDetail('exercise')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🏃</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">运动与心血管健康</div><div style="font-size:12px;color:#999;margin-top:3px;">有氧运动对心血管的保护作用</div></div>
|
||||
<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="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /panel-article -->
|
||||
|
||||
<!-- 规章制度面板 -->
|
||||
<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 class="pdf-item__info">
|
||||
<div class="pdf-item__name">员工健康管理办法（2026版）</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 2.3MB</span><span>2026-01-15</span></div>
|
||||
</div>
|
||||
<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="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 class="pdf-item__info">
|
||||
<div class="pdf-item__name">职业病防治管理规定</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.8MB</span><span>2025-12-20</span></div>
|
||||
</div>
|
||||
<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="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 class="pdf-item__info">
|
||||
<div class="pdf-item__name">体检异常结果处置流程</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 0.9MB</span><span>2025-11-08</span></div>
|
||||
</div>
|
||||
<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="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 class="pdf-item__info">
|
||||
<div class="pdf-item__name">健康咨询服务管理细则</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-10-22</span></div>
|
||||
</div>
|
||||
<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="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 class="pdf-item__info">
|
||||
<div class="pdf-item__name">应急救护操作规范</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div>
|
||||
</div>
|
||||
<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="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../workbench/index.html">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">4</span>
|
||||
</a>
|
||||
<a class="tab-item active" href="./index.html">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../../ai-assistant/index.html">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../../message/index.html">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../profile/index.html">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为小助手 */
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
/**
|
||||
* 切换一级Tab（知识文章 / 规章制度）
|
||||
*/
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
var displayMap = { '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 ? displayMap[id] : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换知识库子分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 对应面板的ID
|
||||
*/
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
['kb-exam', 'kb-drug', 'kb-disease', 'kb-health'].forEach(function(id) {
|
||||
var p = document.getElementById(id);
|
||||
if (p) p.style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到知识详情页
|
||||
* @param {string} key - 知识条目的标识key
|
||||
*/
|
||||
function goDetail(key) {
|
||||
window.location.href = './article-detail.html?key=' + key;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!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; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: 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">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<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 class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 确定后跳转至: ./index.html -->
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="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', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!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__sub { font-size: 12px; color: #666; margin-top: 4px; }
|
||||
.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__desc { font-size: 12px; color: #666; margin-top: 4px; }
|
||||
.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','professional');
|
||||
|
||||
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;
|
||||
var todayMonth = 4;
|
||||
var 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,114 @@
|
||||
<!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, #e8f4ff, #bdd7ff); 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; }
|
||||
.form-value { flex: 1; font-size: 15px; color: #999; text-align: right; }
|
||||
.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', 'professional');
|
||||
</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,#f6ffed,#b7eb8f);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">4</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', 'professional');
|
||||
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,187 @@
|
||||
<!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; }
|
||||
/* 救助意见卡片 */
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
/* 结束卡片 */
|
||||
.end-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e8e8e8; max-width: 260px; }
|
||||
.end-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#8c8c8c,#595959); color: #fff; }
|
||||
.end-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.end-card__title { font-size: 13px; font-weight: 600; }
|
||||
.end-card__body { padding: 10px 14px; background: #fafafa; font-size: 13px; line-height: 1.7; color: #666; }
|
||||
.end-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #fafafa; border-top: 1px dashed #e8e8e8; font-size: 11px; color: #999; }
|
||||
/* 患者信息条 */
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
/* 底部已结束提示 */
|
||||
.ended-bar { padding: 14px 16px; background: #fafafa; border-top: 1px solid #f0f0f0; flex-shrink: 0; text-align: center; font-size: 13px; color: #999; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<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 style="font-size:11px;font-weight:600;color:#52c41a;background:#f6ffed;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">已结束</span></span>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息条 -->
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 09:15</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail.html -->
|
||||
<button onclick="location.href='./work-order-detail.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👩</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">张小红 · 女 · 45岁 · 采油一厂 · 第一作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:15</span></div>
|
||||
|
||||
<!-- 患者首条消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">📹 通话时长 12:01</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业人员消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，请先停止活动，保持半卧位休息。我先了解一下，疼痛是否向左肩或后背放射？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">有一点往左肩放射，出了点汗，人有点发慌。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:18</span></div>
|
||||
|
||||
<!-- 救助意见卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head">
|
||||
<div class="advice-card__icon">✓</div>
|
||||
<div class="advice-card__title">救助意见</div>
|
||||
</div>
|
||||
<div class="advice-card__body">1. 立即停止一切活动，保持安静休息。<br>2. 尽量保持半卧位，避免独自走动。<br>3. 安排同事陪护，持续观察胸痛和呼吸变化。<br>4. 如症状加重，立即启动现场急救转运。</div>
|
||||
<div class="advice-card__foot">
|
||||
<span>刘医生</span>
|
||||
<span>09:18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者确认 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">好的，已经坐下了，同事在旁边。麻烦帮我看看最近的医院位置。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">16:45</span></div>
|
||||
|
||||
<!-- 应急结束卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f5f5f5,#d9d9d9);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🏁</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">系统通知</div>
|
||||
<div class="end-card">
|
||||
<div class="end-card__head">
|
||||
<div class="end-card__icon">✓</div>
|
||||
<div class="end-card__title">本次应急已结束</div>
|
||||
</div>
|
||||
<!-- <div class="end-card__body">患者已送达医院完成诊治，状态稳定，本次应急响应流程结束。</div>-->
|
||||
<div class="end-card__foot">
|
||||
<span>结束时间</span>
|
||||
<span>2026-04-24 16:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部已结束提示 -->
|
||||
<div class="ended-bar">本次应急已结束</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
var detail = document.getElementById('emergency-info-detail');
|
||||
var btn = document.getElementById('toggle-info-btn');
|
||||
detail.style.display = infoCollapsed ? 'none' : 'flex';
|
||||
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!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; }
|
||||
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 救助意见卡片 */
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
/* 操作按钮栏 */
|
||||
.action-bar { display: flex; gap: 8px; padding: 8px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.action-btn { flex: 1; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; border: none; }
|
||||
.action-btn--green { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.action-btn--blue { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
|
||||
.action-btn--red { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
|
||||
/* 患者信息条 */
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
/* 二次确认弹窗 */
|
||||
.confirm-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 30; padding: 24px; }
|
||||
.confirm-mask.show { display: flex; }
|
||||
.confirm-dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
|
||||
.confirm-dialog__head { padding: 18px 20px 8px; font-size: 17px; font-weight: 700; color: #1a1a1a; text-align: center; }
|
||||
.confirm-dialog__body { padding: 0 20px 20px; font-size: 14px; line-height: 1.7; color: #666; text-align: center; }
|
||||
.confirm-dialog__actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn { flex: 1; height: 48px; border: none; background: #fff; font-size: 15px; cursor: pointer; }
|
||||
.confirm-dialog__btn + .confirm-dialog__btn { border-left: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn--cancel { color: #666; }
|
||||
.confirm-dialog__btn--confirm { color: #ff4d4f; font-weight: 600; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<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 style="font-size:11px;font-weight:600;color:#1677ff;background:#e6f4ff;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">进行中</span></span>
|
||||
<button class="nav-right" onclick="openEndConfirm()">结束应急</button>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息条 -->
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<!-- [交互] 点击收起/展开患者信息 -->
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 09:15</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail-ongoing.html -->
|
||||
<button onclick="location.href='./work-order-detail-ongoing.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👩</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">张小红 · 女 · 45岁 · 采油一厂 · 第一作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:15</span></div>
|
||||
|
||||
<!-- 患者首条消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">📹 通话时长 12:01</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业人员消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，请先停止活动，保持半卧位休息。我先了解一下，疼痛是否向左肩或后背放射？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">有一点往左肩放射，出了点汗，人有点发慌。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:18</span></div>
|
||||
|
||||
<!-- 救助意见卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head">
|
||||
<div class="advice-card__icon">✓</div>
|
||||
<div class="advice-card__title">救助意见</div>
|
||||
</div>
|
||||
<div class="advice-card__body">1. 立即停止一切活动，保持安静休息。<br>2. 尽量保持半卧位，避免独自走动。<br>3. 安排同事陪护，持续观察胸痛和呼吸变化。<br>4. 如症状加重，立即启动现场急救转运。</div>
|
||||
<div class="advice-card__foot">
|
||||
<span>刘医生</span>
|
||||
<span>09:18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者确认 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">好的，已经坐下了，同事在旁边。麻烦帮我看看最近的医院位置。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./rescue-opinion.html -->
|
||||
<button class="action-btn action-btn--green" onclick="location.href='./rescue-opinion.html'">救助意见</button>
|
||||
<!-- [交互] 点击跳转至: ./patient-location.html -->
|
||||
<button class="action-btn action-btn--blue" onclick="location.href='./patient-location.html'">患者定位</button>
|
||||
</div>
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
</div>
|
||||
<!-- <div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">-->
|
||||
<!-- <div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📞</div>-->
|
||||
<!-- <span style="font-size:11px;color:#666;">语音通话</span>-->
|
||||
<!-- </div>-->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📹</div>
|
||||
<span style="font-size:11px;color:#666;">视频通话</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<input id="chat-input" type="text" placeholder="输入应急沟通内容..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;align-items:center;justify-content:center;">按住说话</button>
|
||||
<button onclick="toggleMediaPanel()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;font-weight:300;cursor:pointer;flex-shrink:0;color:#666;line-height:1;">+</button>
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="confirm-mask" class="confirm-mask" onclick="closeEndConfirm(event)">
|
||||
<div class="confirm-dialog">
|
||||
<div class="confirm-dialog__head">是否确认结束应急</div>
|
||||
<div class="confirm-dialog__body">结束后本次应急会话将进入“已结束”列表，仅支持查看记录，不可继续发送消息。</div>
|
||||
<div class="confirm-dialog__actions">
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="closeEndConfirm(event)">取消</button>
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="confirmEndEmergency(event)">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
var detail = document.getElementById('emergency-info-detail');
|
||||
var btn = document.getElementById('toggle-info-btn');
|
||||
detail.style.display = infoCollapsed ? 'none' : 'flex';
|
||||
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
|
||||
function toggleMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
m.style.display = m.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function closeMediaPanel() {
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
}
|
||||
|
||||
var isVoiceMode = false;
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) {
|
||||
input.style.display = 'none';
|
||||
recordBtn.style.display = 'flex';
|
||||
voiceBtn.textContent = '⌨️';
|
||||
voiceBtn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
input.style.display = '';
|
||||
recordBtn.style.display = 'none';
|
||||
voiceBtn.textContent = '🎤';
|
||||
voiceBtn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
|
||||
function openEndConfirm() {
|
||||
document.getElementById('confirm-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeEndConfirm(event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
if (event.currentTarget !== event.target && !event.target.classList.contains('confirm-dialog__btn--cancel')) return;
|
||||
}
|
||||
document.getElementById('confirm-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function confirmEndEmergency(event) {
|
||||
event.stopPropagation();
|
||||
sessionStorage.setItem('professionalWorkbenchTab', 'done');
|
||||
location.href = './index.html';
|
||||
}
|
||||
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!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栏 */
|
||||
.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; }
|
||||
/* 二级分段Tab */
|
||||
.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; }
|
||||
/* 状态标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
/* 应急卡片 */
|
||||
.emergency-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.emergency-card:active { transform: scale(0.98); }
|
||||
.ec-top { display: flex; align-items: center; gap: 10px; }
|
||||
.ec-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #fff1f0, #ffccc7); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.ec-info { flex: 1; min-width: 0; }
|
||||
.ec-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.ec-name .age { font-size: 13px; font-weight: 400; color: #666; margin-left: 6px; }
|
||||
.ec-time { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
</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;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">已结束</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：进行中 / 已结束 -->
|
||||
<div class="seg-tabs" style="flex-shrink:0;">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-ongoing')">进行中<span class="badge" style="background:#fa8c16;">2</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 进行中列表 -->
|
||||
<div id="panel-ongoing">
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-ongoing.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">陈伟<span class="age">47岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-23 14:30</div>
|
||||
</div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-ongoing.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">刘海波<span class="age">55岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-23 10:20</div>
|
||||
</div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已结束列表 -->
|
||||
<div id="panel-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-done.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-done.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">孙丽<span class="age">41岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-22 16:00</div>
|
||||
<div class="ec-time">结束时间：2026-04-22 17:35</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-done.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-done.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">周明<span class="age">33岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-21 09:45</div>
|
||||
<div class="ec-time">结束时间：2026-04-21 11:20</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部5Tab导航栏 -->
|
||||
<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>
|
||||
/* 标记当前角色为专业人员，供共用页面（消息、AI助手）判断返回目标 */
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
/**
|
||||
* 切换二级Tab（进行中/已结束）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板ID
|
||||
*/
|
||||
function switchTab(el, panelId) {
|
||||
document.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['panel-ongoing','panel-done'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
var defaultTab = sessionStorage.getItem('professionalWorkbenchTab');
|
||||
if (defaultTab === 'done') {
|
||||
var doneTab = document.querySelectorAll('.seg-tab')[1];
|
||||
switchTab(doneTab, 'panel-done');
|
||||
sessionStorage.removeItem('professionalWorkbenchTab');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!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: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: relative; 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: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; position: relative; z-index: 10; }
|
||||
.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; }
|
||||
/* 地图区域 */
|
||||
.map-wrap { flex: 1; position: relative; overflow: hidden; }
|
||||
.map-bg { position: absolute; inset: 0; background: linear-gradient(160deg,#d6f4ff 0%,#e8f8e0 40%,#f0f6ff 100%); }
|
||||
.map-grid { position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(0deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px); }
|
||||
.map-road-h { position: absolute; height: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
.map-road-v { position: absolute; width: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
/* 患者中心点 */
|
||||
.patient-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; }
|
||||
.patient-pin__dot { width: 16px; height: 16px; background: #ff4d4f; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(255,77,79,0.4); position: relative; z-index: 2; }
|
||||
.patient-pin__pulse { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,77,79,0.25); animation: pulse 2s infinite; z-index: 1; }
|
||||
@keyframes pulse { 0%{transform:translate(-50%,-50%) scale(1);opacity:.6;} 100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;} }
|
||||
.patient-pin__label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #ff4d4f; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
/* 资源Tab栏 */
|
||||
.res-tabs { position: absolute; top: 8px; left: 0; right: 0; z-index: 8; display: flex; gap: 8px; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.res-tabs::-webkit-scrollbar { display: none; }
|
||||
.res-tab { flex-shrink: 0; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: #333; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.1); cursor: pointer; border: 2px solid transparent; transition: all .2s; white-space: nowrap; }
|
||||
.res-tab--active { background: #1677ff; color: #fff; box-shadow: 0 2px 8px rgba(22,119,255,0.35); }
|
||||
/* 地图标记点 */
|
||||
.marker { position: absolute; z-index: 4; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
|
||||
.marker:active { transform: scale(1.15); }
|
||||
.marker__icon { width: 32px; height: 32px; border-radius: 50%; background: #1677ff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
|
||||
.marker__icon--hospital { background: #1677ff; }
|
||||
.marker__icon--partner { background: #722ed1; }
|
||||
.marker__icon--clinic { background: #13c2c2; }
|
||||
.marker__icon--ambulance { background: #ff4d4f; }
|
||||
.marker__icon--aed { background: #fa8c16; }
|
||||
.marker__icon--kit { background: #52c41a; }
|
||||
.marker__label { margin-top: 2px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.92); font-size: 10px; color: #333; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
|
||||
/* 底部资源卡片 */
|
||||
.res-card { position: absolute; bottom: 0; left: 0; right: 0; z-index: 12; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 16px; transform: translateY(100%); transition: transform .3s ease; }
|
||||
.res-card--show { transform: translateY(0); }
|
||||
.res-card__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 16px; color: #999; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.res-card__body { display: flex; gap: 12px; }
|
||||
.res-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f5ff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
|
||||
.res-card__info { flex: 1; min-width: 0; }
|
||||
.res-card__name { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.res-card__org { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.res-card__row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; margin-bottom: 3px; }
|
||||
.res-card__row svg { flex-shrink: 0; }
|
||||
.res-card__dist { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e6f7ff; color: #1677ff; font-size: 11px; font-weight: 500; }
|
||||
.res-card__actions { display: flex; gap: 8px; margin-top: 12px; }
|
||||
.res-card__btn { flex: 1; height: 36px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.res-card__btn--call { background: #1677ff; color: #fff; }
|
||||
.res-card__btn--nav { background: #f0f5ff; 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">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.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="map-wrap" onclick="closeCard(event)">
|
||||
<div class="map-bg"></div>
|
||||
<div class="map-grid"></div>
|
||||
<div class="map-road-h" style="top:28%;left:5%;width:90%;"></div>
|
||||
<div class="map-road-h" style="top:55%;left:10%;width:75%;"></div>
|
||||
<div class="map-road-h" style="top:78%;left:15%;width:65%;"></div>
|
||||
<div class="map-road-v" style="left:30%;top:8%;height:80%;"></div>
|
||||
<div class="map-road-v" style="left:55%;top:5%;height:88%;"></div>
|
||||
<div class="map-road-v" style="left:78%;top:12%;height:70%;"></div>
|
||||
|
||||
<!-- 患者中心点 -->
|
||||
<div class="patient-pin">
|
||||
<div class="patient-pin__pulse"></div>
|
||||
<div class="patient-pin__dot"></div>
|
||||
<div class="patient-pin__label">西安市雁塔区电子一路96号香山红叶</div>
|
||||
</div>
|
||||
|
||||
<!-- 资源Tab栏 -->
|
||||
<div class="res-tabs" id="resTabs">
|
||||
<div class="res-tab res-tab--active" data-type="hospital" onclick="switchTab(this)">油田医院</div>
|
||||
<div class="res-tab" data-type="partner" onclick="switchTab(this)">合作医院</div>
|
||||
<div class="res-tab" data-type="clinic" onclick="switchTab(this)">医疗点</div>
|
||||
<div class="res-tab" data-type="ambulance" onclick="switchTab(this)">救护车</div>
|
||||
<div class="res-tab" data-type="aed" onclick="switchTab(this)">AED</div>
|
||||
<div class="res-tab" data-type="kit" onclick="switchTab(this)">急救包</div>
|
||||
</div>
|
||||
|
||||
<!-- 资源坐标点容器 -->
|
||||
<div id="markers"></div>
|
||||
|
||||
<!-- 底部资源卡片 -->
|
||||
<div class="res-card" id="resCard">
|
||||
<button class="res-card__close" onclick="closeCard(event)">✕</button>
|
||||
<div class="res-card__body">
|
||||
<div class="res-card__img" id="cardImg">🏥</div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name" id="cardName">-</div>
|
||||
<div class="res-card__org" id="cardOrg">-</div>
|
||||
<div class="res-card__row"><span class="res-card__dist" id="cardDist">-</span></div>
|
||||
<div class="res-card__row" id="cardPhone">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
|
||||
<span id="cardPhoneText">-</span>
|
||||
</div>
|
||||
<div class="res-card__row" id="cardAddr">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
<span id="cardAddrText">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA = {
|
||||
hospital: [
|
||||
{ name:'长庆油田职工医院', org:'长庆油田公司', dist:'1.2km', phone:'0911-8812345', addr:'延安市宝塔区长庆路88号', icon:'🏥', top:'32%', left:'22%' },
|
||||
{ name:'采油一厂职工医院', org:'采油一厂', dist:'2.8km', phone:'0911-8823456', addr:'延安市安塞区油田大道12号', icon:'🏥', top:'18%', left:'68%' }
|
||||
],
|
||||
partner: [
|
||||
{ name:'延安大学附属医院', org:'延安大学', dist:'3.5km', phone:'0911-2888100', addr:'延安市宝塔区北大街43号', icon:'🏨', top:'25%', left:'75%' },
|
||||
{ name:'延安市人民医院', org:'延安市卫健委', dist:'4.1km', phone:'0911-2113456', addr:'延安市宝塔区七里铺街42号', icon:'🏨', top:'70%', left:'20%' }
|
||||
],
|
||||
clinic: [
|
||||
{ name:'第一作业区医疗点', org:'采油一厂', dist:'0.5km', phone:'0911-8834567', addr:'安塞区第一作业区生活基地', icon:'🩺', top:'45%', left:'38%' },
|
||||
{ name:'集气站医疗点', org:'采气一厂', dist:'1.8km', phone:'0911-8845678', addr:'安塞区王窑集气站', icon:'🩺', top:'62%', left:'65%' }
|
||||
],
|
||||
ambulance: [
|
||||
{ name:'陕A·120E8', org:'长庆油田职工医院', dist:'0.8km', phone:'0911-8801120', addr:'当前位置：长庆路与延河路交叉口', icon:'🚑', top:'40%', left:'60%' },
|
||||
{ name:'陕A·120F3', org:'延安市急救中心', dist:'3.2km', phone:'0911-2881120', addr:'当前位置：宝塔区政府附近', icon:'🚑', top:'22%', left:'40%' }
|
||||
],
|
||||
aed: [
|
||||
{ name:'一厂办公楼AED', org:'采油一厂', dist:'0.3km', phone:'0911-8856789', addr:'采油一厂办公楼一层大厅', icon:'⚡', top:'48%', left:'25%' },
|
||||
{ name:'职工活动中心AED', org:'长庆油田公司', dist:'1.5km', phone:'0911-8867890', addr:'长庆油田职工活动中心入口', icon:'⚡', top:'35%', left:'48%' }
|
||||
],
|
||||
kit: [
|
||||
{ name:'井站急救包-W012', org:'采油一厂', dist:'0.2km', phone:'0911-8878901', addr:'王窑作业区W012井站', icon:'🧰', top:'52%', left:'70%' },
|
||||
{ name:'值班室急救包', org:'采油一厂', dist:'0.6km', phone:'0911-8889012', addr:'第一作业区值班室', icon:'🧰', top:'68%', left:'42%' }
|
||||
]
|
||||
};
|
||||
var ICON_CLS = { hospital:'hospital', partner:'partner', clinic:'clinic', ambulance:'ambulance', aed:'aed', kit:'kit' };
|
||||
var markersEl = document.getElementById('markers');
|
||||
var cardEl = document.getElementById('resCard');
|
||||
var curType = 'hospital';
|
||||
|
||||
function renderMarkers(type) {
|
||||
markersEl.innerHTML = '';
|
||||
var list = DATA[type] || [];
|
||||
list.forEach(function(item, i) {
|
||||
var m = document.createElement('div');
|
||||
m.className = 'marker';
|
||||
m.style.top = item.top;
|
||||
m.style.left = item.left;
|
||||
m.innerHTML = '<div class="marker__icon marker__icon--' + ICON_CLS[type] + '">' + item.icon + '</div><div class="marker__label">' + item.name + '</div>';
|
||||
m.onclick = function(e) { e.stopPropagation(); showCard(item, type); };
|
||||
markersEl.appendChild(m);
|
||||
});
|
||||
}
|
||||
|
||||
function showCard(item, type) {
|
||||
document.getElementById('cardImg').textContent = item.icon;
|
||||
document.getElementById('cardName').textContent = item.name;
|
||||
document.getElementById('cardOrg').textContent = item.org;
|
||||
document.getElementById('cardDist').textContent = '距患者 ' + item.dist;
|
||||
document.getElementById('cardPhoneText').textContent = item.phone;
|
||||
document.getElementById('cardAddrText').textContent = item.addr;
|
||||
cardEl.classList.add('res-card--show');
|
||||
}
|
||||
|
||||
function closeCard(e) {
|
||||
if (e && e.target.closest && e.target.closest('.marker')) return;
|
||||
cardEl.classList.remove('res-card--show');
|
||||
}
|
||||
|
||||
function switchTab(el) {
|
||||
var tabs = document.querySelectorAll('.res-tab');
|
||||
tabs.forEach(function(t) { t.classList.remove('res-tab--active'); });
|
||||
el.classList.add('res-tab--active');
|
||||
curType = el.getAttribute('data-type');
|
||||
cardEl.classList.remove('res-card--show');
|
||||
renderMarkers(curType);
|
||||
}
|
||||
|
||||
renderMarkers(curType);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!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; }
|
||||
.form-card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.field-label { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.field-label .required { color: #ff4d4f; margin-left: 2px; }
|
||||
.field-input, .field-select, .field-textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; color: #1a1a1a; outline: none; font-family: inherit; background: #fff; }
|
||||
.field-input, .field-select { height: 40px; padding: 0 12px; }
|
||||
.field-textarea { min-height: 108px; padding: 10px 12px; resize: none; line-height: 1.6; }
|
||||
.field-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
|
||||
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.chip { padding: 6px 12px; border-radius: 16px; background: #f5f5f5; color: #666; font-size: 12px; cursor: pointer; }
|
||||
.chip.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.submit-bar { padding: 12px 16px 18px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.submit-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.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="form-card" style="background:linear-gradient(135deg,#fff7e6,#fff1f0);border:1px solid #ffe7ba;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">患者信息</div>
|
||||
<div style="font-size:16px;font-weight:700;color:#1a1a1a;">张小红 · 女 · 45岁</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:6px;line-height:1.6;">采油一厂 · 第一作业区</div>
|
||||
<!-- <div style="font-size:12px;color:#666;line-height:1.6;">当前症状：胸口闷痛、呼吸困难、伴出汗</div>-->
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<div class="field-label">救助意见<span class="required">*</span></div>
|
||||
<textarea class="field-textarea" placeholder="请输入救助意见...">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</textarea>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="submit-bar">
|
||||
<!-- [交互] 点击提交后返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="submit-btn" onclick="location.href='./emergency-chat-ongoing.html'">发送救助意见</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
document.querySelectorAll('.chip').forEach(function(chip) {
|
||||
chip.addEventListener('click', function() {
|
||||
chip.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!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; 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; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
|
||||
.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-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.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: 4px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 6px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; opacity: .7; }
|
||||
.summary-list { list-style: none; padding: 0; margin: 0; }
|
||||
.summary-item { font-size: 13px; color: #333; line-height: 1.8; padding: 3px 0; display: flex; gap: 4px; }
|
||||
.summary-item__idx { color: #999; flex-shrink: 0; }
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0 12px; }
|
||||
.empty-state__icon { font-size: 36px; margin-bottom: 8px; opacity: .35; }
|
||||
.empty-state__text { font-size: 13px; color: #bbb; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.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="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">正常派单</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">陈伟（EMP-71023）</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></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-23 14:30:00</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-blue">进行中</span></span></div>
|
||||
</div>
|
||||
|
||||
<!-- 救助信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救助信息</div>
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充小结：</div>
|
||||
<ul class="summary-list">
|
||||
<li class="summary-item"><span class="summary-item__idx">1.</span><span>接到求助后远程指导患者制动并冰敷左膝</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">2.</span><span>已联系操作人员安排驻场人员前往现场协助转运</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">📋</div>
|
||||
<div class="empty-state__text">暂无派单信息</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车支援 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🚑</div>
|
||||
<div class="empty-state__text">暂无救护车支援信息</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!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; 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; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
|
||||
.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-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.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: 4px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 6px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; opacity: .7; }
|
||||
.summary-list { list-style: none; padding: 0; margin: 0; }
|
||||
.summary-item { font-size: 13px; color: #333; line-height: 1.8; padding: 3px 0; display: flex; gap: 4px; }
|
||||
.summary-item__idx { color: #999; flex-shrink: 0; }
|
||||
.footer-bar { padding: 12px 16px 18px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.action-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: #1677ff; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-done.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-done.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="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">正常派单</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">王旭（EMP-56985）</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></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-03-21 15:12:21</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-03-21 16:45:00</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 救助信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救助信息</div>
|
||||
<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 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="desc-block">
|
||||
<div class="desc-block__label">补充小结：</div>
|
||||
<ul class="summary-list">
|
||||
<li class="summary-item"><span class="summary-item__idx">1.</span><span>接到应急求助后立即抵达现场，员工突发头晕伴恶心呕吐</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">2.</span><span>现场监测体征异常，初步处置无效，联系驻场人员陪同就医</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">3.</span><span>已完成头颅CT检测，员工由同事留守陪护，已告知家属及部门负责人</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-03-21 15:18:00</span></div>
|
||||
<div class="info-item"><span class="info-item__label">驻场人员</span><span class="info-item__value">王希（138-9201-3001）</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-03-21 16:40:00</span></div>
|
||||
<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 class="card">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="info-item"><span class="info-item__label">车牌号</span><span class="info-item__value">陕A·120-01</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></div>
|
||||
<div class="info-item"><span class="info-item__label">驾驶人电话</span><span class="info-item__value">138-9101-2001</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">138-9201-5001</span></div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="footer-bar">-->
|
||||
<!-- <!– [交互] 点击跳转至: ./emergency-chat.html –>-->
|
||||
<!-- <button class="action-btn" onclick="location.href='./emergency-chat.html'">进入应急会话</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user