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
@@ -35,7 +35,6 @@
|
||||
stateDiagram-v2
|
||||
[*] --> 待回复 : 员工发起咨询
|
||||
待回复 --> 进行中 : 小助手首次回复
|
||||
进行中 --> 进行中 : 推送专家名片
|
||||
进行中 --> 已完成 : 任一方结束咨询/有回复但是7天无更新自动变为已完成
|
||||
进行中 --> 已超时 : 7天首次未回复自动关闭
|
||||
```
|
||||
@@ -105,6 +104,7 @@ stateDiagram-v2
|
||||
- 常用语面板支持分类 Tab：全部 / 问候语 / 注意事项 / 结束语/ 引导语
|
||||
- 媒体选择面板提供：拍照、图库、推送专家三个选项
|
||||
- 推送专家后，聊天区自动插入专家名片气泡（含头像、姓名、科室、职称、医院、擅长病种）
|
||||
- 咨询专家时，没有右上角“结束咨询”和+号里面的“发送专家”功能
|
||||
|
||||
**交互说明：**
|
||||
- 点击咨询人档案卡片或"查看档案"：跳转到咨询人健康档案页
|
||||
|
||||
@@ -19,6 +19,34 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.expert-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.expert-card:active { transform: scale(0.98); }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #e6f4ff; color: #1677ff; margin: 2px 4px 2px 0; }
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar { display: flex; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.filter-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 6px; background: #f5f5f5; border: none; font-size: 13px; color: #333; cursor: pointer; transition: all 0.2s; }
|
||||
.filter-btn.active { background: #e6f4ff; color: #1677ff; }
|
||||
.filter-btn__arrow { font-size: 10px; transition: transform 0.2s; }
|
||||
.filter-btn.active .filter-btn__arrow { transform: rotate(180deg); }
|
||||
.filter-selected { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.filter-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; background: #e6f4ff; color: #1677ff; font-size: 12px; }
|
||||
.filter-tag__close { cursor: pointer; font-size: 14px; line-height: 1; }
|
||||
|
||||
/* 底部筛选面板 */
|
||||
.filter-panel { display: none; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 100; flex-direction: column; }
|
||||
.filter-panel.active { display: flex; }
|
||||
.filter-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
|
||||
.filter-panel__title { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.filter-panel__close { background: none; border: none; font-size: 20px; color: #999; cursor: pointer; padding: 4px; }
|
||||
.filter-panel__body { display: flex; flex: 1; overflow: hidden; }
|
||||
.filter-panel__left { width: 110px; background: #f7f8fa; overflow-y: auto; border-right: 1px solid #f0f0f0; }
|
||||
.filter-panel__left::-webkit-scrollbar { display: none; }
|
||||
.filter-left-item { padding: 12px 14px; font-size: 13px; color: #666; cursor: pointer; border-left: 3px solid transparent; }
|
||||
.filter-left-item.active { background: #fff; color: #1677ff; font-weight: 600; border-left-color: #1677ff; }
|
||||
.filter-panel__right { flex: 1; overflow-y: auto; padding: 12px 14px; }
|
||||
.filter-panel__right::-webkit-scrollbar { display: none; }
|
||||
.filter-right-item { display: inline-block; padding: 6px 14px; margin: 4px 6px 4px 0; border-radius: 16px; font-size: 13px; color: #333; background: #f5f5f5; cursor: pointer; transition: all 0.2s; }
|
||||
.filter-right-item.active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
|
||||
.filter-overlay { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 99; }
|
||||
.filter-overlay.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -47,6 +75,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<button class="filter-btn" id="filterDeptBtn" onclick="openFilter('dept')">所属科室 <span class="filter-btn__arrow">▼</span></button>
|
||||
<button class="filter-btn" id="filterDiseaseBtn" onclick="openFilter('disease')">擅长疾病 <span class="filter-btn__arrow">▼</span></button>
|
||||
</div>
|
||||
<!-- 已选筛选标签 -->
|
||||
<div class="filter-selected" id="filterSelectedArea" style="display:none;"></div>
|
||||
|
||||
<!-- 专家列表 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
@@ -164,18 +200,116 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选遮罩 -->
|
||||
<div class="filter-overlay" id="filterOverlay" onclick="closeFilter()"></div>
|
||||
<!-- 筛选面板 -->
|
||||
<div class="filter-panel" id="filterPanel">
|
||||
<div class="filter-panel__header">
|
||||
<span class="filter-panel__title" id="filterPanelTitle">所属科室</span>
|
||||
<button class="filter-panel__close" onclick="closeFilter()">✕</button>
|
||||
</div>
|
||||
<div class="filter-panel__body">
|
||||
<div class="filter-panel__left" id="filterLeft"></div>
|
||||
<div class="filter-panel__right" id="filterRight"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 将专家数据存入 sessionStorage，然后跳回聊天页
|
||||
* text-chat.html 页面加载时会读取并发送名片气泡
|
||||
* @param {Object} expert - 专家信息对象
|
||||
*/
|
||||
/* 推送专家 */
|
||||
function pushExpert(expert) {
|
||||
sessionStorage.setItem('pendingExpertCard', JSON.stringify(expert));
|
||||
location.href = './text-chat.html';
|
||||
}
|
||||
|
||||
/* 筛选数据 */
|
||||
var DEPT_DATA = {
|
||||
'内科': ['心内科','神经内科','消化内科','呼吸内科','内分泌科'],
|
||||
'外科': ['骨科','普外科','神经外科','泌尿外科','心胸外科'],
|
||||
'妇产科': ['妇科','产科','生殖医学科'],
|
||||
'儿科': ['小儿内科','小儿外科','新生儿科'],
|
||||
'五官科': ['眼科','耳鼻喉科','口腔科']
|
||||
};
|
||||
var DISEASE_DATA = {
|
||||
'内科': ['高血压','冠心病','心律失常','偏头痛','脑梗','眩晕症','胃炎','胃溃疡','肠易激综合征','哮喘','慢阻肺','肺炎','糖尿病'],
|
||||
'外科': ['腰椎间盘突出','颈椎病','骨折','阑尾炎','疝气','胆结石','前列腺增生'],
|
||||
'妇产科': ['月经不调','子宫肌瘤','多囊卵巢','妊娠高血压'],
|
||||
'儿科': ['小儿感冒','小儿腹泻','手足口病','新生儿黄疸'],
|
||||
'五官科': ['近视','白内障','鼻炎','中耳炎','龋齿']
|
||||
};
|
||||
|
||||
var currentFilterType = '';
|
||||
var currentLeftIdx = 0;
|
||||
var selectedDept = '';
|
||||
var selectedDisease = '';
|
||||
|
||||
function openFilter(type) {
|
||||
currentFilterType = type;
|
||||
currentLeftIdx = 0;
|
||||
document.getElementById('filterPanelTitle').textContent = type === 'dept' ? '所属科室' : '擅长疾病';
|
||||
document.getElementById('filterDeptBtn').classList.toggle('active', type === 'dept');
|
||||
document.getElementById('filterDiseaseBtn').classList.toggle('active', type === 'disease');
|
||||
renderLeft();
|
||||
document.getElementById('filterOverlay').classList.add('active');
|
||||
document.getElementById('filterPanel').classList.add('active');
|
||||
}
|
||||
|
||||
function closeFilter() {
|
||||
document.getElementById('filterOverlay').classList.remove('active');
|
||||
document.getElementById('filterPanel').classList.remove('active');
|
||||
document.getElementById('filterDeptBtn').classList.remove('active');
|
||||
document.getElementById('filterDiseaseBtn').classList.remove('active');
|
||||
}
|
||||
|
||||
function renderLeft() {
|
||||
var data = currentFilterType === 'dept' ? DEPT_DATA : DISEASE_DATA;
|
||||
var keys = Object.keys(data);
|
||||
var html = '';
|
||||
keys.forEach(function(k, i) {
|
||||
html += '<div class="filter-left-item' + (i === currentLeftIdx ? ' active' : '') + '" onclick="selectLeft(' + i + ')">' + k + '</div>';
|
||||
});
|
||||
document.getElementById('filterLeft').innerHTML = html;
|
||||
renderRight(keys[currentLeftIdx]);
|
||||
}
|
||||
|
||||
function selectLeft(idx) {
|
||||
currentLeftIdx = idx;
|
||||
renderLeft();
|
||||
}
|
||||
|
||||
function renderRight(parentKey) {
|
||||
var data = currentFilterType === 'dept' ? DEPT_DATA : DISEASE_DATA;
|
||||
var items = data[parentKey] || [];
|
||||
var current = currentFilterType === 'dept' ? selectedDept : selectedDisease;
|
||||
var html = '';
|
||||
items.forEach(function(item) {
|
||||
html += '<div class="filter-right-item' + (item === current ? ' active' : '') + '" onclick="selectRight(\'' + item + '\')">' + item + '</div>';
|
||||
});
|
||||
document.getElementById('filterRight').innerHTML = html;
|
||||
}
|
||||
|
||||
function selectRight(val) {
|
||||
if (currentFilterType === 'dept') { selectedDept = val; }
|
||||
else { selectedDisease = val; }
|
||||
closeFilter();
|
||||
renderSelectedTags();
|
||||
}
|
||||
|
||||
function renderSelectedTags() {
|
||||
var area = document.getElementById('filterSelectedArea');
|
||||
var html = '';
|
||||
if (selectedDept) { html += '<span class="filter-tag">' + selectedDept + ' <span class="filter-tag__close" onclick="clearFilter(\'dept\')">×</span></span>'; }
|
||||
if (selectedDisease) { html += '<span class="filter-tag">' + selectedDisease + ' <span class="filter-tag__close" onclick="clearFilter(\'disease\')">×</span></span>'; }
|
||||
area.innerHTML = html;
|
||||
area.style.display = html ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function clearFilter(type) {
|
||||
if (type === 'dept') { selectedDept = ''; }
|
||||
else { selectedDisease = ''; }
|
||||
renderSelectedTags();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
│ │ │ └── 已超时 → 图文咨询已超时详情 → 历史对话（只读）→ 咨询人健康档案
|
||||
│ │ └── 视频咨询
|
||||
│ │ ├── 待确认 → 视频预约确认 → 咨询人健康档案
|
||||
│ │ ├── 待开始 → 视频待开始详情 → 咨询人健康档案
|
||||
│ │ ├── 进行中
|
||||
│ │ │ ├── 待开始 → 视频待开始详情 → 咨询人健康档案
|
||||
│ │ │ └── 进行中 → 视频进行中详情 → 咨询人健康档案
|
||||
│ │ └── 已结束
|
||||
│ │ ├── 已完成 → 视频完成详情 → 咨询人健康档案
|
||||
│ │ ├── 已取消 → 视频已取消详情 → 咨询人健康档案
|
||||
@@ -52,8 +54,9 @@ stateDiagram-v2
|
||||
[*] --> 待确认 : 员工预约
|
||||
待确认 --> 待开始 : 专家接受
|
||||
待确认 --> 已拒绝 : 专家拒绝（填写原因）
|
||||
待开始 --> 进行中 : 专家发起视频通话
|
||||
待开始 --> 已取消 : 任一方取消预约
|
||||
待开始 --> 已完成 : 完成通话
|
||||
进行中 --> 已完成 : 完成通话
|
||||
}
|
||||
```
|
||||
|
||||
@@ -68,23 +71,24 @@ stateDiagram-v2
|
||||
| 5 | workbench/text-consult-timeout.html | 图文咨询已超时详情 | 工作台·图文咨询 |
|
||||
| 6 | workbench/video-appt.html | 视频预约确认 | 工作台·视频咨询 |
|
||||
| 7 | workbench/video-ongoing.html | 视频待开始详情 | 工作台·视频咨询 |
|
||||
| 8 | workbench/video-done.html | 视频完成详情 | 工作台·视频咨询 |
|
||||
| 9 | workbench/video-cancelled.html | 视频已取消详情 | 工作台·视频咨询 |
|
||||
| 10 | workbench/video-rejected.html | 视频已拒绝详情 | 工作台·视频咨询 |
|
||||
| 11 | knowledge/index.html | 知识库首页 | 知识库 |
|
||||
| 12 | knowledge/detail.html | 知识详情 | 知识库 |
|
||||
| 13 | ../ai-assistant/index.html | AI 助手（共享） | AI 助手 |
|
||||
| 14 | ../message/index.html | 消息列表（共享） | 消息 |
|
||||
| 15 | ../message/contacts.html | 通讯录（共享） | 消息 |
|
||||
| 16 | ../message/im-chat.html | IM 聊天（共享） | 消息 |
|
||||
| 17 | profile/index.html | 个人中心 | 我的 |
|
||||
| 18 | profile/stats.html | 咨询统计 | 我的 |
|
||||
| 19 | profile/reviews.html | 我的评价 | 我的 |
|
||||
| 20 | profile/schedule.html | 排班设置 | 我的 |
|
||||
| 21 | profile/edit-profile.html | 个人信息设置 | 我的 |
|
||||
| 22 | profile/edit-diseases.html | 擅长疾病选择 | 我的 |
|
||||
| 23 | profile/change-pwd.html | 修改密码 | 我的 |
|
||||
| 24 | ../assistant/workbench/employee-profile.html | 咨询人健康档案 | 工作台已结束图文/视频详情页面 |
|
||||
| 8 | workbench/video-in-progress.html | 视频进行中详情 | 工作台·视频咨询 |
|
||||
| 9 | workbench/video-done.html | 视频完成详情 | 工作台·视频咨询 |
|
||||
| 10 | workbench/video-cancelled.html | 视频已取消详情 | 工作台·视频咨询 |
|
||||
| 11 | workbench/video-rejected.html | 视频已拒绝详情 | 工作台·视频咨询 |
|
||||
| 12 | knowledge/index.html | 知识库首页 | 知识库 |
|
||||
| 13 | knowledge/detail.html | 知识详情 | 知识库 |
|
||||
| 14 | ../ai-assistant/index.html | AI 助手（共享） | AI 助手 |
|
||||
| 15 | ../message/index.html | 消息列表（共享） | 消息 |
|
||||
| 16 | ../message/contacts.html | 通讯录（共享） | 消息 |
|
||||
| 17 | ../message/im-chat.html | IM 聊天（共享） | 消息 |
|
||||
| 18 | profile/index.html | 个人中心 | 我的 |
|
||||
| 19 | profile/stats.html | 咨询统计 | 我的 |
|
||||
| 20 | profile/reviews.html | 我的评价 | 我的 |
|
||||
| 21 | profile/schedule.html | 排班设置 | 我的 |
|
||||
| 22 | profile/edit-profile.html | 个人信息设置 | 我的 |
|
||||
| 23 | profile/edit-diseases.html | 擅长疾病选择 | 我的 |
|
||||
| 24 | profile/change-pwd.html | 修改密码 | 我的 |
|
||||
| 25 | ../assistant/workbench/employee-profile.html | 咨询人健康档案 | 工作台已结束图文/视频详情页面 |
|
||||
|
||||
## 逐页说明
|
||||
|
||||
@@ -103,7 +107,8 @@ stateDiagram-v2
|
||||
- 服务状态按钮支持"咨询已开启 / 咨询已关闭"切换，绿色/红色指示点区分状态
|
||||
- 一级 Tab 切换图文咨询 / 视频咨询两个面板
|
||||
- 图文咨询分三个二级 Tab：待回复、进行中、已结束(已完成、已超时)
|
||||
- 视频咨询分三个二级 Tab：待确认、待开始、已结束(已完成、已拒绝、已取消)
|
||||
- 视频咨询分三个二级 Tab：待确认、进行中、已结束(已完成、已拒绝、已取消)
|
||||
- 进行中 Tab 下同时展示"待开始"和"进行中"两种状态的咨询卡片
|
||||
- 底部 5 Tab 导航：工作台 / 知识库 / AI助手 / 消息 / 我的
|
||||
|
||||
**交互说明：**
|
||||
@@ -113,6 +118,7 @@ stateDiagram-v2
|
||||
- 点击图文"已超时"咨询卡片：跳转到图文咨询已超时详情页
|
||||
- 点击视频"待确认"咨询卡片：跳转到视频预约确认页
|
||||
- 点击视频"待开始"咨询卡片：跳转到视频待开始详情页
|
||||
- 点击视频"进行中"咨询卡片：跳转到视频进行中详情页
|
||||
- 点击视频"已完成"咨询卡片：跳转到视频完成详情页
|
||||
- 点击视频"已取消"咨询卡片：跳转到视频已取消详情页
|
||||
- 点击视频"已拒绝"咨询卡片：跳转到视频已拒绝详情页
|
||||
@@ -244,7 +250,28 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 8. 视频完成详情（workbench/video-done.html）
|
||||
### 8. 视频进行中详情（workbench/video-in-progress.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 已发起视频通话、咨询正在进行中的视频咨询详情，显示通话时长并提供结束咨询和再次发起通话的入口。
|
||||
|
||||
**业务规则：**
|
||||
- 顶部员工信息区展示：头像、姓名、部门职位、蓝色"进行中"标签
|
||||
- 蓝色预约信息卡展示：预约时间（高亮）、咨询类型、发起时间、接受时间、已通话时长
|
||||
- 提供咨询人健康档案入口
|
||||
- 咨询说明区提示：「视频咨询进行中，请在预约时间内完成通话。」
|
||||
- 底部双按钮：结束咨询（红色边框）/ 发起视频通话（绿色实心+视频图标）
|
||||
|
||||
**交互说明：**
|
||||
- 点击"结束咨询"：弹出确认弹窗，确认后返回工作台首页
|
||||
- 点击"发起视频通话"：打开IM视频通话拨打页面
|
||||
- 点击"咨询人健康档案"：跳转到咨询人健康档案页
|
||||
- 返回按钮：跳转到工作台首页
|
||||
|
||||
---
|
||||
|
||||
### 9. 视频完成详情（workbench/video-done.html）
|
||||
|
||||
|
||||
|
||||
@@ -261,7 +288,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 9. 视频已取消详情（workbench/video-cancelled.html）
|
||||
### 10. 视频已取消详情（workbench/video-cancelled.html）
|
||||
|
||||
|
||||
|
||||
@@ -279,7 +306,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 10. 视频已拒绝详情（workbench/video-rejected.html）
|
||||
### 11. 视频已拒绝详情（workbench/video-rejected.html）
|
||||
|
||||
|
||||
|
||||
@@ -299,7 +326,7 @@ stateDiagram-v2
|
||||
|
||||
## 四、知识库模块
|
||||
|
||||
### 11. 知识库首页（knowledge/index.html）
|
||||
### 12. 知识库首页（knowledge/index.html）
|
||||
|
||||
|
||||
|
||||
@@ -307,7 +334,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 12. 知识详情（knowledge/detail.html）
|
||||
### 13. 知识详情（knowledge/detail.html）
|
||||
|
||||
|
||||
|
||||
@@ -317,7 +344,7 @@ stateDiagram-v2
|
||||
|
||||
## 五、我的模块
|
||||
|
||||
### 13. 个人中心（profile/index.html）
|
||||
### 14. 个人中心（profile/index.html）
|
||||
|
||||
|
||||
|
||||
@@ -342,7 +369,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 14. 咨询统计（profile/stats.html）
|
||||
### 15. 咨询统计（profile/stats.html）
|
||||
|
||||
|
||||
|
||||
@@ -361,7 +388,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 15. 全部评价（profile/reviews.html）
|
||||
### 16. 全部评价（profile/reviews.html）
|
||||
|
||||
|
||||
|
||||
@@ -377,7 +404,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 16. 排班设置（profile/schedule.html）
|
||||
### 17. 排班设置（profile/schedule.html）
|
||||
|
||||
|
||||
|
||||
@@ -405,21 +432,17 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 17. 个人信息设置（profile/edit-profile.html）
|
||||
### 18. 个人信息设置（profile/edit-profile.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 专家编辑个人基本资料、擅长病种和个人简介。
|
||||
**功能说明：** 专家编辑头像、擅长病种、个人简介和职业经历。
|
||||
|
||||
**表单字段表：**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 规则 |
|
||||
|--------|------------|------|----------------------|
|
||||
| 头像 | 图片上传 | 否 | 点击相机角标更换 ，支持拍照和图库 |
|
||||
| 姓名 | 文本输入 | 是 | — |
|
||||
| 所属医院 | 选择 | 是 | — |
|
||||
| 科室 | 选择 | 是 | — |
|
||||
| 职称 | 选择 | 是 | — |
|
||||
| 擅长疾病 | 标签选择（跳转子页） | 否 | 已选标签只读展示，点击跳转擅长疾病选择页 |
|
||||
| 个人简介 | 多行文本 | 否 | 最多 300 字 |
|
||||
| 职业经历 | 多行文本 | 否 | 最多 300 字 |
|
||||
@@ -432,7 +455,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 18. 擅长疾病选择（profile/edit-diseases.html）
|
||||
### 19. 擅长疾病选择（profile/edit-diseases.html）
|
||||
|
||||
|
||||
|
||||
@@ -452,7 +475,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 19. 修改密码（profile/change-pwd.html）
|
||||
### 20. 修改密码（profile/change-pwd.html）
|
||||
|
||||
|
||||
|
||||
@@ -475,7 +498,7 @@ stateDiagram-v2
|
||||
|
||||
## 六、AI助手模块
|
||||
|
||||
### 20. AI 助手（../ai-assistant/index.html）
|
||||
### 21. AI 助手（../ai-assistant/index.html）
|
||||
|
||||
|
||||
|
||||
@@ -484,7 +507,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
## 七、消息模块
|
||||
### 21. 消息列表（../message/index.html）
|
||||
### 22. 消息列表（../message/index.html）
|
||||
|
||||
|
||||
|
||||
@@ -501,7 +524,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 22. 通讯录（../message/contacts.html）
|
||||
### 23. 通讯录（../message/contacts.html）
|
||||
|
||||
|
||||
|
||||
@@ -515,7 +538,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 23. IM 聊天（../message/im-chat.html）
|
||||
### 24. IM 聊天（../message/im-chat.html）
|
||||
|
||||
|
||||
|
||||
@@ -529,7 +552,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
## 八、咨询详情共用模块
|
||||
### 24. 咨询人健康档案（../assistant/workbench/employee-profile.html）
|
||||
### 25. 咨询人健康档案（../assistant/workbench/employee-profile.html）
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -51,27 +51,27 @@
|
||||
<div style="font-size:13px;color:#999;margin-top:10px;">点击更换头像</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息表单 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">基础信息</div>
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">姓名</span>
|
||||
<input type="text" value="王建明" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">所属医院</span>
|
||||
<input type="text" value="北京协和医院" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">科室</span>
|
||||
<input type="text" value="心内科" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">职称</span>
|
||||
<input type="text" value="主治医师" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<!-- <!– 基础信息表单 –>-->
|
||||
<!-- <div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">基础信息</div>-->
|
||||
<!-- <div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">-->
|
||||
<!-- <div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">-->
|
||||
<!-- <span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">姓名</span>-->
|
||||
<!-- <input type="text" value="王建明" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">-->
|
||||
<!-- <span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">所属医院</span>-->
|
||||
<!-- <input type="text" value="北京协和医院" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">-->
|
||||
<!-- <span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">科室</span>-->
|
||||
<!-- <input type="text" value="心内科" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">-->
|
||||
<!-- <span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">职称</span>-->
|
||||
<!-- <input type="text" value="主治医师" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 擅长疾病（只读展示 + 跳转入口） -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">擅长疾病</div>
|
||||
|
||||
@@ -86,7 +86,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">图文待回复</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">1</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频待确认</div></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频进行中</div></div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -149,7 +149,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-panel-video" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-video-pending')">待确认<span class="badge">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-ongoing')">待开始<span class="badge" style="background:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-ongoing')">进行中<span class="badge" style="background:#1677ff;">2</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-done')">已结束</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
@@ -169,6 +169,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div><div class="cc-info"><div class="cc-name">刘梅</div><div class="cc-meta">女 · 38岁</div></div><span class="tag tag-green">待开始</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 14:00–14:30</div><span class="cc-time">14:00</span></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./video-in-progress.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-in-progress.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div><div class="cc-info"><div class="cc-name">张伟</div><div class="cc-meta">男 · 42岁</div></div><span class="tag tag-blue">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 15:00–15:30</div><span class="cc-time">15:00</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 视频已结束列表 -->
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>视频咨询进行中 - 咨询专家</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.user-info { padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; }
|
||||
.user-info__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #36d1dc, #5b86e5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 600; flex-shrink: 0; }
|
||||
.user-info__detail { flex: 1; }
|
||||
.user-info__name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.user-info__dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.appt-card { margin: 12px 16px; padding: 14px; border-radius: 12px; background: #e6f4ff; border: 1px solid #91caff; }
|
||||
.appt-card__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
|
||||
.appt-card__label { color: #8c8c8c; }
|
||||
.appt-card__value { color: #1a1a1a; font-weight: 500; }
|
||||
.appt-card__value--highlight { color: #1677ff; font-weight: 700; font-size: 15px; }
|
||||
.profile-section { margin: 12px 16px; background: #fff; border-radius: 12px; overflow: hidden; }
|
||||
.profile-section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
|
||||
.profile-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.consult-note { margin: 12px 16px; background: #fff; border-radius: 12px; padding: 14px 16px; }
|
||||
.consult-note__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.consult-note__text { font-size: 14px; color: #666; line-height: 1.6; }
|
||||
.bottom-actions { padding: 12px 16px 28px; background: #fff; display: flex; gap: 12px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.bottom-actions__btn { flex: 1; height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.bottom-actions__btn--end { background: #fff; border: 1px solid #ff4d4f; color: #ff4d4f; }
|
||||
.bottom-actions__btn--call { background: #52c41a; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">‹ 返回</button>
|
||||
<span class="nav-title">视频咨询详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="user-info">
|
||||
<div class="user-info__avatar">刘</div>
|
||||
<div class="user-info__detail">
|
||||
<div class="user-info__name">刘梅 <span class="tag tag-blue">进行中</span></div>
|
||||
<div class="user-info__dept">财务部 · 会计</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appt-card">
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">预约时间</span>
|
||||
<span class="appt-card__value appt-card__value--highlight">2026-03-24 15:00-15:30</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">咨询类型</span>
|
||||
<span class="appt-card__value">视频咨询</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">本次拨打时间</span>
|
||||
<span class="appt-card__value">2026-03-21 09:01</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">接受时间</span>
|
||||
<span class="appt-card__value">2026-03-21 10:01</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">通话时长</span>
|
||||
<span class="appt-card__value appt-card__value--highlight">12分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../../assistant/workbench/employee-profile.html?from=expert-video-inprogress -->
|
||||
<div class="profile-section" onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-video-inprogress'" style="cursor:pointer;">
|
||||
<div class="profile-section__header">
|
||||
<span class="profile-section__title">咨询人健康档案</span>
|
||||
<span style="font-size:12px;color:#999;">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-note">
|
||||
<div class="consult-note__title">咨询说明</div>
|
||||
<div class="consult-note__text">视频咨询进行中，已经拨打过视频通话，如已解决问题，可直接点击结束咨询按钮进行结束，如还未解决，可再次发起视频通话。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="bottom-actions">
|
||||
<button class="bottom-actions__btn bottom-actions__btn--end" onclick="openEndModal()">结束咨询</button>
|
||||
<button class="bottom-actions__btn bottom-actions__btn--call">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
发起视频通话
|
||||
</button>
|
||||
</div>
|
||||
<!-- 结束咨询确认弹窗 -->
|
||||
<div class="modal-center" id="endModal">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束咨询</div>
|
||||
<div class="modal-body">确认结束与刘梅的视频咨询吗？结束后将无法继续通话。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeEndModal()">取消</button>
|
||||
<button onclick="confirmEnd()">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openEndModal() { document.getElementById('endModal').classList.add('active'); }
|
||||
function closeEndModal() { document.getElementById('endModal').classList.remove('active'); }
|
||||
function confirmEnd() { location.href = './index.html'; }
|
||||
</script>
|
||||
</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>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>
|
||||
+46
-13
@@ -180,14 +180,13 @@ const SITE_MAP = [
|
||||
{ name:'癌症预防', dir:'web-admin/cancer', pages:[] },
|
||||
{ name:'专家咨询(管理员)', dir:'web-admin/health-consult', entry:'history-expert.html', prd:'web-admin/health-consult/doc/PRD.md', pages:[
|
||||
{ file:'history-expert.html', label:'专家咨询记录' },
|
||||
{ file:'history-expert-detail.html', label:'专家对话详情' },
|
||||
{ file:'video-detail-pending-confirm.html', label:'视频详情-待确认' },
|
||||
{ file:'video-detail-pending-start.html', label:'视频详情-待开始' },
|
||||
{ file:'video-detail-completed.html', label:'视频详情-已完成' },
|
||||
{ file:'video-detail-rejected.html', label:'视频详情-已拒绝' },
|
||||
{ file:'video-detail-cancelled.html', label:'视频详情-已取消' },
|
||||
{ file:'video-detail-in-progress.html', label:'视频详情-进行中' },
|
||||
{ file:'history-assistant.html', label:'小助手咨询记录' },
|
||||
{ file:'history-assistant-detail.html', label:'小助手对话详情' },
|
||||
{ file:'history-evaluation.html', label:'用户评价' },
|
||||
{ file:'consult-record.html', label:'咨询档案' },
|
||||
{ file:'consult-record-detail.html', label:'咨询档案详情' },
|
||||
@@ -239,12 +238,18 @@ const SITE_MAP = [
|
||||
{ name:'应急就医(管理员)', dir:'web-admin/emergency-dispatch/admin', entry:'archive-personal.html', pages:[
|
||||
{ file:'archive-personal.html', label:'个人应急数据' },
|
||||
{ file:'archive-personal-detail.html', label:'个人应急数据详情' },
|
||||
{ file:'archive-personal-detail-illness.html', label:'个人大病就医详情' },
|
||||
{ file:'archive-unit.html', label:'单位报表数据' },
|
||||
{ file:'archive-center.html', label:'应急中心报表数据' },
|
||||
{ file:'resource-hospital.html', label:'医院信息' },
|
||||
{ file:'resource-medical-point.html', label:'医疗点信息' },
|
||||
{ file:'resource-aed.html', label:'AED组网' },
|
||||
{ file:'resource-device.html', label:'设备管理' },
|
||||
{ file:'resource-aed.html', label:'AED设备信息-设备管理' },
|
||||
{ file:'resource-aed-deploy.html', label:'AED设备信息-布点管理' },
|
||||
{ file:'resource-aed-map.html', label:'AED设备信息-AED地图' },
|
||||
{ file:'resource-aed-certifier.html', label:'AED设备信息-取证人员' },
|
||||
{ file:'resource-aed-maintenance.html', label:'AED设备信息-维护记录' },
|
||||
{ file:'resource-aed-training.html', label:'AED设备信息-培演记录' },
|
||||
{ file:'resource-aed-usage.html', label:'AED设备信息-应用记录' },
|
||||
{ file:'resource-ambulance.html', label:'救护车信息' },
|
||||
{ file:'resource-first-aid-kit.html', label:'急救包信息' },
|
||||
{ file:'resource-doctor.html', label:'急救医生信息' },
|
||||
@@ -298,15 +303,39 @@ const SITE_MAP = [
|
||||
{ file:'video-detail-confirming.html', label:'视频待确认' }, { file:'video-detail-pending.html', label:'视频待开始' },
|
||||
{ file:'video-detail-done.html', label:'视频已完成' }, { file:'video-detail-cancelled.html', label:'视频已取消' },
|
||||
{ file:'video-detail-rejected.html', label:'视频已拒绝' },
|
||||
{ file:'video-detail-ongoing.html', label:'视频进行中' },
|
||||
{ file:'my-records.html', label:'咨询记录' }, { file:'record-detail.html', label:'记录详情' },
|
||||
{ file:'record-detail-rated.html', label:'已评价详情' }, { file:'record-detail-unrated.html', label:'未评价详情' }, { file:'record-detail-timeout.html', label:'已超时详情' },
|
||||
{ file:'rate-doctor.html', label:'评价医生' },
|
||||
{ file:'end-consult-dialog.html', label:'结束咨询弹窗', dialog:true },
|
||||
{ file:'select-person-dialog.html', label:'选择就诊人弹窗', dialog:true },
|
||||
{ file:'select-report-dialog.html', label:'选择报告弹窗', dialog:true },
|
||||
{ file:'consult-flowchart.html', label:'咨询流程图' }
|
||||
]},
|
||||
{ name:'应急就医', dir:'employee-app/emergency-medical', pages:[] },
|
||||
{ name:'应急就医', dir:'employee-app/emergency-medical', entry:'index.html', pages:[
|
||||
{ file:'index.html', label:'应急就医主页' },
|
||||
{ file:'emergency-chat.html', label:'应急对话' },
|
||||
{ file:'resource-map.html', label:'应急资源地图' },
|
||||
{ file:'resource-map-clinic.html', label:'地图-医疗点' },
|
||||
{ file:'resource-map-aed.html', label:'地图-AED' },
|
||||
{ file:'resource-map-ambulance.html', label:'地图-救护车' },
|
||||
{ file:'resource-map-kit.html', label:'地图-急救包' },
|
||||
{ file:'hospital-detail.html', label:'油田医院详情' },
|
||||
{ file:'clinic-detail.html', label:'医疗点详情' },
|
||||
{ file:'aed-detail.html', label:'AED详情' },
|
||||
{ file:'ambulance-detail.html', label:'救护车详情' },
|
||||
{ file:'first-aid-kit-detail.html', label:'急救包详情' },
|
||||
{ file:'emergency-tips.html', label:'急救提示书' },
|
||||
{ file:'help-records.html', label:'应急求助记录' },
|
||||
{ file:'appointment-list.html', label:'大病就医预约' },
|
||||
{ file:'appointment-list-done.html', label:'预约-已完成' },
|
||||
{ file:'appointment-list-cancelled.html', label:'预约-已取消' },
|
||||
{ file:'appointment-detail-pending.html', label:'就医详情-待确认' },
|
||||
{ file:'appointment-detail-confirmed.html', label:'就医详情-已确认' },
|
||||
{ file:'appointment-detail-done.html', label:'就医详情-已完成' },
|
||||
{ file:'appointment-detail-cancelled.html', label:'就医详情-已取消' },
|
||||
{ file:'appointment-form.html', label:'发起新预约' },
|
||||
{ file:'first-aid-videos.html', label:'急救教学视频' }
|
||||
]},
|
||||
{ name:'一线医疗', dir:'employee-app/frontline-medical', pages:[] },
|
||||
{ name:'健康档案', dir:'employee-app/health-record', pages:[] },
|
||||
{ name:'知识普及', dir:'employee-app/knowledge', pages:[] },
|
||||
@@ -317,11 +346,13 @@ const SITE_MAP = [
|
||||
{ role:'咨询专家', id:'expert', modules:[
|
||||
{ name:'工作台', dir:'emergency-app/expert/workbench', prd:'emergency-app/expert/doc/PRD.md', pages:[
|
||||
{file:'index.html',label:'工作台首页'},{file:'text-chat.html',label:'图文咨询'},
|
||||
{file:'text-consult-done.html',label:'咨询完成'},{file:'consult-person-detail.html',label:'咨询人档案'},
|
||||
{file:'video-appt.html',label:'视频预约'},{file:'video-call.html',label:'视频通话'},
|
||||
{file:'video-done.html',label:'视频完成'},{file:'video-ongoing.html',label:'视频进行中'},
|
||||
{file:'video-cancelled.html',label:'视频已取消'},{file:'video-rejected.html',label:'视频已拒绝'},
|
||||
{file:'employee-profile.html',label:'员工档案'}
|
||||
{file:'text-chat-done.html',label:'图文咨询完成'},
|
||||
{file:'text-consult-done.html',label:'咨询完成'},{file:'text-consult-timeout.html',label:'咨询超时'},
|
||||
{file:'video-appt.html',label:'视频预约'},
|
||||
{file:'video-ongoing.html',label:'视频待开始'},
|
||||
{file:'video-in-progress.html',label:'视频进行中'},
|
||||
{file:'video-done.html',label:'视频完成'},
|
||||
{file:'video-cancelled.html',label:'视频已取消'},{file:'video-rejected.html',label:'视频已拒绝'}
|
||||
]},
|
||||
{ name:'知识库', dir:'emergency-app/expert/knowledge', pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'detail.html',label:'知识详情'}
|
||||
@@ -336,7 +367,9 @@ const SITE_MAP = [
|
||||
{ role:'咨询小助手', id:'assistant', modules:[
|
||||
{ name:'工作台', dir:'emergency-app/assistant/workbench', prd:'emergency-app/assistant/doc/PRD.md', pages:[
|
||||
{file:'index.html',label:'工作台首页'},{file:'text-chat.html',label:'图文咨询'},
|
||||
{file:'consult-done.html',label:'咨询完成'},{file:'employee-profile.html',label:'员工档案'},
|
||||
{file:'text-chat-done.html',label:'图文咨询完成'},
|
||||
{file:'text-consult-done.html',label:'咨询完成'},{file:'text-consult-timeout.html',label:'咨询超时'},
|
||||
{file:'employee-profile.html',label:'员工档案'},
|
||||
{file:'end-consult-dialog.html',label:'结束咨询弹窗',dialog:true},
|
||||
{file:'push-expert.html',label:'推送专家'}
|
||||
]},
|
||||
@@ -344,7 +377,7 @@ const SITE_MAP = [
|
||||
{file:'index.html',label:'知识库首页'},{file:'detail.html',label:'知识详情'}
|
||||
]},
|
||||
{ name:'我的', dir:'emergency-app/assistant/profile', pages:[
|
||||
{file:'index.html',label:'个人中心'},{file:'stats.html',label:'咨询统计'},
|
||||
{file:'index.html',label:'个人中心'},{file:'edit-profile.html',label:'编辑资料'},
|
||||
{file:'change-pwd.html',label:'修改密码'}
|
||||
] }
|
||||
]},
|
||||
|
||||
Generated
+14
@@ -5,9 +5,23 @@
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"chrome-devtools-mcp": "^0.21.0",
|
||||
"playwright": "^1.59.1"
|
||||
}
|
||||
},
|
||||
"node_modules/chrome-devtools-mcp": {
|
||||
"version": "0.21.0",
|
||||
"resolved": "https://registry.npmjs.org/chrome-devtools-mcp/-/chrome-devtools-mcp-0.21.0.tgz",
|
||||
"integrity": "sha512-d+iqrRmcwpRFV3Q4DRCF2LCoq+WCRU3GhISKQ9v8g+1C2Uh8upj3urkjxNO4QIjhBMIYei/VQ1OQLFceby80Og==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"chrome-devtools": "build/src/bin/chrome-devtools.js",
|
||||
"chrome-devtools-mcp": "build/src/bin/chrome-devtools-mcp.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || ^22.12.0 || >=23"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"chrome-devtools-mcp": "^0.21.0",
|
||||
"playwright": "^1.59.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,6 +51,8 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -98,10 +100,14 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心：</label>
|
||||
<select class="filter-select">
|
||||
@@ -125,7 +131,6 @@
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">应急中心报表数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -133,70 +138,70 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>应急中心</th>
|
||||
<th>操作人员人数</th>
|
||||
<th>专业人员人数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>总工单数量</th>
|
||||
<th>已完成工单数量</th>
|
||||
<th>未完成工单数量</th>
|
||||
<th>操作人员人数 ↕</th>
|
||||
<th>专业人员人数 ↕</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>总工单数量 ↕</th>
|
||||
<th>已完成工单数量 ↕</th>
|
||||
<th>未完成工单数量 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安应急中心</td>
|
||||
<td>12</td>
|
||||
<td>8</td>
|
||||
<td>350</td>
|
||||
<td>280</td>
|
||||
<td>630</td>
|
||||
<td>580</td>
|
||||
<td>50</td>
|
||||
<td class="link" href="#">12</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">350</td>
|
||||
<td class="link" href="#">280</td>
|
||||
<td class="link" href="#">630</td>
|
||||
<td class="link" href="#">580</td>
|
||||
<td class="link" href="#">50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">庆阳应急中心</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td>200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
<td>30</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">延安应急中心</td>
|
||||
<td>6</td>
|
||||
<td>4</td>
|
||||
<td>150</td>
|
||||
<td>120</td>
|
||||
<td>270</td>
|
||||
<td>250</td>
|
||||
<td>20</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">榆林应急中心</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>180</td>
|
||||
<td>165</td>
|
||||
<td>15</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">银川应急中心</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>80</td>
|
||||
<td>65</td>
|
||||
<td>145</td>
|
||||
<td>130</td>
|
||||
<td>15</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;display:flex;align-items:center;gap:16px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__sub{font-size:var(--font-base);color:var(--text-secondary);}
|
||||
.page-header__back{display:flex;align-items:center;gap:4px;color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.page-header__back:hover{color:#40a9ff;}
|
||||
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;text-decoration:none;display:inline-block;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人应急数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
<a class="page-header__back" href="archive-personal.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回
|
||||
</a>
|
||||
<div class="page-header__title">个人应急数据详情</div>
|
||||
<div class="page-header__sub">张旭（公司机关-健康科）</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs">
|
||||
<a class="tab-item" href="archive-personal-detail.html">应急求助</a>
|
||||
<a class="tab-item active" href="archive-personal-detail-illness.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select">
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">大病就医记录</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>预约医院</th>
|
||||
<th>挂号类别</th>
|
||||
<th>预约科室</th>
|
||||
<th>预约医生</th>
|
||||
<th>期望预约时间</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>完成时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>空军军医大学西京医院</td>
|
||||
<td>普通号</td>
|
||||
<td>内科</td>
|
||||
<td>李青时</td>
|
||||
<td>2026-03-18 08:11</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-16 12:23:32</td>
|
||||
<td>2026-03-18 15:42:10</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>专家号</td>
|
||||
<td>心血管内科</td>
|
||||
<td>张明华</td>
|
||||
<td>2026-03-10 09:30</td>
|
||||
<td>王磊</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-08 14:05:18</td>
|
||||
<td>2026-03-10 16:20:45</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>空军军医大学西京医院</td>
|
||||
<td>急诊号</td>
|
||||
<td>骨科</td>
|
||||
<td>陈伟</td>
|
||||
<td>2026-02-25 10:00</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-02-23 09:41:07</td>
|
||||
<td>2026-02-25 14:33:28</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>西安市中心医院</td>
|
||||
<td>普通号</td>
|
||||
<td>消化内科</td>
|
||||
<td>刘芳</td>
|
||||
<td>2026-04-05 14:00</td>
|
||||
<td>赵强</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-03 10:12:55</td>
|
||||
<td>—</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>西安交大二附院</td>
|
||||
<td>专家号</td>
|
||||
<td>神经外科</td>
|
||||
<td>孙建国</td>
|
||||
<td>2026-04-12 08:30</td>
|
||||
<td>王磊</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-10 16:38:22</td>
|
||||
<td>—</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -59,6 +59,7 @@
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
@@ -124,17 +125,28 @@
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" onclick="switchTab(this)">拨打120</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">应急视频</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">应急电话</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">大病就医</div>
|
||||
<a class="tab-item active" href="archive-personal-detail.html">应急求助</a>
|
||||
<a class="tab-item" href="archive-personal-detail-illness.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助方式：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>请选择</option>
|
||||
<option>拨打120</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -149,8 +161,7 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">拨打120记录</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
<div class="table-card__title">应急求助记录</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -158,6 +169,7 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>应急工单编号</th>
|
||||
<th>求助方式</th>
|
||||
<th>求助时间</th>
|
||||
<th>应急中心</th>
|
||||
<th>专业人员</th>
|
||||
@@ -172,18 +184,20 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">YJ58966523</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-03-26 14:40:07</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>王医生</td>
|
||||
<td>李操作</td>
|
||||
<td>张驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">YJ58966524</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>2026-03-25 09:15:32</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>赵医生</td>
|
||||
@@ -196,6 +210,7 @@
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">YJ58966525</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-03-20 16:22:18</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>孙医生</td>
|
||||
@@ -208,6 +223,7 @@
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">YJ58966526</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-03-18 11:05:44</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>杨医生</td>
|
||||
@@ -220,12 +236,13 @@
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">YJ58966527</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-03-15 08:30:21</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>马医生</td>
|
||||
<td>黄操作</td>
|
||||
<td>林驻场</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
@@ -245,13 +262,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* Tab 切换交互 */
|
||||
function switchTab(el){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -120,6 +120,15 @@
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
@@ -128,10 +137,7 @@
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
@@ -161,7 +167,6 @@
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人应急数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -174,10 +179,10 @@
|
||||
<th>年龄</th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>拨打120次数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>大病就医次数</th>
|
||||
<th>拨打120次数 ↕</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>大病就医次数 ↕</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -26,14 +26,13 @@
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* Tab 按钮组 */
|
||||
.tab-btns{display:flex;gap:0;margin-bottom:0;}
|
||||
.tab-btn{padding:8px 20px;font-size:var(--font-sm);border:1px solid var(--border);background:#fff;cursor:pointer;transition:all .2s;color:var(--text-secondary);}
|
||||
.tab-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
|
||||
.tab-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
|
||||
.tab-btn:not(:first-child){border-left:none;}
|
||||
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.tab-btn:hover:not(.active){color:var(--primary);border-color:var(--primary);}
|
||||
/* Tab 下划线切换 */
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
@@ -59,6 +58,8 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -104,162 +105,382 @@
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<div class="tab-btns">
|
||||
<button class="tab-btn active" onclick="switchTabBtn(this)">二级单位</button>
|
||||
<button class="tab-btn" onclick="switchTabBtn(this)">三级单位</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
<!-- [交互] Tab 切换二级单位 / 三级单位 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('unit',this)">二级单位</div>
|
||||
<div class="tab-item" onclick="switchTab('dept',this)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位报表数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
<!-- 二级单位面板 -->
|
||||
<div class="tab-panel active" id="panel-unit">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>输油处</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>单位</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急视频人数</th>
|
||||
<th>拨打120次数</th>
|
||||
<th>拨打120人数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>应急电话人数</th>
|
||||
<th>大病就医次数</th>
|
||||
<th>大病就医人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">公司机关</td>
|
||||
<td>1000</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>120</td>
|
||||
<td>95</td>
|
||||
<td>30</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">采油一厂</td>
|
||||
<td>2500</td>
|
||||
<td>200</td>
|
||||
<td>160</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>180</td>
|
||||
<td>150</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">采油二厂</td>
|
||||
<td>1800</td>
|
||||
<td>150</td>
|
||||
<td>120</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>140</td>
|
||||
<td>110</td>
|
||||
<td>35</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">采气一厂</td>
|
||||
<td>1200</td>
|
||||
<td>90</td>
|
||||
<td>75</td>
|
||||
<td>40</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>85</td>
|
||||
<td>20</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">第一采油厂</td>
|
||||
<td>3000</td>
|
||||
<td>250</td>
|
||||
<td>200</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>220</td>
|
||||
<td>180</td>
|
||||
<td>55</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">输油处</td>
|
||||
<td>800</td>
|
||||
<td>60</td>
|
||||
<td>50</td>
|
||||
<td>25</td>
|
||||
<td>20</td>
|
||||
<td>70</td>
|
||||
<td>55</td>
|
||||
<td>15</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">25</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">二级单位应急数据列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>单位</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急视频人数 ↕</th>
|
||||
<th>拨打120次数 ↕</th>
|
||||
<th>拨打120人数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>应急电话人数 ↕</th>
|
||||
<th>大病就医次数 ↕</th>
|
||||
<th>大病就医人数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">公司机关</td>
|
||||
<td>1000</td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">80</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
<td><a class="link" href="#">45</a></td>
|
||||
<td><a class="link" href="#">120</a></td>
|
||||
<td><a class="link" href="#">95</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">采油一厂</td>
|
||||
<td>2500</td>
|
||||
<td><a class="link" href="#">200</a></td>
|
||||
<td><a class="link" href="#">160</a></td>
|
||||
<td><a class="link" href="#">80</a></td>
|
||||
<td><a class="link" href="#">70</a></td>
|
||||
<td><a class="link" href="#">180</a></td>
|
||||
<td><a class="link" href="#">150</a></td>
|
||||
<td><a class="link" href="#">45</a></td>
|
||||
<td><a class="link" href="#">40</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">采油二厂</td>
|
||||
<td>1800</td>
|
||||
<td><a class="link" href="#">150</a></td>
|
||||
<td><a class="link" href="#">120</a></td>
|
||||
<td><a class="link" href="#">60</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">140</a></td>
|
||||
<td><a class="link" href="#">110</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">采气一厂</td>
|
||||
<td>1200</td>
|
||||
<td><a class="link" href="#">90</a></td>
|
||||
<td><a class="link" href="#">75</a></td>
|
||||
<td><a class="link" href="#">40</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">85</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">第一采油厂</td>
|
||||
<td>3000</td>
|
||||
<td><a class="link" href="#">250</a></td>
|
||||
<td><a class="link" href="#">200</a></td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">90</a></td>
|
||||
<td><a class="link" href="#">220</a></td>
|
||||
<td><a class="link" href="#">180</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">输油处</td>
|
||||
<td>800</td>
|
||||
<td><a class="link" href="#">60</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">70</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三级单位面板 -->
|
||||
<div class="tab-panel" id="panel-dept">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>输油处</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部部门</option>
|
||||
<option>作业一区</option>
|
||||
<option>作业二区</option>
|
||||
<option>集输站</option>
|
||||
<option>注水站</option>
|
||||
<option>综合管理部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>急诊科</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">三级单位应急数据列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>所属单位</th>
|
||||
<th>部门名称</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急视频人数 ↕</th>
|
||||
<th>拨打120次数 ↕</th>
|
||||
<th>拨打120人数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>应急电话人数 ↕</th>
|
||||
<th>大病就医次数 ↕</th>
|
||||
<th>大病就医人数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">作业一区</td>
|
||||
<td>186</td>
|
||||
<td><a class="link" href="#">42</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">38</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">作业二区</td>
|
||||
<td>174</td>
|
||||
<td><a class="link" href="#">38</a></td>
|
||||
<td><a class="link" href="#">32</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>采油二厂</td>
|
||||
<td style="font-weight:500;">注水站</td>
|
||||
<td>163</td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">10</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>采气一厂</td>
|
||||
<td style="font-weight:500;">集输站</td>
|
||||
<td>158</td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">10</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>公司机关</td>
|
||||
<td style="font-weight:500;">综合管理部</td>
|
||||
<td>142</td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">安全环保部</td>
|
||||
<td>136</td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">16</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>油田总医院</td>
|
||||
<td style="font-weight:500;">急诊科</td>
|
||||
<td>128</td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">14</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>采油二厂</td>
|
||||
<td style="font-weight:500;">维修班</td>
|
||||
<td>115</td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="#">1</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 142 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* 按钮组 Tab 切换 */
|
||||
function switchTabBtn(el){
|
||||
el.parentElement.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active');});
|
||||
/* Tab 切换交互 */
|
||||
function switchTab(key, el) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){p.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-'+key).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -77,6 +77,14 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 固定列 */
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;min-width:120px;}
|
||||
.col-fixed-3{left:180px;min-width:120px;}
|
||||
.col-fixed-3::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;background:linear-gradient(to right,rgba(0,0,0,0.04),transparent);pointer-events:none;}
|
||||
.col-fixed-end{right:0;min-width:80px;box-shadow:-2px 0 4px rgba(0,0,0,0.04);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,26 +161,30 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名" style="min-width:160px;">
|
||||
<label>就医员工</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名" style="min-width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入" style="min-width:120px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工单位部门</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>请选择</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>第一采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>就医状态</label>
|
||||
<label>工单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>就医中</option>
|
||||
<option>请选择</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
@@ -180,107 +192,179 @@
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">大病就医列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 86 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>诊断疾病</th>
|
||||
<th>就医医院</th>
|
||||
<th>就医时间</th>
|
||||
<th>当前状态</th>
|
||||
<th>跟进人</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">就医员工</th>
|
||||
<th class="col-fixed col-fixed-3">员工编号</th>
|
||||
<th>员工单位</th>
|
||||
<th>员工部门</th>
|
||||
<th>预约医院</th>
|
||||
<th>挂号类别</th>
|
||||
<th>预约科室</th>
|
||||
<th>预约医生</th>
|
||||
<th>期望预约时间</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>完成时间</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>王建国</td>
|
||||
<td>EMP20230156</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2">徐萱-男-34</td>
|
||||
<td class="col-fixed col-fixed-3">56895</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>消防大队</td>
|
||||
<td>空军军医大学西京医院</td>
|
||||
<td>普通号</td>
|
||||
<td>内科</td>
|
||||
<td>李青时</td>
|
||||
<td>2026-03-18 08:11</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-16 12:23:32</td>
|
||||
<td>2026-03-18 15:42:10</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2">徐萱-男-34</td>
|
||||
<td class="col-fixed col-fixed-3">56895</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>消防大队</td>
|
||||
<td>空军军医大学西京医院</td>
|
||||
<td>急诊号</td>
|
||||
<td>外科</td>
|
||||
<td>周建华</td>
|
||||
<td>2026-03-19 10:30</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-16 12:25:18</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2">徐萱-男-34</td>
|
||||
<td class="col-fixed col-fixed-3">56895</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>消防大队</td>
|
||||
<td>空军军医大学西京医院</td>
|
||||
<td>专家号</td>
|
||||
<td>心内科</td>
|
||||
<td>张明远</td>
|
||||
<td>2026-03-20 14:00</td>
|
||||
<td>徐豪</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-16 12:28:45</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2">王建国-男-52</td>
|
||||
<td class="col-fixed col-fixed-3">EMP20230156</td>
|
||||
<td>采油一厂</td>
|
||||
<td>急性心肌梗死</td>
|
||||
<td>作业一区</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>专家号</td>
|
||||
<td>心内科</td>
|
||||
<td>张明远</td>
|
||||
<td>2026-04-15 09:30</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>李晓明</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-14 16:05:18</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>张丽华</td>
|
||||
<td>EMP20220089</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2">张丽华-女-45</td>
|
||||
<td class="col-fixed col-fixed-3">EMP20220089</td>
|
||||
<td>公司机关</td>
|
||||
<td>脑血管意外</td>
|
||||
<td>综合管理部</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>普通号</td>
|
||||
<td>神经内科</td>
|
||||
<td>赵国强</td>
|
||||
<td>2026-04-12 14:20</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>赵文博</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-11 09:32:47</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>刘志强</td>
|
||||
<td>EMP20210234</td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2">刘志强-男-41</td>
|
||||
<td class="col-fixed col-fixed-3">EMP20210234</td>
|
||||
<td>采油二厂</td>
|
||||
<td>严重骨折（多发性）</td>
|
||||
<td>注水站</td>
|
||||
<td>兰州大学第一医院</td>
|
||||
<td>急诊号</td>
|
||||
<td>骨科</td>
|
||||
<td>孙立平</td>
|
||||
<td>2026-04-08 11:05</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>孙伟</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>陈秀英</td>
|
||||
<td>EMP20230312</td>
|
||||
<td>采气一厂</td>
|
||||
<td>恶性肿瘤（肺癌）</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>2026-03-25 08:45</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>王晓峰</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>赵德明</td>
|
||||
<td>EMP20200178</td>
|
||||
<td>采油一厂</td>
|
||||
<td>急性重症胰腺炎</td>
|
||||
<td>西安交大二附院</td>
|
||||
<td>2026-03-18 16:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>李晓明</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
<td>2026-04-07 22:18:05</td>
|
||||
<td>2026-04-10 09:15:33</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>杨红梅</td>
|
||||
<td>EMP20240045</td>
|
||||
<td>公司机关</td>
|
||||
<td>严重烧伤（III度）</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>2026-03-10 10:15</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>赵文博</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
<td class="col-fixed col-fixed-1">7</td>
|
||||
<td class="col-fixed col-fixed-2">陈秀英-女-58</td>
|
||||
<td class="col-fixed col-fixed-3">EMP20230312</td>
|
||||
<td>采气一厂</td>
|
||||
<td>集输站</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>专家号</td>
|
||||
<td>肿瘤科</td>
|
||||
<td>王海涛</td>
|
||||
<td>2026-03-25 08:45</td>
|
||||
<td>王晓峰</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-23 14:50:33</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">8</td>
|
||||
<td class="col-fixed col-fixed-2">赵德明-男-49</td>
|
||||
<td class="col-fixed col-fixed-3">EMP20200178</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业二区</td>
|
||||
<td>西安交大二附院</td>
|
||||
<td>普通号</td>
|
||||
<td>消化内科</td>
|
||||
<td>刘文杰</td>
|
||||
<td>2026-03-18 16:30</td>
|
||||
<td>李晓明</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-17 10:25:41</td>
|
||||
<td>2026-03-20 11:08:22</td>
|
||||
<td class="col-fixed col-fixed-end"><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -140,15 +140,30 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<div class="filter-item">
|
||||
<label>工单编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助员工</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>待处理</option>
|
||||
<option>处理中</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -172,10 +187,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
@@ -189,113 +210,158 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>工单编号</th>
|
||||
<th>应急工单编号</th>
|
||||
<th>求助员工</th>
|
||||
<th>求助方式</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>求助方式</th>
|
||||
<th>求助时间</th>
|
||||
<th>处理操作员</th>
|
||||
<th>应急中心</th>
|
||||
<th>专业人员</th>
|
||||
<th>操作人员</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>工单类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>WO-20260420-001</td>
|
||||
<td>王建军</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td style="font-weight:500;">WO-20260420-001</td>
|
||||
<td>王建军-男-45</td>
|
||||
<td>EMP100231</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业一区</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-20 09:15:32</td>
|
||||
<td>李坐席</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>张医生</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>李操作</td>
|
||||
<td>赵驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>WO-20260420-002</td>
|
||||
<td>张丽萍</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td style="font-weight:500;">WO-20260420-002</td>
|
||||
<td>张丽萍-女-38</td>
|
||||
<td>EMP100456</td>
|
||||
<td>采气厂</td>
|
||||
<td>集输站</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>2026-04-20 08:42:18</td>
|
||||
<td>王坐席</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>刘医生</td>
|
||||
<td>王操作</td>
|
||||
<td>陈驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>WO-20260419-015</td>
|
||||
<td>陈伟东</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-015</td>
|
||||
<td>陈伟东-男-52</td>
|
||||
<td>EMP100789</td>
|
||||
<td>油田总医院</td>
|
||||
<td>急诊科</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-19 22:05:47</td>
|
||||
<td>赵坐席</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>陈医生</td>
|
||||
<td>赵操作</td>
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>WO-20260419-014</td>
|
||||
<td>刘志强</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-014</td>
|
||||
<td>刘志强-男-41</td>
|
||||
<td>EMP100102</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业二区</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-19 18:30:12</td>
|
||||
<td>李坐席</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>王医生</td>
|
||||
<td>李操作</td>
|
||||
<td>郑驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>WO-20260419-013</td>
|
||||
<td>赵国庆</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-013</td>
|
||||
<td>赵国庆-男-36</td>
|
||||
<td>EMP100335</td>
|
||||
<td>采油二厂</td>
|
||||
<td>注水站</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>2026-04-19 16:12:55</td>
|
||||
<td>王坐席</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>西安应急中心</td>
|
||||
<td>马医生</td>
|
||||
<td>王操作</td>
|
||||
<td>黄驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>WO-20260419-012</td>
|
||||
<td>孙明亮</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-012</td>
|
||||
<td>孙明亮-男-48</td>
|
||||
<td>EMP100567</td>
|
||||
<td>采气厂</td>
|
||||
<td>压缩站</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-19 14:28:03</td>
|
||||
<td>赵坐席</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>张医生</td>
|
||||
<td>赵操作</td>
|
||||
<td>林驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>WO-20260419-011</td>
|
||||
<td>周文博</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-011</td>
|
||||
<td>周文博-男-29</td>
|
||||
<td>EMP100890</td>
|
||||
<td>采油一厂</td>
|
||||
<td>作业三区</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-19 11:45:20</td>
|
||||
<td>李坐席</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>刘医生</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>李操作</td>
|
||||
<td>张驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>WO-20260419-010</td>
|
||||
<td>吴海涛</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td style="font-weight:500;">WO-20260419-010</td>
|
||||
<td>吴海涛-男-33</td>
|
||||
<td>EMP100214</td>
|
||||
<td>采油二厂</td>
|
||||
<td>维修班</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>2026-04-19 09:08:41</td>
|
||||
<td>王坐席</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>陈医生</td>
|
||||
<td>王操作</td>
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
+105
-99
@@ -3,16 +3,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 设备管理 | 健康长庆原型</title>
|
||||
<title>应急就医 - AED设备信息 - 取证人员 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
@@ -24,34 +19,34 @@
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
@@ -62,28 +57,15 @@
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 开关组件 */
|
||||
.switch{position:relative;width:36px;height:20px;background:#ccc;border-radius:10px;cursor:pointer;transition:background .2s;border:none;padding:0;}
|
||||
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;}
|
||||
.switch.on{background:var(--success);}
|
||||
.switch.on::after{transform:translateX(16px);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
@@ -124,15 +106,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<!-- 当前页：设备管理 -->
|
||||
<a href="resource-device.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item active">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
@@ -156,20 +145,11 @@
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>急救设备</option>
|
||||
<option>监护设备</option>
|
||||
<option>通讯设备</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
@@ -178,6 +158,15 @@
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>证书状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>有效</option>
|
||||
<option>即将过期</option>
|
||||
<option>已过期</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -186,10 +175,10 @@
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增设备
|
||||
新增取证人员
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
@@ -197,95 +186,112 @@
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">设备列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 28 条</div>
|
||||
<div class="table-card__title">取证人员列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 18 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备编号</th>
|
||||
<th>设备类型</th>
|
||||
<th>姓名</th>
|
||||
<th>工号</th>
|
||||
<th>所属单位</th>
|
||||
<th>安装位置</th>
|
||||
<th>购置时间</th>
|
||||
<th>维保到期</th>
|
||||
<th>状态</th>
|
||||
<th>所属部门</th>
|
||||
<th>联系电话</th>
|
||||
<th>证书编号</th>
|
||||
<th>证书类型</th>
|
||||
<th>发证机构</th>
|
||||
<th>取证日期</th>
|
||||
<th>有效期至</th>
|
||||
<th>证书状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">便携式心电监护仪</td>
|
||||
<td>DEV-2025-001</td>
|
||||
<td>监护设备</td>
|
||||
<td style="font-weight:500;">张明</td>
|
||||
<td>EMP-10021</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部医疗室</td>
|
||||
<td>安全环保部</td>
|
||||
<td>138****1001</td>
|
||||
<td>AHA-2024-0156</td>
|
||||
<td>红十字救护员</td>
|
||||
<td>中国红十字会</td>
|
||||
<td>2024-06-15</td>
|
||||
<td>2026-06-15</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">急救呼吸机</td>
|
||||
<td>DEV-2025-002</td>
|
||||
<td>急救设备</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>采油一厂调度中心</td>
|
||||
<td>2024-09-20</td>
|
||||
<td style="font-weight:500;">李华</td>
|
||||
<td>EMP-10035</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>139****2002</td>
|
||||
<td>RC-2023-0892</td>
|
||||
<td>红十字救护员</td>
|
||||
<td>中国红十字会</td>
|
||||
<td>2023-09-20</td>
|
||||
<td>2026-09-20</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">卫星电话</td>
|
||||
<td>DEV-2025-003</td>
|
||||
<td>通讯设备</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>采油二厂值班室</td>
|
||||
<td>2025-01-10</td>
|
||||
<td>2027-01-10</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td style="font-weight:500;">王强</td>
|
||||
<td>EMP-20018</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>137****3003</td>
|
||||
<td>AHA-2023-0421</td>
|
||||
<td>红十字救护员</td>
|
||||
<td>中国红十字会</td>
|
||||
<td>2023-03-10</td>
|
||||
<td>2025-03-10</td>
|
||||
<td><span class="tag tag-red">已过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">便携式血氧仪</td>
|
||||
<td>DEV-2025-004</td>
|
||||
<td>监护设备</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>采油三厂医务室</td>
|
||||
<td>2025-02-18</td>
|
||||
<td>2027-02-18</td>
|
||||
<td><button class="switch" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td style="font-weight:500;">赵丽</td>
|
||||
<td>EMP-30042</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>136****4004</td>
|
||||
<td>RC-2024-1105</td>
|
||||
<td>红十字救护员</td>
|
||||
<td>中国红十字会</td>
|
||||
<td>2024-11-05</td>
|
||||
<td>2026-05-05</td>
|
||||
<td><span class="tag tag-orange">即将过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">担架车</td>
|
||||
<td>DEV-2025-005</td>
|
||||
<td>急救设备</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部办公楼B1层</td>
|
||||
<td>2024-11-05</td>
|
||||
<td>2026-11-05</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td style="font-weight:500;">陈伟</td>
|
||||
<td>EMP-40056</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>135****5005</td>
|
||||
<td>AHA-2025-0078</td>
|
||||
<td>红十字救护员</td>
|
||||
<td>中国红十字会</td>
|
||||
<td>2025-01-18</td>
|
||||
<td>2027-01-18</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<span>共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
@@ -0,0 +1,352 @@
|
||||
<!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>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 可展开菜单 */
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 图片缩略图 */
|
||||
.thumb{width:60px;height:40px;border-radius:var(--radius-sm);object-fit:cover;background:#f0f0f0;border:1px solid var(--border);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item active">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>正常</option>
|
||||
<option>异常</option>
|
||||
<option>维修中</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增布点
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量导入
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看导入任务
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">布点管理列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 28 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备编号</th>
|
||||
<th>设备厂家</th>
|
||||
<th>设备型号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>布放地址</th>
|
||||
<th>布放图片</th>
|
||||
<th>设备状态</th>
|
||||
<th>设备电量</th>
|
||||
<th>状态更新日期</th>
|
||||
<th>摄像头监控</th>
|
||||
<th>责任人</th>
|
||||
<th>责任人电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C1A</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>安全环保部</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>95%</td>
|
||||
<td>2026-04-18</td>
|
||||
<td><span class="tag tag-green">已接入</span></td>
|
||||
<td>张明</td>
|
||||
<td>138****1001</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart FRx</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>88%</td>
|
||||
<td>2026-04-17</td>
|
||||
<td><span class="tag tag-green">已接入</span></td>
|
||||
<td>李华</td>
|
||||
<td>139****2002</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C2</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>调度中心1层</td>
|
||||
<td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td>
|
||||
<td><span class="tag tag-red">异常</span></td>
|
||||
<td>12%</td>
|
||||
<td>2026-04-15</td>
|
||||
<td><span class="tag tag-gray">未接入</span></td>
|
||||
<td>王强</td>
|
||||
<td>137****3003</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>卓尔</td>
|
||||
<td>AED Plus</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>值班室门口</td>
|
||||
<td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td>
|
||||
<td><span class="tag tag-orange">维修中</span></td>
|
||||
<td>0%</td>
|
||||
<td>2026-04-10</td>
|
||||
<td><span class="tag tag-green">已接入</span></td>
|
||||
<td>赵丽</td>
|
||||
<td>136****4004</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart HS1</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>体育馆入口</td>
|
||||
<td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>76%</td>
|
||||
<td>2026-04-19</td>
|
||||
<td><span class="tag tag-green">已接入</span></td>
|
||||
<td>陈伟</td>
|
||||
<td>135****5005</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!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>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}tbody tr:hover{background:#F8FBFF;}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item active">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增维护记录</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">维护记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 45 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备编号</th>
|
||||
<th>设备厂家</th>
|
||||
<th>设备型号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>布放地址</th>
|
||||
<th>维护内容</th>
|
||||
<th>维护人</th>
|
||||
<th>维护日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C1A</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>安全环保部</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td>更换电极片，清洁设备外壳</td>
|
||||
<td>张明</td>
|
||||
<td>2026-04-15</td>
|
||||
<td><div class="action-btns"><span class="link">查看</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart FRx</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td>电池电量检测，功能自检</td>
|
||||
<td>李华</td>
|
||||
<td>2026-04-12</td>
|
||||
<td><div class="action-btns"><span class="link">查看</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C2</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>调度中心1层</td>
|
||||
<td>更换电池，软件升级</td>
|
||||
<td>王强</td>
|
||||
<td>2026-04-10</td>
|
||||
<td><div class="action-btns"><span class="link">查看</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>卓尔</td>
|
||||
<td>AED Plus</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>值班室门口</td>
|
||||
<td>设备返厂维修，主板更换</td>
|
||||
<td>赵丽</td>
|
||||
<td>2026-04-08</td>
|
||||
<td><div class="action-btns"><span class="link">查看</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart HS1</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>体育馆入口</td>
|
||||
<td>日常巡检，设备状态正常</td>
|
||||
<td>陈伟</td>
|
||||
<td>2026-04-05</td>
|
||||
<td><div class="action-btns"><span class="link">查看</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 45 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - AED地图 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;height:calc(100vh - 56px);display:flex;flex-direction:column;}
|
||||
|
||||
/* 地图容器 */
|
||||
.map-container{flex:1;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;min-height:500px;}
|
||||
.map-bg{width:100%;height:100%;background:linear-gradient(135deg,#e8f4f8 0%,#d1e8d0 50%,#f0e6d3 100%);position:relative;}
|
||||
|
||||
/* 地图图标 */
|
||||
.aed-marker{position:absolute;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .2s;}
|
||||
.aed-marker:hover{transform:scale(1.15);}
|
||||
.aed-marker__icon{width:36px;height:36px;background:#FF4D4F;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(255,77,79,0.4);}
|
||||
.aed-marker__icon span{transform:rotate(45deg);color:#fff;font-size:10px;font-weight:700;}
|
||||
.aed-marker__label{margin-top:4px;font-size:10px;color:var(--text-secondary);background:rgba(255,255,255,0.9);padding:1px 6px;border-radius:8px;white-space:nowrap;}
|
||||
|
||||
/* 弹窗 */
|
||||
.map-popup{position:absolute;background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:16px;width:280px;z-index:10;display:none;}
|
||||
.map-popup.show{display:block;}
|
||||
.map-popup__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.map-popup__close{cursor:pointer;color:var(--text-placeholder);font-size:18px;line-height:1;}
|
||||
.map-popup__close:hover{color:var(--text-primary);}
|
||||
.map-popup__row{display:flex;margin-bottom:8px;font-size:var(--font-sm);}
|
||||
.map-popup__label{color:var(--text-secondary);width:80px;flex-shrink:0;}
|
||||
.map-popup__value{color:var(--text-primary);}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
|
||||
/* 地图道路模拟 */
|
||||
.map-road-h{position:absolute;height:2px;background:rgba(0,0,0,0.08);}
|
||||
.map-road-v{position:absolute;width:2px;background:rgba(0,0,0,0.08);}
|
||||
.map-label{position:absolute;font-size:11px;color:rgba(0,0,0,0.25);font-weight:500;}
|
||||
|
||||
/* 统计栏 */
|
||||
.map-stats{display:flex;gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:16px 24px;box-shadow:var(--shadow-sm);flex:1;display:flex;align-items:center;gap:12px;}
|
||||
.stat-card__icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;}
|
||||
.stat-card__icon--blue{background:var(--primary-light);color:var(--primary);}
|
||||
.stat-card__icon--green{background:#F6FFED;color:var(--success);}
|
||||
.stat-card__icon--red{background:#FFF1F0;color:var(--danger);}
|
||||
.stat-card__icon--orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.stat-card__info{display:flex;flex-direction:column;}
|
||||
.stat-card__num{font-size:var(--font-xl);font-weight:700;line-height:1.2;}
|
||||
.stat-card__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item active">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 统计栏 -->
|
||||
<div class="map-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon stat-card__icon--blue">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.6"/><path d="M7 10l2 2 4-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="stat-card__info"><span class="stat-card__num">32</span><span class="stat-card__label">设备总数</span></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon stat-card__icon--green">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.6"/><path d="M7 10l2 2 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="stat-card__info"><span class="stat-card__num">26</span><span class="stat-card__label">正常运行</span></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon stat-card__icon--red">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.6"/><path d="M10 7v4M10 13v.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="stat-card__info"><span class="stat-card__num">4</span><span class="stat-card__label">异常设备</span></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon stat-card__icon--orange">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 3a7 7 0 110 14 7 7 0 010-14z" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v5l3 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="stat-card__info"><span class="stat-card__num">2</span><span class="stat-card__label">维修中</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="map-container">
|
||||
<div class="map-bg">
|
||||
<!-- 模拟道路 -->
|
||||
<div class="map-road-h" style="top:30%;left:5%;width:90%;"></div>
|
||||
<div class="map-road-h" style="top:60%;left:10%;width:80%;"></div>
|
||||
<div class="map-road-v" style="left:25%;top:10%;height:80%;"></div>
|
||||
<div class="map-road-v" style="left:55%;top:5%;height:90%;"></div>
|
||||
<div class="map-road-v" style="left:80%;top:15%;height:70%;"></div>
|
||||
|
||||
<!-- 区域标签 -->
|
||||
<div class="map-label" style="top:12%;left:12%;">总部办公区</div>
|
||||
<div class="map-label" style="top:15%;left:60%;">生活服务区</div>
|
||||
<div class="map-label" style="top:70%;left:15%;">第一采油厂</div>
|
||||
<div class="map-label" style="top:45%;left:62%;">第二采油厂</div>
|
||||
<div class="map-label" style="top:75%;left:65%;">第三采油厂</div>
|
||||
|
||||
<!-- AED 图标标记 -->
|
||||
<div class="aed-marker" style="top:22%;left:15%;" onclick="document.getElementById('popup1').classList.add('show')">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">办公楼大厅</div>
|
||||
</div>
|
||||
<div class="aed-marker" style="top:25%;left:40%;" onclick="document.getElementById('popup2').classList.add('show')">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">职工食堂</div>
|
||||
</div>
|
||||
<div class="aed-marker" style="top:50%;left:30%;">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">会议中心</div>
|
||||
</div>
|
||||
<div class="aed-marker" style="top:40%;left:70%;">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">值班室</div>
|
||||
</div>
|
||||
<div class="aed-marker" style="top:68%;left:50%;">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">调度中心</div>
|
||||
</div>
|
||||
<div class="aed-marker" style="top:80%;left:75%;">
|
||||
<div class="aed-marker__icon"><span>AED</span></div>
|
||||
<div class="aed-marker__label">体育馆</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗示例 -->
|
||||
<div class="map-popup show" id="popup1" style="top:8%;left:22%;">
|
||||
<div class="map-popup__title">AED-2025-001 <span class="map-popup__close" onclick="this.closest('.map-popup').classList.remove('show')">×</span></div>
|
||||
<div class="map-popup__row"><span class="map-popup__label">厂家型号</span><span class="map-popup__value">迈瑞 BeneHeart C1A</span></div>
|
||||
<div class="map-popup__row"><span class="map-popup__label">布放地址</span><span class="map-popup__value">总部办公楼1层大厅</span></div>
|
||||
<div class="map-popup__row"><span class="map-popup__label">所属单位</span><span class="map-popup__value">公司机关·健康科</span></div>
|
||||
<div class="map-popup__row"><span class="map-popup__label">设备状态</span><span class="map-popup__value"><span class="tag tag-green">正常</span></span></div>
|
||||
<div class="map-popup__row"><span class="map-popup__label">责任人</span><span class="map-popup__value">张明 138****1001</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,241 @@
|
||||
<!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>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.thumb{width:60px;height:40px;border-radius:var(--radius-sm);background:#f0f0f0;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item active">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增培演记录</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">培演记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 12 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>设备编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>布放地址</th>
|
||||
<th>活动标题</th>
|
||||
<th>活动日期</th>
|
||||
<th>负责人</th>
|
||||
<th>参加人数</th>
|
||||
<th>签到表</th>
|
||||
<th>现场照片</th>
|
||||
<th>现场视频</th>
|
||||
<th>活动资料</th>
|
||||
<th>活动效果</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>安全环保部</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td>2026年Q1 AED使用培训</td>
|
||||
<td>2026-03-20</td>
|
||||
<td>张明</td>
|
||||
<td>45</td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><span class="link">播放</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td>AED应急演练（食堂场景）</td>
|
||||
<td>2026-03-15</td>
|
||||
<td>李华</td>
|
||||
<td>30</td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><span class="link">播放</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
<td><span class="tag tag-blue">良</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>调度中心1层</td>
|
||||
<td>新员工急救培训</td>
|
||||
<td>2026-02-28</td>
|
||||
<td>王强</td>
|
||||
<td>22</td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><span class="link">播放</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
<td><span class="tag tag-orange">中</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>体育馆入口</td>
|
||||
<td>体育馆AED使用演练</td>
|
||||
<td>2026-02-15</td>
|
||||
<td>陈伟</td>
|
||||
<td>60</td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><span class="link">播放</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>值班室门口</td>
|
||||
<td>值班人员AED操作考核</td>
|
||||
<td>2026-01-20</td>
|
||||
<td>赵丽</td>
|
||||
<td>18</td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><div class="thumb">图片</div></td>
|
||||
<td><span class="link">播放</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
<td><span class="tag tag-gray">差</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,231 @@
|
||||
<!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>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item active">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>所属单位：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option><option>第二采油厂</option><option>第三采油厂</option></select></div>
|
||||
<div class="filter-item"><label>所属部门：</label><select class="filter-select"><option>全部部门</option><option>安全环保部</option><option>生产运行部</option><option>综合管理部</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增应用记录</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">应用记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 8 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>布放地址</th>
|
||||
<th>使用日期</th>
|
||||
<th>被救治人</th>
|
||||
<th>症状(呼吸)</th>
|
||||
<th>症状(意识)</th>
|
||||
<th>使用人</th>
|
||||
<th>使用过程说明</th>
|
||||
<th>应用结果</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>安全环保部</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td>2026-04-18</td>
|
||||
<td>刘某某</td>
|
||||
<td>无呼吸</td>
|
||||
<td>无意识</td>
|
||||
<td>张明</td>
|
||||
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">发现患者倒地后立即取用AED，按语音提示实施电击除颤…</td>
|
||||
<td><span class="tag tag-green">救治成功</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>体育馆入口</td>
|
||||
<td>2026-03-25</td>
|
||||
<td>周某某</td>
|
||||
<td>有呼吸</td>
|
||||
<td>无意识</td>
|
||||
<td>陈伟</td>
|
||||
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">运动中突发晕厥，取用AED检测后提示无需电击，持续CPR…</td>
|
||||
<td><span class="tag tag-green">救治成功</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td>2026-02-10</td>
|
||||
<td>孙某某</td>
|
||||
<td>无呼吸</td>
|
||||
<td>无意识</td>
|
||||
<td>李华</td>
|
||||
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">就餐时突发心脏骤停，迅速取用AED进行两次电击除颤…</td>
|
||||
<td><span class="tag tag-red">救治失败</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>调度中心1层</td>
|
||||
<td>2026-01-15</td>
|
||||
<td>吴某某</td>
|
||||
<td>有呼吸</td>
|
||||
<td>有意识</td>
|
||||
<td>王强</td>
|
||||
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">员工突感胸闷不适，预防性取用AED待命，后自行恢复…</td>
|
||||
<td><span class="tag tag-green">救治成功</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>值班室门口</td>
|
||||
<td>2025-12-20</td>
|
||||
<td>郑某某</td>
|
||||
<td>无呼吸</td>
|
||||
<td>无意识</td>
|
||||
<td>赵丽</td>
|
||||
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">夜间值班时发现同事倒地，取用AED电击一次后恢复心跳…</td>
|
||||
<td><span class="tag tag-green">救治成功</span></td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED组网 | 健康长庆原型</title>
|
||||
<title>应急就医 - AED设备信息 - 设备管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
@@ -32,6 +32,17 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 可展开菜单 */
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
@@ -118,14 +129,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
@@ -153,11 +172,7 @@
|
||||
<input class="filter-input" type="text" placeholder="请输入设备编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>安装位置：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入安装位置">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
@@ -166,15 +181,7 @@
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>正常</option>
|
||||
<option>异常</option>
|
||||
<option>维修中</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -183,11 +190,23 @@
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增AED设备
|
||||
新增
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
批量导入
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看导入任务
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -203,13 +222,16 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备编号</th>
|
||||
<th>品牌型号</th>
|
||||
<th>安装位置</th>
|
||||
<th>设备厂家</th>
|
||||
<th>设备型号</th>
|
||||
<th>所属单位</th>
|
||||
<th>安装时间</th>
|
||||
<th>电极片到期时间</th>
|
||||
<th>电池到期时间</th>
|
||||
<th>设备状态</th>
|
||||
<th>所属部门</th>
|
||||
<th>设备类型</th>
|
||||
<th>入库日期</th>
|
||||
<th>管理部门</th>
|
||||
<th>管理人</th>
|
||||
<th>管理人电话</th>
|
||||
<th>厂家电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -217,62 +239,77 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>迈瑞 BeneHeart C1A</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C1A</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>安全环保部</td>
|
||||
<td>立式</td>
|
||||
<td>2025-03-15</td>
|
||||
<td>2027-03-15</td>
|
||||
<td>2029-03-15</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>安全环保部</td>
|
||||
<td>张明</td>
|
||||
<td>138****1001</td>
|
||||
<td>400-700-8899</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>飞利浦 HeartStart FRx</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart FRx</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>综合管理部</td>
|
||||
<td>挂式</td>
|
||||
<td>2025-04-01</td>
|
||||
<td>2027-04-01</td>
|
||||
<td>2029-04-01</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>综合管理部</td>
|
||||
<td>李华</td>
|
||||
<td>139****2002</td>
|
||||
<td>400-880-1234</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>迈瑞 BeneHeart C2</td>
|
||||
<td>第一采油厂调度中心</td>
|
||||
<td>迈瑞</td>
|
||||
<td>BeneHeart C2</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>生产运行部</td>
|
||||
<td>立式</td>
|
||||
<td>2025-05-10</td>
|
||||
<td>2027-05-10</td>
|
||||
<td>2029-05-10</td>
|
||||
<td><span class="tag tag-red">异常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>安全环保部</td>
|
||||
<td>王强</td>
|
||||
<td>137****3003</td>
|
||||
<td>400-700-8899</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>卓尔 AED Plus</td>
|
||||
<td>第二采油厂值班室</td>
|
||||
<td>卓尔</td>
|
||||
<td>AED Plus</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td>挂式</td>
|
||||
<td>2025-06-20</td>
|
||||
<td>2027-06-20</td>
|
||||
<td>2029-06-20</td>
|
||||
<td><span class="tag tag-orange">维修中</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>生产运行部</td>
|
||||
<td>赵丽</td>
|
||||
<td>136****4004</td>
|
||||
<td>400-990-5678</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>飞利浦 HeartStart HS1</td>
|
||||
<td>第三采油厂体育馆</td>
|
||||
<td>飞利浦</td>
|
||||
<td>HeartStart HS1</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td>立式</td>
|
||||
<td>2025-07-08</td>
|
||||
<td>2027-07-08</td>
|
||||
<td>2029-07-08</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td>安全环保部</td>
|
||||
<td>陈伟</td>
|
||||
<td>135****5005</td>
|
||||
<td>400-880-1234</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -32,6 +32,12 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
@@ -118,14 +124,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<!-- 当前页：救护车信息 -->
|
||||
<a href="resource-ambulance.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
@@ -151,12 +165,12 @@
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>车牌号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入车牌号">
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>请选择</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
@@ -164,12 +178,21 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>车辆状态：</label>
|
||||
<label>所属医疗点：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>在线</option>
|
||||
<option>离线</option>
|
||||
<option>维修中</option>
|
||||
<option>请选择</option>
|
||||
<option>长庆油田总部医疗点</option>
|
||||
<option>第一采油厂南梁健康管理服务中心</option>
|
||||
<option>第二采油厂南梁健康管理服务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>救护类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>转运型</option>
|
||||
<option>监护型</option>
|
||||
<option>急救型</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -179,20 +202,20 @@
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增救护车
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-primary" style="background:#fff;color:var(--primary);border:1px solid var(--primary);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M7 4.5v5M4.5 7h5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">救护车列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 18 条</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -200,87 +223,105 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>车牌号</th>
|
||||
<th>车辆类型</th>
|
||||
<th>救护类型</th>
|
||||
<th>车型</th>
|
||||
<th>所属医疗点</th>
|
||||
<th>所属单位</th>
|
||||
<th>驾驶员</th>
|
||||
<th>联系电话</th>
|
||||
<th>购置时间</th>
|
||||
<th>年检到期</th>
|
||||
<th>状态</th>
|
||||
<th>驾驶员姓名</th>
|
||||
<th>驾驶员联系电话</th>
|
||||
<th>覆盖区域</th>
|
||||
<th>覆盖人数</th>
|
||||
<th>是否安装GPS</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">陕A·120E1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>张志强</td>
|
||||
<td>138****5621</td>
|
||||
<td>2023-05-10</td>
|
||||
<td>2026-05-10</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td style="font-weight:500;">宁ALY120</td>
|
||||
<td>转运型</td>
|
||||
<td>急救转运</td>
|
||||
<td>第二采油厂南梁健康管理服务中心</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>郭青</td>
|
||||
<td>13402990768</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>522</td>
|
||||
<td>否</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">陕A·120E2</td>
|
||||
<td>急救型救护车</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>李国栋</td>
|
||||
<td>139****3782</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>2027-01-15</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td style="font-weight:500;">陕K·120E1</td>
|
||||
<td>监护型</td>
|
||||
<td>急救监护</td>
|
||||
<td>第一采油厂南梁健康管理服务中心</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>王建军</td>
|
||||
<td>13709156823</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>480</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕K·120F1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>王建军</td>
|
||||
<td>137****9156</td>
|
||||
<td>2022-08-20</td>
|
||||
<td>2025-08-20</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td style="font-weight:500;">陕A·120F3</td>
|
||||
<td>急救型</td>
|
||||
<td>急救转运</td>
|
||||
<td>长庆油田总部医疗点</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>张志强</td>
|
||||
<td>13856217890</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>615</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">陕K·120F2</td>
|
||||
<td>急救型救护车</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>赵明辉</td>
|
||||
<td>136****4829</td>
|
||||
<td>2023-11-05</td>
|
||||
<td>2026-11-05</td>
|
||||
<td><span class="tag tag-orange">维修中</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td style="font-weight:500;">陕K·120G2</td>
|
||||
<td>转运型</td>
|
||||
<td>急救转运</td>
|
||||
<td>第三采油厂健康管理服务中心</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>陈伟东</td>
|
||||
<td>13572134567</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>398</td>
|
||||
<td>否</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">陕K·120G1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>陈伟东</td>
|
||||
<td>135****7213</td>
|
||||
<td>2024-03-22</td>
|
||||
<td>2027-03-22</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td style="font-weight:500;">陕K·120F2</td>
|
||||
<td>监护型</td>
|
||||
<td>急救监护</td>
|
||||
<td>第二采油厂南梁健康管理服务中心</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>赵明辉</td>
|
||||
<td>13648291035</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>522</td>
|
||||
<td>是</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 18 条</span>
|
||||
<span style="color:var(--text-placeholder);flex:1;">救护车数据来源于一线医疗点模块，由医护人员在一线医疗点进行维护，此模块仅进行查看</span>
|
||||
<span>共 243 条</span>
|
||||
<span>显示 10 条 ▾</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">1</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">10</button>
|
||||
<button class="page-btn active">11</button>
|
||||
<button class="page-btn">12</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">50</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -32,6 +32,12 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
@@ -124,14 +130,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
|
||||
@@ -25,6 +25,12 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
@@ -103,14 +109,22 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
|
||||
@@ -32,6 +32,12 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
@@ -118,14 +124,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
|
||||
@@ -25,6 +25,12 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
@@ -68,6 +74,40 @@
|
||||
.level-3a{color:#722ED1;}
|
||||
.level-3{color:var(--primary);}
|
||||
.level-2{color:var(--success);}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;opacity:0;visibility:hidden;transition:all .3s;}
|
||||
.drawer-mask.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:-480px;bottom:0;width:480px;background:#fff;z-index:201;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:20px;}
|
||||
.drawer__close:hover{background:var(--background);color:var(--text-primary);}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px;}
|
||||
.form-group{margin-bottom:24px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
|
||||
.form-label .required{color:var(--danger);}
|
||||
.form-control{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;}
|
||||
.form-control:focus{border-color:var(--primary);}
|
||||
.form-textarea{width:100%;min-height:72px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;background:#fff;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.info-card{background:var(--primary-light);border-radius:var(--radius-sm);padding:12px 16px;margin-top:8px;}
|
||||
.info-card__row{display:flex;justify-content:space-between;font-size:var(--font-sm);line-height:1.8;}
|
||||
.info-card__label{color:var(--text-secondary);}
|
||||
.info-card__value{color:var(--text-primary);font-weight:500;}
|
||||
.switch-row{display:flex;align-items:center;gap:10px;}
|
||||
.switch-row span{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 搜索下拉 */
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;z-index:10;display:none;}
|
||||
.search-select__dropdown.show{display:block;}
|
||||
.search-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;}
|
||||
.search-select__option:hover{background:var(--primary-light);}
|
||||
.search-select__option.selected{color:var(--primary);font-weight:500;}
|
||||
.search-select__empty{padding:16px 12px;font-size:var(--font-sm);color:var(--text-placeholder);text-align:center;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -102,14 +142,22 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
@@ -150,7 +198,7 @@
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<button class="btn btn-primary" onclick="openDrawer()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增医院
|
||||
</button>
|
||||
@@ -163,7 +211,6 @@
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">医院列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 48 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
@@ -174,7 +221,8 @@
|
||||
<th>等级</th>
|
||||
<th>地址</th>
|
||||
<th>联系电话</th>
|
||||
<th>急救科室数</th>
|
||||
<th>医院简介</th>
|
||||
<th>应急专长</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
@@ -186,7 +234,8 @@
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>029-85323112</td>
|
||||
<td>12</td>
|
||||
<td>综合性三甲教学医院，西北地区医疗中心</td>
|
||||
<td>心脑血管急救、创伤外科</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
@@ -196,7 +245,8 @@
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省西安市未央区</td>
|
||||
<td>029-86518000</td>
|
||||
<td>8</td>
|
||||
<td>长庆油田直属职工医疗保障机构</td>
|
||||
<td>职业病防治、常规急救</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
@@ -206,7 +256,8 @@
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市碑林区</td>
|
||||
<td>029-85251331</td>
|
||||
<td>15</td>
|
||||
<td>省属大型综合三甲医院</td>
|
||||
<td>急诊重症、中毒救治</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
@@ -216,7 +267,8 @@
|
||||
<td><span class="hospital-level level-2">二级甲等</span></td>
|
||||
<td>甘肃省庆阳市西峰区</td>
|
||||
<td>0934-8612116</td>
|
||||
<td>5</td>
|
||||
<td>庆阳地区综合性二甲医院</td>
|
||||
<td>基层急救、骨伤科</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
@@ -226,7 +278,8 @@
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省延安市宝塔区</td>
|
||||
<td>0911-2881111</td>
|
||||
<td>10</td>
|
||||
<td>延安区域重点综合医院</td>
|
||||
<td>野外急救、高原病救治</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
@@ -246,5 +299,109 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- 新增医院抽屉 -->
|
||||
<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">新增医院</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">×</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<!-- 选择医院 -->
|
||||
<div class="form-group">
|
||||
<div class="form-label"><span class="required">*</span> 选择医院</div>
|
||||
<div class="search-select" id="hospitalSelect">
|
||||
<input class="search-select__input" id="hospitalSearch" type="text" placeholder="请输入医院名称搜索" autocomplete="off" onfocus="showDropdown()" oninput="filterHospitals()">
|
||||
<div class="search-select__dropdown" id="hospitalDropdown"></div>
|
||||
</div>
|
||||
<div class="info-card" id="hospitalInfo" style="display:none;">
|
||||
<div class="info-card__row">
|
||||
<span class="info-card__label">等级：</span>
|
||||
<span class="info-card__value" id="infoLevel"></span>
|
||||
</div>
|
||||
<div class="info-card__row">
|
||||
<span class="info-card__label">地址：</span>
|
||||
<span class="info-card__value" id="infoAddr"></span>
|
||||
</div>
|
||||
<div class="info-card__row">
|
||||
<!-- <span class="info-card__label">联系电话：</span>-->
|
||||
<!-- <span class="info-card__value" id="infoPhone"></span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 应急专长 -->
|
||||
<div class="form-group">
|
||||
<div class="form-label"><span class="required">*</span> 应急专长</div>
|
||||
<textarea class="form-textarea" placeholder="请输入应急专长，如：心脑血管急救、创伤外科"></textarea>
|
||||
</div>
|
||||
<!-- 状态 -->
|
||||
<div class="form-group">
|
||||
<div class="form-label">状态</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<span>移动端是否显示</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeDrawer()">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 内置医院数据 */
|
||||
var hospitals=[
|
||||
{name:'西安交通大学第一附属医院',level:'三级甲等',addr:'陕西省西安市雁塔区',phone:'029-85323112'},
|
||||
{name:'西安交通大学第二附属医院',level:'三级甲等',addr:'陕西省西安市新城区',phone:'029-87679000'},
|
||||
{name:'长庆油田职工医院',level:'三级',addr:'陕西省西安市未央区',phone:'029-86518000'},
|
||||
{name:'陕西省人民医院',level:'三级甲等',addr:'陕西省西安市碑林区',phone:'029-85251331'},
|
||||
{name:'空军军医大学西京医院',level:'三级甲等',addr:'陕西省西安市新城区',phone:'029-84775507'},
|
||||
{name:'空军军医大学唐都医院',level:'三级甲等',addr:'陕西省西安市灞桥区',phone:'029-84777777'},
|
||||
{name:'西安市中心医院',level:'三级甲等',addr:'陕西省西安市新城区',phone:'029-87268355'},
|
||||
{name:'庆阳市人民医院',level:'二级甲等',addr:'甘肃省庆阳市西峰区',phone:'0934-8612116'},
|
||||
{name:'延安大学附属医院',level:'三级',addr:'陕西省延安市宝塔区',phone:'0911-2881111'},
|
||||
{name:'西安市第四医院',level:'三级甲等',addr:'陕西省西安市碑林区',phone:'029-87480721'},
|
||||
{name:'陕西中医药大学附属医院',level:'三级甲等',addr:'陕西省咸阳市秦都区',phone:'029-33320001'}
|
||||
];
|
||||
|
||||
/* 打开/关闭抽屉 */
|
||||
function openDrawer(){
|
||||
document.getElementById('drawerMask').classList.add('open');
|
||||
document.getElementById('drawer').classList.add('open');
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawerMask').classList.remove('open');
|
||||
document.getElementById('drawer').classList.remove('open');
|
||||
/* 重置表单 */
|
||||
document.getElementById('hospitalSearch').value='';
|
||||
document.getElementById('hospitalInfo').style.display='none';
|
||||
document.getElementById('hospitalDropdown').classList.remove('show');
|
||||
}
|
||||
|
||||
/* 搜索下拉 */
|
||||
function showDropdown(){filterHospitals();}
|
||||
function filterHospitals(){
|
||||
var kw=document.getElementById('hospitalSearch').value.trim().toLowerCase();
|
||||
var dd=document.getElementById('hospitalDropdown');
|
||||
var list=hospitals.filter(function(h){return !kw||h.name.toLowerCase().indexOf(kw)!==-1;});
|
||||
if(!list.length){dd.innerHTML='<div class="search-select__empty">无匹配医院</div>';dd.classList.add('show');return;}
|
||||
dd.innerHTML=list.map(function(h){return '<div class="search-select__option" onclick="selectHospital(\''+h.name+'\')">'+h.name+'<span style="float:right;color:var(--text-placeholder);font-size:11px;">'+h.level+'</span></div>';}).join('');
|
||||
dd.classList.add('show');
|
||||
}
|
||||
function selectHospital(name){
|
||||
var h=hospitals.find(function(x){return x.name===name;});
|
||||
if(!h)return;
|
||||
document.getElementById('hospitalSearch').value=h.name;
|
||||
document.getElementById('hospitalDropdown').classList.remove('show');
|
||||
document.getElementById('infoLevel').textContent=h.level;
|
||||
document.getElementById('infoAddr').textContent=h.addr;
|
||||
document.getElementById('hospitalInfo').style.display='block';
|
||||
}
|
||||
/* 点击外部关闭下拉 */
|
||||
document.addEventListener('click',function(e){
|
||||
var sel=document.getElementById('hospitalSelect');
|
||||
if(sel&&!sel.contains(e.target)){document.getElementById('hospitalDropdown').classList.remove('show');}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -25,6 +25,12 @@
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
@@ -88,8 +94,19 @@
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item active"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<a href="resource-aed.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED组网</a>
|
||||
<a href="resource-device.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>设备管理</a>
|
||||
<div class="sidebar-parent" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
@@ -105,36 +122,45 @@
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select"><option>全部</option><option>公司机关</option><option>采油一厂</option><option>采油二厂</option></select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属医院：</label>
|
||||
<select class="filter-select"><option>全部</option><option>宝石花医院</option><option>西京医院</option><option>长庆油田医院</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增医疗点</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">医疗点列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 36 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>序号</th><th>医疗点名称</th><th>所属单位</th><th>地址</th><th>联系人</th><th>联系电话</th><th>医护人员数</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<thead><tr><th>序号</th><th>医疗点名称</th><th>所属单位</th><th>所属医院</th><th>地址</th><th>负责人</th><th>联系电话</th><th>医护人员数量</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td style="font-weight:500;">公司机关医疗点</td><td>公司机关</td><td>西安市未央区长庆大厦1楼</td><td>王医生</td><td>029-86518001</td><td>3</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">采油一厂医疗点</td><td>采油一厂</td><td>庆阳市西峰区采油一厂办公楼</td><td>李医生</td><td>0934-8612001</td><td>5</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">采油二厂医疗点</td><td>采油二厂</td><td>庆阳市庆城县采油二厂基地</td><td>张医生</td><td>0934-3221001</td><td>4</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">采气一厂医疗点</td><td>采气一厂</td><td>榆林市靖边县采气一厂</td><td>赵护士</td><td>0912-4837001</td><td>2</td><td><div class="switch" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">输油处医疗点</td><td>输油处</td><td>西安市灞桥区输油处办公区</td><td>刘医生</td><td>029-83518001</td><td>2</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>1</td><td style="font-weight:500;">公司机关医疗点</td><td>公司机关</td><td>宝石花医院</td><td>西安市未央区长庆大厦1楼</td><td>王医生</td><td>029-86518001</td><td>3</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">采油一厂医疗点</td><td>采油一厂</td><td>宝石花医院</td><td>庆阳市西峰区采油一厂办公楼</td><td>李医生</td><td>0934-8612001</td><td>5</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">采油二厂医疗点</td><td>采油二厂</td><td>宝石花医院</td><td>庆阳市庆城县采油二厂基地</td><td>张医生</td><td>0934-3221001</td><td>4</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">采气一厂医疗点</td><td>采气一厂</td><td>宝石花医院</td><td>榆林市靖边县采气一厂</td><td>赵护士</td><td>0912-4837001</td><td>2</td><td><div class="switch" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">输油处医疗点</td><td>输油处</td><td>宝石花医院</td><td>西安市灞桥区输油处办公区</td><td>刘医生</td><td>029-83518001</td><td>2</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<span style="color:var(--text-placeholder);flex:1;">医疗点数据来源于一线医疗点模块，由医护人员在一线医疗点进行维护，此处仅支持查看</span>
|
||||
<span>共 36 条</span>
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">4</button><button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -183,7 +183,7 @@
|
||||
<th style="min-width:110px;">所属部门</th>
|
||||
<th style="min-width:110px;">咨询专家次数</th>
|
||||
<th style="min-width:120px;">咨询小助手次数</th>
|
||||
<th style="min-width:110px;">咨询费用（元）</th>
|
||||
<!-- <th style="min-width:110px;">咨询费用（元）</th>-->
|
||||
<!-- <th class="col-fixed col-end">操作</th>-->
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -191,50 +191,50 @@
|
||||
<tr>
|
||||
<td class="col-fixed col-no">1</td>
|
||||
<td>张伟</td><td>EMP001</td><td>安全生产部</td>
|
||||
<td>18</td><td>42</td><td><span class="amount">¥ 360</span></td>
|
||||
<td>18</td><td>42</td>
|
||||
<!-- [交互] 点击查看个人明细，弹窗加载 archive-personal-detail.html -->
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP001')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">2</td>
|
||||
<td>李娜</td><td>EMP015</td><td>生产一队</td>
|
||||
<td>15</td><td>38</td><td><span class="amount">¥ 300</span></td>
|
||||
<td>15</td><td>38</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP015')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">3</td>
|
||||
<td>王强</td><td>EMP023</td><td>生产二队</td>
|
||||
<td>12</td><td>35</td><td><span class="amount">¥ 240</span></td>
|
||||
<td>12</td><td>35</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP023')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">4</td>
|
||||
<td>赵敏</td><td>EMP034</td><td>综合管理部</td>
|
||||
<td>10</td><td>28</td><td><span class="amount">¥ 200</span></td>
|
||||
<td>10</td><td>28</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP034')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">5</td>
|
||||
<td>刘洋</td><td>EMP045</td><td>安全环保部</td>
|
||||
<td>9</td><td>25</td><td><span class="amount">¥ 180</span></td>
|
||||
<td>9</td><td>25</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP045')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">6</td>
|
||||
<td>陈静</td><td>EMP056</td><td>生产一队</td>
|
||||
<td>8</td><td>22</td><td><span class="amount">¥ 160</span></td>
|
||||
<td>8</td><td>22</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP056')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">7</td>
|
||||
<td>孙磊</td><td>EMP067</td><td>生产二队</td>
|
||||
<td>7</td><td>19</td><td><span class="amount">¥ 140</span></td>
|
||||
<td>7</td><td>19</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP067')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">8</td>
|
||||
<td>周芳</td><td>EMP078</td><td>综合管理部</td>
|
||||
<td>6</td><td>16</td><td><span class="amount">¥ 120</span></td>
|
||||
<td>6</td><td>16</td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP078')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -283,8 +283,8 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M2 13c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
咨询人档案
|
||||
</button>
|
||||
<!-- [交互] 点击结束当前咨询；已结束时置灰不可点 -->
|
||||
<button class="btn btn-default btn-sm" id="btnEndConsult" style="color:var(--danger);border-color:var(--danger);" onclick="showEndConfirm()">
|
||||
<!-- [交互] 点击结束当前咨询；已结束时置灰不可点；咨询专家类型时隐藏 -->
|
||||
<button class="btn btn-default btn-sm" id="btnEndConsult" style="display:none;color:var(--danger);border-color:var(--danger);" onclick="showEndConfirm()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.2"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
结束咨询
|
||||
</button>
|
||||
@@ -367,7 +367,7 @@
|
||||
<div class="chat-footer">
|
||||
<div class="chat-toolbar">
|
||||
<!-- [交互] 点击打开选择专家弹窗 -->
|
||||
<button class="toolbar-btn" onclick="openOverlay('select-expert-dialog.html',720,600)">
|
||||
<button class="toolbar-btn" id="btnSendExpert" style="display:none;" onclick="openOverlay('select-expert-dialog.html',720,600)">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M3 15c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.2"/><path d="M12 2v4M10 4h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
发送专家
|
||||
</button>
|
||||
@@ -566,6 +566,16 @@ function selectConv(el, idx) {
|
||||
btnEnd.style.background = '';
|
||||
}
|
||||
|
||||
/* 咨询专家类型：隐藏"结束咨询"和"发送专家" */
|
||||
var btnSendExpert = document.getElementById('btnSendExpert');
|
||||
if (status.type === 'expert') {
|
||||
btnEnd.style.display = 'none';
|
||||
btnSendExpert.style.display = 'none';
|
||||
} else {
|
||||
btnEnd.style.display = '';
|
||||
btnSendExpert.style.display = '';
|
||||
}
|
||||
|
||||
/* 切换聊天内容 */
|
||||
var body = document.getElementById('chatBody');
|
||||
if (convContents[idx]) {
|
||||
|
||||
@@ -283,7 +283,7 @@
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">8</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409008</td><td class="col-fixed col-f3">周华</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP007</td><td>采油一厂</td><td>安全部</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td><td><span class="tag tag-orange">待回复</span></td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td><td><span class="tag tag-orange">已超时</span></td>
|
||||
<td>刘医生</td><td>主治医师</td><td>长庆医院</td><td>呼吸科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-09 14:30</td><td>—</td><td>—</td><td>—</td><td>—</td>
|
||||
@@ -431,7 +431,7 @@
|
||||
<td class="col-fixed col-f3">刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td><td>生产部</td><td>健康小助手</td>
|
||||
<td><span class="tag tag-orange">待回复</span></td>
|
||||
<td><span class="tag tag-orange">已超时</span></td>
|
||||
<td>2026-04-08 14:55</td><td>—</td><td>—</td><td>6分钟</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
@@ -491,8 +491,8 @@ function toggleExpertFilter() {
|
||||
|
||||
/* 专家咨询状态联动 */
|
||||
var expertStatusMap = {
|
||||
'text': ['待回复','进行中','已完成'],
|
||||
'video': ['待确认','待开始','已完成','已取消','已拒绝']
|
||||
'text': ['已超时','进行中','已完成'],
|
||||
'video': ['待确认','待开始','进行中','已完成','已取消','已拒绝']
|
||||
};
|
||||
function updateExpertStatus() {
|
||||
var type = document.getElementById('expertTypeSelect').value;
|
||||
|
||||
@@ -42,53 +42,54 @@
|
||||
| 2 | | 专家对话详情 | history-expert-detail.html | 页面 |
|
||||
| 3 | | 视频详情-待确认 | video-detail-pending-confirm.html | 页面 |
|
||||
| 4 | | 视频详情-待开始 | video-detail-pending-start.html | 页面 |
|
||||
| 5 | | 视频详情-已完成 | video-detail-completed.html | 页面 |
|
||||
| 6 | | 视频详情-已拒绝 | video-detail-rejected.html | 页面 |
|
||||
| 7 | | 视频详情-已取消 | video-detail-cancelled.html | 页面 |
|
||||
| 8 | | 小助手咨询记录 | history-assistant.html | 页面 |
|
||||
| 9 | | 小助手对话详情 | history-assistant-detail.html | 页面 |
|
||||
| 10 | | 用户评价 | history-evaluation.html | 页面 |
|
||||
| 11 | 咨询档案 | 咨询档案列表 | consult-record.html | 页面 |
|
||||
| 12 | | 咨询档案详情 | consult-record-detail.html | 页面 |
|
||||
| 13 | 专家咨询统计 | 专家咨询统计 | expert-statistics.html | 页面 |
|
||||
| 14 | 单位咨询统计 | 单位咨询统计 | unit-statistics.html | 页面 |
|
||||
| 5 | | 视频详情-进行中 | video-detail-in-progress.html | 页面 |
|
||||
| 6 | | 视频详情-已完成 | video-detail-completed.html | 页面 |
|
||||
| 7 | | 视频详情-已拒绝 | video-detail-rejected.html | 页面 |
|
||||
| 8 | | 视频详情-已取消 | video-detail-cancelled.html | 页面 |
|
||||
| 9 | | 小助手咨询记录 | history-assistant.html | 页面 |
|
||||
| 10 | | 小助手对话详情 | history-assistant-detail.html | 页面 |
|
||||
| 11 | | 用户评价 | history-evaluation.html | 页面 |
|
||||
| 12 | 咨询档案 | 咨询档案列表 | consult-record.html | 页面 |
|
||||
| 13 | | 咨询档案详情 | consult-record-detail.html | 页面 |
|
||||
| 14 | 专家咨询统计 | 专家咨询统计 | expert-statistics.html | 页面 |
|
||||
| 15 | 单位咨询统计 | 单位咨询统计 | unit-statistics.html | 页面 |
|
||||
|
||||
### 档案
|
||||
|
||||
| 序号 | 二级菜单 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|----------|-----------|------|------|
|
||||
| 15 | 个人咨询数据 | 个人咨询数据列表 | archive-personal.html | 页面 |
|
||||
| 16 | | 员工咨询明细 | archive-personal-detail.html | 页面 |
|
||||
| 17 | 单位报表数据 | 单位报表数据列表 | archive-unit.html | 页面 |
|
||||
| 18 | | 单位报表明细 | archive-unit-detail.html | 页面 |
|
||||
| 16 | 个人咨询数据 | 个人咨询数据列表 | archive-personal.html | 页面 |
|
||||
| 17 | | 员工咨询明细 | archive-personal-detail.html | 页面 |
|
||||
| 18 | 单位报表数据 | 单位报表数据列表 | archive-unit.html | 页面 |
|
||||
| 19 | | 单位报表明细 | archive-unit-detail.html | 页面 |
|
||||
|
||||
### 异常事件
|
||||
|
||||
| 序号 | 二级菜单 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|----------|-----------|------|------|
|
||||
| 19 | 异常数据 | 异常数据列表 | exception-dirty.html | 页面 |
|
||||
| 20 | 异常数据 | 异常数据列表 | exception-dirty.html | 页面 |
|
||||
|
||||
### 基础配置
|
||||
|
||||
| 序号 | 二级菜单 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|----------|-----------|------|------|
|
||||
| 20 | 医院配置 | 医院配置列表 | config-hospital.html | 页面 |
|
||||
| 21 | | 医院配置弹窗 | config-hospital-dialog.html | 弹窗 |
|
||||
| 22 | 科室配置 | 科室配置列表 | config-department.html | 页面 |
|
||||
| 23 | | 科室配置弹窗 | config-department-dialog.html | 弹窗 |
|
||||
| 24 | 疾病配置 | 疾病配置列表 | config-disease.html | 页面 |
|
||||
| 25 | | 疾病配置弹窗 | config-disease-dialog.html | 弹窗 |
|
||||
| 26 | 咨询须知 | 咨询须知编辑 | config-notice.html | 页面 |
|
||||
| 27 | 常用语管理 | 常用语管理列表 | config-phrase.html | 页面 |
|
||||
| 28 | | 常用语弹窗 | config-phrase-dialog.html | 弹窗 |
|
||||
| 21 | 医院配置 | 医院配置列表 | config-hospital.html | 页面 |
|
||||
| 22 | | 医院配置弹窗 | config-hospital-dialog.html | 弹窗 |
|
||||
| 23 | 科室配置 | 科室配置列表 | config-department.html | 页面 |
|
||||
| 24 | | 科室配置弹窗 | config-department-dialog.html | 弹窗 |
|
||||
| 25 | 疾病配置 | 疾病配置列表 | config-disease.html | 页面 |
|
||||
| 26 | | 疾病配置弹窗 | config-disease-dialog.html | 弹窗 |
|
||||
| 27 | 咨询须知 | 咨询须知编辑 | config-notice.html | 页面 |
|
||||
| 28 | 常用语管理 | 常用语管理列表 | config-phrase.html | 页面 |
|
||||
| 29 | | 常用语弹窗 | config-phrase-dialog.html | 弹窗 |
|
||||
|
||||
### 咨询结算
|
||||
|
||||
| 序号 | 二级菜单 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|----------|-----------|------|------|
|
||||
| 29 | 咨询结算 | 咨询结算列表 | settlement.html | 页面 |
|
||||
| 30 | | 新增/编辑结算 | settlement-add.html | 页面 |
|
||||
| 31 | | 结算报表 | settlement-report.html | 页面 |
|
||||
| 30 | 咨询结算 | 咨询结算列表 | settlement.html | 页面 |
|
||||
| 31 | | 新增/编辑结算 | settlement-add.html | 页面 |
|
||||
| 32 | | 结算报表 | settlement-report.html | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -109,7 +110,7 @@
|
||||
**表格列：** 序号、咨询单号、姓名、员工工号、所属单位、所属部门、咨询类型、咨询状态、咨询专家、专家职称、专家医院、专家科室、专家类型、发起咨询时间、首次回复时间、咨询完成时间、咨询时长、评分（星级）、操作
|
||||
|
||||
**业务规则：**
|
||||
- 咨询状态随咨询类型联动：图文咨询状态为"待回复/进行中/已完成/已超时"；视频咨询状态为"待确认/待开始/已完成/已取消/已拒绝"
|
||||
- 咨询状态随咨询类型联动：图文咨询状态为"待回复/进行中/已完成/已超时"；视频咨询状态为"待确认/待开始/进行中/已完成/已取消/已拒绝"
|
||||
- 序号、咨询单号、员工信息固定在表格左侧，操作列固定在右侧
|
||||
- 分页支持 10/20/50/100 条每页切换
|
||||
|
||||
@@ -138,15 +139,16 @@
|
||||
|
||||
---
|
||||
|
||||
### 3-7. 视频咨询详情（5种状态页面）
|
||||
### 3-8. 视频咨询详情（6种状态页面）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
视频咨询详情为同一页面的5种状态变体，共享统一的信息展示结构，根据咨询状态展示不同的附加信息。
|
||||
视频咨询详情为同一页面的6种状态变体，共享统一的信息展示结构，根据咨询状态展示不同的附加信息。
|
||||
|
||||
**通用结构：**
|
||||
- 顶部标题栏：左侧"视频咨询详情"标题 + 右侧状态标签
|
||||
@@ -163,6 +165,7 @@
|
||||
|------|--------|----------|----------|-----------|
|
||||
| 待确认 | video-detail-pending-confirm.html | 橙黄 | 无 | 蓝色 |
|
||||
| 待开始 | video-detail-pending-start.html | 蓝色 | 无 | 蓝色 |
|
||||
| 进行中 | video-detail-in-progress.html | 蓝色 | 通话状态卡片（视频图标+拨打/结束时间+通话时长） | 蓝色 |
|
||||
| 已完成 | video-detail-completed.html | 绿色 | 统计行（咨询时长+员工评分）+ 时间卡片（拨打/结束时间） | 蓝色 |
|
||||
| 已拒绝 | video-detail-rejected.html | 红色 | 拒绝原因卡片（拒绝时间+拒绝原因） | 红色 |
|
||||
| 已取消 | video-detail-cancelled.html | 灰色 | 取消原因卡片（取消人+取消时间+取消原因） | 灰色 |
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
@@ -213,6 +214,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询状态</label>
|
||||
<select class="filter-select" >
|
||||
<option>全部状态</option>
|
||||
<option>待回复</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
<option>已超时</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>发起咨询时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
@@ -270,7 +281,7 @@
|
||||
<td>采油一厂</td>
|
||||
<td>心血管科</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td><span class="tag tag-gray">已超时</span></td>
|
||||
<td>2026-04-09 08:30</td>
|
||||
<td>2026-04-09 08:35</td>
|
||||
<td>2026-04-09 08:38</td>
|
||||
@@ -423,6 +434,10 @@ function openChat(name, assistant, time) {
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">发起咨询时间</div>
|
||||
<div class="modal-info-value">${time}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">咨询状态</div>
|
||||
<div class="modal-info-value">进行中</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -546,6 +546,27 @@
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('何军','张医生','主治医师','长庆医院','神经内科','2026-04-09 16:00','待开始')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">11</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409011</td>
|
||||
<td class="col-fixed col-fixed-3">马丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP011</td>
|
||||
<td>采油三厂</td>
|
||||
<td>技术部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>李医生</td>
|
||||
<td>主任医师</td>
|
||||
<td>长庆医院</td>
|
||||
<td>心血管内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-09 16:30</td>
|
||||
<td>2026-04-09 16:35</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('马丽','李医生','主任医师','长庆医院','心血管内科','2026-04-09 16:30','进行中')">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -611,7 +632,7 @@ const deptMap = {
|
||||
// 咨询状态映射
|
||||
const consultStatusMap = {
|
||||
'text': ['待回复', '进行中', '已完成', '已超时'],
|
||||
'video': ['待确认', '待开始', '已完成', '已取消', '已拒绝']
|
||||
'video': ['待确认', '待开始', '进行中', '已取消', '已完成', '已拒绝']
|
||||
};
|
||||
|
||||
function updateConsultStatus() {
|
||||
@@ -675,6 +696,7 @@ function openDetail(name, expert, title, hospital, dept, time, status) {
|
||||
var fileMap = {
|
||||
'待确认': 'video-detail-pending-confirm.html',
|
||||
'待开始': 'video-detail-pending-start.html',
|
||||
'进行中': 'video-detail-in-progress.html',
|
||||
'已完成': 'video-detail-completed.html',
|
||||
'已拒绝': 'video-detail-rejected.html',
|
||||
'已取消': 'video-detail-cancelled.html'
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
<!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>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:24px;}
|
||||
.call-status{display:flex;align-items:center;gap:12px;padding:16px;background:#E6F7FF;border:1px solid #91D5FF;border-radius:6px;margin-bottom:20px;}
|
||||
.call-status__icon{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.call-status__info{flex:1;}
|
||||
.call-status__title{font-size:var(--font-sm);font-weight:600;color:#333;margin-bottom:2px;}
|
||||
.call-status__desc{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.call-status__duration{font-size:var(--font-base);font-weight:700;color:var(--primary);flex-shrink:0;}
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:var(--primary);border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:var(--primary);width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:var(--primary);}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:12px 0 4px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
.timeline{margin-top:20px;text-align:left;border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
|
||||
.timeline-dot.done{background:#52C41A;}
|
||||
.timeline-dot.active{background:var(--primary);box-shadow:0 0 0 3px rgba(24,144,255,0.2);}
|
||||
.timeline-dot.todo{background:#E8E8E8;}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">马丽</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">李医生（主任医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">心血管内科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-09 16:30</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-09 17:00-17:30</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<!-- 通话状态卡片 -->
|
||||
<div class="call-status">
|
||||
<div class="call-status__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
</div>
|
||||
<div class="call-status__info">
|
||||
<div class="call-status__title">已拨打视频通话</div>
|
||||
<div class="call-status__desc">拨打时间：2026-04-09 17:00</div>
|
||||
<div class="call-status__desc">结束时间：2026-04-09 17:05</div>
|
||||
</div>
|
||||
<div class="call-status__duration">05:00</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询人信息 -->
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">马丽本人</td><td class="lbl">性别</td><td class="val">女</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1990-06-15</td><td class="lbl">与本人关系</td><td class="val">本人</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">否</td><td class="lbl">是否饮酒</td><td class="val">否</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">清淡</td><td class="lbl">睡眠质量</td><td class="val">较差</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">162cm</td><td class="lbl">体重</td><td class="val">55kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">青霉素过敏</td><td class="lbl">遗传史</td><td class="val">无</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">无</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc">近一个月反复出现心悸、胸闷，活动后加重，休息后可缓解，偶有头晕。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#E6F7FF;color:var(--primary);border-radius:10px;font-size:var(--font-xs);">1个月</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">心电图报告</div>
|
||||
<div class="attach-card orange">体检报告</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">长庆油田职工医院</td><td class="lbl">科室</td><td class="val">心血管内科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">心悸待查</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc">希望了解心悸的可能原因，是否需要进一步检查，以及日常注意事项。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
var arrow = el.querySelector('.archive-toggle-arrow');
|
||||
if (arrow) arrow.classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user