fix: 同步导航页SITE_MAP与实际文件，优化多模块原型页面
- 校正index.html中6处SITE_MAP页面注册与磁盘文件的差异 - 新增应急就医员工端23个页面原型及资源详情页 - 新增管理端AED子模块7个页面及大病就医详情页 - 优化健康咨询多端页面交互与PRD文档 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AED详情</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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.hero-img { width: 100%; height: 180px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.img-placeholder { width: 100%; height: 160px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; margin-top: 12px; }
|
||||
.video-placeholder { width: 100%; height: 180px; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; margin-top: 12px; position: relative; }
|
||||
.video-placeholder::after { content: '▶'; font-size: 36px; opacity: 0.7; }
|
||||
.file-card { display: flex; align-items: center; gap: 12px; background: #f9f9f9; border-radius: 8px; padding: 12px; margin-top: 12px; }
|
||||
.file-card__icon { width: 40px; height: 40px; background: #ff4d4f; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
|
||||
.file-card__info { flex: 1; }
|
||||
.file-card__info .name { font-size: 14px; color: #1a1a1a; font-weight: 500; }
|
||||
.file-card__info .meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map-aed.html">‹</a><span class="nav-title">AED详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">AED设备图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">半自动体外除颤仪</div>
|
||||
<div class="info-row"><label>设备编号：</label>A596852322</div>
|
||||
<div class="info-row"><label>所属单位：</label>第一采油厂-生产保障大队</div>
|
||||
<div class="info-row"><label>管理人电话：</label>13402990768</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口长庆兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button><button class="btn btn-nav">📍 导航</button></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="info-section">
|
||||
<div class="section-title">操作图片</div>
|
||||
<div class="img-placeholder">操作图片</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">操作视频</div>
|
||||
<div class="video-placeholder"></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">免责声明</div>
|
||||
<div class="file-card">
|
||||
<div class="file-card__icon">PDF</div>
|
||||
<div class="file-card__info"><div class="name">AED设备免责声明</div><div class="meta">PDF 1.38M</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.hero-img { width: 100%; height: 180px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map-ambulance.html">‹</a><span class="nav-title">救护车详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">救护车图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">救护车(宁ALY120)</div>
|
||||
<div class="info-row"><label>驾驶人电话：</label>13402990768</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口长庆兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">更多信息</div>
|
||||
<div class="info-row"><label>所属医疗点：</label>第四采油厂凤凰山医务室</div>
|
||||
<div class="info-row"><label>类型：</label>转运型</div>
|
||||
<div class="info-row"><label>所配急救设备：</label>除颤仪、心电图机、吸氧设备、氧气瓶</div>
|
||||
<div class="info-row"><label>救护能力：</label>现场急救、医疗保障、医疗转运</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 0; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #999; margin-bottom: 8px; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='appointment-list.html'">‹</span>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">个人取消</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">取消信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">创建时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">取消时间</span><span class="info-card__value">2026-08-21 15:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">取消原因</span><span class="info-card__value">没有时间去了</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 0; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #1677ff; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-btns { position: absolute; bottom: 34px; left: 16px; right: 16px; display: flex; gap: 12px; }
|
||||
.bottom-btns__btn { flex: 1; height: 48px; border-radius: 24px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.bottom-btns__btn--cancel { background: #fff; color: #ff4d4f; border: 1px solid #ff4d4f; }
|
||||
.bottom-btns__btn--primary { background: #1677ff; color: #fff; }
|
||||
/* 弹窗 */
|
||||
.modal-mask { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
|
||||
.modal-mask--show { display: flex; }
|
||||
.modal { background: #fff; border-radius: 16px; width: 300px; padding: 24px; text-align: center; }
|
||||
.modal__title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.modal__desc { font-size: 14px; color: #666; margin-bottom: 24px; }
|
||||
.modal__btns { display: flex; gap: 12px; }
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.bottom-spacer { height: 100px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='appointment-list.html'">‹</span>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已确认</div>
|
||||
<div class="status-area__desc">已派单至驻场人员(张旭)</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-btns">
|
||||
<button class="bottom-btns__btn bottom-btns__btn--cancel" onclick="document.getElementById('cancelModal').classList.add('modal-mask--show')">取消预约</button>
|
||||
<button class="bottom-btns__btn bottom-btns__btn--primary">联系驻场人员</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
<!-- 取消确认弹窗 -->
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消预约？</div>
|
||||
<!-- <div class="modal__desc">取消后需要重新发起预约申请</div>-->
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 0; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #52c41a; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-btn { position: absolute; bottom: 34px; left: 16px; right: 16px; height: 48px; background: #1677ff; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
|
||||
.bottom-spacer { height: 100px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='appointment-list.html'">‹</span>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已完成</div>
|
||||
<div class="status-area__desc">驻场人员(张旭)已完成挂号</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">挂号结果</div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊时段</span><span class="info-card__value">2026-03-28 09:00–09:20</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">排队序号</span><span class="info-card__value">08</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">备注</span><span class="info-card__value">只剩下这个时间段可以预约</span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button class="bottom-btn">联系驻场人员</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 0; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #fa8c16; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-spacer { height: 100px; flex-shrink: 0; }
|
||||
.bottom-btn { position: absolute; bottom: 34px; left: 16px; right: 16px; height: 48px; background: #fff; color: #ff4d4f; border: 1px solid #ff4d4f; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
|
||||
/* 弹窗 */
|
||||
.modal-mask { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
|
||||
.modal-mask--show { display: flex; }
|
||||
.modal { background: #fff; border-radius: 16px; width: 300px; padding: 24px; text-align: center; }
|
||||
.modal__title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.modal__desc { font-size: 14px; color: #666; margin-bottom: 24px; }
|
||||
.modal__btns { display: flex; gap: 12px; }
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='appointment-list.html'">‹</span>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">待确认</div>
|
||||
<div class="status-area__desc">请耐心等待管理人员进行确认</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bottom-btn" onclick="document.getElementById('cancelModal').classList.add('modal-mask--show')">取消预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
<!-- 取消确认弹窗 -->
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消预约？</div>
|
||||
<!-- <div class="modal__desc">取消后需要重新发起预约申请</div>-->
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.form-group { background: #fff; border-radius: 12px; padding: 0 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-row__label { font-size: 14px; color: #333; width: 100px; flex-shrink: 0; }
|
||||
.form-row__input { flex: 1; font-size: 14px; color: #333; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-row__input::placeholder { color: #ccc; }
|
||||
.form-row__select { flex: 1; font-size: 14px; color: #333; border: none; outline: none; background: transparent; text-align: right; appearance: none; -webkit-appearance: none; }
|
||||
.form-row__select option { text-align: left; }
|
||||
.form-row__arrow { color: #ccc; margin-left: 4px; font-size: 12px; }
|
||||
.form-textarea { width: 100%; min-height: 80px; font-size: 14px; color: #333; border: none; outline: none; background: transparent; resize: none; padding: 14px 0; font-family: inherit; }
|
||||
.form-textarea::placeholder { color: #ccc; }
|
||||
.required::before { content: '*'; color: #ff4d4f; margin-right: 4px; }
|
||||
.bottom-btn { position: absolute; bottom: 34px; left: 16px; right: 16px; height: 48px; background: #1677ff; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
|
||||
.bottom-spacer { height: 100px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='appointment-list.html'">‹</span>
|
||||
<span class="nav-title">大病就医预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-row__label required">预约医院</span>
|
||||
<select class="form-row__select"><option value="" disabled selected>请选择</option><option>空军军医大学西京医院</option><option>西安交大一附院</option></select>
|
||||
<span class="form-row__arrow">›</span>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="form-row__label">就诊卡号</span>
|
||||
<input class="form-row__input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="form-row__label required">挂号类别</span>
|
||||
<select class="form-row__select"><option value="" disabled selected>请选择</option><option>专家号</option><option>普通号</option></select>
|
||||
<span class="form-row__arrow">›</span>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="form-row__label required">期望预约时间</span>
|
||||
<input class="form-row__input" type="datetime-local">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="form-row__label required">预约科室</span>
|
||||
<input class="form-row__input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="form-row__label required">预约医生</span>
|
||||
<input class="form-row__input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row" style="flex-direction:column;align-items:flex-start;">
|
||||
<span class="form-row__label required" style="margin-bottom:8px;">病情描述</span>
|
||||
<textarea class="form-textarea" placeholder="请输入病情描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bottom-btn">确定</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.new-btn { display: block; width: calc(100% - 32px); height: 44px; background: #1677ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; position: absolute; bottom: 34px; left: 16px; z-index: 10; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--self-cancel { background: #f5f5f5; color: #999; }
|
||||
.card__status--admin-cancel { background: #fff2f0; color: #ff4d4f; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">大病就医预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-done.html'">已完成</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已取消</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='appointment-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--self-cancel">个人取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='appointment-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--admin-cancel">管理人员取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="new-btn" onclick="window.location.href='appointment-form.html'">发起新的预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.new-btn { display: block; width: calc(100% - 32px); height: 44px; background: #1677ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; position: absolute; bottom: 34px; left: 16px; z-index: 10; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--done { background: #f6ffed; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">大病就医预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已完成</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-cancelled.html'">已取消</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='appointment-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>就诊科室：神经内科</div>
|
||||
<div>就诊医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>就诊时段：2026-03-28 09:00–09:20 | 排队序号：08</div>
|
||||
</div>
|
||||
<div class="card__tip">驻场人员(张旭)已完成挂号</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="new-btn" onclick="window.location.href='appointment-form.html'">发起新的预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.new-btn { display: block; width: calc(100% - 32px); height: 44px; background: #1677ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; position: absolute; bottom: 34px; left: 16px; z-index: 10; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--pending { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--confirmed { background: #e6f7ff; color: #1677ff; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">大病就医预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item ">全部</div>
|
||||
<div class="tab-bar__item tab-bar__item--active" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-done.html'">已完成</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-cancelled.html'">已取消</div>
|
||||
</div>
|
||||
<!-- 卡片1：待确认 -->
|
||||
<div class="card" onclick="window.location.href='appointment-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--pending">待确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
<div class="card__tip">请耐心等待管理人员进行确认</div>
|
||||
</div>
|
||||
<!-- 卡片2：已确认 -->
|
||||
<div class="card" onclick="window.location.href='appointment-detail-confirmed.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--confirmed">已确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
<div class="card__tip">已派单至驻场人员(张旭)</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="new-btn" onclick="window.location.href='appointment-form.html'">发起新的预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.intro-text { font-size: 14px; color: #666; line-height: 1.8; }
|
||||
.hero-img { width: 100%; height: 180px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map-clinic.html">‹</a><span class="nav-title">医疗点详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">医疗点图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">吴堡作业区医疗点</div>
|
||||
|
||||
<div class="info-row"><label>所属医院：</label>长庆油田职工医院</div>
|
||||
<div class="info-row"><label>所属单位：</label>第一采油厂</div>
|
||||
|
||||
<div class="info-row"><label>联系电话：</label>020-88556985</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口长庆兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button><button class="btn btn-nav">📍 导航</button></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医疗点简介</div>
|
||||
<div class="intro-text">无</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
# 应急就医模块 CHANGELOG
|
||||
|
||||
## 2026-04-20
|
||||
|
||||
### 新增
|
||||
- 应急就医主页（index.html）：应急资源地图入口、应急求助（拨打120/应急视频/应急电话）、更多（大病就医预约/急救教学视频/应急求助记录）
|
||||
- 视频求助页（video-call.html）：视频通话界面，含静音/挂断/摄像头控制
|
||||
- 应急对话页（emergency-chat.html）：语音+文字对话，含参与人员列表
|
||||
- 应急资源地图系列（resource-map.html 及 4 个 Tab 变体）：油田医院/医疗点/AED/救护车/急救包分类展示，含底部弹出卡片和模拟急救弹窗
|
||||
- 资源详情页 5 个：油田医院详情、医疗点详情、AED 详情（含操作图片/视频/免责声明）、救护车详情、急救包详情（含内配用品表格）
|
||||
- 心梗急救提示书（emergency-tips.html）：急救指引 + 最近急救资源列表
|
||||
- 应急求助记录列表（help-records.html）+ 应急对话历史（help-chat-history.html）
|
||||
- 大病就医预约系列 8 页：预约列表（全部/已完成/已取消 Tab）、就医详情（待确认/已确认/已完成/已取消）、发起新预约表单
|
||||
- 急救教学视频列表（first-aid-videos.html）
|
||||
|
||||
### 说明
|
||||
- 本次为墨刀原型迁移，共新增 26 个 HTML 原型页面
|
||||
- 所有页面遵循项目 390×844 手机壳规范，CSS/JS 全部内联自包含
|
||||
@@ -0,0 +1,131 @@
|
||||
<!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; min-height: 844px; background: #f5f5f5; 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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
.chat-area { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 系统消息 */
|
||||
.msg-system { text-align: center; font-size: 12px; color: #999; padding: 4px 12px; }
|
||||
.msg-system .call-info { background: #e8e8e8; border-radius: 4px; padding: 4px 12px; display: inline-block; }
|
||||
|
||||
/* 消息气泡 */
|
||||
.msg-row { display: flex; gap: 8px; align-items: flex-start; }
|
||||
.msg-row--right { flex-direction: row-reverse; }
|
||||
.msg-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #e8e8e8; display: flex; align-items: center; justify-content: center; }
|
||||
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.msg-content { max-width: 240px; }
|
||||
.msg-name { font-size: 11px; color: #999; margin-bottom: 4px; }
|
||||
.msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-all; }
|
||||
.msg-row--left .msg-bubble { background: #fff; color: #333; border-top-left-radius: 4px; }
|
||||
.msg-row--right .msg-bubble { background: #1677ff; color: #fff; border-top-right-radius: 4px; }
|
||||
.msg-row--right .msg-name { text-align: right; }
|
||||
|
||||
/* 参与人员 */
|
||||
.participants { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.participants__list { display: flex; gap: 16px; }
|
||||
.participant { display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||||
.participant__avatar { width: 40px; height: 40px; border-radius: 50%; background: #e8e8e8; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.participant__name { font-size: 11px; color: #666; }
|
||||
.participant__status { font-size: 10px; color: #52c41a; }
|
||||
|
||||
/* 底部输入栏 */
|
||||
.chat-input-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.btn-voice { width: 36px; height: 36px; border-radius: 50%; background: #f5f5f5; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
|
||||
.voice-btn { flex: 1; height: 36px; border-radius: 18px; background: #f5f5f5; border: none; font-size: 14px; color: #666; cursor: pointer; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">西安应急中心</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-area">
|
||||
<!-- 系统消息：通话记录 -->
|
||||
<div class="msg-system">
|
||||
<span>11:13</span>
|
||||
</div>
|
||||
<!-- <div class="msg-system">-->
|
||||
<!-- <span class="call-info">通话时长 12:23</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!-- 员工消息 -->
|
||||
<div class="msg-row msg-row--right">
|
||||
<div class="msg-avatar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<div class="msg-content">
|
||||
<!-- <div class="msg-name">我</div>-->
|
||||
<div class="msg-bubble">通话时长 12:23 📹</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对方消息 -->
|
||||
<div class="msg-row msg-row--left">
|
||||
<div class="msg-avatar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">吴凤(主治医师)</div>
|
||||
<div class="msg-bubble">联系医院急诊，拍头部CT</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 参与人员 -->
|
||||
<div class="participants">
|
||||
<div class="participants__list">
|
||||
<div class="participant">
|
||||
<div class="participant__avatar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<div class="participant__name">吴凤(主治医师)</div>
|
||||
<!-- <div class="participant__status">正在处理</div>-->
|
||||
</div>
|
||||
<div class="participant">
|
||||
<div class="participant__avatar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<div class="participant__name">张旭(操作人员)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入栏 -->
|
||||
<div class="chat-input-bar">
|
||||
<button class="btn-voice">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/></svg>
|
||||
</button>
|
||||
<button class="voice-btn">按住说话</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.map-bg { flex: 1; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); position: relative; overflow-y: auto; padding: 16px; }
|
||||
.map-bg::-webkit-scrollbar { display: none; }
|
||||
.tip-card { background: #fff; border-radius: 16px; padding: 20px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
|
||||
.tip-card__title { font-size: 18px; font-weight: 700; color: #ff4d4f; text-align: center; margin-bottom: 16px; }
|
||||
.tip-list { list-style: none; margin-bottom: 20px; }
|
||||
.tip-list li { font-size: 13px; color: #333; line-height: 1.8; margin-bottom: 10px; padding-left: 20px; position: relative; }
|
||||
.tip-list li::before { content: attr(data-idx); position: absolute; left: 0; color: #ff4d4f; font-weight: 700; }
|
||||
.resource-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
|
||||
.resource-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; flex-wrap: wrap; }
|
||||
.resource-item__text { flex: 1; font-size: 13px; color: #333; line-height: 1.5; min-width: 160px; }
|
||||
.resource-item__text a { color: #1677ff; text-decoration: none; }
|
||||
.resource-item__actions { display: flex; gap: 6px; }
|
||||
.btn-sm { height: 28px; padding: 0 12px; border-radius: 14px; border: none; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
|
||||
.btn-sm-nav { background: #e6f7ff; color: #1677ff; }
|
||||
.btn-sm-phone { background: #fff1f0; color: #ff4d4f; }
|
||||
.btn-sm-detail { background: #f6ffed; color: #52c41a; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map.html">‹</a><span class="nav-title">模拟急救</span></div>
|
||||
<div class="map-bg">
|
||||
<div class="tip-card">
|
||||
<div class="tip-card__title">心梗急救提示书</div>
|
||||
<ul class="tip-list">
|
||||
<li data-idx="(1)">心率失常，有心梗风险；</li>
|
||||
<li data-idx="(2)">立即停止活动，保持环境安静，防止不良刺激，平躺休息，以降低心肌耗氧量和交感神经兴奋性；</li>
|
||||
<li data-idx="(3)">如伴有胸痛或不适、上腹部不适、呼吸困难、出汗、头晕或头昏、恶心或呕吐等症状，请立即拨打120；</li>
|
||||
<li data-idx="(4)">请准备硝酸甘油舌下含服；</li>
|
||||
</ul>
|
||||
<div class="resource-title">最近急救资源</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-item__text">距离350米处有AED可用，步行约12分钟 <a href="aed-detail.html">详情</a></div>
|
||||
<div class="resource-item__actions"><button class="btn-sm btn-sm-nav">导航</button></div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-item__text">距离580米处有急救包可用，步行约15分钟 <a href="first-aid-kit-detail.html">详情</a></div>
|
||||
<div class="resource-item__actions"><button class="btn-sm btn-sm-nav">导航</button></div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-item__text">距离8.5公里处有救护车，驾车约15分钟 <a href="ambulance-detail.html">详情</a></div>
|
||||
<div class="resource-item__actions"><button class="btn-sm btn-sm-phone">电话</button></div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-item__text">距离350米处有XXX医院，步行约12分钟 <a href="hospital-detail.html">详情</a></div>
|
||||
<div class="resource-item__actions"><button class="btn-sm btn-sm-nav">导航</button></div>
|
||||
</div>
|
||||
<div class="resource-item">
|
||||
<div class="resource-item__text">距离8.5公里处有XXX医疗点，驾车约15分钟 <a href="clinic-detail.html">详情</a></div>
|
||||
<div class="resource-item__actions"><button class="btn-sm btn-sm-nav">导航</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.hero-img { width: 100%; height: 180px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.kit-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
|
||||
.kit-table th { background: #f5f7fa; padding: 8px 6px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e8e8e8; }
|
||||
.kit-table td { padding: 8px 6px; border-bottom: 1px solid #f0f0f0; color: #666; vertical-align: top; }
|
||||
.kit-table .cat-cell { font-weight: 500; color: #1a1a1a; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map-kit.html">‹</a><span class="nav-title">急救包详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">急救包图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">急救包</div>
|
||||
<div class="info-row"><label>所属单位：</label>第一采油厂-生产保障大队</div>
|
||||
<div class="info-row"><label>管理人电话：</label>13402990768</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口长庆兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button><button class="btn btn-nav">📍 导航</button></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="info-section">
|
||||
<div class="section-title">内配用品</div>
|
||||
<table class="kit-table">
|
||||
<thead><tr><th>类别</th><th>物品名称</th><th>规格</th><th>用途说明</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="cat-cell" rowspan="2">基础消毒</td><td>碘伏棉片</td><td>30片</td><td>伤口消毒</td></tr>
|
||||
<tr><td>医用酒精棉片</td><td>30片</td><td>皮肤、器械表面消毒</td></tr>
|
||||
<tr><td class="cat-cell" rowspan="4">止血包扎</td><td>医用纱布块</td><td>10片</td><td>覆盖伤口、吸收渗液</td></tr>
|
||||
<tr><td>医用绷带</td><td>2卷</td><td>固定纱布、加压止血</td></tr>
|
||||
<tr><td>止血带</td><td>1条</td><td>大出血时紧急止血</td></tr>
|
||||
<tr><td>创可贴</td><td>30片</td><td>小伤口、擦伤防护</td></tr>
|
||||
<tr><td class="cat-cell" rowspan="3">器械工具类</td><td>医用不锈钢剪刀</td><td>1把</td><td>裁剪绷带、衣物</td></tr>
|
||||
<tr><td>医用镊子</td><td>1把</td><td>夹取异物、敷料</td></tr>
|
||||
<tr><td>一次性医用手套</td><td>10副</td><td>避免交叉感染</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #fff; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar { padding: 12px 16px; }
|
||||
.search-input { width: 100%; height: 36px; border-radius: 18px; background: #f5f5f5; border: none; padding: 0 16px; font-size: 14px; color: #333; outline: none; }
|
||||
.search-input::placeholder { color: #ccc; }
|
||||
|
||||
/* 视频卡片 */
|
||||
.video-list { padding: 0 16px; }
|
||||
.video-card { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: opacity 0.15s; }
|
||||
.video-card:active { opacity: 0.7; }
|
||||
.video-card:last-child { border-bottom: none; }
|
||||
.video-thumb { width: 140px; height: 80px; border-radius: 8px; background: #1a1a1a; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
|
||||
.video-thumb__play { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; }
|
||||
.video-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
|
||||
.video-info__title { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.video-info__date { font-size: 12px; color: #999; }
|
||||
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">急救教学视频</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="search-bar">
|
||||
<input class="search-input" type="text" placeholder="搜索感兴趣的内容" readonly>
|
||||
</div>
|
||||
<div class="video-list">
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
<div class="video-thumb__play"><svg width="14" height="14" viewBox="0 0 24 24" fill="#333"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__title">【真人】中毒急救</div>
|
||||
<div class="video-info__date">2023-02-21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
<div class="video-thumb__play"><svg width="14" height="14" viewBox="0 0 24 24" fill="#333"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__title">【真人】成人心脏骤停急救法</div>
|
||||
<div class="video-info__date">2023-02-21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
<div class="video-thumb__play"><svg width="14" height="14" viewBox="0 0 24 24" fill="#333"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__title">【真人】自动体外除颤器使用方法</div>
|
||||
<div class="video-info__date">2023-02-21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
<div class="video-thumb__play"><svg width="14" height="14" viewBox="0 0 24 24" fill="#333"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__title">【动画】心肺复苏</div>
|
||||
<div class="video-info__date">2023-02-21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-card">
|
||||
<div class="video-thumb">
|
||||
<div class="video-thumb__play"><svg width="14" height="14" viewBox="0 0 24 24" fill="#333"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__title">【真人】中毒急救</div>
|
||||
<div class="video-info__date">2023-02-21</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .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: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
.record-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.record-card:active { transform: scale(0.98); }
|
||||
.record-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.record-card__type { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.record-card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.record-card__status--ongoing { background: #e6f7ff; color: #1677ff; }
|
||||
.record-card__status--done { background: #f5f5f5; color: #999; }
|
||||
.record-card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.record-card__info span { color: #999; }
|
||||
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急求助记录</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- [交互] 记录卡片1：应急视频-进行中，点击跳转对话 -->
|
||||
<div class="record-card" onclick="window.location.href='emergency-chat.html'">
|
||||
<div class="record-card__header">
|
||||
<span class="record-card__type">应急视频</span>
|
||||
<span class="record-card__status record-card__status--ongoing">进行中</span>
|
||||
</div>
|
||||
<div class="record-card__info">
|
||||
<div>求助时间：2026-02-21 12:34:43</div>
|
||||
<div>应急中心：西安应急中心</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 记录卡片2：拨打120-已结束 -->
|
||||
<div class="record-card">
|
||||
<div class="record-card__header">
|
||||
<span class="record-card__type">拨打120</span>
|
||||
<span class="record-card__status record-card__status--done">已结束</span>
|
||||
</div>
|
||||
<div class="record-card__info">
|
||||
<div>求助时间：2026-02-21 12:34:43</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 记录卡片3：应急电话-已结束 -->
|
||||
<div class="record-card">
|
||||
<div class="record-card__header">
|
||||
<span class="record-card__type">应急电话</span>
|
||||
<span class="record-card__status record-card__status--done">已结束</span>
|
||||
</div>
|
||||
<div class="record-card__info">
|
||||
<div>求助时间：2026-02-21 12:34:43</div>
|
||||
<div>应急中心：西安应急中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.hero-img { width: 100%; height: 180px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.hospital-name { font-size: 18px; font-weight: 700; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }
|
||||
.tag { font-size: 11px; background: #e6f7e6; color: #52c41a; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.intro-text { font-size: 14px; color: #666; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.intro-text.expanded { -webkit-line-clamp: unset; }
|
||||
.toggle-btn { font-size: 13px; color: #1677ff; margin-top: 8px; cursor: pointer; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar"><span class="time">12:00</span><div class="icons"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg></div></div>
|
||||
<div class="nav-bar"><a class="nav-back" href="resource-map.html">‹</a><span class="nav-title">油田医院详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">医院图片</div>
|
||||
<div class="info-section">
|
||||
<div class="hospital-name">兴隆园医院 <span class="tag">三级乙等</span></div>
|
||||
<div class="info-row"><label>联系电话：</label>020-88556985</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口长庆兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button><button class="btn btn-nav">📍 导航</button></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医院简介</div>
|
||||
<div class="intro-text">兴隆园医院（长庆兴隆园社区卫生服务中心），位于西安市未央区长庆兴隆园小区，为一级甲等综合医院，下设三桥和兴园、未央湖、湖滨花园、咸阳昌源、礼泉基地五个社区卫生服务站，主要为以上小区居民提供基本医疗、公共卫生、健康教育等医疗卫生服务，医院占地面积25亩，建筑面积6900平方米，开设床位93张，设有内儿科、外妇科、门诊综合科、影像科、检验科、药械科、干部保健科等科室。</div>
|
||||
<div class="toggle-btn">展开 ▼</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">急救擅长</div>
|
||||
<div class="intro-text">兴隆园医院（长庆兴隆园社区卫生服务中心），位于西安市未央区长庆兴隆园小区，为一级甲等综合医院，下设三桥和兴园、未央湖、湖滨花园、咸阳昌源、礼泉基地五个社区卫生服务站，主要为以上小区居民提供基本医疗、公共卫生、健康教育等医疗卫生服务，医院占地面积25亩，建筑面积6900平方米，开设床位93张，设有内儿科、外妇科、门诊综合科、影像科、检验科、药械科、干部保健科等科室。</div>
|
||||
<div class="toggle-btn">展开 ▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelectorAll('.toggle-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var text = this.previousElementSibling;
|
||||
var expanded = text.classList.toggle('expanded');
|
||||
this.textContent = expanded ? '收起 ▲' : '展开 ▼';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,179 @@
|
||||
<!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; min-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;
|
||||
}
|
||||
.phone-status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; padding: 0 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .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: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 应急资源地图卡片 */
|
||||
.map-card {
|
||||
margin: 16px; background: #fff; border-radius: 12px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s;
|
||||
}
|
||||
.map-card:active { transform: scale(0.98); }
|
||||
.map-card__info { flex: 1; }
|
||||
.map-card__info h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.map-card__info p { font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.map-card__info .btn-view {
|
||||
display: inline-block; margin-top: 10px; font-size: 13px; color: #1677ff;
|
||||
border: 1px solid #1677ff; border-radius: 16px; padding: 4px 16px; background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.map-card__img {
|
||||
width: 120px; height: 80px; border-radius: 8px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 应急求助区域 */
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; padding: 20px 16px 12px; }
|
||||
.sos-actions { display: flex; gap: 12px; padding: 0 16px; }
|
||||
.sos-card {
|
||||
flex: 1; background: #fff; border-radius: 12px; padding: 20px 12px;
|
||||
text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.sos-card:active { transform: scale(0.97); }
|
||||
.sos-card__icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px;
|
||||
border: 2px solid #e8e8e8; color: #333;
|
||||
}
|
||||
.sos-card__label { font-size: 13px; font-weight: 500; color: #333; }
|
||||
|
||||
/* 更多区域 */
|
||||
.more-list { padding: 0 16px; }
|
||||
.more-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 10px;
|
||||
cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s;
|
||||
}
|
||||
.more-item:active { transform: scale(0.98); }
|
||||
.more-item__label { font-size: 15px; color: #1a1a1a; }
|
||||
.more-item__arrow { font-size: 16px; color: #ccc; }
|
||||
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">应急就医</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- [交互] 应急资源地图入口卡片，点击跳转 resource-map.html -->
|
||||
<div class="map-card" onclick="window.location.href='resource-map.html'">
|
||||
<div class="map-card__info">
|
||||
<h3>应急资源地图</h3>
|
||||
<p>查看附近医院、医疗点、AED、救护车、急救包等资源</p>
|
||||
<span class="btn-view">查看</span>
|
||||
</div>
|
||||
<div class="map-card__img">
|
||||
<!-- 地图缩略图示意 -->
|
||||
<svg width="100" height="70" viewBox="0 0 100 70">
|
||||
<rect width="100" height="70" fill="#e8f0fe" rx="4"/>
|
||||
<circle cx="35" cy="30" r="6" fill="#ff4d4f" opacity="0.8"/>
|
||||
<circle cx="60" cy="20" r="5" fill="#1677ff" opacity="0.8"/>
|
||||
<circle cx="50" cy="45" r="5" fill="#52c41a" opacity="0.8"/>
|
||||
<circle cx="75" cy="38" r="4" fill="#faad14" opacity="0.8"/>
|
||||
<path d="M35 30 L60 20" stroke="#1677ff" stroke-width="0.5" opacity="0.3"/>
|
||||
<path d="M60 20 L50 45" stroke="#1677ff" stroke-width="0.5" opacity="0.3"/>
|
||||
<!-- 救护车图标 -->
|
||||
<rect x="68" y="50" width="18" height="10" rx="2" fill="#ff4d4f" opacity="0.6"/>
|
||||
<text x="72" y="58" font-size="6" fill="#fff">🚑</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应急求助 -->
|
||||
<div class="section-title">应急求助</div>
|
||||
<div class="sos-actions">
|
||||
<!-- [交互] 拨打120 -->
|
||||
<div class="sos-card" >
|
||||
<div class="sos-card__icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"><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>
|
||||
</div>
|
||||
<div class="sos-card__label">拨打120</div>
|
||||
</div>
|
||||
<!-- [交互] 应急视频，点击跳转 video-call.html -->
|
||||
<div class="sos-card" onclick="window.location.href='emergency-chat.html'">
|
||||
<div class="sos-card__icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"><rect x="2" y="5" width="14" height="14" rx="2"/><path d="M16 10l6-4v12l-6-4"/></svg>
|
||||
</div>
|
||||
<div class="sos-card__label">应急视频</div>
|
||||
</div>
|
||||
<!-- [交互] 应急电话 -->
|
||||
<div class="sos-card" >
|
||||
<div class="sos-card__icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"><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>
|
||||
</div>
|
||||
<div class="sos-card__label">应急电话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多 -->
|
||||
<div class="section-title">更多</div>
|
||||
<div class="more-list">
|
||||
<!-- [交互] 大病就医预约，跳转 appointment-list.html -->
|
||||
<div class="more-item" onclick="window.location.href='appointment-list.html'">
|
||||
<span class="more-item__label">大病就医预约</span>
|
||||
<span class="more-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 急救教学视频，跳转 first-aid-videos.html -->
|
||||
<div class="more-item" onclick="window.location.href='first-aid-videos.html'">
|
||||
<span class="more-item__label">急救教学视频</span>
|
||||
<span class="more-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 应急求助记录，跳转 help-records.html -->
|
||||
<div class="more-item" onclick="window.location.href='help-records.html'">
|
||||
<span class="more-item__label">应急求助记录</span>
|
||||
<span class="more-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急资源地图 - AED</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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.map-area { flex: 1; background: #e8f0fe; position: relative; overflow: hidden; }
|
||||
.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin { position: absolute; cursor: pointer; transform: translate(-50%, -100%); }
|
||||
.map-pin__dot { width: 28px; height: 34px; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin--aed .map-pin__dot { color: #faad14; }
|
||||
.map-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
|
||||
.map-me__dot { width: 14px; height: 14px; background: #1677ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(22,119,255,0.2); }
|
||||
.map-locate { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
|
||||
.map-zoom { position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; z-index: 5; }
|
||||
.map-zoom__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #fff; font-size: 18px; color: #333; }
|
||||
.map-zoom__btn + .map-zoom__btn { border-top: 1px solid #f0f0f0; }
|
||||
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 4px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; color: #999; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
|
||||
.tab-item--active { color: #1677ff; font-weight: 600; background: #e8f4ff; }
|
||||
.sim-btn { flex-shrink: 0; margin: 8px 16px; padding: 8px 0; border-radius: 20px; background: #fff3e8; border: 1px solid #ffbd6b; font-size: 13px; color: #e67e22; text-align: center; cursor: pointer; font-weight: 600; }
|
||||
.popup-card { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 10; display: flex; gap: 12px; }
|
||||
.popup-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f2f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.popup-card__info { flex: 1; min-width: 0; }
|
||||
.popup-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.popup-card__dist { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.popup-card__addr { font-size: 12px; color: #666; margin-bottom: 4px; }
|
||||
.popup-card__unit { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.popup-card__actions { display: flex; gap: 10px; }
|
||||
.popup-btn { flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8; background: #fff; font-size: 13px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.popup-btn--primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.simulate-panel { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.simulate-panel--visible { display: block; }
|
||||
.simulate-panel__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.simulate-panel__desc { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.simulate-panel__tags { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.sim-tag { padding: 8px 20px; border-radius: 20px; background: #f5f5f5; font-size: 13px; color: #333; cursor: pointer; border: 1px solid #e8e8e8; }
|
||||
.sim-tag:active { background: #e8f4ff; border-color: #1677ff; color: #1677ff; }
|
||||
.simulate-panel__close { font-size: 13px; color: #1677ff; cursor: pointer; text-align: center; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急资源地图</span>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item tab-item--active">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-kit.html'">急救包</div>
|
||||
</div>
|
||||
<div class="sim-btn" onclick="document.getElementById('simPanel').classList.toggle('simulate-panel--visible')">模拟急救</div>
|
||||
<div class="simulate-panel" id="simPanel">
|
||||
<div class="simulate-panel__title">模拟急救</div>
|
||||
<div class="simulate-panel__desc">选择突发疾病，下发急救提示书</div>
|
||||
<div class="simulate-panel__tags">
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">心梗</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">猝死</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">脑梗/脑出血</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-area">
|
||||
<div class="map-locate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
|
||||
<div class="map-zoom">
|
||||
<button class="map-zoom__btn">+</button>
|
||||
<button class="map-zoom__btn">−</button>
|
||||
</div>
|
||||
<div class="map-me"><div class="map-me__dot"></div></div>
|
||||
<div class="map-placeholder">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#dce8f7" rx="8"/><circle cx="80" cy="70" r="8" fill="#faad14"/><circle cx="130" cy="50" r="6" fill="#faad14"/><circle cx="100" cy="120" r="6" fill="#faad14"/><path d="M40 160 Q100 130 160 155" stroke="#b0c4de" fill="none" stroke-width="1.5"/><path d="M30 140 Q90 110 170 135" stroke="#b0c4de" fill="none" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div class="map-pin map-pin--aed" style="top:35%;left:40%" onclick="window.location.href='aed-detail.html'">
|
||||
<div class="map-pin__dot"><svg width="28" height="34" viewBox="0 0 28 34"><path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 20 14 20s14-9.5 14-20C28 6.3 21.7 0 14 0z" fill="currentColor"/><text x="14" y="18" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">AED</text></svg></div>
|
||||
</div>
|
||||
<div class="popup-card" onclick="window.location.href='aed-detail.html'">
|
||||
<div class="popup-card__img"><svg width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" rx="4" fill="#fff8e8"/><text x="20" y="25" text-anchor="middle" fill="#faad14" font-size="14" font-weight="700">AED</text></svg></div>
|
||||
<div class="popup-card__info">
|
||||
<div class="popup-card__name">半自动体外除颤仪</div>
|
||||
<div class="popup-card__dist">距离3.5km 驾车约12分钟</div>
|
||||
<div class="popup-card__addr">详细地址：生产保障大队办公楼楼道</div>
|
||||
<div class="popup-card__unit">第三采油厂-虎狼峁采油作业区</div>
|
||||
<div class="popup-card__actions">
|
||||
<button class="popup-btn">联系电话</button>
|
||||
<button class="popup-btn popup-btn--primary" >地图导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.map-area { flex: 1; background: #e8f0fe; position: relative; overflow: hidden; }
|
||||
.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin { position: absolute; cursor: pointer; transform: translate(-50%, -100%); }
|
||||
.map-pin__dot { width: 28px; height: 34px; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin--ambulance .map-pin__dot { color: #ff4d4f; }
|
||||
.map-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
|
||||
.map-me__dot { width: 14px; height: 14px; background: #1677ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(22,119,255,0.2); }
|
||||
.map-locate { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
|
||||
.map-zoom { position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; z-index: 5; }
|
||||
.map-zoom__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #fff; font-size: 18px; color: #333; }
|
||||
.map-zoom__btn + .map-zoom__btn { border-top: 1px solid #f0f0f0; }
|
||||
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 4px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; color: #999; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
|
||||
.tab-item--active { color: #1677ff; font-weight: 600; background: #e8f4ff; }
|
||||
.sim-btn { flex-shrink: 0; margin: 8px 16px; padding: 8px 0; border-radius: 20px; background: #fff3e8; border: 1px solid #ffbd6b; font-size: 13px; color: #e67e22; text-align: center; cursor: pointer; font-weight: 600; }
|
||||
.popup-card { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 10; display: flex; gap: 12px; }
|
||||
.popup-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f2f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.popup-card__info { flex: 1; min-width: 0; }
|
||||
.popup-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.popup-card__dist { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.popup-card__addr { font-size: 12px; color: #666; margin-bottom: 4px; }
|
||||
.popup-card__unit { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.popup-card__actions { display: flex; gap: 10px; }
|
||||
.popup-btn { flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8; background: #fff; font-size: 13px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.popup-btn--primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.simulate-panel { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.simulate-panel--visible { display: block; }
|
||||
.simulate-panel__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.simulate-panel__desc { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.simulate-panel__tags { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.sim-tag { padding: 8px 20px; border-radius: 20px; background: #f5f5f5; font-size: 13px; color: #333; cursor: pointer; border: 1px solid #e8e8e8; }
|
||||
.sim-tag:active { background: #e8f4ff; border-color: #1677ff; color: #1677ff; }
|
||||
.simulate-panel__close { font-size: 13px; color: #1677ff; cursor: pointer; text-align: center; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急资源地图</span>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item tab-item--active">救护车</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-kit.html'">急救包</div>
|
||||
</div>
|
||||
<div class="sim-btn" onclick="document.getElementById('simPanel').classList.toggle('simulate-panel--visible')">模拟急救</div>
|
||||
<div class="simulate-panel" id="simPanel">
|
||||
<div class="simulate-panel__title">模拟急救</div>
|
||||
<div class="simulate-panel__desc">选择突发疾病，下发急救提示书</div>
|
||||
<div class="simulate-panel__tags">
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">心梗</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">猝死</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">脑梗/脑出血</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-area">
|
||||
<div class="map-locate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
|
||||
<div class="map-zoom">
|
||||
<button class="map-zoom__btn">+</button>
|
||||
<button class="map-zoom__btn">−</button>
|
||||
</div>
|
||||
<div class="map-me"><div class="map-me__dot"></div></div>
|
||||
<div class="map-placeholder">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#dce8f7" rx="8"/><circle cx="80" cy="70" r="8" fill="#ff4d4f"/><circle cx="130" cy="50" r="6" fill="#ff4d4f"/><circle cx="100" cy="120" r="6" fill="#ff4d4f"/><path d="M40 160 Q100 130 160 155" stroke="#b0c4de" fill="none" stroke-width="1.5"/><path d="M30 140 Q90 110 170 135" stroke="#b0c4de" fill="none" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div class="map-pin map-pin--ambulance" style="top:35%;left:40%">
|
||||
<div class="map-pin__dot"><svg width="28" height="34" viewBox="0 0 28 34"><path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 20 14 20s14-9.5 14-20C28 6.3 21.7 0 14 0z" fill="currentColor"/><text x="14" y="18" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">+</text></svg></div>
|
||||
</div>
|
||||
<div class="popup-card" onclick="window.location.href='ambulance-detail.html'">
|
||||
<div class="popup-card__img"><svg width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" rx="4" fill="#ffe8e8"/><rect x="6" y="12" width="28" height="16" rx="2" fill="#ff4d4f"/><rect x="17" y="14" width="6" height="5" rx="1" fill="#fff"/><circle cx="12" cy="30" r="3" fill="#666"/><circle cx="28" cy="30" r="3" fill="#666"/></svg></div>
|
||||
<div class="popup-card__info">
|
||||
<div class="popup-card__name">救护车(宁ALY120)</div>
|
||||
<div class="popup-card__dist">距离3.5km 驾车约12分钟</div>
|
||||
<div class="popup-card__addr">详细地址：生产保障大队办公楼楼道</div>
|
||||
<div class="popup-card__unit">第四采油厂凤凰山医务室</div>
|
||||
<div class="popup-card__actions">
|
||||
<button class="popup-btn">联系电话</button>
|
||||
<button class="popup-btn popup-btn--primary" >地图导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急资源地图 - 医疗点</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.map-area { flex: 1; background: #e8f0fe; position: relative; overflow: hidden; }
|
||||
.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin { position: absolute; cursor: pointer; transform: translate(-50%, -100%); }
|
||||
.map-pin__dot { width: 28px; height: 34px; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin--clinic .map-pin__dot { color: #1677ff; }
|
||||
.map-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
|
||||
.map-me__dot { width: 14px; height: 14px; background: #1677ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(22,119,255,0.2); }
|
||||
.map-locate { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
|
||||
.map-zoom { position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; z-index: 5; }
|
||||
.map-zoom__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #fff; font-size: 18px; color: #333; }
|
||||
.map-zoom__btn + .map-zoom__btn { border-top: 1px solid #f0f0f0; }
|
||||
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 4px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; color: #999; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
|
||||
.tab-item--active { color: #1677ff; font-weight: 600; background: #e8f4ff; }
|
||||
.sim-btn { flex-shrink: 0; margin: 8px 16px; padding: 8px 0; border-radius: 20px; background: #fff3e8; border: 1px solid #ffbd6b; font-size: 13px; color: #e67e22; text-align: center; cursor: pointer; font-weight: 600; }
|
||||
.popup-card { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 10; display: flex; gap: 12px; }
|
||||
.popup-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f2f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.popup-card__info { flex: 1; min-width: 0; }
|
||||
.popup-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.popup-card__dist { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.popup-card__addr { font-size: 12px; color: #666; margin-bottom: 12px; }
|
||||
.popup-card__actions { display: flex; gap: 10px; }
|
||||
.popup-btn { flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8; background: #fff; font-size: 13px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.popup-btn--primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.simulate-panel { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.simulate-panel--visible { display: block; }
|
||||
.simulate-panel__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.simulate-panel__desc { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.simulate-panel__tags { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.sim-tag { padding: 8px 20px; border-radius: 20px; background: #f5f5f5; font-size: 13px; color: #333; cursor: pointer; border: 1px solid #e8e8e8; }
|
||||
.sim-tag:active { background: #e8f4ff; border-color: #1677ff; color: #1677ff; }
|
||||
.simulate-panel__close { font-size: 13px; color: #1677ff; cursor: pointer; text-align: center; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急资源地图</span>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item tab-item--active">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-kit.html'">急救包</div>
|
||||
</div>
|
||||
<div class="sim-btn" onclick="document.getElementById('simPanel').classList.toggle('simulate-panel--visible')">模拟急救</div>
|
||||
<div class="simulate-panel" id="simPanel">
|
||||
<div class="simulate-panel__title">模拟急救</div>
|
||||
<div class="simulate-panel__desc">选择突发疾病，下发急救提示书</div>
|
||||
<div class="simulate-panel__tags">
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">心梗</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">猝死</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">脑梗/脑出血</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-area">
|
||||
<div class="map-locate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
|
||||
<div class="map-zoom">
|
||||
<button class="map-zoom__btn">+</button>
|
||||
<button class="map-zoom__btn">−</button>
|
||||
</div>
|
||||
<div class="map-me"><div class="map-me__dot"></div></div>
|
||||
<div class="map-placeholder">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#dce8f7" rx="8"/><circle cx="80" cy="70" r="8" fill="#1677ff"/><circle cx="130" cy="50" r="6" fill="#1677ff"/><circle cx="100" cy="120" r="6" fill="#1677ff"/><path d="M40 160 Q100 130 160 155" stroke="#b0c4de" fill="none" stroke-width="1.5"/><path d="M30 140 Q90 110 170 135" stroke="#b0c4de" fill="none" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div class="map-pin map-pin--clinic" style="top:35%;left:40%" onclick="window.location.href='clinic-detail.html'">
|
||||
<div class="map-pin__dot"><svg width="28" height="34" viewBox="0 0 28 34"><path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 20 14 20s14-9.5 14-20C28 6.3 21.7 0 14 0z" fill="currentColor"/><text x="14" y="18" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">+</text></svg></div>
|
||||
</div>
|
||||
<div class="popup-card" onclick="window.location.href='clinic-detail.html'">
|
||||
<div class="popup-card__img"><svg width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" rx="4" fill="#e8f4ff"/><rect x="8" y="14" width="24" height="16" rx="2" fill="#1677ff"/><rect x="16" y="10" width="8" height="6" rx="1" fill="#1677ff"/><rect x="17" y="18" width="6" height="4" rx="1" fill="#fff"/></svg></div>
|
||||
<div class="popup-card__info">
|
||||
<div class="popup-card__name">侯市作业区医疗点</div>
|
||||
<div class="popup-card__dist">距离3.5km 驾车约12分钟</div>
|
||||
<div class="popup-card__addr">详细地址：陕西省延安市志丹县杏河镇S16延吴高速</div>
|
||||
<div class="popup-card__actions">
|
||||
<button class="popup-btn">联系电话</button>
|
||||
<button class="popup-btn popup-btn--primary" >地图导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.map-area { flex: 1; background: #e8f0fe; position: relative; overflow: hidden; }
|
||||
.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin { position: absolute; cursor: pointer; transform: translate(-50%, -100%); }
|
||||
.map-pin__dot { width: 28px; height: 34px; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin--kit .map-pin__dot { color: #52c41a; }
|
||||
.map-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
|
||||
.map-me__dot { width: 14px; height: 14px; background: #1677ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(22,119,255,0.2); }
|
||||
.map-locate { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
|
||||
.map-zoom { position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; z-index: 5; }
|
||||
.map-zoom__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #fff; font-size: 18px; color: #333; }
|
||||
.map-zoom__btn + .map-zoom__btn { border-top: 1px solid #f0f0f0; }
|
||||
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 4px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; color: #999; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
|
||||
.tab-item--active { color: #1677ff; font-weight: 600; background: #e8f4ff; }
|
||||
.sim-btn { flex-shrink: 0; margin: 8px 16px; padding: 8px 0; border-radius: 20px; background: #fff3e8; border: 1px solid #ffbd6b; font-size: 13px; color: #e67e22; text-align: center; cursor: pointer; font-weight: 600; }
|
||||
.popup-card { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 10; display: flex; gap: 12px; }
|
||||
.popup-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f2f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.popup-card__info { flex: 1; min-width: 0; }
|
||||
.popup-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.popup-card__dist { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.popup-card__addr { font-size: 12px; color: #666; margin-bottom: 4px; }
|
||||
.popup-card__unit { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.popup-card__actions { display: flex; gap: 10px; }
|
||||
.popup-btn { flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8; background: #fff; font-size: 13px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.popup-btn--primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.simulate-panel { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.simulate-panel--visible { display: block; }
|
||||
.simulate-panel__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.simulate-panel__desc { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.simulate-panel__tags { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.sim-tag { padding: 8px 20px; border-radius: 20px; background: #f5f5f5; font-size: 13px; color: #333; cursor: pointer; border: 1px solid #e8e8e8; }
|
||||
.sim-tag:active { background: #e8f4ff; border-color: #1677ff; color: #1677ff; }
|
||||
.simulate-panel__close { font-size: 13px; color: #1677ff; cursor: pointer; text-align: center; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急资源地图</span>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
<div class="tab-item tab-item--active">急救包</div>
|
||||
</div>
|
||||
<div class="sim-btn" onclick="document.getElementById('simPanel').classList.toggle('simulate-panel--visible')">模拟急救</div>
|
||||
<div class="simulate-panel" id="simPanel">
|
||||
<div class="simulate-panel__title">模拟急救</div>
|
||||
<div class="simulate-panel__desc">选择突发疾病，下发急救提示书</div>
|
||||
<div class="simulate-panel__tags">
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">心梗</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">猝死</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">脑梗/脑出血</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-area">
|
||||
<div class="map-locate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
|
||||
<div class="map-zoom">
|
||||
<button class="map-zoom__btn">+</button>
|
||||
<button class="map-zoom__btn">−</button>
|
||||
</div>
|
||||
<div class="map-me"><div class="map-me__dot"></div></div>
|
||||
<div class="map-placeholder">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#dce8f7" rx="8"/><circle cx="80" cy="70" r="8" fill="#52c41a"/><circle cx="130" cy="50" r="6" fill="#52c41a"/><circle cx="100" cy="120" r="6" fill="#52c41a"/><path d="M40 160 Q100 130 160 155" stroke="#b0c4de" fill="none" stroke-width="1.5"/><path d="M30 140 Q90 110 170 135" stroke="#b0c4de" fill="none" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div class="map-pin map-pin--kit" style="top:35%;left:40%" onclick="window.location.href='first-aid-kit-detail.html'">
|
||||
<div class="map-pin__dot"><svg width="28" height="34" viewBox="0 0 28 34"><path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 20 14 20s14-9.5 14-20C28 6.3 21.7 0 14 0z" fill="currentColor"/><text x="14" y="18" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">+</text></svg></div>
|
||||
</div>
|
||||
<div class="popup-card" onclick="window.location.href='first-aid-kit-detail.html'">
|
||||
<div class="popup-card__img"><svg width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" rx="4" fill="#e8ffe8"/><rect x="8" y="12" width="24" height="18" rx="3" fill="#52c41a"/><rect x="16" y="8" width="8" height="6" rx="1" fill="#52c41a"/><rect x="17" y="17" width="6" height="6" rx="1" fill="#fff"/><rect x="19" y="15" width="2" height="10" rx="0.5" fill="#fff"/></svg></div>
|
||||
<div class="popup-card__info">
|
||||
<div class="popup-card__name">急救包</div>
|
||||
<div class="popup-card__dist">距离3.5km 驾车约12分钟</div>
|
||||
<div class="popup-card__addr">详细地址：生产保障大队办公楼楼道</div>
|
||||
<div class="popup-card__unit">第三采油厂-虎狼峁采油作业区</div>
|
||||
<div class="popup-card__actions">
|
||||
<button class="popup-btn">联系电话</button>
|
||||
<button class="popup-btn popup-btn--primary" >地图导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!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; min-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; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 地图区域 */
|
||||
.map-area { flex: 1; background: #e8f0fe; position: relative; overflow: hidden; }
|
||||
.map-bg { width: 100%; height: 100%; object-fit: cover; }
|
||||
.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
.map-placeholder svg { opacity: 0.4; }
|
||||
/* 地图标记点 */
|
||||
.map-pin { position: absolute; cursor: pointer; transform: translate(-50%, -100%); }
|
||||
.map-pin__dot { width: 28px; height: 34px; display: flex; align-items: center; justify-content: center; }
|
||||
.map-pin--hospital .map-pin__dot { color: #ff4d4f; }
|
||||
.map-pin--clinic .map-pin__dot { color: #1677ff; }
|
||||
.map-pin--aed .map-pin__dot { color: #faad14; }
|
||||
.map-pin--ambulance .map-pin__dot { color: #ff4d4f; }
|
||||
.map-pin--kit .map-pin__dot { color: #52c41a; }
|
||||
/* 当前位置标记 */
|
||||
.map-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
|
||||
.map-me__dot { width: 14px; height: 14px; background: #1677ff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(22,119,255,0.2); }
|
||||
|
||||
/* 地图控件 */
|
||||
.map-locate { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
|
||||
.map-zoom { position: absolute; top: 56px; right: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; z-index: 5; }
|
||||
.map-zoom__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #fff; font-size: 18px; color: #333; }
|
||||
.map-zoom__btn + .map-zoom__btn { border-top: 1px solid #f0f0f0; }
|
||||
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 8px 4px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; color: #999; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
|
||||
.tab-item--active { color: #1677ff; font-weight: 600; background: #e8f4ff; }
|
||||
|
||||
/* 模拟急救按钮 */
|
||||
.sim-btn { flex-shrink: 0; margin: 8px 16px; padding: 8px 0; border-radius: 20px; background: #fff3e8; border: 1px solid #ffbd6b; font-size: 13px; color: #e67e22; text-align: center; cursor: pointer; font-weight: 600; }
|
||||
|
||||
/* 底部弹出卡片 */
|
||||
.popup-card { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 10; display: flex; gap: 12px; }
|
||||
.popup-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f2f5; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||||
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.popup-card__info { flex: 1; min-width: 0; }
|
||||
.popup-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.popup-card__dist { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.popup-card__addr { font-size: 12px; color: #666; margin-bottom: 12px; }
|
||||
.popup-card__actions { display: flex; gap: 10px; }
|
||||
.popup-btn { flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8; background: #fff; font-size: 13px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.popup-btn--primary { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
|
||||
/* 模拟急救弹窗 */
|
||||
.simulate-panel { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.simulate-panel--visible { display: block; }
|
||||
.simulate-panel__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.simulate-panel__desc { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||||
.simulate-panel__tags { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.sim-tag { padding: 8px 20px; border-radius: 20px; background: #f5f5f5; font-size: 13px; color: #333; cursor: pointer; border: 1px solid #e8e8e8; }
|
||||
.sim-tag:active { background: #e8f4ff; border-color: #1677ff; color: #1677ff; }
|
||||
.simulate-panel__close { font-size: 13px; color: #1677ff; cursor: pointer; text-align: center; }
|
||||
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">应急资源地图</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 资源分类Tab -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item tab-item--active">油田医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-kit.html'">急救包</div>
|
||||
</div>
|
||||
<div class="sim-btn" onclick="document.getElementById('simPanel').classList.toggle('simulate-panel--visible')">模拟急救</div>
|
||||
|
||||
<!-- [交互] 模拟急救弹窗（默认隐藏） -->
|
||||
<div class="simulate-panel" id="simPanel">
|
||||
<div class="simulate-panel__title">模拟急救</div>
|
||||
<div class="simulate-panel__desc">选择突发疾病，下发急救提示书</div>
|
||||
<div class="simulate-panel__tags">
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">心梗</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">猝死</span>
|
||||
<span class="sim-tag" onclick="window.location.href='emergency-tips.html'">脑梗/脑出血</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="map-area">
|
||||
<!-- 地图控件 -->
|
||||
<div class="map-locate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg></div>
|
||||
<div class="map-zoom">
|
||||
<button class="map-zoom__btn">+</button>
|
||||
<button class="map-zoom__btn">−</button>
|
||||
</div>
|
||||
<!-- 当前位置 -->
|
||||
<div class="map-me"><div class="map-me__dot"></div></div>
|
||||
<div class="map-placeholder">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#dce8f7" rx="8"/><circle cx="80" cy="70" r="8" fill="#ff4d4f"/><circle cx="130" cy="50" r="6" fill="#1677ff"/><circle cx="100" cy="120" r="6" fill="#52c41a"/><circle cx="150" cy="100" r="5" fill="#faad14"/><path d="M40 160 Q100 130 160 155" stroke="#b0c4de" fill="none" stroke-width="1.5"/><path d="M30 140 Q90 110 170 135" stroke="#b0c4de" fill="none" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<!-- 地图标记 -->
|
||||
<div class="map-pin map-pin--hospital" style="top:35%;left:40%" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="map-pin__dot"><svg width="28" height="34" viewBox="0 0 28 34"><path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 20 14 20s14-9.5 14-20C28 6.3 21.7 0 14 0z" fill="currentColor"/><text x="14" y="18" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">+</text></svg></div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部弹出卡片 - 油田医院 -->
|
||||
<div class="popup-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="popup-card__img"><svg width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" rx="4" fill="#ffe8e8"/><rect x="17" y="8" width="6" height="24" rx="1" fill="#ff4d4f"/><rect x="8" y="17" width="24" height="6" rx="1" fill="#ff4d4f"/></svg></div>
|
||||
<div class="popup-card__info">
|
||||
<div class="popup-card__name">长庆油田职工医院</div>
|
||||
<div class="popup-card__dist">距离3.5km 驾车约12分钟</div>
|
||||
<div class="popup-card__addr">详细地址：陕西省延安市志丹县杏河镇S16延吴高速</div>
|
||||
<div class="popup-card__actions">
|
||||
<button class="popup-btn">联系电话</button>
|
||||
<button class="popup-btn popup-btn--primary" >地图导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -135,7 +135,7 @@
|
||||
<div class="msg-bubble">已收到您的位置信息。长庆油田职工医院提供多种体检套餐，建议您直接联系体检中心了解最新套餐详情和预约方式。</div>
|
||||
</div>
|
||||
<!-- 小助手发出的结束咨询卡片 -->
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-row bot" id="endCard">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="bubble-end-card">
|
||||
<div class="end-icon">✅</div>
|
||||
@@ -147,8 +147,17 @@
|
||||
|
||||
<!-- 底部已结束提示条 -->
|
||||
<div class="chat-ended-bar">
|
||||
<div class="ended-text">— 咨询已结束 —</div>
|
||||
<div class="ended-text" id="endedText">— 咨询已结束 —</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
if (params.get('from') === 'timeout') {
|
||||
document.getElementById('endCard').style.display = 'none';
|
||||
document.getElementById('endedText').textContent = '— 长时间未回复系统已自动结束本次咨询 —';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
│ └── [按疾病] → 专家列表 → 专家主页
|
||||
├── 咨询小助手
|
||||
└── 我的咨询
|
||||
├── [咨询专家] → 图文咨询详情 / 视频咨询详情
|
||||
├── [咨询专家] → 图文咨询详情 / 视频咨询详情（含进行中）
|
||||
└── [咨询小助手] → 小助手咨询记录
|
||||
|
||||
专家主页
|
||||
@@ -33,16 +33,30 @@
|
||||
|
||||
### 咨询状态流转
|
||||
|
||||
#### 图文咨询状态流转
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> 进行中: 发起图文咨询
|
||||
[*] --> 待确认: 提交视频咨询预约
|
||||
待确认 --> 待开始: 医生确认接诊
|
||||
[*] --> 待回复: 员工发起图文咨询，专家/小助手未首次回复
|
||||
待回复 --> 进行中: 专家/小助手已回复
|
||||
进行中 --> 已完成: 任一方主动结束/七天无新消息自动关闭咨询
|
||||
待回复 --> 已超时: 7天首次无回复自动关闭
|
||||
已完成 --> 已评价: 提交评价
|
||||
|
||||
在员工视角，只有进行中和已结束，进行中包含待回复和进行中，已结束包含已完成和已超时
|
||||
```
|
||||
|
||||
#### 视频咨询状态流转
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> 待确认: 员工提交视频咨询预约
|
||||
待确认 --> 待开始: 专家确认接诊
|
||||
待确认 --> 已取消: 用户取消预约
|
||||
待开始 --> 进行中: 到达预约时间
|
||||
待开始 --> 已取消: 用户取消预约
|
||||
待开始 --> 已拒绝: 医生拒绝预约
|
||||
进行中 --> 已完成: 结束咨询
|
||||
待确认 --> 已拒绝: 专家拒绝预约
|
||||
待开始 --> 进行中: 专家发起视频通话员工已接听
|
||||
待开始 --> 已取消: 任一方取消预约
|
||||
进行中 --> 已完成: 任一方结束咨询
|
||||
已完成 --> 已评价: 提交评价
|
||||
```
|
||||
|
||||
@@ -72,13 +86,14 @@ stateDiagram-v2
|
||||
| 20 | video-detail-confirming.html | 视频咨询详情 - 待确认 | 页面 |
|
||||
| 21 | video-detail-pending.html | 视频咨询详情 - 待开始 | 页面 |
|
||||
| 22 | video-detail-done.html | 视频咨询详情 - 已完成 | 页面 |
|
||||
| 23 | video-detail-cancelled.html | 视频咨询详情 - 已取消 | 页面 |
|
||||
| 24 | video-detail-rejected.html | 视频咨询详情 - 已拒绝 | 页面 |
|
||||
| 25 | rate-doctor.html | 评价医生 | 页面 |
|
||||
| 26 | my-records.html | 我的咨询 | 页面 |
|
||||
| 27 | record-detail.html | 咨询详情 | 页面 |
|
||||
| 28 | assistant-chat.html | 咨询小助手 | 页面 |
|
||||
| 29 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
| 23 | video-detail-ongoing.html | 视频咨询详情 - 进行中 | 页面 |
|
||||
| 24 | video-detail-cancelled.html | 视频咨询详情 - 已取消 | 页面 |
|
||||
| 25 | video-detail-rejected.html | 视频咨询详情 - 已拒绝 | 页面 |
|
||||
| 26 | rate-doctor.html | 评价医生 | 页面 |
|
||||
| 27 | my-records.html | 我的咨询 | 页面 |
|
||||
| 28 | record-detail.html | 咨询详情 | 页面 |
|
||||
| 29 | assistant-chat.html | 咨询小助手 | 页面 |
|
||||
| 30 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -291,7 +306,6 @@ stateDiagram-v2
|
||||
**业务规则**
|
||||
|
||||
- 评价按时间倒序排列
|
||||
- 评价标签由系统预设：专业、耐心、回复及时、负责任、个性化、实用...，评价标签由服务端根据评价内容自动提取
|
||||
- 匿名评价不展示用户名称和图像，统一使用默认图像以及“匿名用户”
|
||||
- 数据过滤：从医院主页进入显示该医院下所有专家的评价，从专家主页进入显示该专家的评价
|
||||
- 评价列表使用下拉分页加载
|
||||
@@ -468,12 +482,14 @@ stateDiagram-v2
|
||||
**业务规则**
|
||||
|
||||
- 结束咨询需通过二次确认弹窗
|
||||
- 与专家咨询时，自动群聊模式，小助手也在这个群聊里面，关闭@功能
|
||||
- 距专家最后一次回复时间超过7天的且状态是进行中的咨询系统自动置为已完成状态（已结束，待评价）
|
||||
- 超过7天没有专家回复的图文咨询系统自动置为超时状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击发送按钮或按 Enter 发送消息，追加到消息列表
|
||||
- 如果有选择档案信息，自动发送档案卡片-自定义消息
|
||||
- 点击 + 按钮展开/收起功能面板
|
||||
- 功能面板点击「图片」选择系统相册中的图片发送至聊天框
|
||||
- 功能面板点击「拍摄」可拍照或录制视频发送至聊天框
|
||||
@@ -481,7 +497,7 @@ stateDiagram-v2
|
||||
- 功能面板点击「选择档案」再次发送咨询前填写的档案信息（只能发送咨询时填写的档案，不能发送其他的档案信息，若从快速咨询进入则档案页为空）
|
||||
- 功能面板点击「文件」选择手机文件系统保存的文件
|
||||
- 功能面板点击「位置」发送员工当前位置或自选位置信息
|
||||
- 点击头部「结束咨询」按钮或，弹出结束咨询确认弹窗，确认后跳转到评价医生页
|
||||
- 点击头部「结束咨询」按钮或，弹出结束咨询确认弹窗，确认后发送“结束咨询”的卡片消息并跳转到评价医生页
|
||||
- 导航栏返回 → 图文咨询列表
|
||||
---
|
||||
|
||||
@@ -635,7 +651,30 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 4.5 视频咨询详情 - 已完成（video-detail-done.html）
|
||||
### 4.5 视频咨询详情 - 进行中（video-detail-ongoing.html）
|
||||
|
||||
|
||||
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询进行中状态的详情页。展示医生信息（蓝色"进行中"标签）、咨询人健康档案入口、蓝色视频咨询 Banner（含专家拨打时间和视频结束时间）、通话时长卡片、温馨提示。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 蓝色 Banner 显示专家拨打时间和视频结束时间
|
||||
- 通话时长卡片实时展示本次通话时长
|
||||
- 温馨提示：「专家已进行视频通话，如已解决问题，可直接结束咨询，如未解决，请继续等待专家拨打视频」
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」跳转到咨询人档案详情页
|
||||
- 点击「结束咨询」结束当前视频咨询
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 4.6 视频咨询详情 - 已完成（video-detail-done.html）
|
||||
|
||||
|
||||
|
||||
@@ -658,7 +697,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 4.6 视频咨询详情 - 已取消（video-detail-cancelled.html）
|
||||
### 4.7 视频咨询详情 - 已取消（video-detail-cancelled.html）
|
||||
|
||||
|
||||
|
||||
@@ -680,7 +719,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 4.7 视频咨询详情 - 已拒绝（video-detail-rejected.html）
|
||||
### 4.8 视频咨询详情 - 已拒绝（video-detail-rejected.html）
|
||||
|
||||
|
||||
|
||||
@@ -812,6 +851,7 @@ stateDiagram-v2
|
||||
**交互说明**
|
||||
|
||||
- 点击发送按钮或按 Enter 发送消息，追加到消息列表
|
||||
- 开启对话时，小助手会自动发送一条消息“您好！我是健康小助手，欢迎咨询，请问有什么可以帮您？”
|
||||
- 点击 + 按钮展开/收起功能面板
|
||||
- 功能面板点击「图片」选择系统相册中的图片发送至聊天框
|
||||
- 功能面板点击「拍摄」可拍照或录制视频发送至聊天框
|
||||
|
||||
@@ -381,10 +381,7 @@
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">张医生非常耐心，详细询问了我的症状和病史，给出了非常专业的建议。整个问诊过程让我很安心，感觉比线下看病还要细致。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">专业</span>
|
||||
<span class="review-tag">耐心</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 评价2：员工B -->
|
||||
@@ -404,9 +401,7 @@
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">回复很及时，基本上几分钟就能收到回复。对我提出的每个问题都给出了详细的解答，还主动提醒了一些注意事项。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">回复及时</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 评价3：员工C -->
|
||||
@@ -445,10 +440,7 @@
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">张医生对病情分析得非常透彻，不仅解决了我当前的问题，还给出了长期的健康管理建议。非常负责任的好医生！</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">专业</span>
|
||||
<span class="review-tag">负责任</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 评价5：员工E -->
|
||||
@@ -468,9 +460,7 @@
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">第一次线上问诊，本来还有些担心，没想到张医生特别耐心，把每一个问题都解释得很清楚，让我对线上问诊有了信心。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">耐心</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 评价6：员工F -->
|
||||
@@ -509,10 +499,7 @@
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">针对我的具体情况给出了个性化的建议，不是那种千篇一律的回复。推荐的调理方案很实用，已经坚持了两周，效果明显。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">个性化</span>
|
||||
<span class="review-tag">实用</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -228,7 +228,7 @@
|
||||
<div class="filter-bar" data-target="tab-video">
|
||||
<button class="filter-chip active" data-filter="all">全部</button>
|
||||
<button class="filter-chip" data-filter="confirming">待确认</button>
|
||||
<button class="filter-chip" data-filter="pending">待开始</button>
|
||||
<button class="filter-chip" data-filter="ongoing">进行中</button>
|
||||
<button class="filter-chip" data-filter="ended">已结束</button>
|
||||
</div>
|
||||
|
||||
@@ -245,18 +245,30 @@
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-15 10:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 video-detail-pending.html -->
|
||||
<a class="record-item" href="video-detail-pending.html" data-status="pending">
|
||||
<!-- [交互] 视频记录1：张建国医生 - 进行中 → 点击跳转 video-detail-ongoing.html -->
|
||||
<a class="record-item" href="video-detail-ongoing.html" data-status="ongoing">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">张建国医生</div>
|
||||
<div class="ri-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="ri-status status-pending">待开始</span>
|
||||
<span class="ri-status status-ongoing">进行中</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-08 14:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录1.5：李晓梅医生 - 待开始 → 点击跳转 video-detail-pending.html -->
|
||||
<a class="record-item" href="video-detail-pending.html" data-status="ongoing">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">李晓梅医生</div>
|
||||
<div class="ri-dept">上海瑞金医院 · 内分泌科</div>
|
||||
</div>
|
||||
<span class="ri-status status-pending">待开始</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-10 09:30</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 video-detail-done.html -->
|
||||
@@ -345,6 +357,18 @@
|
||||
</div>
|
||||
<div class="ri-time">2026-03-28 20:45</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 小助手记录5：已超时 → 点击跳转 assistant-chat-history.html?from=timeout -->
|
||||
<a class="assistant-item" href="assistant-chat-history.html?from=timeout" data-status="ended">
|
||||
<div class="ai-top">
|
||||
<div class="ai-avatar">👩💼</div>
|
||||
<div class="ai-info">
|
||||
<div class="ai-title">小助手</div>
|
||||
</div>
|
||||
<span class="ri-status status-timeout">已超时</span>
|
||||
</div>
|
||||
<div class="ri-time">2026-03-20 08:15</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="history.back()">‹</a>
|
||||
<a class="nav-back" onclick="goBack()">‹</a>
|
||||
<span class="nav-title">选择咨询人</span>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_CONTENT -->
|
||||
@@ -274,6 +274,15 @@
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 返回来源页 */
|
||||
function goBack() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var from = params.get('from');
|
||||
if (from === 'expert-profile') { window.location.href = 'expert-profile.html'; }
|
||||
else if (from === 'video-booking') { window.location.href = 'video-booking.html'; }
|
||||
else { window.location.href = 'index.html'; }
|
||||
}
|
||||
|
||||
/** 选中咨询人 - 高亮当前卡片，取消其他选中 */
|
||||
function selectPerson(card) {
|
||||
document.querySelectorAll('.person-card').forEach(function(c) { c.classList.remove('selected'); });
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<!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; min-height: 844px; background: #f5f5f5;
|
||||
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;
|
||||
}
|
||||
.phone-status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; padding: 0 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 医生信息栏 */
|
||||
.detail-doctor-bar { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.dd-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg,#e8f4ff,#bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.dd-info { flex: 1; }
|
||||
.dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.dd-status--ongoing { background: #e6f4ff; color: #1677ff; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-entry {
|
||||
margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px; cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 视频咨询Banner */
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #1677ff, #4096ff); border-radius: 14px;
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.vb-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.vb-info { flex: 1; }
|
||||
.vb-title { font-size: 16px; font-weight: 700; }
|
||||
.vb-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
.vb-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.25); white-space: nowrap; }
|
||||
|
||||
/* 通话时长 */
|
||||
.call-duration {
|
||||
margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px;
|
||||
display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
.cd-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.cd-info { flex: 1; }
|
||||
.cd-label { font-size: 13px; color: #999; }
|
||||
.cd-value { font-size: 20px; font-weight: 700; color: #1677ff; margin-top: 2px; }
|
||||
|
||||
/* 温馨提示 */
|
||||
.tip-box {
|
||||
margin: 12px 16px; background: #e6f4ff; border-radius: 14px; padding: 14px 16px;
|
||||
font-size: 13px; color: #1677ff; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-primary {
|
||||
flex: 1; height: 44px; background: #1677ff; color: #fff; border: none;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-primary:active { opacity: 0.85; }
|
||||
.btn-outline {
|
||||
flex: 1; height: 44px; background: #fff; color: #ff4d4f; border: 2px solid #ff4d4f;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-outline:active { opacity: 0.85; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">14:08</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏：返回 → my-records.html -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="my-records.html">← 返回</a>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 医生信息栏 -->
|
||||
<div class="detail-doctor-bar">
|
||||
<div class="dd-avatar">👨⚕️</div>
|
||||
<div class="dd-info">
|
||||
<div class="dd-name">张建国医生</div>
|
||||
<div class="dd-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="dd-status dd-status--ongoing">进行中</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询Banner -->
|
||||
<div class="video-banner">
|
||||
<div class="vb-icon">📹</div>
|
||||
<div class="vb-info">
|
||||
<div class="vb-title">专家已拨打</div>
|
||||
<div class="vb-sub">专家拨打时间：2026-04-08 14:00</div>
|
||||
<div class="vb-sub">视频结束时间：2026-04-08 14:08</div>
|
||||
</div>
|
||||
<!-- <span class="vb-tag">进行中</span>-->
|
||||
</div>
|
||||
|
||||
<!-- 通话时长 -->
|
||||
<div class="call-duration">
|
||||
<span class="cd-icon">⏱️</span>
|
||||
<div class="cd-info">
|
||||
<div class="cd-label">本次通话时长</div>
|
||||
<div class="cd-value">08:32</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<div class="tip-box">📌 温馨提示：专家已进行视频通话，如已解决问题，可直接结束咨询，如未解决，请继续等待专家拨打视频</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline">结束咨询</button>
|
||||
<!-- <button class="btn-primary">进入视频</button>-->
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user