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
@@ -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>
|
||||
Reference in New Issue
Block a user