feat: 新增视频咨询四种状态详情页及多模块原型优化
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
Generated
+2
-2
@@ -7,9 +7,9 @@
|
||||
<value>
|
||||
<TabSessionState>
|
||||
<option name="provider" value="claude" />
|
||||
<option name="sessionId" value="de7dd4ba-66a1-4935-a65b-8b2f21aeb2a5" />
|
||||
<option name="sessionId" value="6fe84250-c2b0-4b03-9596-b72a40d7e938" />
|
||||
<option name="cwd" value="$PROJECT_DIR$" />
|
||||
<option name="model" value="claude-haiku-4-5" />
|
||||
<option name="model" value="claude-opus-4-6" />
|
||||
<option name="permissionMode" value="bypassPermissions" />
|
||||
<option name="reasoningEffort" value="medium" />
|
||||
</TabSessionState>
|
||||
|
||||
@@ -92,12 +92,12 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../expert/workbench/index.html">
|
||||
<a id="link-workbench" class="tab-item" href="../expert/workbench/index.html">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../expert/knowledge/index.html">
|
||||
<a id="link-knowledge" class="tab-item" href="../expert/knowledge/index.html">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
@@ -110,7 +110,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../expert/profile/index.html">
|
||||
<a id="link-profile" class="tab-item" href="../expert/profile/index.html">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
@@ -118,6 +118,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 根据sessionStorage中的角色标记，动态设置底部Tab的跳转路径
|
||||
*/
|
||||
function initTabLinks() {
|
||||
var role = sessionStorage.getItem('appRole') || 'expert';
|
||||
var base = role === 'assistant' ? '../assistant' : '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
document.getElementById('link-knowledge').href = base + '/knowledge/index.html';
|
||||
document.getElementById('link-profile').href = base + '/profile/index.html';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', initTabLinks);
|
||||
|
||||
/**
|
||||
* 发送AI消息
|
||||
* 获取输入框内容，生成用户气泡和模拟的AI回复
|
||||
|
||||
@@ -1,5 +1,32 @@
|
||||
# 咨询小助手端（健康应急APP）变更记录
|
||||
|
||||
## 2026-04-10
|
||||
|
||||
### feat: 新增"我的"个人中心模块
|
||||
|
||||
新增 3 个页面，覆盖个人中心主页、咨询统计、修改密码功能。
|
||||
|
||||
**涉及文件：**
|
||||
- `profile/index.html` — 个人中心主页（咨询统计入口、修改密码、关于我们、退出登录）
|
||||
- `profile/stats.html` — 咨询统计（数据概览、咨询类型分布、近7日完成量柱状图）
|
||||
- `profile/change-pwd.html` — 修改密码（表单 + 成功弹窗）
|
||||
|
||||
## 2026-04-10
|
||||
|
||||
### fix: 修复共用消息页面和AI助手页面的工作台跳转逻辑
|
||||
|
||||
**问题描述：** 小助手工作台点击消息/AI助手后，经过通讯录等中间页面再返回，点击工作台会错误跳转到专家工作台。
|
||||
|
||||
**根本原因：** 初版使用`document.referrer`判断来源，经过中间页面跳转后referrer会丢失原始来源信息。
|
||||
|
||||
**解决方案：** 改用`sessionStorage`存储角色标记（`appRole`）。小助手工作台写入`assistant`，专家工作台写入`expert`，共用页面读取该标记动态设置跳转目标。
|
||||
|
||||
**涉及文件：**
|
||||
- `workbench/index.html` — 写入`sessionStorage.appRole = 'assistant'`
|
||||
- `../expert/workbench/index.html` — 写入`sessionStorage.appRole = 'expert'`
|
||||
- `../message/index.html` — 读取appRole动态设置工作台链接
|
||||
- `../ai-assistant/index.html` — 读取appRole动态设置工作台链接
|
||||
|
||||
## 2026-04-09
|
||||
|
||||
### init: 初始化咨询小助手端原型
|
||||
|
||||
@@ -22,7 +22,11 @@
|
||||
│ └── 知识详情
|
||||
├── AI助手（底部Tab，共享模块）
|
||||
├── 消息（底部Tab，共享模块）
|
||||
└── 我的（底部Tab，暂无原型）
|
||||
└── 我的（底部Tab）
|
||||
├── 个人中心主页
|
||||
│ ├── 咨询统计
|
||||
│ └── 修改密码
|
||||
└── 退出登录（确认弹窗）
|
||||
```
|
||||
|
||||
### 咨询状态流转图
|
||||
@@ -47,6 +51,9 @@ stateDiagram-v2
|
||||
| 6 | workbench/push-expert.html | 选择专家 | 页面 | 工作台 |
|
||||
| 7 | knowledge/index.html | 知识库首页 | 页面 | 知识库 |
|
||||
| 8 | knowledge/detail.html | 知识详情 | 页面 | 知识库 |
|
||||
| 9 | profile/index.html | 个人中心主页 | 页面 | 我的 |
|
||||
| 10 | profile/stats.html | 咨询统计 | 页面 | 我的 |
|
||||
| 11 | profile/change-pwd.html | 修改密码 | 页面 | 我的 |
|
||||
|
||||
## 逐页说明
|
||||
|
||||
@@ -167,3 +174,56 @@ stateDiagram-v2
|
||||
|
||||
**交互说明：**
|
||||
- 返回按钮跳转到知识库首页
|
||||
|
||||
---
|
||||
|
||||
### 9. 个人中心主页（profile/index.html）
|
||||
|
||||
**功能说明：** 小助手个人中心入口，展示用户信息和功能菜单。
|
||||
|
||||
**业务规则：**
|
||||
- 蓝色渐变头部展示小助手头像、姓名、角色标签、所属机构
|
||||
- 功能菜单分两组：第一组为咨询统计（显示今日完成次数），第二组为修改密码和关于我们
|
||||
- 底部提供退出登录按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"咨询统计"跳转到咨询统计页
|
||||
- 点击"修改密码"跳转到修改密码页
|
||||
- 点击"退出登录"弹出确认弹窗，确认后退出
|
||||
- 底部5Tab导航：工作台/知识库/AI助手/消息/我的
|
||||
|
||||
---
|
||||
|
||||
### 10. 咨询统计（profile/stats.html）
|
||||
|
||||
**功能说明：** 展示小助手的咨询工作量统计数据。
|
||||
|
||||
**业务规则：**
|
||||
- 数据概览2×2网格：今日完成、本周完成、本月完成、累计完成
|
||||
- 本月咨询类型仅图文咨询（小助手不支持视频咨询）
|
||||
- 近7日完成量以柱状图展示，今日高亮
|
||||
|
||||
**交互说明：**
|
||||
- 返回按钮跳转到个人中心主页
|
||||
|
||||
---
|
||||
|
||||
### 11. 修改密码（profile/change-pwd.html）
|
||||
|
||||
**功能说明：** 小助手修改登录密码。
|
||||
|
||||
**业务规则：**
|
||||
- 表单包含当前密码、新密码（至少8位）、确认新密码三个字段
|
||||
- 修改成功后弹窗提示
|
||||
|
||||
**交互说明：**
|
||||
- 点击"保存修改"弹出修改成功弹窗
|
||||
- 弹窗点击"确定"跳转到个人中心主页
|
||||
|
||||
**表单字段表：**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 规则 |
|
||||
|--------|------|------|------|
|
||||
| 当前密码 | password | 是 | - |
|
||||
| 新密码 | password | 是 | 至少8位 |
|
||||
| 确认新密码 | password | 是 | 与新密码一致 |
|
||||
|
||||
@@ -175,6 +175,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为小助手 */
|
||||
sessionStorage.setItem('appRole', 'assistant');
|
||||
|
||||
/**
|
||||
* 切换知识库分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 修改密码 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码（至少8位）" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
|
||||
<!-- 修改成功弹窗 -->
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 确定后跳转至: ./index.html -->
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="color:#1677ff;font-weight:600;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 我的 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.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; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar" style="background:transparent;position:absolute;top:0;left:0;right:0;z-index:10;">
|
||||
<span class="time" style="color:#fff;">9:41</span>
|
||||
<div class="icons" style="color:#fff;"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:30px 20px 24px;flex-shrink:0;padding-top:60px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">👩💼</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">李小雨</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">咨询小助手</div>
|
||||
<div style="color:rgba(255,255,255,0.65);font-size:12px;margin-top:2px;">健康管理中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表滚动区域 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<!-- 第一组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./stats.html -->
|
||||
<div onclick="location.href='./stats.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📊</span><span style="font-size:15px;color:#1a1a1a;flex:1;">咨询统计</span>
|
||||
<span style="font-size:13px;color:#1677ff;margin-right:8px;">今日 24 次</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./change-pwd.html -->
|
||||
<div onclick="location.href='./change-pwd.html'" style="display:flex;align-items:center;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<button onclick="openModal('modal-logout')" style="width:100%;padding:14px;background:#fff;color:#ff4d4f;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,0.06);">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">退出登录</div>
|
||||
<div class="modal-body">确认退出当前账号？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-logout')">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="color:#ff4d4f;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'assistant');
|
||||
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 咨询统计 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询统计</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 数据概览（2x2网格） -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:14px;">数据概览</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
<div style="background:#f0f7ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#1677ff;">24</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">今日完成</div>
|
||||
</div>
|
||||
<div style="background:#f6ffed;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#52c41a;">102</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本周完成</div>
|
||||
</div>
|
||||
<div style="background:#fff7e6;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#fa8c16;">436</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本月完成</div>
|
||||
</div>
|
||||
<div style="background:#f9f0ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#722ed1;">2,158</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">累计完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月咨询类型 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">本月咨询类型</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">图文咨询</span>
|
||||
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
|
||||
<div style="width:100%;height:100%;background:#1677ff;border-radius:5px;"></div>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#1677ff;font-weight:600;width:36px;text-align:right;">436</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近7日完成量柱状图 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">近7日完成量</div>
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;height:70px;gap:4px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">18</div>
|
||||
<div style="width:100%;height:45%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/4</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">22</div>
|
||||
<div style="width:100%;height:55%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/5</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">30</div>
|
||||
<div style="width:100%;height:75%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/6</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">15</div>
|
||||
<div style="width:100%;height:38%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/7</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">28</div>
|
||||
<div style="width:100%;height:70%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/8</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">20</div>
|
||||
<div style="width:100%;height:50%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/9</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">24</div>
|
||||
<div style="width:100%;height:60%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">今日</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -193,6 +193,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为小助手，供共用页面（消息、AI助手）判断返回目标 */
|
||||
sessionStorage.setItem('appRole', 'assistant');
|
||||
|
||||
/**
|
||||
* 切换二级Tab（待回复/进行中/已完成）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# 咨询专家端（健康应急APP）变更记录
|
||||
|
||||
## 2026-04-10
|
||||
|
||||
### fix: 修复共用消息页面和AI助手页面的工作台跳转逻辑
|
||||
|
||||
**问题描述：** 共用页面（消息、AI助手）经过通讯录等中间页面跳转后，工作台返回目标丢失。
|
||||
|
||||
**根本原因：** 初版使用`document.referrer`判断来源，经过中间页面跳转后referrer会丢失原始来源信息。
|
||||
|
||||
**解决方案：** 改用`sessionStorage`存储角色标记（`appRole`）。专家工作台写入`expert`，小助手工作台写入`assistant`，共用页面读取该标记动态设置跳转目标。
|
||||
|
||||
**涉及文件：**
|
||||
- `workbench/index.html` — 写入`sessionStorage.appRole = 'expert'`
|
||||
- `../assistant/workbench/index.html` — 写入`sessionStorage.appRole = 'assistant'`
|
||||
- `../message/index.html` — 读取appRole动态设置工作台链接
|
||||
- `../ai-assistant/index.html` — 读取appRole动态设置工作台链接
|
||||
|
||||
## 2026-04-09
|
||||
|
||||
### init: 初始化咨询专家端原型
|
||||
|
||||
@@ -175,6 +175,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为专家 */
|
||||
sessionStorage.setItem('appRole', 'expert');
|
||||
|
||||
/**
|
||||
* 切换知识库分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
|
||||
@@ -145,6 +145,9 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为专家 */
|
||||
sessionStorage.setItem('appRole', 'expert');
|
||||
|
||||
/* 服务状态标记 */
|
||||
let isPaused = false;
|
||||
|
||||
|
||||
@@ -183,6 +183,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为专家，供共用页面（消息、AI助手）判断返回目标 */
|
||||
sessionStorage.setItem('appRole', 'expert');
|
||||
|
||||
/**
|
||||
* 切换一级Tab（图文/视频）
|
||||
* @param {string} type - 'text' 或 'video'
|
||||
|
||||
@@ -223,12 +223,12 @@
|
||||
<!-- 底部Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<!-- 工作台 -->
|
||||
<a href="../expert/workbench/index.html" class="tab-item">
|
||||
<a id="link-workbench" href="../expert/workbench/index.html" class="tab-item">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
</a>
|
||||
<!-- 知识库 -->
|
||||
<a href="../expert/knowledge/index.html" class="tab-item">
|
||||
<a id="link-knowledge" href="../expert/knowledge/index.html" class="tab-item">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
@@ -244,12 +244,27 @@
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<!-- 我的 -->
|
||||
<a href="../expert/profile/index.html" class="tab-item">
|
||||
<a id="link-profile" href="../expert/profile/index.html" class="tab-item">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 根据sessionStorage中的角色标记，动态设置底部Tab的跳转路径
|
||||
* 各角色页面会写入对应的 appRole 值（expert / assistant）
|
||||
*/
|
||||
function initTabLinks() {
|
||||
var role = sessionStorage.getItem('appRole') || 'expert';
|
||||
var base = role === 'assistant' ? '../assistant' : '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
document.getElementById('link-knowledge').href = base + '/knowledge/index.html';
|
||||
document.getElementById('link-profile').href = base + '/profile/index.html';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', initTabLinks);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,6 +4,35 @@
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-10] feat: 新增视频咨询四种状态详情页，完善视频咨询列表
|
||||
|
||||
**涉及文件（5个）：**
|
||||
- `my-records.html` — 视频咨询Tab新增"已取消"和"已拒绝"两条记录，新增对应状态样式（灰色/红色），各记录链接指向独立详情页
|
||||
- `video-detail-pending.html` — 新增视频咨询待开始详情页：医生信息（橙色标签）、可展开咨询人档案、蓝色视频Banner、信息卡片、温馨提示、底部"取消预约"+"等待预约时间"按钮
|
||||
- `video-detail-done.html` — 新增视频咨询已完成详情页：医生信息（绿色标签）、可展开咨询人档案、绿色视频Banner、信息卡片（含拨打时间/通话时长）、底部"再次预约"+"评价"按钮
|
||||
- `video-detail-cancelled.html` — 新增视频咨询已取消详情页：医生信息（灰色标签）、可展开咨询人档案、灰色视频Banner、信息卡片（含取消时间）、取消原因区块、底部"再次预约"按钮
|
||||
- `video-detail-rejected.html` — 新增视频咨询已拒绝详情页：医生信息（红色标签）、可展开咨询人档案、红色视频Banner、信息卡片、拒绝原因区块、底部"重新预约"按钮
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-10] feat: 优化咨询详情页面，支持已评价/未评价两种状态展示
|
||||
|
||||
**涉及文件（3个）：**
|
||||
- `record-detail.html` — 添加状态切换逻辑，支持已评价/未评价两种UI展示；新增"我的评价"区域、"咨询人健康档案"入口、"医生咨询小结"区域；修改底部按钮为"再次咨询"（蓝色边框）+ "评价"/"已评价"（根据状态切换）
|
||||
- `record-detail-rated.html` — 已评价状态演示版本（显示5星评价 + "已评价"禁用按钮）
|
||||
- `record-detail-unrated.html` — 未评价状态演示版本（隐藏评价 + "评价"蓝色按钮）
|
||||
|
||||
**变更说明：**
|
||||
- 新增"我的评价"区域，已评价时显示5星评价
|
||||
- 新增"咨询人健康档案"入口卡片
|
||||
- 新增"医生咨询小结"区域（黄色背景提示框）
|
||||
- 修改底部按钮布局：从单个"继续咨询"改为两个按钮组合
|
||||
- 已评价：「再次咨询」（蓝色边框）+ 「已评价」（灰色禁用）
|
||||
- 未评价：「再次咨询」（蓝色边框）+ 「评价」（蓝色填充）
|
||||
- 添加 JavaScript 初始化逻辑，根据 `isRated` 变量切换UI状态
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-09] fix: 修复返回键路由问题，新增科室/疾病专家数量展示
|
||||
|
||||
**涉及文件（7个）：**
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> **所属端**：员工端 APP
|
||||
> **模块路径**：`employee-app/health-consult/`
|
||||
> **最后更新**：2026-04-09
|
||||
> **最后更新**：2026-04-10
|
||||
|
||||
---
|
||||
|
||||
@@ -34,6 +34,8 @@ stateDiagram-v2
|
||||
[*] --> 进行中: 发起图文咨询
|
||||
[*] --> 待开始: 预约视频咨询
|
||||
待开始 --> 进行中: 到达预约时间
|
||||
待开始 --> 已取消: 用户取消预约
|
||||
待开始 --> 已拒绝: 医生拒绝预约
|
||||
进行中 --> 已完成: 结束咨询
|
||||
已完成 --> 已评价: 提交评价
|
||||
```
|
||||
@@ -60,6 +62,10 @@ stateDiagram-v2
|
||||
| 16 | `select-person-dialog.html` | 弹窗 | 选择/新增咨询人 |
|
||||
| 17 | `select-report-dialog.html` | 弹窗 | 选择体检报告 |
|
||||
| 18 | `rate-dialog.html` | 弹窗 | 评价医生（弹窗版） |
|
||||
| 19 | `video-detail-pending.html` | 页面 | 视频咨询详情 - 待开始 |
|
||||
| 20 | `video-detail-done.html` | 页面 | 视频咨询详情 - 已完成 |
|
||||
| 21 | `video-detail-cancelled.html` | 页面 | 视频咨询详情 - 已取消 |
|
||||
| 22 | `video-detail-rejected.html` | 页面 | 视频咨询详情 - 已拒绝 |
|
||||
|
||||
---
|
||||
|
||||
@@ -203,14 +209,14 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）
|
||||
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）、`已取消`（灰色）、`已拒绝`（红色）
|
||||
- 已完成的图文咨询如已评价则显示"已评价"标记
|
||||
- 视频咨询 `待开始` 状态显示预约时间，`已完成` 显示通话时长
|
||||
- 视频咨询 `待开始` 状态显示预约时间，`已完成` 显示通话时长，`已取消` 显示预约时间，`已拒绝` 显示预约时间
|
||||
|
||||
**交互说明**
|
||||
|
||||
- Tab 栏切换图文/视频记录列表
|
||||
- 点击记录卡片跳转到咨询详情页
|
||||
- 点击记录卡片跳转到对应咨询详情页：图文咨询跳转到咨询详情页，视频咨询根据状态跳转到对应的视频详情页（待开始/已完成/已取消/已拒绝）
|
||||
- 导航栏返回 → 健康咨询首页
|
||||
|
||||
---
|
||||
@@ -219,16 +225,99 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
展示单条咨询记录详情：医生信息栏 + 状态标签、咨询信息（类型、时间、状态、时长）、对话入口卡片、底部"继续咨询"按钮。
|
||||
展示单条咨询记录详情。包含医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口、医生咨询小结。根据咨询是否已评价，显示不同的UI：
|
||||
- **已评价状态**：显示"我的评价"区域（5星评价）、医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "已评价"（灰色禁用）
|
||||
- **未评价状态**：隐藏"我的评价"区域，显示医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "评价"（蓝色填充）
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 仅「进行中」状态显示"继续咨询"按钮
|
||||
- 进行中的咨询时长显示 `-`
|
||||
- 已完成的咨询显示医生咨询小结
|
||||
- 已评价的咨询显示5星评价，"评价"按钮变为"已评价"禁用状态
|
||||
- 未评价的咨询隐藏评价区域，显示"评价"按钮
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击对话入口卡片或「继续咨询」按钮，跳转到图文咨询聊天页
|
||||
- 点击对话入口卡片或「再次咨询」按钮，跳转到图文咨询聊天页
|
||||
- 点击「咨询人健康档案」入口，跳转到健康档案详情页
|
||||
- 点击「评价」按钮（未评价状态），跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8a 视频咨询详情 - 待开始（video-detail-pending.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询待开始状态的详情页。展示医生信息（橙色"待开始"标签）、可展开/收起的咨询人健康档案、蓝色视频咨询Banner（含预约时间）、咨询信息卡片、温馨提示。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 预约时间前15分钟系统推送提醒
|
||||
- 用户可在预约时间前取消预约
|
||||
- "等待预约时间"按钮为置灰禁用状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情（基本信息、生活习惯、身体情况）
|
||||
- 点击「取消预约」取消当前视频咨询预约
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8b 视频咨询详情 - 已完成（video-detail-done.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已完成状态的详情页。展示医生信息（绿色"已完成"标签）、可展开/收起的咨询人健康档案、绿色视频咨询Banner、咨询信息卡片（含视频拨打时间和通话时长）。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 显示实际视频拨打时间段和通话时长
|
||||
- 未评价时显示"评价"按钮，已评价后按钮变为禁用
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「再次预约」跳转到视频咨询预约页
|
||||
- 点击「评价」跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8c 视频咨询详情 - 已取消（video-detail-cancelled.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已取消状态的详情页。展示医生信息（灰色"已取消"标签）、可展开/收起的咨询人健康档案、灰色视频咨询Banner、咨询信息卡片（含取消时间）、取消原因区块。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 取消原因由用户取消时填写或系统自动生成
|
||||
- 取消原因区块使用灰色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「再次预约」跳转到视频咨询预约页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8d 视频咨询详情 - 已拒绝（video-detail-rejected.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已拒绝状态的详情页。展示医生信息（红色"已拒绝"标签）、可展开/收起的咨询人健康档案、红色视频咨询Banner、咨询信息卡片、拒绝原因区块。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 拒绝原因由医生填写
|
||||
- 拒绝原因区块使用红色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「重新预约」跳转到视频咨询预约页（可选择其他时间或医生）
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
@@ -80,6 +80,8 @@
|
||||
.status-done { background: #f6ffed; color: #52c41a; }
|
||||
.status-ongoing { background: #e6f4ff; color: #1677ff; }
|
||||
.status-pending { background: #fff7e6; color: #fa8c16; }
|
||||
.status-cancelled { background: #f5f5f5; color: #999; }
|
||||
.status-rejected { background: #fff2f0; color: #ff4d4f; }
|
||||
.ri-consult-person { font-size: 12px; color: #666; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
|
||||
.ri-consult-person .rated-tag { font-size: 11px; background: #f6ffed; color: #52c41a; padding: 1px 6px; border-radius: 10px; }
|
||||
.ri-msg { font-size: 13px; color: #666; margin-top: 8px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -139,8 +141,8 @@
|
||||
<div class="ri-time">2026-04-07 10:20</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录2：李晓梅医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 记录2：李晓梅医生 - 已完成 + 已评价 → 点击跳转 record-detail-rated.html -->
|
||||
<a class="record-item" href="record-detail-rated.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -154,8 +156,8 @@
|
||||
<div class="ri-time">2026-03-28 14:35</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录3：王志远医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 记录3：王志远医生 - 已完成 + 未评价 → 点击跳转 record-detail-unrated.html -->
|
||||
<a class="record-item" href="record-detail-unrated.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -173,8 +175,8 @@
|
||||
<!-- 视频咨询列表（默认隐藏） -->
|
||||
<div id="tab-video" class="tab-content">
|
||||
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 video-detail-pending.html -->
|
||||
<a class="record-item" href="video-detail-pending.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -187,8 +189,8 @@
|
||||
<div class="ri-time">预约于 2026-04-07 11:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 video-detail-done.html -->
|
||||
<a class="record-item" href="video-detail-done.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -200,6 +202,34 @@
|
||||
<div class="ri-msg">📹 视频咨询 · 时长 18分钟</div>
|
||||
<div class="ri-time">2026-03-20 10:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录3：刘伟医生 - 已取消 → 点击跳转 video-detail-cancelled.html -->
|
||||
<a class="record-item" href="video-detail-cancelled.html">
|
||||
<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-cancelled">已取消</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-03-10 15:00</div>
|
||||
<div class="ri-time">预约于 2026-03-08 09:30</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录4：赵丽华医生 - 已拒绝 → 点击跳转 video-detail-rejected.html -->
|
||||
<a class="record-item" href="video-detail-rejected.html">
|
||||
<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-rejected">已拒绝</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-03-05 09:00</div>
|
||||
<div class="ri-time">预约于 2026-03-03 16:20</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,358 @@
|
||||
<!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; }
|
||||
.detail-doctor-bar .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; }
|
||||
.detail-doctor-bar .dd-info { flex: 1; }
|
||||
.detail-doctor-bar .dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.detail-doctor-bar .dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.detail-doctor-bar .dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #f6ffed; color: #52c41a; white-space: nowrap; }
|
||||
|
||||
/* 咨询信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.detail-info-card .dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-info-card .dic-row:last-child { border-bottom: none; }
|
||||
.detail-info-card .dic-label { color: #999; }
|
||||
.detail-info-card .dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 对话入口卡片 */
|
||||
.chat-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);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.chat-entry:active { transform: scale(0.98); }
|
||||
.chat-entry .ce-icon { font-size: 28px; flex-shrink: 0; }
|
||||
.chat-entry .ce-info { flex: 1; }
|
||||
.chat-entry .ce-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 我的评价区域 */
|
||||
.rating-section { margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px; display: block; }
|
||||
.rating-section .rs-label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.rating-section .rs-stars { display: flex; gap: 4px; }
|
||||
.rating-section .rs-stars .star { font-size: 20px; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.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);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* 咨询人档案详情 */
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-disabled {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #f0f0f0;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏：时间 + 信号电池图标 -->
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</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">已完成</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片：类型、时间、状态、时长 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询类型</span>
|
||||
<span class="dic-value">💬 图文咨询</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时间</span>
|
||||
<span class="dic-value">2026-03-28 14:35</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询人</span>
|
||||
<span class="dic-value">张三（父亲）</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询状态</span>
|
||||
<span class="dic-value">已完成</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">32分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 我的评价区域：已评价时显示 -->
|
||||
<div id="ratingSection" class="rating-section">
|
||||
<div class="rs-label">我的评价</div>
|
||||
<div class="rs-stars">
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 咨询人档案详情：点击展开 -->
|
||||
<div class="health-record-detail">
|
||||
<!-- 基本信息 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">姓名</span>
|
||||
<span class="hrd-value">张三</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">性别 / 年龄</span>
|
||||
<span class="hrd-value">男 / 58岁</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">身高 / 体重</span>
|
||||
<span class="hrd-value">172 cm / 80 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">吸烟</span>
|
||||
<span class="hrd-value">是</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮酒</span>
|
||||
<span class="hrd-value">偶尔</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮食喜好</span>
|
||||
<span class="hrd-value">偏油腻</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">睡眠质量</span>
|
||||
<span class="hrd-value">一般</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">过敏史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">遗传史</span>
|
||||
<span class="hrd-value">高血压家族史</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">既往史</span>
|
||||
<span class="hrd-value">阑尾炎手术</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">其他疾病</span>
|
||||
<span class="hrd-value">高血压、高血脂</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
<div class="ce-info">
|
||||
<div class="ce-title">查看历史对话记录</div>
|
||||
<div class="ce-sub">点击查看完整对话内容</div>
|
||||
</div>
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [条件显示] 医生咨询小结：已完成的咨询显示 -->
|
||||
<div id="doctorSummary" class="doctor-summary">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">您的血糖控制情况良好，继续保持现有的饮食和运动习惯。建议每3个月复查一次血糖指标，定期监测血压。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：已评价状态 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button class="btn-disabled" disabled>已评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
<script>
|
||||
/**
|
||||
* 切换咨询人档案展开/收起
|
||||
*/
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
const detail = el.nextElementSibling;
|
||||
detail.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,341 @@
|
||||
<!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; }
|
||||
.detail-doctor-bar .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; }
|
||||
.detail-doctor-bar .dd-info { flex: 1; }
|
||||
.detail-doctor-bar .dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.detail-doctor-bar .dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.detail-doctor-bar .dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #f6ffed; color: #52c41a; white-space: nowrap; }
|
||||
|
||||
/* 咨询信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.detail-info-card .dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-info-card .dic-row:last-child { border-bottom: none; }
|
||||
.detail-info-card .dic-label { color: #999; }
|
||||
.detail-info-card .dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 对话入口卡片 */
|
||||
.chat-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);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.chat-entry:active { transform: scale(0.98); }
|
||||
.chat-entry .ce-icon { font-size: 28px; flex-shrink: 0; }
|
||||
.chat-entry .ce-info { flex: 1; }
|
||||
.chat-entry .ce-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.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);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* 咨询人档案详情 */
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .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;
|
||||
}
|
||||
.detail-footer .btn-primary: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">10:24</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">已完成</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片：类型、时间、状态、时长 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询类型</span>
|
||||
<span class="dic-value">💬 图文咨询</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时间</span>
|
||||
<span class="dic-value">2026-03-15 09:10</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询人</span>
|
||||
<span class="dic-value">本人</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询状态</span>
|
||||
<span class="dic-value">已完成</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">25分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 咨询人档案详情：点击展开 -->
|
||||
<div class="health-record-detail">
|
||||
<!-- 基本信息 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">姓名</span>
|
||||
<span class="hrd-value">本人</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">性别 / 年龄</span>
|
||||
<span class="hrd-value">男 / 45岁</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">身高 / 体重</span>
|
||||
<span class="hrd-value">175 cm / 75 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">吸烟</span>
|
||||
<span class="hrd-value">否</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮酒</span>
|
||||
<span class="hrd-value">偶尔</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮食喜好</span>
|
||||
<span class="hrd-value">清淡</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">睡眠质量</span>
|
||||
<span class="hrd-value">良好</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">过敏史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">遗传史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">既往史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">其他疾病</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
<div class="ce-info">
|
||||
<div class="ce-title">查看历史对话记录</div>
|
||||
<div class="ce-sub">点击查看完整对话内容</div>
|
||||
</div>
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [条件显示] 医生咨询小结：已完成的咨询显示 -->
|
||||
<div id="doctorSummary" class="doctor-summary">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">建议您做颈椎MRI检查，明确诊断。同时建议进行颈椎牵引治疗，配合物理治疗。避免长时间低头，定期做颈椎保健操。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：未评价状态 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button class="btn-primary" onclick="alert('跳转到评价页面')">评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
<script>
|
||||
/**
|
||||
* 切换咨询人档案展开/收起
|
||||
*/
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
const detail = el.nextElementSibling;
|
||||
detail.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -100,9 +100,60 @@
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 我的评价区域 */
|
||||
.rating-section { margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px; display: none; }
|
||||
.rating-section.show { display: block; }
|
||||
.rating-section .rs-label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.rating-section .rs-stars { display: flex; gap: 4px; }
|
||||
.rating-section .rs-stars .star { font-size: 20px; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.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);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-continue {
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #1677ff;
|
||||
@@ -114,7 +165,18 @@
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-continue:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary:active { opacity: 0.85; }
|
||||
.detail-footer .btn-disabled {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #f0f0f0;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
@@ -162,16 +224,39 @@
|
||||
<span class="dic-label">咨询时间</span>
|
||||
<span class="dic-value">2026-04-07 10:20</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询人</span>
|
||||
<span class="dic-value">张三（父亲）</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询状态</span>
|
||||
<span class="dic-value">进行中</span>
|
||||
<span class="dic-value">已完成</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">—</span>
|
||||
<span class="dic-value">32分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 我的评价区域：已评价时显示 -->
|
||||
<div id="ratingSection" class="rating-section">
|
||||
<div class="rs-label">我的评价</div>
|
||||
<div class="rs-stars">
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<a class="health-record-entry" href="#">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
@@ -182,15 +267,65 @@
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [条件显示] 医生咨询小结：已完成的咨询显示 -->
|
||||
<div id="doctorSummary" class="doctor-summary" style="display: none;">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">建议完善心内科相关检查：心电图、超声心动图，同时加强血压日常监测，低盐低脂饮食，避免剧烈运动，如症状加重请及时就诊。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：继续咨询按钮 → text-chat.html -->
|
||||
<!-- [交互] 底部操作栏：根据评价状态显示不同按钮 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-continue" onclick="window.location.href='text-chat.html?from=record-detail'">💬 继续咨询</button>
|
||||
<button id="btnContinue" class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button id="btnRate" class="btn-primary" onclick="handleRate()">评价</button>
|
||||
<button id="btnRated" class="btn-disabled" disabled>已评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 页面初始化：根据咨询状态设置UI
|
||||
* 数据来源：实际应从后端API获取，这里使用示例数据
|
||||
*/
|
||||
function initPage() {
|
||||
// 示例：从URL参数或数据属性获取是否已评价的状态
|
||||
// 实际应用中应从后端API获取真实数据
|
||||
const isRated = true; // 改为 false 可查看未评价状态
|
||||
|
||||
const ratingSection = document.getElementById('ratingSection');
|
||||
const doctorSummary = document.getElementById('doctorSummary');
|
||||
const btnRate = document.getElementById('btnRate');
|
||||
const btnRated = document.getElementById('btnRated');
|
||||
|
||||
if (isRated) {
|
||||
// 已评价状态
|
||||
ratingSection.classList.add('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'none';
|
||||
btnRated.style.display = 'block';
|
||||
} else {
|
||||
// 未评价状态
|
||||
ratingSection.classList.remove('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'block';
|
||||
btnRated.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理评价按钮点击
|
||||
*/
|
||||
function handleRate() {
|
||||
// 跳转到评价页面或打开评价弹窗
|
||||
alert('跳转到评价页面');
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', initPage);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询详情 - 视频咨询已取消</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; 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--cancelled { background: #f5f5f5; color: #999; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.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; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #bfbfbf, #d9d9d9); 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; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.cancel-reason {
|
||||
margin: 12px 16px; background: #fafafa; border-radius: 14px; padding: 14px 16px;
|
||||
border-left: 4px solid #d9d9d9;
|
||||
}
|
||||
.cancel-reason .cr-title { font-size: 14px; font-weight: 600; color: #999; margin-bottom: 8px; }
|
||||
.cancel-reason .cr-content { font-size: 13px; color: #666; 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; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</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="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--cancelled">已取消</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</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-03-10 15:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已取消</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row"><span class="dic-label">咨询类型</span><span class="dic-value">📹 视频咨询</span></div>
|
||||
<div class="dic-row"><span class="dic-label">预约时间</span><span class="dic-value">2026-03-10 15:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">取消时间</span><span class="dic-value">2026-03-09 11:20</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">已取消</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 取消原因 -->
|
||||
<div class="cancel-reason">
|
||||
<div class="cr-title">取消原因</div>
|
||||
<div class="cr-content">个人时间冲突，无法按时参加视频咨询。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-primary">再次预约</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!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--done { background: #f6ffed; color: #52c41a; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.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; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #52c41a, #73d13d); 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; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-outline {
|
||||
flex: 1; height: 44px; background: #fff; color: #1677ff; border: 2px solid #1677ff;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-outline:active { opacity: 0.85; }
|
||||
.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; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</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="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--done">已完成</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</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-03-20 10:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已完成</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row"><span class="dic-label">咨询类型</span><span class="dic-value">📹 视频咨询</span></div>
|
||||
<div class="dic-row"><span class="dic-label">预约时间</span><span class="dic-value">2026-03-20 10:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">视频拨打时间</span><span class="dic-value">2026-03-20 10:00 ~ 10:03</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">已完成</span></div>
|
||||
<div class="dic-row"><span class="dic-label">通话时长</span><span class="dic-value">18分钟</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline">再次预约</button>
|
||||
<button class="btn-primary">评价</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!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--pending { background: #fff7e6; color: #fa8c16; }
|
||||
|
||||
/* PLACEHOLDER_STYLES */
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.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; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
/* 视频咨询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; }
|
||||
|
||||
/* PLACEHOLDER_STYLES2 */
|
||||
|
||||
/* 信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 温馨提示 */
|
||||
.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-outline {
|
||||
flex: 1; height: 44px; background: #fff; color: #1677ff; border: 2px solid #1677ff;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-outline:active { opacity: 0.85; }
|
||||
.btn-disabled {
|
||||
flex: 1; height: 44px; background: #f0f0f0; color: #bfbfbf; border: none;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: not-allowed;
|
||||
}
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</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--pending">待开始</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</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 10:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">待开始</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY2 -->
|
||||
|
||||
<!-- 咨询信息卡片 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row"><span class="dic-label">咨询类型</span><span class="dic-value">📹 视频咨询</span></div>
|
||||
<div class="dic-row"><span class="dic-label">预约时间</span><span class="dic-value">2026-04-08 10:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">待开始</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<div class="tip-box">📌 温馨提示：请在预约时间前5分钟准备好，保持网络畅通，系统将提前15分钟推送提醒。</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline">取消预约</button>
|
||||
<button class="btn-disabled" disabled>等待预约时间</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!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--rejected { background: #fff2f0; color: #ff4d4f; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.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; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #ff4d4f, #ff7875); 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; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.reject-reason {
|
||||
margin: 12px 16px; background: #fff2f0; border-radius: 14px; padding: 14px 16px;
|
||||
border-left: 4px solid #ff4d4f;
|
||||
}
|
||||
.reject-reason .rr-title { font-size: 14px; font-weight: 600; color: #cf1322; margin-bottom: 8px; }
|
||||
.reject-reason .rr-content { font-size: 13px; color: #a8071a; 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; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</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="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--rejected">已拒绝</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</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-03-05 09:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已拒绝</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row"><span class="dic-label">咨询类型</span><span class="dic-value">📹 视频咨询</span></div>
|
||||
<div class="dic-row"><span class="dic-label">预约时间</span><span class="dic-value">2026-03-05 09:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">已拒绝</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 拒绝原因 -->
|
||||
<div class="reject-reason">
|
||||
<div class="rr-title">拒绝原因</div>
|
||||
<div class="rr-content">抱歉，该时段已有其他安排，建议您选择其他时间或其他医生进行预约。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-primary">重新预约</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+4
-1
@@ -265,7 +265,10 @@ const SITE_MAP = [
|
||||
{ name:'知识库', dir:'emergency-app/assistant/knowledge', pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'detail.html',label:'知识详情'}
|
||||
]},
|
||||
{ name:'我的', dir:'emergency-app/assistant/profile', pages:[] }
|
||||
{ name:'我的', dir:'emergency-app/assistant/profile', pages:[
|
||||
{file:'index.html',label:'个人中心'},{file:'stats.html',label:'咨询统计'},
|
||||
{file:'change-pwd.html',label:'修改密码'}
|
||||
] }
|
||||
]},
|
||||
{ role:'应急操作人员', id:'operator', modules:[
|
||||
{name:'工作台',dir:'emergency-app/operator/workbench',pages:[]},
|
||||
|
||||
@@ -69,7 +69,23 @@
|
||||
.info-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;font-size:var(--font-sm);}
|
||||
.info-row:last-child{margin-bottom:0;}
|
||||
.info-row__label{color:var(--text-secondary);white-space:nowrap;min-width:72px;}
|
||||
.info-row__value{color:var(--text-primary);flex:1;}
|
||||
.detail-layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
|
||||
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-btn{padding:12px 20px;font-size:var(--font-sm);color:var(--text-secondary);background:none;border:none;cursor:pointer;position:relative;transition:all .2s;}
|
||||
.tab-btn.active{color:var(--primary);font-weight:600;}
|
||||
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--primary);}
|
||||
.tab-content{display:none;}
|
||||
.tab-content.active{display:block;}
|
||||
.consult-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;}
|
||||
.consult-info__header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.consult-info__avatar{width:48px;height:48px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:600;flex-shrink:0;}
|
||||
.consult-info__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.consult-info__detail{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
.consult-info__tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-left:8px;}
|
||||
.consult-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
|
||||
.consult-row{display:flex;flex-direction:column;gap:4px;}
|
||||
.consult-row__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.consult-row__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -130,180 +146,293 @@
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">档案编号</span>
|
||||
<span class="info-item__value" style="font-family:monospace;color:var(--text-secondary);">DA20260409001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">创建时间</span>
|
||||
<span class="info-item__value">2026-04-09 09:12</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">员工姓名</span>
|
||||
<span class="info-item__label">姓名</span>
|
||||
<span class="info-item__value">张伟</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">工号</span>
|
||||
<span class="info-item__label">员工编号</span>
|
||||
<span class="info-item__value" style="font-family:monospace;">CQ001234</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">所属单位</span>
|
||||
<span class="info-item__label">性别</span>
|
||||
<span class="info-item__value">男</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">年龄</span>
|
||||
<span class="info-item__value">38岁</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">单位</span>
|
||||
<span class="info-item__value">采油一厂</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">关联咨询数</span>
|
||||
<span class="info-item__value" style="color:var(--primary);font-weight:600;">3 次</span>
|
||||
<span class="info-item__label">部门</span>
|
||||
<span class="info-item__value">心血管科</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">手机号</span>
|
||||
<span class="info-item__value">13800138000</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">身份证号</span>
|
||||
<span class="info-item__value" style="font-family:monospace;">610102198806150012</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主诉 -->
|
||||
<div class="card">
|
||||
<div class="card__title">主诉</div>
|
||||
<div class="chief-complaint-box">
|
||||
心跳加速、胸闷，活动后加重，持续约2周，休息后可缓解。近期工作压力较大，睡眠质量下降。
|
||||
<div class="card__title">咨询人信息</div>
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab(this, 'consult-1')">咨询人1</button>
|
||||
<button class="tab-btn" onclick="switchTab(this, 'consult-2')">咨询人2</button>
|
||||
<button class="tab-btn" onclick="switchTab(this, 'consult-3')">咨询人3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 既往病史 & 过敏史 -->
|
||||
<div class="card">
|
||||
<div class="card__title">病史信息</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;">既往病史</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span class="tag tag-orange">高血压（确诊2年）</span>
|
||||
<span class="tag tag-orange">高脂血症</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:8px;line-height:1.6;">
|
||||
目前服用：氨氯地平 5mg/日（降压）、阿托伐他汀 20mg/晚（调脂）
|
||||
<!-- 咨询人1 -->
|
||||
<div class="tab-content active" id="consult-1">
|
||||
<div class="consult-info">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">咨询人姓名</span>
|
||||
<span class="info-item__value">本人</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">性别</span>
|
||||
<span class="info-item__value">男</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">出生日期</span>
|
||||
<span class="info-item__value">1988-06-15</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">与本人关系</span>
|
||||
<span class="info-item__value">本人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">生活习惯</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否抽烟</span>
|
||||
<span class="info-item__value">否</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否饮酒</span>
|
||||
<span class="info-item__value">偶尔</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">饮食喜好</span>
|
||||
<span class="info-item__value">清淡</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">睡眠质量</span>
|
||||
<span class="info-item__value">一般</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">身体情况</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">身高</span>
|
||||
<span class="info-item__value">175cm</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">体重</span>
|
||||
<span class="info-item__value">72kg</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">过敏史</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">遗传史</span>
|
||||
<span class="info-item__value">高血压家族史</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">既往史</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">其他疾病</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;">过敏史</div>
|
||||
<span class="tag tag-gray">无已知过敏史</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联咨询记录 -->
|
||||
<div class="card">
|
||||
<div class="card__title">关联咨询记录（3次）</div>
|
||||
<div class="consult-list">
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260409088</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag tag-blue">图文咨询</span>
|
||||
<span class="tag" style="background:#E6F7FF;color:var(--primary);">进行中</span>
|
||||
<!-- 咨询人2 -->
|
||||
<div class="tab-content" id="consult-2">
|
||||
<div class="consult-info">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">咨询人姓名</span>
|
||||
<span class="info-item__value">张三</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">性别</span>
|
||||
<span class="info-item__value">男</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">出生日期</span>
|
||||
<span class="info-item__value">1960-03-20</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">与本人关系</span>
|
||||
<span class="info-item__value">父亲</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">李医生</div>
|
||||
<div class="consult-item__dept">心血管内科 · 主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-04-09 09:12</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">生活习惯</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否抽烟</span>
|
||||
<span class="info-item__value">是</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否饮酒</span>
|
||||
<span class="info-item__value">是</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">饮食喜好</span>
|
||||
<span class="info-item__value">偏油腻</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">睡眠质量</span>
|
||||
<span class="info-item__value">较差</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260325044</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag tag-blue">图文咨询</span>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">李医生</div>
|
||||
<div class="consult-item__dept">心血管内科 · 主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-03-25 14:30</span>
|
||||
<span class="stars">★★★★★</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260210018</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag" style="background:#F9F0FF;color:#722ED1;">视频咨询</span>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">王医生</div>
|
||||
<div class="consult-item__dept">内分泌科 · 副主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-02-10 10:00</span>
|
||||
<span class="stars">★★★★</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">身体情况</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">身高</span>
|
||||
<span class="info-item__value">170cm</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">体重</span>
|
||||
<span class="info-item__value">78kg</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">过敏史</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">遗传史</span>
|
||||
<span class="info-item__value">高血压、糖尿病家族史</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">既往史</span>
|
||||
<span class="info-item__value">高血压（确诊5年）</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">其他疾病</span>
|
||||
<span class="info-item__value">高脂血症</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：员工信息 -->
|
||||
<div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">员工信息</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:18px;font-weight:600;flex-shrink:0;">张</div>
|
||||
<div>
|
||||
<div style="font-size:var(--font-base);font-weight:600;">张伟</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);">CQ001234 · 采油一厂</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">性别</span>
|
||||
<span class="info-row__value">男</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">年龄</span>
|
||||
<span class="info-row__value">42岁</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">岗位</span>
|
||||
<span class="info-row__value">采油工程师</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">联系方式</span>
|
||||
<span class="info-row__value" style="color:var(--text-secondary);">已脱敏</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">档案统计</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
<div style="background:#F5F7FA;border-radius:var(--radius-sm);padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:var(--primary);">3</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;">关联咨询</div>
|
||||
</div>
|
||||
<div style="background:#F5F7FA;border-radius:var(--radius-sm);padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:var(--success);">2</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:12px;">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">首次咨询</span>
|
||||
<span class="info-row__value">2026-02-10</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">最近咨询</span>
|
||||
<span class="info-row__value">2026-04-09</span>
|
||||
<!-- 咨询人3 -->
|
||||
<div class="tab-content" id="consult-3">
|
||||
<div class="consult-info">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">咨询人姓名</span>
|
||||
<span class="info-item__value">李梅</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">性别</span>
|
||||
<span class="info-item__value">女</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">出生日期</span>
|
||||
<span class="info-item__value">1962-08-10</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">与本人关系</span>
|
||||
<span class="info-item__value">母亲</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">生活习惯</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否抽烟</span>
|
||||
<span class="info-item__value">否</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">是否饮酒</span>
|
||||
<span class="info-item__value">否</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">饮食喜好</span>
|
||||
<span class="info-item__value">清淡</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">睡眠质量</span>
|
||||
<span class="info-item__value">良好</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;font-weight:600;">身体情况</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">身高</span>
|
||||
<span class="info-item__value">162cm</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">体重</span>
|
||||
<span class="info-item__value">58kg</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">过敏史</span>
|
||||
<span class="info-item__value">青霉素过敏</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">遗传史</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">既往史</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">其他疾病</span>
|
||||
<span class="info-item__value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
function switchTab(btn, tabId) {
|
||||
// 移除所有tab按钮的active状态
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
// 隐藏所有tab内容
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
// 激活当前tab
|
||||
btn.classList.add('active');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -66,6 +66,20 @@
|
||||
.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);}
|
||||
.filter-bar__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:40px;left:0;z-index:300;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,0.12);width:420px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:240px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:8px 14px;font-size:var(--font-xs);color:var(--text-secondary);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:9px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:#E6F7FF;color:var(--primary);font-weight:500;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -107,29 +121,56 @@
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名/工号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名或工号">
|
||||
<div class="filter-bar__row">
|
||||
<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 style="white-space:nowrap;">所属单位部门</label>
|
||||
<div class="org-select-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="orgUnitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" data-unit="" onclick="selectUnit(this,'全部单位/部门','')">
|
||||
全部单位/部门
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy1" onclick="selectUnit(this,'采油一厂','cy1')">
|
||||
采油一厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy2" onclick="selectUnit(this,'采油二厂','cy2')">
|
||||
采油二厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy3" onclick="selectUnit(this,'采油三厂','cy3')">
|
||||
采油三厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="kfyj" onclick="selectUnit(this,'勘探开发研究院','kfyj')">
|
||||
勘探开发研究院
|
||||
</div>
|
||||
<div class="org-item" data-unit="jgsh" onclick="selectUnit(this,'机关事务服务中心','jgsh')">
|
||||
机关事务服务中心
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-col" id="orgDeptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" data-dept="" onclick="selectDept(this,'全部部门','')">
|
||||
全部部门
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="filter-item">
|
||||
<label>主诉关键词</label>
|
||||
<input class="filter-input" type="text" placeholder="搜索主诉内容">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>创建时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</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>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
<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>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
@@ -142,90 +183,93 @@
|
||||
<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 style="font-size:var(--font-sm);color:var(--text-secondary);">共 8,432 条</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260409001</td>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">张</div></td>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ001234</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>采油一厂</td>
|
||||
<td><div class="chief-complaint">心跳加速、胸闷，活动后加重</div></td>
|
||||
<td><span class="tag tag-orange">高血压</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">3次</td>
|
||||
<td>2026-04-09 09:12</td>
|
||||
<td>心血管科</td>
|
||||
<td>13800138000</td>
|
||||
<td style="font-weight:500;">3人</td>
|
||||
<!-- [交互] 点击跳转至: ./consult-record-detail.html -->
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260409002</td>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">李</div></td>
|
||||
<td>李明</td>
|
||||
<td>CQ002571</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ002571</td>
|
||||
<td>男</td>
|
||||
<td>42</td>
|
||||
<td>采油二厂</td>
|
||||
<td><div class="chief-complaint">空腹血糖偏高，体检发现6.8mmol/L</div></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">1次</td>
|
||||
<td>2026-04-09 09:45</td>
|
||||
<td>内分泌科</td>
|
||||
<td>13800138001</td>
|
||||
<td style="font-weight:500;">1人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260408010</td>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">刘</div></td>
|
||||
<td>刘洋</td>
|
||||
<td>CQ004102</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ004102</td>
|
||||
<td>男</td>
|
||||
<td>35</td>
|
||||
<td>采油三厂</td>
|
||||
<td><div class="chief-complaint">腰部疼痛，久坐后加重，放射至左腿</div></td>
|
||||
<td><span class="tag tag-orange">腰椎间盘突出</span></td>
|
||||
<td><span class="tag tag-orange">青霉素过敏</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">5次</td>
|
||||
<td>2026-04-08 14:55</td>
|
||||
<td>生产部</td>
|
||||
<td>13800138002</td>
|
||||
<td style="font-weight:500;">5人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260407005</td>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">陈</div></td>
|
||||
<td>陈磊</td>
|
||||
<td>CQ006890</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ006890</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>采油一厂</td>
|
||||
<td><div class="chief-complaint">反复头痛，以额部为主，伴有恶心</div></td>
|
||||
<td><span class="tag tag-orange">高血压</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">8次</td>
|
||||
<td>2026-04-07 09:55</td>
|
||||
<td>技术部</td>
|
||||
<td>13800138003</td>
|
||||
<td style="font-weight:500;">8人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260406003</td>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">王</div></td>
|
||||
<td>王芳</td>
|
||||
<td>CQ003388</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ003388</td>
|
||||
<td>女</td>
|
||||
<td>32</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td><div class="chief-complaint">睡眠质量差，入睡困难，多梦易醒</div></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">2次</td>
|
||||
<td>2026-04-06 11:20</td>
|
||||
<td>医学研究部</td>
|
||||
<td>13800138004</td>
|
||||
<td style="font-weight:500;">2人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 8,432 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -239,5 +283,60 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
// 部门数据映射
|
||||
const deptMap = {
|
||||
'cy1': ['心血管科', '内分泌科', '神经内科'],
|
||||
'cy2': ['骨科', '消化内科', '呼吸科'],
|
||||
'cy3': ['生产部', '技术部', '安全部'],
|
||||
'kfyj': ['医学研究部', '数据分析部'],
|
||||
'jgsh': ['行政部', '人力资源部']
|
||||
};
|
||||
|
||||
function toggleOrg() {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectUnit(elem, unitName, unitCode) {
|
||||
// 更新单位列表的active状态
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
|
||||
// 更新部门列表
|
||||
const deptCol = document.getElementById('orgDeptCol');
|
||||
const depts = deptMap[unitCode] || [];
|
||||
|
||||
let deptHtml = '<div class="org-col__title">部门</div>';
|
||||
deptHtml += '<div class="org-item active" data-dept="" onclick="selectDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
|
||||
depts.forEach(dept => {
|
||||
deptHtml += `<div class="org-item" data-dept="${dept}" onclick="selectDept(this,'${dept}','${dept}')">${dept}</div>`;
|
||||
});
|
||||
|
||||
deptCol.innerHTML = deptHtml;
|
||||
}
|
||||
|
||||
function selectDept(elem, deptName, deptCode) {
|
||||
// 更新部门列表的active状态
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
document.addEventListener('click', function(e) {
|
||||
const orgWrap = document.getElementById('orgWrap');
|
||||
if (orgWrap && !orgWrap.contains(e.target)) {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.remove('open');
|
||||
trigger.classList.remove('open');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询 - 系统脏数据 | 健康长庆原型</title>
|
||||
<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;}
|
||||
@@ -104,50 +104,18 @@
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L2 13h12L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v4M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
系统脏数据
|
||||
</a>
|
||||
<a href="exception-result.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3M8 10v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
结果异常
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 告警横幅 -->
|
||||
<div class="alert-banner">
|
||||
<div class="alert-banner__icon">⚠️</div>
|
||||
<div class="alert-banner__text">
|
||||
<strong>实时告警：</strong>当前有 <strong>7</strong> 条脏数据待处理，其中 <strong>3</strong> 条为高优先级（咨询时长异常），<strong>4</strong> 条为评分溢出。系统已自动推送告警至运维人员。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>脏数据定义：</strong>咨询时长异常（时长 < 0 或 > 72小时）或评价分数溢出（评分 > 5分）等情形。
|
||||
处理方案：业务系统数据质量控制（第一道保障）→ 数据中台清洗质量筛查 → 中台标记异常并回传业务系统 → 实时推送告警至管理员。
|
||||
</div>
|
||||
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待处理脏数据</div>
|
||||
<div class="stat-card__value" style="color:var(--danger);">7</div>
|
||||
<div class="stat-card__sub">需立即处理</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月累计脏数据</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">23</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">已处理</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">16</div>
|
||||
<div class="stat-card__sub">本月已修复</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">数据质量率</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">99.8%</div>
|
||||
<div class="stat-card__sub">本月整体质量</div>
|
||||
</div>
|
||||
<strong>异常数据定义：</strong>咨询时长异常（时长 > 168小时）、长时间待回复（>48小时未回复）或评价分数溢出（评分 > 5分）等情形。
|
||||
</div>
|
||||
|
||||
<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">
|
||||
@@ -156,16 +124,6 @@
|
||||
<option>评分溢出</option>
|
||||
</select>
|
||||
</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;">
|
||||
@@ -189,7 +147,7 @@
|
||||
<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>
|
||||
@@ -202,97 +160,66 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>告警ID</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-family:monospace;color:var(--text-secondary);">ALT20260409001</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409088</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">-15</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>张三</td>
|
||||
<td>EMP001</td>
|
||||
<td>李医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td><span class="dirty-value">-15分钟</span></td>
|
||||
<td>2026-04-09 11:23</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<!-- [交互] 点击标记为已修复 -->
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260409002</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409102</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">5280</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-orange">数据中台</span></td>
|
||||
<td>李四</td>
|
||||
<td>EMP002</td>
|
||||
<td>王医生</td>
|
||||
<td>中心医院</td>
|
||||
<td><span class="dirty-value">5280分钟</span></td>
|
||||
<td>2026-04-09 11:45</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260409003</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408215</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td>rating_score</td>
|
||||
<td><span class="dirty-value">7.5</span></td>
|
||||
<td style="color:var(--text-secondary);">1 ~ 5</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>王五</td>
|
||||
<td>EMP003</td>
|
||||
<td>张医生</td>
|
||||
<td>人民医院</td>
|
||||
<td><span class="dirty-value">7.5分</span></td>
|
||||
<td>2026-04-09 10:12</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260408010</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407088</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td>rating_score</td>
|
||||
<td><span class="dirty-value">-1</span></td>
|
||||
<td style="color:var(--text-secondary);">1 ~ 5</td>
|
||||
<td><span class="tag tag-orange">数据中台</span></td>
|
||||
<td>赵六</td>
|
||||
<td>EMP004</td>
|
||||
<td>陈医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td><span class="dirty-value">-1分</span></td>
|
||||
<td>2026-04-08 16:30</td>
|
||||
<td><span class="tag tag-green">已修复</span></td>
|
||||
<td><span class="link">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260408008</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">-3</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>孙七</td>
|
||||
<td>EMP005</td>
|
||||
<td>孙医生</td>
|
||||
<td>中心医院</td>
|
||||
<td><span class="dirty-value">-3分钟</span></td>
|
||||
<td>2026-04-08 14:22</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td><span class="link">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,339 +0,0 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.alert-banner{background:#FFF1F0;border:1px solid #FFCCC7;border-radius:var(--radius-md);padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
|
||||
.alert-banner__icon{color:var(--danger);font-size:20px;flex-shrink:0;}
|
||||
.alert-banner__text{font-size:var(--font-sm);color:var(--danger);}
|
||||
.alert-banner__text strong{font-weight:600;}
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:28px;font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#FFF8F8;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.anomaly-type{font-weight:500;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-warning{color:var(--warning);cursor:pointer;font-size:var(--font-sm);}
|
||||
.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);}
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
.rule-badge{display:inline-flex;align-items:center;gap:4px;background:#F0F5FF;color:#2F54EB;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.severity-high{color:var(--danger);font-weight:600;}
|
||||
.severity-mid{color:var(--warning);font-weight:600;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="exception-dirty.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L2 13h12L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v4M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
系统脏数据
|
||||
</a>
|
||||
<a href="exception-result.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3M8 10v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
结果异常
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 告警横幅 -->
|
||||
<div class="alert-banner">
|
||||
<div class="alert-banner__icon">⚠️</div>
|
||||
<div class="alert-banner__text">
|
||||
<strong>实时告警：</strong>当前有 <strong>5</strong> 条结果异常待处理，其中 <strong>2</strong> 条为高危（恶意差评），<strong>3</strong> 条为响应超时。系统已自动推送告警至管理员。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>结果异常定义：</strong>恶意差评（评价内容含侮辱性语言或明显虚假内容）或咨询响应超时（专家超过24小时未回复）等情形。
|
||||
处理流程：数据入库 → 中台医学/业务模型分析 → 判定为风险或异常 → 生成待办工单 → 实时（高危）或每日定时（一般）推送告警至管理员。
|
||||
</div>
|
||||
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待处理异常</div>
|
||||
<div class="stat-card__value" style="color:var(--danger);">5</div>
|
||||
<div class="stat-card__sub">需立即处理</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月累计异常</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">31</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">已处理</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">26</div>
|
||||
<div class="stat-card__sub">本月已处置</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">处理率</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">83.9%</div>
|
||||
<div class="stat-card__sub">本月整体处置率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>异常类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部类型</option>
|
||||
<option>恶意差评</option>
|
||||
<option>响应超时</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>严重程度</label>
|
||||
<select class="filter-select">
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</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 style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 31 条</span>
|
||||
<button class="btn btn-default" style="height:30px;font-size:var(--font-xs);">批量忽略</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单ID</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-family:monospace;color:var(--text-secondary);">WO20260409001</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260406008</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容含侮辱性语言，经NLP模型识别置信度 92%</td>
|
||||
<td><span class="rule-badge">NLP-侮辱检测</span></td>
|
||||
<td>孙医生 / 消化内科</td>
|
||||
<td>2026-04-09 08:15</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-evaluation.html'">查看评价</span>
|
||||
<!-- [交互] 点击标记为已处置（屏蔽该评价） -->
|
||||
<span class="link" style="color:var(--success);">屏蔽评价</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409002</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408201</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容疑似虚假，与咨询记录内容严重不符</td>
|
||||
<td><span class="rule-badge">内容一致性校验</span></td>
|
||||
<td>李医生 / 心血管内科</td>
|
||||
<td>2026-04-09 09:02</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-evaluation.html'">查看评价</span>
|
||||
<span class="link" style="color:var(--success);">屏蔽评价</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409003</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408088</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家已超过 26.5 小时未回复，超出24小时SLA</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>陈医生 / 骨科</td>
|
||||
<td>2026-04-09 10:30</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span>
|
||||
<!-- [交互] 点击催促专家回复 -->
|
||||
<span class="link-warning">催促回复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409004</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408112</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家已超过 31 小时未回复，超出24小时SLA</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>王医生 / 内分泌科</td>
|
||||
<td>2026-04-09 11:00</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span>
|
||||
<span class="link-warning">催促回复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260408015</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家超时回复，已于次日补充回复</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>张医生 / 神经内科</td>
|
||||
<td>2026-04-08 14:00</td>
|
||||
<td><span class="tag tag-green">已处置</span></td>
|
||||
<td><span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260407008</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260405033</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容含侮辱性语言，已屏蔽处理</td>
|
||||
<td><span class="rule-badge">NLP-侮辱检测</span></td>
|
||||
<td>孙医生 / 消化内科</td>
|
||||
<td>2026-04-07 16:20</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td><span class="link" onclick="location.href='history-evaluation.html'">查看评价</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 31 条</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>
|
||||
</html>
|
||||
@@ -117,12 +117,11 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<label>年份</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>本月</option>
|
||||
<option>本季度</option>
|
||||
<option>本年度</option>
|
||||
<option>自定义</option>
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@@ -130,7 +129,16 @@
|
||||
<input class="filter-input" type="text" placeholder="请输入专家姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>科室</label>
|
||||
<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>
|
||||
@@ -157,9 +165,6 @@
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
@@ -170,13 +175,13 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家信息</th>
|
||||
<th>专家医院</th>
|
||||
<th class="sortable">总咨询次数 ↕</th>
|
||||
<th>进行中</th>
|
||||
<th class="sortable">图文咨询 ↕</th>
|
||||
<th class="sortable">视频咨询 ↕</th>
|
||||
<th class="sortable">满意度 ↕</th>
|
||||
<th class="sortable">24h回复率 ↕</th>
|
||||
<th class="sortable">热度 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -190,6 +195,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>长庆医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">1,234</td>
|
||||
<td><span class="tag tag-blue">3</span></td>
|
||||
<td>986</td>
|
||||
@@ -206,14 +212,6 @@
|
||||
<span style="font-size:var(--font-xs);">98%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">极热</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -225,6 +223,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">987</td>
|
||||
<td><span class="tag tag-blue">2</span></td>
|
||||
<td>756</td>
|
||||
@@ -241,13 +240,6 @@
|
||||
<span style="font-size:var(--font-xs);">95%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">热门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -259,6 +251,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>人民医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">756</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>612</td>
|
||||
@@ -275,13 +268,6 @@
|
||||
<span style="font-size:var(--font-xs);">92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">热门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -293,6 +279,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>长庆医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">543</td>
|
||||
<td><span class="tag tag-blue">0</span></td>
|
||||
<td>489</td>
|
||||
@@ -309,12 +296,6 @@
|
||||
<span style="font-size:var(--font-xs);">88%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">一般</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -326,6 +307,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">312</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>278</td>
|
||||
@@ -342,11 +324,6 @@
|
||||
<span style="font-size:var(--font-xs);color:var(--warning);">75%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">— 冷门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -49,9 +49,10 @@
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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);}
|
||||
@@ -142,6 +143,10 @@
|
||||
</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>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名">
|
||||
@@ -214,9 +219,11 @@
|
||||
<div class="table-card__title">咨询记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 38,920 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
@@ -232,6 +239,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -245,6 +253,7 @@
|
||||
<td><span class="link" onclick="openChat('张伟','健康小助手','2026-04-09 08:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
@@ -258,6 +267,7 @@
|
||||
<td><span class="link" onclick="openChat('李明','健康小助手','2026-04-09 09:45')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409003</td>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
@@ -271,6 +281,7 @@
|
||||
<td><span class="link" onclick="openChat('王芳','健康小助手','2026-04-09 10:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408004</td>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
@@ -284,6 +295,7 @@
|
||||
<td><span class="link" onclick="openChat('刘洋','健康小助手','2026-04-08 14:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408005</td>
|
||||
<td>赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
@@ -298,6 +310,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 38,920 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -54,9 +54,10 @@
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
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);vertical-align:top;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.stars{color:#FAAD14;font-size:var(--font-base);letter-spacing:1px;}
|
||||
@@ -137,6 +138,10 @@
|
||||
</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>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
@@ -170,9 +175,17 @@
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
</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">
|
||||
@@ -180,9 +193,11 @@
|
||||
<div class="table-card__title">评价列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 9,823 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>咨询专家</th>
|
||||
@@ -196,6 +211,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001023</td>
|
||||
<td>李医生</td>
|
||||
@@ -207,6 +223,7 @@
|
||||
<td><span class="link" onclick="openChat('张伟','李医生','北京协和医院','心血管内科','2026-04-09 09:40')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002187</td>
|
||||
<td>王医生</td>
|
||||
@@ -218,6 +235,7 @@
|
||||
<td><span class="link" onclick="openChat('李明','王医生','上海瑞金医院','内分泌科','2026-04-09 11:20')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408003</td>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003456</td>
|
||||
<td>陈医生</td>
|
||||
@@ -229,6 +247,7 @@
|
||||
<td><span class="link" onclick="openChat('刘洋','陈医生','广州中山医院','骨科','2026-04-08 15:10')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407004</td>
|
||||
<td>陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004891</td>
|
||||
<td>李医生</td>
|
||||
@@ -240,6 +259,7 @@
|
||||
<td><span class="link" onclick="openChat('陈磊','李医生','北京协和医院','心血管内科','2026-04-07 10:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260406005</td>
|
||||
<td>孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005234</td>
|
||||
<td>孙医生</td>
|
||||
@@ -255,6 +275,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 9,823 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
Reference in New Issue
Block a user