yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 健康咨询三端原型大规模更新，新增13个页面/弹窗，优化22个页面

Browse Source 
- 员工端APP：新增综合搜索、选择咨询人、咨询人档案、健康档案、历史对话只读页、视频待确认详情页；重构找专家页、我的记录页、医院详情页；优化对话页面交互
- 小助手后台：新增专家管理模块（列表+详情+导入导出）；重构当前咨询页和员工档案弹窗
- 管理端后台：重构咨询须知配置（分TAB+双栏预览）；优化咨询记录和结算页
- 应急APP专家端：新增咨询人档案页；优化工作台和对话页面

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-04-13 17:21:14 +08:00
co-authored by Claude Opus 4.6
parent 828ce436e1
commit 205979e0c7
51 changed files with 4264 additions and 1489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-consult/add-health-record.html
+219
View File
@@ -0,0 +1,219 @@
<!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: #f0f0f0;
display: flex; justify-content: center; align-items: center; min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px; height: 844px; border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden; position: relative; display: flex; flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* ===== 导航栏 ===== */
.nav-bar {
height: 44px; display: flex; align-items: center; padding: 0 16px;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; cursor: pointer; }
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
/* ===== 页面内容 ===== */
.page-content { flex: 1; overflow-y: auto; padding: 16px; background: #f5f5f5; }
/* ===== 表单卡片 ===== */
.form-card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.form-card-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.form-label .required { color: #ff4d4f; }
.form-input {
width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px;
font-size: 14px; outline: none; font-family: inherit;
}
.form-input:focus { border-color: #1677ff; }
.form-textarea {
width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px;
font-size: 14px; outline: none; resize: none; min-height: 80px; font-family: inherit;
}
.form-textarea:focus { border-color: #1677ff; }
/* ===== 选项按钮组 ===== */
.option-group { display: flex; gap: 8px; flex-wrap: wrap; }
.option-btn {
padding: 8px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px;
font-size: 13px; background: #fff; cursor: pointer;
}
.option-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
/* ===== 图片上传区 ===== */
.upload-area { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-item {
width: 80px; height: 80px; border-radius: 10px; overflow: hidden; position: relative;
border: 1.5px solid #e8e8e8; flex-shrink: 0;
}
.upload-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-add {
width: 80px; height: 80px; border-radius: 10px; border: 1.5px dashed #d0d0d0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 22px; color: #ccc; cursor: pointer; background: #fafafa;
}
.upload-add span { font-size: 11px; color: #999; margin-top: 2px; }
.upload-tip { font-size: 11px; color: #bbb; margin-top: 6px; }
/* ===== 就诊信息（条件展开） ===== */
.hospital-fields { display: none; margin-top: 10px; }
.hospital-fields.show { display: block; }
/* ===== 底部保存按钮 ===== */
.bottom-bar {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 12px 16px 34px; background: #fff; border-top: 1px solid #f0f0f0;
}
.save-btn {
width: 100%; padding: 13px; border-radius: 24px; font-size: 15px; font-weight: 600;
background: #1677ff; color: #fff; border: none; cursor: pointer;
}
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons"><span>&#9679;&#9679;&#9679;&#9679;</span><span>WiFi</span><span>&#128267;</span></span>
</div>
<div class="nav-bar">
<a class="nav-back" onclick="history.back()">‹</a>
<span class="nav-title">新增健康档案</span>
</div>
<!-- PLACEHOLDER_BODY -->
<div class="page-content">
<!-- 基本信息 -->
<div class="form-card">
<div class="form-card-title">基本信息</div>
<div class="form-group">
<label class="form-label"><span class="required">*</span> 档案名称</label>
<input class="form-input" id="recordName" placeholder="如：腰部疼痛咨询">
</div>
<div class="form-group">
<label class="form-label"><span class="required">*</span> 描述您的问题</label>
<textarea class="form-textarea" id="recordDesc" placeholder="请详细描述您的症状、不适部位等"></textarea>
</div>
<div class="form-group">
<label class="form-label"><span class="required">*</span> 本次问题持续多久</label>
<div class="option-group" data-field="duration">
<div class="option-btn active" onclick="toggleBtn(this)">几天内</div>
<div class="option-btn" onclick="toggleBtn(this)">1-2周</div>
<div class="option-btn" onclick="toggleBtn(this)">1-3个月</div>
<div class="option-btn" onclick="toggleBtn(this)">3个月以上</div>
</div>
</div>
</div>
<!-- 检查资料 -->
<div class="form-card">
<div class="form-card-title">检查资料</div>
<div class="form-group">
<label class="form-label">上传检查报告或患处图片</label>
<div class="upload-area">
<div class="upload-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23e8f4ff' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='12'%3E报告1%3C/text%3E%3C/svg%3E" alt="检查报告"></div>
<div class="upload-add" onclick="addImage()">+<span>上传</span></div>
</div>
<div class="upload-tip">仅自己和医生可见，最多上传9张</div>
</div>
</div>
<!-- 就诊经历 -->
<div class="form-card">
<div class="form-card-title">就诊经历</div>
<div class="form-group">
<label class="form-label">是否去医院就诊过</label>
<div class="option-group" data-field="visited">
<div class="option-btn active" onclick="toggleVisited(this, false)">否</div>
<div class="option-btn" onclick="toggleVisited(this, true)">是</div>
</div>
<!-- [交互] 选择"是"时展开以下字段 -->
<div class="hospital-fields" id="hospitalFields">
<div class="form-group" style="margin-top:12px">
<label class="form-label">医院名称</label>
<input class="form-input" id="hospitalName" placeholder="请输入医院名称">
</div>
<div class="form-group">
<label class="form-label">科室</label>
<input class="form-input" id="department" placeholder="如：骨科、内科">
</div>
<div class="form-group">
<label class="form-label">疾病名称</label>
<input class="form-input" id="diseaseName" placeholder="如：腰椎间盘突出">
</div>
</div>
</div>
</div>
<!-- 期望帮助 -->
<div class="form-card" style="margin-bottom: 80px;">
<div class="form-card-title">期望帮助</div>
<div class="form-group">
<label class="form-label">期望得到的帮助</label>
<textarea class="form-textarea" id="expectHelp" placeholder="如：希望了解病因、推荐治疗方案等"></textarea>
</div>
</div>
</div>
<!-- 底部保存按钮 -->
<div class="bottom-bar">
<button class="save-btn" onclick="saveRecord()">保存档案</button>
</div>
</div>
<!-- PLACEHOLDER_SCRIPT -->
<script>
/** 按钮组切换 - 同组内单选 */
function toggleBtn(btn) {
var siblings = btn.parentElement.children;
for (var i = 0; i < siblings.length; i++) { siblings[i].classList.remove('active'); }
btn.classList.add('active');
}
/** [交互] 是否就诊过切换 - 控制就诊信息字段显隐 */
function toggleVisited(btn, show) {
toggleBtn(btn);
document.getElementById('hospitalFields').className = show ? 'hospital-fields show' : 'hospital-fields';
}
/** [交互] 上传图片占位 */
function addImage() {
alert('选择图片上传');
}
/** [交互] 保存档案 - 校验后返回选择咨询人页 */
function saveRecord() {
var name = document.getElementById('recordName').value.trim();
var desc = document.getElementById('recordDesc').value.trim();
if (!name) { alert('请输入档案名称'); return; }
if (!desc) { alert('请描述您的问题'); return; }
alert('档案保存成功');
history.back();
}
</script>
</body>
</html>
employee-app/health-consult/assistant-chat-history.html
+154
View File
@@ -0,0 +1,154 @@
<!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: center;
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
}
/* 手机壳模拟器 */
.phone-shell {
width: 390px; height: 844px; background: #f0f2f5; 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;
}
/* 状态栏 */
.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;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
/* 聊天头部 */
.chat-header {
display: flex; align-items: center; gap: 10px; padding: 10px 16px;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.chat-header .back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
.chat-header .avatar {
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-size: 22px; background: linear-gradient(135deg, #f6ffed, #95de64);
}
.chat-header .info .name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.chat-header .info .status-text { font-size: 12px; color: #999; }
/* 聊天消息区 */
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.chat-body::-webkit-scrollbar { display: none; }
/* 消息行 */
.msg-row { display: flex; gap: 8px; max-width: 85%; }
.msg-row.bot { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.msg-row.bot .msg-avatar { background: linear-gradient(135deg, #f6ffed, #95de64); }
.msg-row.user .msg-avatar { background: linear-gradient(135deg, #e6f4ff, #91caff); }
.msg-bubble {
padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; color: #333;
}
.msg-row.bot .msg-bubble { background: #fff; border-top-left-radius: 4px; }
.msg-row.user .msg-bubble { background: #52c41a; color: #fff; border-top-right-radius: 4px; }
/* 位置卡片气泡 */
.bubble-location { max-width: 220px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.user .bubble-location { border-top-right-radius: 4px; }
.bubble-location__map { height: 100px; background: linear-gradient(135deg, #e6f7e6, #b7eb8f); display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; }
.bubble-location__pin { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: #ff4d4f; border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(255,77,79,0.3); }
.bubble-location__pin::after { content: ''; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
.bubble-location__body { padding: 10px 12px; }
.bubble-location__name { font-size: 13px; font-weight: 600; color: #333; }
.bubble-location__addr { font-size: 11px; color: #999; margin-top: 3px; line-height: 1.4; }
/* 结束咨询卡片气泡 */
.bubble-end-card {
background: #fff; border-radius: 16px; border-top-left-radius: 4px; padding: 14px 16px;
border: 1px solid #f0f0f0; text-align: center;
}
.bubble-end-card .end-icon { font-size: 28px; margin-bottom: 6px; }
.bubble-end-card .end-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.bubble-end-card .end-time { font-size: 12px; color: #999; }
/* 底部已结束提示 */
.chat-ended-bar {
background: #fff; border-top: 1px solid #f0f0f0; padding: 14px 16px;
text-align: center; flex-shrink: 0; border-radius: 0 0 44px 44px;
}
.chat-ended-bar .ended-text {
font-size: 14px; color: #999; display: flex; align-items: center; justify-content: center; gap: 6px;
}
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>📶</span><span>📡</span><span>🔋</span></div>
</div>
<!-- 聊天头部：无结束咨询按钮 -->
<div class="chat-header">
<a class="back" href="my-records.html">← </a>
<div class="avatar">🤖</div>
<div class="info">
<div class="name">健康小助手</div>
<div class="status-text">咨询已结束</div>
</div>
</div>
<!-- 聊天消息区：历史对话内容 -->
<div class="chat-body">
<!-- 小助手消息 -->
<div class="msg-row bot">
<div class="msg-avatar">🤖</div>
<div class="msg-bubble">您好！我是健康小助手，可以为您解答健康问题、体检咨询、用药指导等。请问有什么可以帮您？</div>
</div>
<!-- 用户消息 -->
<div class="msg-row user">
<div class="msg-avatar">👤</div>
<div class="msg-bubble">我想了解一下体检套餐包含哪些项目？</div>
</div>
<!-- 小助手回复 -->
<div class="msg-row bot">
<div class="msg-avatar">🤖</div>
<div class="msg-bubble">标准体检套餐通常包含：血常规、尿常规、肝功能、肾功能、血糖、血脂、心电图、胸部X光、腹部B超等项目。您想了解哪个具体套餐？</div>
</div>
<!-- 用户发送位置卡片 -->
<div class="msg-row user">
<div class="msg-avatar">👤</div>
<div class="bubble-location">
<div class="bubble-location__map"><div class="bubble-location__pin"></div></div>
<div class="bubble-location__body">
<div class="bubble-location__name">长庆油田职工医院</div>
<div class="bubble-location__addr">陕西省西安市未央区凤城三路10号</div>
</div>
</div>
</div>
<!-- 小助手回复 -->
<div class="msg-row bot">
<div class="msg-avatar">🤖</div>
<div class="msg-bubble">已收到您的位置信息。长庆油田职工医院提供多种体检套餐，建议您直接联系体检中心了解最新套餐详情和预约方式。</div>
</div>
<!-- 小助手发出的结束咨询卡片 -->
<div class="msg-row bot">
<div class="msg-avatar">🤖</div>
<div class="bubble-end-card">
<div class="end-icon">✅</div>
<div class="end-title">已结束本次咨询</div>
<div class="end-time">2026-04-05 11:45</div>
</div>
</div>
</div>
<!-- 底部已结束提示条 -->
<div class="chat-ended-bar">
<div class="ended-text">— 咨询已结束 —</div>
</div>
</div>
</body>
</html>
employee-app/health-consult/assistant-chat.html
+80 -5
View File
@@ -36,6 +36,8 @@
}
.chat-header .info .name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.chat-header .info .status { font-size: 12px; color: #52c41a; }
.chat-header .end-btn { margin-left: auto; background: #fff1f0; color: #ff4d4f; border: 1px solid #ffccc7; border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
/* 聊天消息区 */
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.chat-body::-webkit-scrollbar { display: none; }
@@ -54,6 +56,15 @@
}
.msg-row.bot .msg-bubble { background: #fff; border-top-left-radius: 4px; }
.msg-row.user .msg-bubble { background: #52c41a; color: #fff; border-top-right-radius: 4px; }
/* 位置卡片气泡 */
.bubble-location { max-width: 220px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.user .bubble-location { border-top-right-radius: 4px; }
.bubble-location__map { height: 100px; background: linear-gradient(135deg, #e6f7e6, #b7eb8f); display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; }
.bubble-location__pin { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: #ff4d4f; border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(255,77,79,0.3); }
.bubble-location__pin::after { content: ''; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
.bubble-location__body { padding: 10px 12px; }
.bubble-location__name { font-size: 13px; font-weight: 600; color: #333; }
.bubble-location__addr { font-size: 11px; color: #999; margin-top: 3px; line-height: 1.4; }
/* 底部输入区 */
.chat-input-area {
background: #fff; border-top: 1px solid #f0f0f0; padding: 10px 12px;
@@ -75,6 +86,25 @@
background: #52c41a; color: #fff; font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* 语音切换按钮 */
.voice-toggle-btn {
width: 36px; height: 36px; border-radius: 50%; border: none;
background: #f5f5f5; color: #666; font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background 0.2s;
}
.voice-toggle-btn:active { background: #e8e8e8; }
/* 按住说话按钮 */
.hold-to-talk {
flex: 1; height: 36px; border: 1.5px solid #e8e8e8; border-radius: 18px;
background: #f9f9f9; color: #333; font-size: 14px; font-weight: 500;
cursor: pointer; display: none; align-items: center; justify-content: center;
user-select: none; transition: background 0.15s;
}
.hold-to-talk:active { background: #e6ffe6; border-color: #52c41a; color: #52c41a; }
.hold-to-talk.show { display: flex; }
.msg-input.hide { display: none; }
.send-btn.hide { display: none; }
/* 展开面板 */
.expand-panel {
display: none; grid-template-columns: repeat(4, 1fr); gap: 12px;
@@ -103,9 +133,13 @@
<div class="avatar">🤖</div>
<div class="info">
<div class="name">健康小助手</div>
<div class="status">● 在线</div>
</div>
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
<button class="end-btn" onclick="showEndConfirm()">结束咨询</button>
</div>
<!-- 聊天消息区 -->
<div class="chat-body">
<!-- 小助手消息 -->
@@ -123,22 +157,38 @@
<div class="msg-avatar">🤖</div>
<div class="msg-bubble">标准体检套餐通常包含：血常规、尿常规、肝功能、肾功能、血糖、血脂、心电图、胸部X光、腹部B超等项目。您想了解哪个具体套餐？</div>
</div>
<!-- 用户发送位置卡片 -->
<div class="msg-row user">
<div class="msg-avatar">👤</div>
<div class="bubble-location">
<div class="bubble-location__map"><div class="bubble-location__pin"></div></div>
<div class="bubble-location__body">
<div class="bubble-location__name">长庆油田职工医院</div>
<div class="bubble-location__addr">陕西省西安市未央区凤城三路10号</div>
</div>
</div>
</div>
</div>
<!-- 底部输入区 -->
<div class="chat-input-area">
<div class="input-row">
<!-- [交互] 加号按钮：展开/收起功能面板 -->
<button class="plus-btn" onclick="togglePanel()">+</button>
<input class="msg-input" type="text" placeholder="输入消息...">
<!-- [交互] 语音/键盘切换按钮 -->
<button class="voice-toggle-btn" id="voiceToggle" onclick="toggleVoice()">🎤</button>
<input class="msg-input" id="msgInput" type="text" placeholder="输入消息...">
<!-- [交互] 按住说话按钮，语音模式下显示 -->
<button class="hold-to-talk" id="holdToTalk">按住 说话</button>
<!-- [交互] 发送按钮 -->
<button class="send-btn">➤</button>
<button class="send-btn" id="sendBtn">➤</button>
</div>
<!-- [交互] 展开面板：图片/拍摄/体检报告/选择档案 -->
<div class="expand-panel" id="expandPanel">
<div class="expand-item"><div class="icon">🖼️</div><div class="text">图片</div></div>
<div class="expand-item"><div class="icon">📷</div><div class="text">拍摄</div></div>
<div class="expand-item"><div class="icon">📋</div><div class="text">体检报告</div></div>
<div class="expand-item"><div class="icon">📁</div><div class="text">选择档案</div></div>
<div class="expand-item"><div class="icon">📷</div><div class="text">文件</div></div>
<div class="expand-item"><div class="icon">📷</div><div class="text">位置</div></div>
</div>
</div>
</div>
@@ -151,6 +201,31 @@
const panel = document.getElementById('expandPanel');
panel.classList.toggle('show');
}
/**
* 切换语音/文字输入模式
* 语音模式：隐藏输入框和发送按钮，显示"按住 说话"按钮，图标变为 ⌨️
* 文字模式：隐藏"按住 说话"按钮，显示输入框和发送按钮，图标变为 🎤
*/
var isVoiceMode = false;
function toggleVoice() {
isVoiceMode = !isVoiceMode;
var toggleBtn = document.getElementById('voiceToggle');
var msgInput = document.getElementById('msgInput');
var holdBtn = document.getElementById('holdToTalk');
var sendBtn = document.getElementById('sendBtn');
if (isVoiceMode) {
toggleBtn.textContent = '⌨️';
msgInput.classList.add('hide');
sendBtn.classList.add('hide');
holdBtn.classList.add('show');
} else {
toggleBtn.textContent = '🎤';
msgInput.classList.remove('hide');
sendBtn.classList.remove('hide');
holdBtn.classList.remove('show');
}
}
</script>
</body>
</html>
employee-app/health-consult/consult-notice-dialog.html
-117
View File
@@ -1,117 +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>
/* ===== 全局重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px;
height: 844px;
border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 24px 8px;
font-size: 14px;
font-weight: 600;
color: #333;
flex-shrink: 0;
background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* ===== 页面占位内容 ===== */
.page-content { flex: 1; background: #f5f5f5; }
/* ===== 弹窗遮罩层 ===== */
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
/* ===== 底部滑出弹窗面板 ===== */
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px; width: 100%; }
.modal-sheet h3 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; color: #333; }
/* ===== 须知列表 ===== */
.notice-list { list-style: none; margin-bottom: 20px; }
.notice-list li { font-size: 14px; color: #555; line-height: 1.7; padding: 6px 0; display: flex; gap: 8px; }
.notice-list li::before { content: attr(data-idx); color: #1677ff; font-weight: 600; flex-shrink: 0; }
/* ===== 按钮组 ===== */
.modal-btns { display: flex; gap: 12px; }
.modal-btns button { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
.btn-cancel { background: #f5f5f5; color: #666; }
.btn-confirm { background: #1677ff; color: #fff; }
</style>
</head>
<body>
<!-- 手机壳模拟器 -->
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons">
<span>&#9679;&#9679;&#9679;&#9679;</span>
<span>WiFi</span>
<span>&#128267;</span>
</span>
</div>
<!-- 页面占位内容 -->
<div class="page-content"></div>
<!-- [交互] 咨询须知弹窗 - 默认打开状态 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-sheet">
<h3>咨询须知</h3>
<ol class="notice-list">
<li data-idx="1.">本平台提供在线健康咨询服务，不替代线下就医。</li>
<li data-idx="2.">请如实描述您的症状和病史，以便医生准确判断。</li>
<li data-idx="3.">医生将在24小时内回复您的咨询。</li>
<li data-idx="4.">如遇紧急情况，请立即拨打120或前往医院就诊。</li>
</ol>
<div class="modal-btns">
<button class="btn-cancel" onclick="handleCancel()">取消</button>
<button class="btn-confirm" onclick="handleConfirm()">同意并开始咨询</button>
</div>
</div>
</div>
</div>
<script>
/* ===== 交互逻辑 ===== */
/** 取消按钮 - 返回上一页 */
function handleCancel() {
history.back();
}
/** 同意按钮 - 跳转到图文咨询页面 */
function handleConfirm() {
window.location.href = 'text-chat.html';
}
</script>
</body>
</html>
employee-app/health-consult/consult-person-detail.html
+261
View File
@@ -0,0 +1,261 @@
<!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: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px; height: 844px; border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden; position: relative; display: flex; flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* ===== 导航栏 ===== */
.nav-bar {
height: 44px; display: flex; align-items: center; padding: 0 16px;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; cursor: pointer; }
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
/* ===== 页面内容 ===== */
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f5f5f5; }
/* ===== 个人信息头部 ===== */
.profile-header {
background: linear-gradient(135deg, #e8f4ff, #d6e8ff);
padding: 20px 16px 16px; display: flex; align-items: center; gap: 14px;
}
.profile-avatar {
width: 56px; height: 56px; border-radius: 50%; background: #fff;
display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.profile-info { flex: 1; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.profile-tag { font-size: 11px; background: #1677ff; color: #fff; padding: 2px 8px; border-radius: 10px; }
.profile-meta { font-size: 13px; color: #555; margin-top: 4px; }
/* ===== 信息卡片 ===== */
.info-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; padding: 16px; }
.info-card__title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.info-item {}
.info-item__label { font-size: 12px; color: #999; margin-bottom: 2px; }
.info-item__value { font-size: 14px; color: #333; font-weight: 500; }
/* ===== 生活习惯标签 ===== */
.habit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.habit-tag {
font-size: 13px; padding: 6px 14px; border-radius: 20px;
background: #f5f5f5; color: #555;
}
.habit-tag--good { background: #f6ffed; color: #389e0d; }
.habit-tag--warn { background: #fff7e6; color: #d46b08; }
/* ===== 健康档案卡片 ===== */
.record-card {
background: #fff; border-radius: 14px; margin: 12px 16px 0; overflow: hidden;
}
.record-card__header {
padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid #f5f5f5;
}
.record-card__icon {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, #e8f4ff, #bae0ff);
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.record-card__title { font-size: 15px; font-weight: 600; color: #333; }
.record-card__date { font-size: 12px; color: #999; margin-top: 2px; }
.record-card__body { padding: 12px 16px 14px; }
.record-card__section { margin-bottom: 12px; }
.record-card__section:last-child { margin-bottom: 0; }
.record-card__label { font-size: 12px; color: #999; margin-bottom: 4px; }
.record-card__text { font-size: 14px; color: #333; line-height: 1.6; }
.record-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.record-card__tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
.record-card__tag--blue { color: #1677ff; background: #e8f4ff; }
.record-card__tag--orange { color: #d46b08; background: #fff7e6; }
.record-card__tag--red { color: #cf1322; background: #fff1f0; }
/* ===== 附件图片 ===== */
.record-card__images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.record-card__img {
width: 80px; height: 80px; border-radius: 8px; object-fit: cover;
border: 1px solid #f0f0f0; background: #f5f5f5;
}
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons"><span>&#9679;&#9679;&#9679;&#9679;</span><span>WiFi</span><span>&#128267;</span></span>
</div>
<div class="nav-bar">
<a class="nav-back" onclick="history.back()">‹</a>
<span class="nav-title">咨询人档案</span>
</div>
<!-- PLACEHOLDER_CONTENT -->
<div class="page-content">
<!-- 个人信息头部 -->
<div class="profile-header">
<div class="profile-avatar">👤</div>
<div class="profile-info">
<div class="profile-name-row">
<span class="profile-name">张旭</span>
<span class="profile-tag">父亲</span>
</div>
<div class="profile-meta">28岁 · 男 · 170cm · 65kg</div>
</div>
</div>
<!-- 基本信息 -->
<div class="info-card">
<div class="info-card__title">📋 基本信息</div>
<div class="info-grid">
<div class="info-item">
<div class="info-item__label">姓名</div>
<div class="info-item__value">张旭</div>
</div>
<div class="info-item">
<div class="info-item__label">与本人关系</div>
<div class="info-item__value">父亲</div>
</div>
<div class="info-item">
<div class="info-item__label">性别</div>
<div class="info-item__value">男</div>
</div>
<div class="info-item">
<div class="info-item__label">年龄</div>
<div class="info-item__value">28岁</div>
</div>
<div class="info-item">
<div class="info-item__label">身高</div>
<div class="info-item__value">170cm</div>
</div>
<div class="info-item">
<div class="info-item__label">体重</div>
<div class="info-item__value">65kg</div>
</div>
</div>
</div>
<!-- 生活习惯 -->
<div class="info-card">
<div class="info-card__title">🏃 生活习惯</div>
<div class="habit-tags">
<span class="habit-tag habit-tag--good">不吸烟</span>
<span class="habit-tag habit-tag--warn">偶尔饮酒</span>
<span class="habit-tag habit-tag--good">饮食均衡</span>
<span class="habit-tag habit-tag--good">睡眠良好</span>
</div>
</div>
<!-- 身体情况 -->
<div class="info-card">
<div class="info-card__title">🩺 身体情况</div>
<div class="info-grid">
<div class="info-item">
<div class="info-item__label">过敏史</div>
<div class="info-item__value">无</div>
</div>
<div class="info-item">
<div class="info-item__label">遗传史</div>
<div class="info-item__value">高血压家族史</div>
</div>
<div class="info-item">
<div class="info-item__label">既往史</div>
<div class="info-item__value">无</div>
</div>
<div class="info-item">
<div class="info-item__label">其他疾病</div>
<div class="info-item__value">无</div>
</div>
</div>
</div>
<!-- 健康档案 -->
<div class="record-card">
<div class="record-card__header">
<div class="record-card__icon">📋</div>
<div>
<div class="record-card__title">腰部疼痛咨询</div>
<div class="record-card__date">2026-04-10 创建</div>
</div>
</div>
<div class="record-card__body">
<!-- 问题描述 -->
<div class="record-card__section">
<div class="record-card__label">问题描述</div>
<div class="record-card__text">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div>
</div>
<!-- 持续时间 -->
<div class="record-card__section">
<div class="record-card__label">持续时间</div>
<div class="record-card__tags">
<span class="record-card__tag record-card__tag--orange">1-2周</span>
</div>
</div>
<!-- 检查资料 -->
<div class="record-card__section">
<div class="record-card__label">检查资料</div>
<div class="record-card__images">
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23e8f4ff' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='11'%3E检查报告%3C/text%3E%3C/svg%3E" alt="检查报告">
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23fff7e6' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23d46b08' font-size='11'%3E患处照片%3C/text%3E%3C/svg%3E" alt="患处照片">
</div>
</div>
<!-- 就诊经历 -->
<div class="record-card__section">
<div class="record-card__label">就诊经历</div>
<div class="record-card__text">
<div class="info-grid" style="margin-top:4px">
<div class="info-item">
<div class="info-item__label">医院名称</div>
<div class="info-item__value">北京协和医院</div>
</div>
<div class="info-item">
<div class="info-item__label">科室</div>
<div class="info-item__value">骨科</div>
</div>
<div class="info-item">
<div class="info-item__label">疾病名称</div>
<div class="info-item__value">腰肌劳损</div>
</div>
</div>
</div>
</div>
<!-- 期望帮助 -->
<div class="record-card__section">
<div class="record-card__label">期望帮助</div>
<div class="record-card__text">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
employee-app/health-consult/doc/CHANGELOG.md
+134
View File
@@ -4,6 +4,140 @@
---
## [2026-04-13] feat: 新增图文咨询历史对话只读页面
**涉及文件（1个新增 + 2个修改）：**
- `text-chat-history.html`（新增）— 图文咨询历史对话只读页面，基于 text-chat.html 结构，去掉"结束咨询"按钮、温馨提示卡片、底部输入区及所有弹窗，底部显示"咨询已结束"提示条，保留健康档案卡片和体检报告卡片展示
- `record-detail-rated.html` — "查看历史对话记录"跳转从 `text-chat.html` 改为 `text-chat-history.html?from=record-detail-rated`
- `record-detail-unrated.html` — "查看历史对话记录"跳转从 `text-chat.html` 改为 `text-chat-history.html?from=record-detail-unrated`
**变更说明：**
- 已完成的图文咨询从详情页查看对话时进入只读模式，无法继续输入或结束咨询
- 返回按钮根据 `?from` 参数精确返回来源详情页
---
## [2026-04-13] feat: 新增小助手历史对话只读页面
**涉及文件（1个新增 + 1个修改）：**
- `assistant-chat-history.html`（新增）— 小助手历史对话只读页面，基于 assistant-chat.html 结构，去掉右上角"结束咨询"按钮和底部输入区，底部显示"咨询已结束"提示条
- `my-records.html` — 咨询小助手面板中已完成记录的跳转目标从 `assistant-chat.html` 改为 `assistant-chat-history.html`
**变更说明：**
- 已完成的小助手咨询进入只读模式，仅可查看历史对话，无法继续输入
- 进行中的小助手咨询仍跳转到 `assistant-chat.html`（可继续对话）
---
## [2026-04-13] refactor: 合并评价页面，新增匿名评价功能
**涉及文件（2个修改 + 1个删除）：**
- `rate-doctor.html` — 新增匿名评价开关（默认关闭），开启后医生无法看到评价者姓名
- `record-detail-unrated.html` — 评价按钮跳转目标从 `rate-dialog.html` 改为 `rate-doctor.html`
- `rate-dialog.html`（删除）— 弹窗版评价与独立页功能重复，合并至 `rate-doctor.html`
**变更说明：**
- 统一评价入口为 `rate-doctor.html`，消除两个评价页面并存的冗余
- 匿名评价开关位于评价文本框下方，附提示文案"开启后，医生将无法看到您的姓名"
---
## [2026-04-13] feat: 新增视频咨询"待确认"状态
**涉及文件（1个修改 + 1个新增）：**
- `my-records.html` — 视频咨询列表新增"待确认"状态记录项（周明辉医生），新增 `.status-confirming` 样式（紫色标签）
- `video-detail-confirming.html`（新增）— 待确认状态的视频咨询详情页，包含医生信息栏、咨询人健康档案入口、视频咨询Banner（紫色渐变）、预约信息卡片、温馨提示，底部操作栏为"取消预约"+"等待医生确认"（禁用态）
**变更说明：**
- 待确认状态表示用户已提交视频咨询预约申请，等待医生确认接诊
- 状态标签使用紫色（#722ed1）区分于待开始的橙色
- 详情页信息卡片展示期望时间（非确定时间）和提交时间
---
## [2026-04-13] feat: 我的咨询页增加咨询专家/咨询小助手分类
**涉及文件（1个修改）：**
- `my-records.html` — 一级Tab从「图文咨询/视频咨询」改为「咨询专家/咨询小助手」；咨询专家下内嵌二级Tab（图文咨询/视频咨询），保留原有列表数据；新增咨询小助手面板，包含4条AI小助手历史咨询记录（2条进行中+2条已完成）
**变更说明：**
- 页面结构从单层Tab改为两层Tab：一级区分咨询类型（专家/小助手），二级区分专家咨询形式（图文/视频）
- 咨询小助手记录卡片展示对话主题、AI标识、状态标签、消息摘要、时间，点击跳转到AI小助手聊天页
- JS逻辑拆分为 switchPrimaryTab（一级切换）和 switchSubTab（二级切换），互不干扰
---
## [2026-04-13] feat: 医院详情页专家改为两列网格并新增用户评价
**涉及文件（1个修改）：**
- `hospital-detail.html` — 本院专家区域从列表改为两列网格卡片，展示6名热门专家（头像、姓名、职称、科室、评分、咨询次数）；新增用户评价区域，展示最新4条评价（标注来源科室），底部"查看全部"跳转到评价列表页；移除不再需要的排序栏、搜索栏及相关JS
**变更说明：**
- 专家卡片改为紧凑的两列网格布局，每张卡片居中展示核心信息
- 新增用户评价区域，每条评价包含用户昵称、日期、来源科室标签、星级评分、评价内容
- 4条评价分别来自心内科、神经内科、内分泌科、骨科
- "查看全部"按钮跳转到 expert-reviews.html 并携带医院名称参数
---
## [2026-04-13] feat: 医院详情页新增"全部专家"入口
**涉及文件（2个修改）：**
- `hospital-detail.html` — "本院专家"标题右侧新增"全部专家"按钮，点击跳转到专家列表页并携带医院名称参数
- `expert-list.html` — 新增 type=hospital 参数处理，导航标题显示"医院专家"，头部显示医院名称，展示该医院全部专家数据
**变更说明：**
- 医院详情页本院专家区域标题改为 flex 布局，右侧展示"全部专家 >"链接
- 点击后跳转到 expert-list.html?type=hospital&name=医院名称
- 专家列表页新增北京协和医院（6位）和上海瑞金医院（3位）的模拟专家数据
---
## [2026-04-13] feat: 科室与疾病跳转专家列表页区分上下文
**涉及文件（3个修改）：**
- `find-expert.html` — 科室和疾病项的跳转链接增加 type/name URL 参数，新增 goExpertList() 跳转函数
- `expert-list.html` — 导航标题和头部区域根据 URL 参数动态切换（科室→"科室专家"，疾病→"疾病专家"），疾病维度展示不同的模拟专家数据
- `search.html` — 科室和疾病标签的跳转链接同步增加 type/name 参数
**变更说明：**
- 按科室进入专家列表：导航标题"科室专家"，头部显示科室名称
- 按疾病进入专家列表：导航标题"疾病专家"，头部显示疾病名称，专家卡片展示与该疾病相关的擅长标签
- 综合搜索页中科室/疾病标签跳转同步携带参数
---
## [2026-04-13] feat: 新增综合搜索页面
**涉及文件（1个新增，1个修改）：**
- `search.html` — 新增综合搜索二级页面；包含搜索历史、热门搜索、综合搜索结果（专家/医院/科室/疾病四类混合展示）、无结果空态
- `find-expert.html` — 搜索栏由可输入改为点击跳转区域，点击后跳转到综合搜索页
**变更说明：**
- 找专家页搜索栏改为不可编辑的占位文本，点击整个区域跳转到 search.html
- 综合搜索页顶部自动聚焦输入框，右侧取消按钮返回找专家页
- 默认态展示搜索历史标签（支持清空）和热门搜索标签
- 输入关键字后切换为搜索结果态，按专家、医院、科室、疾病四个分类展示匹配结果
- 专家分类带"查看全部"入口，医院分类带"查看全部"入口
- 输入"无"模拟无结果空态展示
---
## [2026-04-13] feat: 选择咨询人改为独立页面，新增健康档案管理
**涉及文件（2个新增）：**
- `select-person.html` — 新增选择咨询人二级页面，替代原弹窗设计；咨询人卡片下方展示健康档案列表，支持选中档案后发送咨询；无档案时显示新增档案入口
- `add-health-record.html` — 新增健康档案三级页面；表单包含档案名称、问题描述、持续时间、上传检查报告/患处图片（仅自己和医生可见）、是否就诊过（条件展开医院/科室/疾病字段）、期望帮助
**变更说明：**
- 原 `select-person-dialog.html` 弹窗设计废弃，改为独立二级页面 `select-person.html`
- 咨询人信息增加身高体重展示
- 每个咨询人下方展示其健康档案列表（档案名称、问题摘要、创建时间）
- 选中档案后底部"发送咨询"按钮激活，将咨询人基本信息+档案信息发送到对话框
- 新增健康档案表单支持就诊经历条件展开（选择"是"后展开医院名称、科室、疾病名称字段）
---
## [2026-04-10] fix: 修复返回按钮死循环跳转问题
**涉及文件（2个）：**
employee-app/health-consult/doc/PRD.md
+187 -19
View File
@@ -2,7 +2,7 @@
> **所属端**：员工端 APP
> **模块路径**：`employee-app/health-consult/`
> **最后更新**：2026-04-10
> **最后更新**：2026-04-13
---
@@ -15,14 +15,18 @@
```
健康咨询首页
├── 找专家
│ ├── 综合搜索 → 专家主页 / 医院详情 / 专家列表
│ ├── [按医院] → 医院详情 → 专家主页
│ ├── [按科室] → 专家列表 → 专家主页
│ └── [按疾病] → 专家列表 → 专家主页
├── AI 小助手
└── 我的咨询 → 咨询详情 → 图文咨询聊天
└── 我的咨询
├── [咨询专家] → 图文咨询详情 / 视频咨询详情
└── [咨询小助手] → AI 小助手聊天
专家主页
├── [图文咨询] → 咨询须知弹窗 → 图文咨询聊天 → 结束咨询确认弹窗 → 评价医生
│ └── 聊天中选择档案 → 选择咨询人 → 新增健康档案
├── [视频咨询] → 咨询须知弹窗 → 视频咨询预约 → 预约成功
└── 查看全部评价 → 用户评价列表
```
@@ -32,6 +36,9 @@
```mermaid
stateDiagram-v2
[*] --> 进行中: 发起图文咨询
[*] --> 待确认: 提交视频咨询预约
待确认 --> 待开始: 医生确认接诊
待确认 --> 已取消: 用户取消预约
[*] --> 待开始: 预约视频咨询
待开始 --> 进行中: 到达预约时间
待开始 --> 已取消: 用户取消预约
@@ -46,7 +53,8 @@ stateDiagram-v2
|---|------|------|------|
| 1 | `index.html` | 页面 | 模块首页 |
| 2 | `find-expert.html` | 页面 | 找专家（搜索 + 分类） |
| 3 | `expert-list.html` | 页面 | 专家列表 |
| 3 | `search.html` | 页面 | 综合搜索（关键字搜索专家/医院/科室/疾病） |
| 4 | `expert-list.html` | 页面 | 专家列表 |
| 4 | `expert-profile.html` | 页面 | 专家主页 |
| 5 | `expert-reviews.html` | 页面 | 用户评价列表 |
| 6 | `hospital-detail.html` | 页面 | 医院详情 |
@@ -59,13 +67,18 @@ stateDiagram-v2
| 13 | `rate-doctor.html` | 页面 | 评价医生 |
| 14 | `consult-notice-dialog.html` | 弹窗 | 咨询须知 |
| 15 | `end-consult-dialog.html` | 弹窗 | 结束咨询确认 |
| 16 | `select-person-dialog.html` | 弹窗 | 选择/新增咨询人 |
| 16 | `select-person-dialog.html` | 弹窗 | 选择/新增咨询人（已废弃，由 select-person.html 替代） |
| 17 | `select-report-dialog.html` | 弹窗 | 选择体检报告 |
| 18 | `rate-dialog.html` | 弹窗 | 评价医生（弹窗版） |
| 19 | `video-detail-pending.html` | 页面 | 视频咨询详情 - 待开始 |
| 18 | ~~`rate-dialog.html`~~ | — | 已删除，合并至 `rate-doctor.html` |
| 19 | `video-detail-confirming.html` | 页面 | 视频咨询详情 - 待确认 |
| 20 | `video-detail-pending.html` | 页面 | 视频咨询详情 - 待开始 |
| 20 | `video-detail-done.html` | 页面 | 视频咨询详情 - 已完成 |
| 21 | `video-detail-cancelled.html` | 页面 | 视频咨询详情 - 已取消 |
| 22 | `video-detail-rejected.html` | 页面 | 视频咨询详情 - 已拒绝 |
| 23 | `select-person.html` | 页面 | 选择咨询人（含档案列表） |
| 24 | `add-health-record.html` | 页面 | 新增健康档案 |
| 25 | `assistant-chat-history.html` | 页面 | 小助手历史对话（只读） |
| 26 | `text-chat-history.html` | 页面 | 图文咨询历史对话（只读） |
---
@@ -97,7 +110,7 @@ stateDiagram-v2
**功能说明**
三维度查找专家：按医院、按科室、按疾病。顶部搜索栏支持关键词模糊搜索。
三维度查找专家：按医院、按科室、按疾病。顶部搜索栏点击后跳转到综合搜索页。
- **全部医院**：医院卡片列表，展示名称、等级、距离、专家数、地址
- **全部科室**：左侧一级分类 + 右侧二级科室网格，每项展示科室名和专家数
@@ -112,6 +125,7 @@ stateDiagram-v2
**交互说明**
- 点击搜索栏跳转到综合搜索页
- 顶部 Tab 切换「全部医院 / 全部科室 / 全部疾病」三个面板
- 点击医院卡片跳转到医院详情页
- 科室面板：点击左侧一级分类联动切换右侧二级科室；点击二级科室项跳转到专家列表页
@@ -120,17 +134,51 @@ stateDiagram-v2
---
### 2.2b 综合搜索（search.html）
**功能说明**
综合搜索二级页面，支持按关键字搜索所有相关信息。搜索结果按专家、医院、科室、疾病四个分类混合展示。
- **默认态**：展示搜索历史标签和热门搜索标签
- **结果态**：按分类展示匹配结果，专家和医院分类带"查看全部"入口
- **空态**：无匹配结果时展示空状态提示
**业务规则**
- 搜索基于 ElasticSearch 全文模糊匹配，同时搜索专家姓名、医院名称、科室名称、疾病名称
- 搜索历史本地存储，最多保留 10 条
- 热门搜索由后端配置，定期更新
**交互说明**
- 输入框自动聚焦，输入文字后实时展示搜索结果
- 输入框右侧清除按钮，点击清空输入并回到默认态
- 点击搜索历史/热门搜索标签，自动填入关键字并触发搜索
- 点击"清空"清除所有搜索历史
- 点击专家卡片跳转到专家主页
- 点击医院卡片跳转到医院详情页
- 点击科室/疾病标签跳转到专家列表页
- 点击"取消"返回找专家页
---
### 2.3 专家列表（expert-list.html）
**功能说明**
展示特定分类（科室/疾病）下的专家列表。头部展示分类名称和专家总数。支持排序（好评优先 / 热度优先 / 回复率）和按姓名搜索过滤。
展示特定分类（科室/疾病）下的专家列表。根据 URL 参数 `type`（dept/disease）和 `name` 动态切换页面上下文：
- 科室维度（type=dept）：导航标题"科室专家"，头部显示科室名称
- 疾病维度（type=disease）：导航标题"疾病专家"，头部显示疾病名称，专家卡片展示与该疾病相关的擅长标签
支持排序（好评优先 / 热度优先 / 回复率）和按姓名搜索过滤。
**业务规则**
- 默认按好评优先排序
- 搜索为前端实时过滤，匹配医生姓名
- 无结果时展示空状态提示
- 页面通过 URL 参数区分来源，同一页面服务科室和疾病两种入口
**交互说明**
@@ -205,18 +253,23 @@ stateDiagram-v2
**功能说明**
展示用户的所有咨询记录。通过 Tab 栏切换「图文咨询 / 视频咨询」。记录卡片展示医生头像、姓名、科室、状态标签、咨询人、消息摘要、时间。
展示用户的所有咨询记录。通过一级 Tab 栏切换「咨询专家 / 咨询小助手」两大类型：
- **咨询专家**：内嵌二级 Tab 切换「图文咨询 / 视频咨询」，记录卡片展示医生头像、姓名、科室、状态标签、咨询人、消息摘要、时间
- **咨询小助手**：展示 AI 小助手历史咨询记录列表，卡片展示对话主题、AI 标识、状态标签、消息摘要、时间
**业务规则**
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）、`已取消`（灰色）、`已拒绝`（红色）
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）、`待确认`（紫色）、`已取消`（灰色）、`已拒绝`（红色）
- 已完成的图文咨询如已评价则显示"已评价"标记
- 视频咨询 `待开始` 状态显示预约时间，`已完成` 显示通话时长，`已取消` 显示预约时间，`已拒绝` 显示预约时间
- 视频咨询 `待确认` 状态显示期望时间，`待开始` 状态显示预约时间，`已完成` 显示通话时长，`已取消` 显示预约时间，`已拒绝` 显示预约时间
- 小助手咨询仅有「进行中」和「已完成」两种状态
**交互说明**
- Tab 栏切换图文/视频记录列表
- 点击记录卡片跳转到对应咨询详情页：图文咨询跳转到咨询详情页，视频咨询根据状态跳转到对应的视频详情页（待开始/已完成/已取消/已拒绝）
- 一级 Tab 栏切换咨询专家/咨询小助手面板
- 咨询专家面板内二级 Tab 切换图文/视频记录列表
- 点击专家咨询记录卡片跳转到对应咨询详情页：图文咨询跳转到咨询详情页，视频咨询根据状态跳转到对应的视频详情页（待确认/待开始/已完成/已取消/已拒绝）
- 点击小助手咨询记录卡片跳转到AI小助手聊天页
- 导航栏返回 → 健康咨询首页
---
@@ -244,6 +297,27 @@ stateDiagram-v2
---
### 2.8e 视频咨询详情 - 待确认（video-detail-confirming.html）
**功能说明**
视频咨询待确认状态的详情页。展示医生信息（紫色"待确认"标签）、咨询人健康档案入口、紫色视频咨询Banner（含期望时间）、预约信息卡片（咨询人、咨询类型、期望时间、提交时间、当前状态）、温馨提示。
**业务规则**
- 用户提交视频咨询预约后进入待确认状态，等待医生确认接诊
- 医生确认后状态流转为"待开始"，并确定最终预约时间
- 用户可在医生确认前取消预约
- "等待医生确认"按钮为置灰禁用状态
**交互说明**
- 点击「咨询人健康档案」跳转到咨询人档案详情页
- 点击「取消预约」取消当前视频咨询预约
- 导航栏返回 → 我的咨询记录页
---
### 2.8a 视频咨询详情 - 待开始（video-detail-pending.html）
**功能说明**
@@ -414,12 +488,14 @@ AI 智能问诊聊天界面。头部展示机器人头像和"健康小助手"。
- 默认 5 星，可下调
- 文字评价为选填
- 支持匿名评价，开关默认关闭；开启后医生无法看到评价者姓名
- 提交后跳转到我的咨询记录页
- 返回按钮精确返回来源页（从聊天页进入则返回聊天页，其他情况返回我的咨询记录页）
**交互说明**
- 点击星级图标切换评分
- 点击匿名评价开关切换匿名状态
- 点击「提交评价」提交并跳转到我的咨询记录页
- 导航栏返回 → 精确返回来源页
@@ -429,6 +505,69 @@ AI 智能问诊聊天界面。头部展示机器人头像和"健康小助手"。
|------|------|------|------|
| 星级评分 | 星级选择（1~5） | 是 | 默认 5 星 |
| 评价内容 | 多行文本 | 否 | 无字数限制 |
| 匿名评价 | 开关 | 否 | 默认关闭，开启后隐藏评价者姓名 |
---
### 2.14 选择咨询人（select-person.html）
**功能说明**
独立二级页面，替代原弹窗设计。展示当前用户的所有咨询人列表（本人 + 家属），每个咨询人卡片下方展示其健康档案列表。用户选中某条档案后，点击底部"发送咨询"将咨询人基本信息（姓名、年龄、性别、身高、体重）、生活习惯、身体情况及所选健康档案一并发送到对话框。
**业务规则**
- 咨询人卡片展示：头像、姓名、年龄、性别、身高、体重、与本人关系标签
- 有档案的咨询人：卡片下方展开档案列表，每条档案显示档案名称、问题摘要、创建时间
- 无档案的咨询人：卡片独立展示，无档案区域
- 选中档案时自动高亮所属咨询人
- 未选择档案时仍可发送咨询（仅发送咨询人基本信息）
**交互说明**
- 点击咨询人卡片选中该咨询人，取消其他选中状态
- 点击档案条目选中该档案，同时高亮所属咨询人
- 点击「+ 新增健康档案」跳转到新增健康档案页
- 点击「+ 新增咨询人」进入新增咨询人流程
- 点击「发送咨询」将咨询人信息和档案发送到对话框并返回
- 导航栏返回 → 上一页
---
### 2.15 新增健康档案（add-health-record.html）
**功能说明**
三级页面，为指定咨询人创建健康档案。档案信息包含问题描述、持续时间、检查资料上传、就诊经历、期望帮助。保存后返回选择咨询人页，新档案出现在对应咨询人下方。
**业务规则**
- 档案名称和问题描述为必填项
- 上传图片仅自己和医生可见，最多 9 张
- 选择"是否去医院就诊过"为"是"时，展开医院名称、科室、疾病名称三个字段
- 保存后档案关联到当前咨询人
**交互说明**
- 问题持续时间通过选项按钮组单选（几天内 / 1-2周 / 1-3个月 / 3个月以上）
- 点击上传区域选择图片上传
- 选择"是否就诊过"为"是"时展开就诊信息字段，选"否"时收起
- 点击「保存档案」校验必填项后保存并返回选择咨询人页
- 导航栏返回 → 选择咨询人页
#### 新增健康档案表单字段
| 字段 | 类型 | 必填 | 规则 |
|------|------|------|------|
| 档案名称 | 文本 | 是 | 如：腰部疼痛咨询 |
| 描述您的问题 | 多行文本 | 是 | 详细描述症状、不适部位等 |
| 本次问题持续多久 | 按钮组单选 | 是 | 几天内 / 1-2周 / 1-3个月 / 3个月以上 |
| 检查报告/患处图片 | 图片上传 | 否 | 最多9张，仅自己和医生可见 |
| 是否去医院就诊过 | 按钮组单选 | 是 | 否 / 是（选"是"展开以下字段） |
| 医院名称 | 文本 | 否 | 就诊过时填写 |
| 科室 | 文本 | 否 | 就诊过时填写 |
| 疾病名称 | 文本 | 否 | 就诊过时填写 |
| 期望得到的帮助 | 多行文本 | 否 | 如：了解病因、推荐治疗方案 |
---
@@ -523,18 +662,47 @@ AI 智能问诊聊天界面。头部展示机器人头像和"健康小助手"。
---
### 3.5 评价医生弹窗（rate-dialog.html）
### 3.5 评价医生弹窗（rate-dialog.html）— 已删除
已合并至 `rate-doctor.html`，不再单独维护。
---
### 2.15 小助手历史对话（assistant-chat-history.html）
**功能说明**
弹窗形式的评价功能，底部滑出样式。与评价医生页功能相同，展示形式不同。
已结束的小助手咨询的历史对话查看页面。与小助手聊天页结构一致，但为只读模式，不可继续对话。
**业务规则**
- 必须选择星级才能提交，否则弹出提示
- 文字评价选填
- 仅展示历史消息，不提供输入功能
- 头部显示"咨询已结束"状态文字
- 底部显示"— 咨询已结束 —"提示条
**交互说明**
- 点击「取消」关闭弹窗
- 点击「提交评价」校验评分 → 提交 → 关闭弹窗
- 导航栏返回 → 我的咨询记录页
- 消息区可上下滚动浏览历史对话
---
### 2.16 图文咨询历史对话（text-chat-history.html）
**功能说明**
已结束的图文咨询的历史对话查看页面。与图文咨询聊天页结构一致，但为只读模式，不可继续对话。保留健康档案卡片、体检报告卡片等富媒体消息的展示。
**业务规则**
- 仅展示历史消息，不提供输入功能
- 无"结束咨询"按钮
- 头部显示"咨询已结束"状态文字
- 底部显示"— 咨询已结束 —"提示条
- 根据 `?from` 参数精确返回来源详情页
**交互说明**
- 导航栏返回 → 根据来源参数返回对应详情页（record-detail-rated / record-detail-unrated）
- 消息区可上下滚动浏览历史对话
- 健康档案卡片点击可跳转到咨询人档案详情页
employee-app/health-consult/expert-list.html
+71 -3
View File
@@ -83,13 +83,13 @@
<!-- [交互] 点击返回按钮跳转到 find-expert.html -->
<div class="nav-bar">
<a class="nav-back" onclick="window.location.href='find-expert.html'">&#8249;</a>
<span class="nav-title">科室专家</span>
<span class="nav-title" id="navTitle">科室专家</span>
</div>
<!-- 蓝色渐变头部区域 -->
<div class="sub-list-header">
<div class="slh-title">心内科</div>
<div class="slh-meta">共 8位专家</div>
<div class="slh-title" id="headerTitle">心内科</div>
<div class="slh-meta" id="headerMeta">共 8位专家</div>
</div>
<!-- [交互] 排序栏 - 点击切换排序方式 -->
@@ -248,6 +248,74 @@
// 聚焦输入框
input.focus();
}
/* ===== 根据 URL 参数动态切换页面内容 ===== */
(function() {
var params = new URLSearchParams(window.location.search);
var type = params.get('type');
var name = params.get('name');
if (!name) return;
var navTitle = document.getElementById('navTitle');
var headerTitle = document.getElementById('headerTitle');
var headerMeta = document.getElementById('headerMeta');
var container = document.getElementById('expertListContainer');
headerTitle.textContent = name;
/* 疾病维度的模拟专家数据 */
var diseaseExperts = {
'冠心病': [
{ n: '张建国', t: '主任医师', h: '北京协和医院·心内科', tags: ['冠心病','心绞痛'], s: '4.9', c: '1280', r: '96%' },
{ n: '王丽华', t: '副主任医师', h: '上海瑞金医院·心内科', tags: ['冠心病','高血压'], s: '4.8', c: '860', r: '94%' }
],
'高血压': [
{ n: '李明远', t: '主任医师', h: '北京协和医院·心内科', tags: ['高血压','心衰'], s: '4.9', c: '2100', r: '97%' },
{ n: '赵雪梅', t: '主任医师', h: '广州中山医院·心内科', tags: ['高血压','冠心病'], s: '4.8', c: '1560', r: '95%' },
{ n: '孙志强', t: '副主任医师', h: '北京天坛医院·心内科', tags: ['高血压','心律失常'], s: '4.7', c: '920', r: '92%' }
]
};
function renderExperts(list) {
container.innerHTML = '';
list.forEach(function(d) {
var g = ['王','赵','李','陈','周'].indexOf(d.n.charAt(0)) >= 0 ? '&#128105;&#8205;&#9877;&#65039;' : '&#128104;&#8205;&#9877;&#65039;';
var ts = d.tags.map(function(t){ return '<span class="ec-tag">'+t+'</span>'; }).join('');
container.innerHTML += '<div class="expert-card" data-name="'+d.n+'" onclick="window.location.href=\'expert-profile.html?from=expert-list\'"><div class="ec-avatar">'+g+'</div><div class="ec-info"><div class="ec-row1"><span class="ec-name">'+d.n+'</span><span class="ec-title-tag">'+d.t+'</span></div><div class="ec-hospital">'+d.h+'</div><div class="ec-tags">'+ts+'</div><div class="ec-stats"><span>&#11088; <span class="ec-stat-val">'+d.s+'</span>分</span><span>&#128172; <span class="ec-stat-val">'+d.c+'</span>次</span><span>&#9993; 回复率 <span class="ec-stat-val">'+d.r+'</span></span></div></div></div>';
});
}
/* 医院维度的模拟专家数据 */
var hospitalExperts = {
'北京协和医院': [
{ n: '张建国', t: '主任医师', h: '北京协和医院·心内科', tags: ['冠心病','高血压'], s: '4.9', c: '1280', r: '96%' },
{ n: '陈美华', t: '主任医师', h: '北京协和医院·神经内科', tags: ['头痛','失眠'], s: '4.9', c: '2100', r: '98%' },
{ n: '刘海波', t: '副主任医师', h: '北京协和医院·消化内科', tags: ['胃炎','结肠炎'], s: '4.7', c: '430', r: '85%' },
{ n: '李明远', t: '主任医师', h: '北京协和医院·内分泌科', tags: ['糖尿病','甲亢'], s: '4.9', c: '1860', r: '97%' },
{ n: '周婷', t: '副主任医师', h: '北京协和医院·妇科', tags: ['子宫肌瘤','月经不调'], s: '4.8', c: '760', r: '93%' },
{ n: '赵伟', t: '主任医师', h: '北京协和医院·骨科', tags: ['颈椎病','关节置换'], s: '4.8', c: '1120', r: '91%' }
],
'上海瑞金医院': [
{ n: '王丽华', t: '副主任医师', h: '上海瑞金医院·心内科', tags: ['冠心病','高血压'], s: '4.8', c: '860', r: '94%' },
{ n: '林志远', t: '主任医师', h: '上海瑞金医院·内分泌科', tags: ['糖尿病','甲状腺'], s: '4.9', c: '1950', r: '96%' },
{ n: '陈晓燕', t: '副主任医师', h: '上海瑞金医院·神经内科', tags: ['帕金森','癫痫'], s: '4.7', c: '680', r: '90%' }
]
};
if (type === 'hospital') {
navTitle.textContent = '医院专家';
var hExperts = hospitalExperts[name];
headerMeta.textContent = '共 ' + (hExperts ? hExperts.length : 0) + '位专家';
if (hExperts) renderExperts(hExperts);
} else if (type === 'disease') {
navTitle.textContent = '疾病专家';
var experts = diseaseExperts[name];
headerMeta.textContent = '共 ' + (experts ? experts.length : 3) + '位专家';
if (experts) renderExperts(experts);
} else {
navTitle.textContent = '科室专家';
}
})();
</script>
</body>
employee-app/health-consult/expert-profile.html
+45 -6
View File
@@ -209,6 +209,23 @@
color: #555;
line-height: 1.7;
}
.profile-section .text-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profile-section .text-clamp.expanded {
-webkit-line-clamp: unset;
}
.toggle-btn {
background: none;
border: none;
color: #1677ff;
font-size: 13px;
padding: 6px 0 0;
cursor: pointer;
}
/* ===== 擅长标签 ===== */
.tags-wrap {
@@ -361,8 +378,6 @@
<!-- [交互] 返回按钮：点击返回上一页 -->
<div class="nav-bar">
<button class="nav-back" onclick="goBack()">&#8592;</button>
<!-- [交互] 分享按钮 -->
<button class="nav-share">分享</button>
</div>
<!-- 页面滚动内容 -->
@@ -404,15 +419,27 @@
<button class="btn-outline" onclick="showNotice('video')">&#128249; 视频咨询</button>
</div>
<div class="profile-section">
<p class="text-clamp" id="introText">图文咨询：通过图片、文字形式；视频咨询：通过语音视频方式</p>
</div>
<!-- 医生简介区域 -->
<div class="profile-section">
<h4>医生简介</h4>
<p>从事心内科临床工作20余年，擅长冠心病、高血压、心律失常等心血管疾病的诊断与治疗。曾赴美国哈佛医学院进修，发表SCI论文30余篇，主持国家自然科学基金项目2项。</p>
<p class="text-clamp" id="introText">从事心内科临床工作20余年，擅长冠心病、高血压、心律失常等心血管疾病的诊断与治疗。曾赴美国哈佛医学院进修，发表SCI论文30余篇，主持国家自然科学基金项目2项。</p>
<button class="toggle-btn" onclick="toggleClamp('introText', this)">展开</button>
</div>
<!-- 医生擅长区域 -->
<!-- 职业经历区域 -->
<div class="profile-section">
<h4>擅长方向</h4>
<h4>职业经历</h4>
<p class="text-clamp" id="careerText">2001年毕业于北京大学医学部临床医学专业，获医学博士学位。2001-2005年于北京协和医院心内科完成住院医师规范化培训。2005-2008年晋升主治医师，负责冠心病介入诊疗工作。2008-2010年赴美国哈佛医学院附属布莱根妇女医院心血管中心访问学者。2010年回国后晋升副主任医师，2016年晋升主任医师，现任心内科副主任。</p>
<button class="toggle-btn" onclick="toggleClamp('careerText', this)">展开</button>
</div>
<!-- 擅长疾病区域 -->
<div class="profile-section">
<h4>擅长疾病</h4>
<div class="tags-wrap">
<span class="tag-item">冠心病</span>
<span class="tag-item">高血压</span>
@@ -481,6 +508,18 @@
</div><!-- /.phone-shell -->
<script>
/* [交互] 展开/收起文本 */
function toggleClamp(id, btn) {
var el = document.getElementById(id);
if (el.classList.contains('expanded')) {
el.classList.remove('expanded');
btn.textContent = '展开';
} else {
el.classList.add('expanded');
btn.textContent = '收起';
}
}
/**
* 当前选择的咨询类型
* 'text' - 图文咨询
@@ -518,7 +557,7 @@
/* [交互] 确认须知后根据类型跳转 */
function confirmNotice() {
if (currentNoticeType === 'text') {
window.location.href = 'text-chat.html?from=expert-profile';
window.location.href = 'select-person.html?from=expert-profile';
} else if (currentNoticeType === 'video') {
window.location.href = 'video-booking.html';
}
employee-app/health-consult/find-expert.html
+107 -255
View File
@@ -29,10 +29,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.search-input-wrap input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; color: #333; }
.search-input-wrap input::placeholder { color: #bbb; }
/* 批注卡片 */
.annotation-card { margin: 8px 16px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #ad8b00; line-height: 1.5; }
.annotation-card::before { content: '💡 '; }
/* 主Tab切换 */
.filter-tabs { display: flex; gap: 0; background: #fff; border-bottom: 1px solid #f0f0f0; overflow-x: auto; flex-shrink: 0; }
.filter-tab { flex: 1; padding: 10px 16px; font-size: 14px; color: #666; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; text-align: center; }
@@ -77,18 +73,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.dept-item-text { display: flex; flex-direction: column; gap: 2px; }
.dept-item-count { font-size: 11px; color: #999; }
/* ===== 疾病面板 ===== */
/* 疾病分类横向Tab */
.disease-cat-tabs { display: flex; gap: 0; overflow-x: auto; flex-shrink: 0; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 0 8px; }
.disease-cat-tabs::-webkit-scrollbar { display: none; }
.disease-cat-tab { padding: 10px 14px; font-size: 13px; color: #666; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
.disease-cat-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
/* 疾病列表 */
.disease-list { display: none; padding: 10px 0; }
.disease-list.active { display: block; }
.disease-item { margin: 0 16px 8px; background: #fff; border-radius: 12px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.15s; }
.disease-item:hover { background: #f0f7ff; }
/* ===== 疾病面板（左右分栏） ===== */
#panel-disease { display: none; flex-direction: row; height: 100%; min-height: 500px; }
#panel-disease.active { display: flex; }
.disease-left-nav { width: 88px; flex-shrink: 0; background: #f7f8fa; overflow-y: auto; border-right: 1px solid #f0f0f0; }
.disease-cat { padding: 14px 12px; font-size: 13px; color: #666; cursor: pointer; text-align: center; position: relative; transition: all 0.2s; border-left: 3px solid transparent; }
.disease-cat.active { background: #fff; color: #1677ff; font-weight: 600; border-left-color: #1677ff; }
.disease-cat:hover:not(.active) { background: #f0f1f3; }
.disease-right-content { flex: 1; overflow-y: auto; padding: 12px; background: #fff; }
.disease-grid { display: none; }
.disease-grid.active { display: block; }
.disease-item { margin-bottom: 8px; background: #f7f8fa; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s; }
.disease-item:hover { background: #e6f4ff; }
.disease-item:active { transform: scale(0.98); }
.disease-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.disease-name { font-size: 14px; color: #333; flex: 1; }
@@ -118,21 +114,20 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
<!-- 搜索栏 -->
<div class="search-bar">
<!-- [交互] 点击搜索栏跳转到综合搜索页 search.html -->
<div class="search-bar" onclick="window.location.href='search.html'" style="cursor:pointer;">
<div class="search-input-wrap">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input type="text" placeholder="搜索医院、科室、疾病、医生" />
<span style="flex:1;font-size:14px;color:#bbb;">输入关键字搜索医院、科室、疾病及专家</span>
</div>
<!-- 批注卡片：说明搜索功能 -->
<div class="annotation-card">搜索基于 ElasticSearch 模糊匹配，支持拼音首字母、同义词扩展</div>
</div>
<!-- 主Tab -->
<!-- [交互] 点击Tab切换面板 -->
<div class="filter-tabs">
<div class="filter-tab active" onclick="switchFindTab(this,'panel-hospital')">全部医院</div>
<div class="filter-tab" onclick="switchFindTab(this,'panel-dept')">全部科室</div>
<div class="filter-tab" onclick="switchFindTab(this,'panel-disease')">全部疾病</div>
<div class="filter-tab active" onclick="switchFindTab(this,'panel-hospital')">按医院</div>
<div class="filter-tab" onclick="switchFindTab(this,'panel-dept')">按科室</div>
<div class="filter-tab" onclick="switchFindTab(this,'panel-disease')">按疾病</div>
</div>
<!-- 内容区域 -->
@@ -202,251 +197,101 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="dept-cat" onclick="switchDeptCat(this,'dept-pifu')">皮肤科</div>
</div>
<div class="dept-right-content">
<!-- [交互] 点击二级科室跳转到expert-list.html -->
<!-- [交互] 点击二级科室跳转到expert-list.html?type=dept&name=科室名 -->
<div id="dept-neike" class="dept-grid active">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">❤️</span><div class="dept-item-text"><span>心内科</span><span class="dept-item-count">12位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><div class="dept-item-text"><span>神经内科</span><span class="dept-item-count">9位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔬</span><div class="dept-item-text"><span>内分泌科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫁</span><div class="dept-item-text"><span>消化内科</span><span class="dept-item-count">11位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💨</span><div class="dept-item-text"><span>呼吸科</span><span class="dept-item-count">7位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫘</span><div class="dept-item-text"><span>肾内科</span><span class="dept-item-count">6位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','心内科')"><span class="dept-icon">❤️</span><div class="dept-item-text"><span>心内科</span><span class="dept-item-count">12位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','神经内科')"><span class="dept-icon">🧠</span><div class="dept-item-text"><span>神经内科</span><span class="dept-item-count">9位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','内分泌科')"><span class="dept-icon">🔬</span><div class="dept-item-text"><span>内分泌科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','消化内科')"><span class="dept-icon">🫁</span><div class="dept-item-text"><span>消化内科</span><span class="dept-item-count">11位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','呼吸科')"><span class="dept-icon">💨</span><div class="dept-item-text"><span>呼吸科</span><span class="dept-item-count">7位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','肾内科')"><span class="dept-icon">🫘</span><div class="dept-item-text"><span>肾内科</span><span class="dept-item-count">6位专家</span></div></div>
</div>
<div id="dept-waike" class="dept-grid">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦴</span><div class="dept-item-text"><span>骨科</span><span class="dept-item-count">10位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔪</span><div class="dept-item-text"><span>普通外科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><div class="dept-item-text"><span>神经外科</span><span class="dept-item-count">5位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫀</span><div class="dept-item-text"><span>泌尿外科</span><span class="dept-item-count">7位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','骨科')"><span class="dept-icon">🦴</span><div class="dept-item-text"><span>骨科</span><span class="dept-item-count">10位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','普通外科')"><span class="dept-icon">🔪</span><div class="dept-item-text"><span>普通外科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','神经外科')"><span class="dept-icon">🧠</span><div class="dept-item-text"><span>神经外科</span><span class="dept-item-count">5位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','泌尿外科')"><span class="dept-icon">🫀</span><div class="dept-item-text"><span>泌尿外科</span><span class="dept-item-count">7位专家</span></div></div>
</div>
<div id="dept-fuchan" class="dept-grid">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👩</span><div class="dept-item-text"><span>妇科</span><span class="dept-item-count">9位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🤰</span><div class="dept-item-text"><span>产科</span><span class="dept-item-count">6位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧬</span><div class="dept-item-text"><span>生殖科</span><span class="dept-item-count">4位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','妇科')"><span class="dept-icon">👩</span><div class="dept-item-text"><span>妇科</span><span class="dept-item-count">9位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','产科')"><span class="dept-icon">🤰</span><div class="dept-item-text"><span>产科</span><span class="dept-item-count">6位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','生殖科')"><span class="dept-icon">🧬</span><div class="dept-item-text"><span>生殖科</span><span class="dept-item-count">4位专家</span></div></div>
</div>
<div id="dept-erke" class="dept-grid">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👶</span><div class="dept-item-text"><span>儿内科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🩹</span><div class="dept-item-text"><span>儿外科</span><span class="dept-item-count">5位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🍼</span><div class="dept-item-text"><span>新生儿科</span><span class="dept-item-count">3位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','儿内科')"><span class="dept-icon">👶</span><div class="dept-item-text"><span>儿内科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','儿外科')"><span class="dept-icon">🩹</span><div class="dept-item-text"><span>儿外科</span><span class="dept-item-count">5位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','新生儿科')"><span class="dept-icon">🍼</span><div class="dept-item-text"><span>新生儿科</span><span class="dept-item-count">3位专家</span></div></div>
</div>
<div id="dept-yanerbi" class="dept-grid">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👁️</span><div class="dept-item-text"><span>眼科</span><span class="dept-item-count">7位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👂</span><div class="dept-item-text"><span>耳鼻喉科</span><span class="dept-item-count">6位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦷</span><div class="dept-item-text"><span>口腔科</span><span class="dept-item-count">5位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','眼科')"><span class="dept-icon">👁️</span><div class="dept-item-text"><span>眼科</span><span class="dept-item-count">7位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','耳鼻喉科')"><span class="dept-icon">👂</span><div class="dept-item-text"><span>耳鼻喉科</span><span class="dept-item-count">6位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','口腔科')"><span class="dept-icon">🦷</span><div class="dept-item-text"><span>口腔科</span><span class="dept-item-count">5位专家</span></div></div>
</div>
<div id="dept-pifu" class="dept-grid">
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧴</span><div class="dept-item-text"><span>皮肤科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💊</span><div class="dept-item-text"><span>性病科</span><span class="dept-item-count">3位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','皮肤科')"><span class="dept-icon">🧴</span><div class="dept-item-text"><span>皮肤科</span><span class="dept-item-count">8位专家</span></div></div>
<div class="dept-item" onclick="goExpertList('dept','性病科')"><span class="dept-icon">💊</span><div class="dept-item-text"><span>性病科</span><span class="dept-item-count">3位专家</span></div></div>
</div>
</div>
</div>
<!-- ===== 疾病面板 ===== -->
<!-- ===== 疾病面板（左右分栏） ===== -->
<!-- [交互] 左侧点击科室分类切换右侧疾病列表 -->
<div id="panel-disease" class="tab-panel">
<!-- [交互] 点击疾病分类Tab切换列表 -->
<div class="disease-cat-tabs">
<div class="disease-cat-tab active" onclick="switchDiseaseTab(this,'dis-cardio')">心血管疾病</div>
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-endo')">内分泌疾病</div>
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-bone')">骨骼肌肉</div>
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-neuro')">神经系统</div>
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-digest')">消化系统</div>
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-resp')">呼吸系统</div>
<div class="disease-left-nav">
<div class="disease-cat active" onclick="switchDiseaseCat(this,'dis-neike')">内科</div>
<div class="disease-cat" onclick="switchDiseaseCat(this,'dis-waike')">外科</div>
<div class="disease-cat" onclick="switchDiseaseCat(this,'dis-fuchan')">妇产科</div>
<div class="disease-cat" onclick="switchDiseaseCat(this,'dis-erke')">儿科</div>
<div class="disease-cat" onclick="switchDiseaseCat(this,'dis-yanerbi')">眼耳鼻喉</div>
<div class="disease-cat" onclick="switchDiseaseCat(this,'dis-pifu')">皮肤科</div>
</div>
<!-- [交互] 点击疾病项跳转到expert-list.html -->
<!-- 心血管疾病 -->
<div id="dis-cardio" class="disease-list active">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff4d4f;"></div>
<span class="disease-name">冠心病</span>
<span class="disease-count">12位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<div class="disease-right-content">
<!-- [交互] 点击疾病项跳转到expert-list.html?type=disease&name=疾病名 -->
<!-- 内科疾病 -->
<div id="dis-neike" class="disease-grid active">
<div class="disease-item" onclick="goExpertList('disease','冠心病')"><div class="disease-dot" style="background:#ff4d4f;"></div><span class="disease-name">冠心病</span><span class="disease-count">12位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','高血压')"><div class="disease-dot" style="background:#ff7a45;"></div><span class="disease-name">高血压</span><span class="disease-count">18位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','心律失常')"><div class="disease-dot" style="background:#ffa940;"></div><span class="disease-name">心律失常</span><span class="disease-count">9位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','糖尿病')"><div class="disease-dot" style="background:#ffc53d;"></div><span class="disease-name">糖尿病</span><span class="disease-count">15位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','甲状腺疾病')"><div class="disease-dot" style="background:#ff85c0;"></div><span class="disease-name">甲状腺疾病</span><span class="disease-count">10位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','胃炎')"><div class="disease-dot" style="background:#597ef7;"></div><span class="disease-name">胃炎</span><span class="disease-count">14位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="goExpertList('disease','慢阻肺')"><div class="disease-dot" style="background:#73d13d;"></div><span class="disease-name">慢阻肺</span><span class="disease-count">8位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff7a45;"></div>
<span class="disease-name">高血压</span>
<span class="disease-count">18位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<!-- 外科疾病 -->
<div id="dis-waike" class="disease-grid">
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff7a45;"></div><span class="disease-name">颈椎病</span><span class="disease-count">11位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ffc53d;"></div><span class="disease-name">腰椎间盘突出</span><span class="disease-count">9位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff85c0;"></div><span class="disease-name">关节炎</span><span class="disease-count">13位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#597ef7;"></div><span class="disease-name">骨折</span><span class="disease-count">8位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#73d13d;"></div><span class="disease-name">肩周炎</span><span class="disease-count">7位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffa940;"></div>
<span class="disease-name">心律失常</span>
<span class="disease-count">9位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<!-- 妇产科疾病 -->
<div id="dis-fuchan" class="disease-grid">
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff85c0;"></div><span class="disease-name">子宫肌瘤</span><span class="disease-count">9位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#b37feb;"></div><span class="disease-name">月经不调</span><span class="disease-count">11位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff9c6e;"></div><span class="disease-name">不孕不育</span><span class="disease-count">7位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#5cdbd3;"></div><span class="disease-name">妊娠并发症</span><span class="disease-count">6位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffc53d;"></div>
<span class="disease-name">心肌炎</span>
<span class="disease-count">6位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<!-- 儿科疾病 -->
<div id="dis-erke" class="disease-grid">
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ffa940;"></div><span class="disease-name">小儿感冒</span><span class="disease-count">10位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff4d4f;"></div><span class="disease-name">小儿哮喘</span><span class="disease-count">7位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#73d13d;"></div><span class="disease-name">手足口病</span><span class="disease-count">5位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#597ef7;"></div><span class="disease-name">发育迟缓</span><span class="disease-count">4位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff85c0;"></div>
<span class="disease-name">心力衰竭</span>
<span class="disease-count">8位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<!-- 眼耳鼻喉疾病 -->
<div id="dis-yanerbi" class="disease-grid">
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#597ef7;"></div><span class="disease-name">近视</span><span class="disease-count">8位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#5cdbd3;"></div><span class="disease-name">白内障</span><span class="disease-count">6位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ffa940;"></div><span class="disease-name">鼻炎</span><span class="disease-count">10位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff85c0;"></div><span class="disease-name">中耳炎</span><span class="disease-count">5位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
</div>
<!-- 内分泌疾病 -->
<div id="dis-endo" class="disease-list">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#597ef7;"></div>
<span class="disease-name">糖尿病</span>
<span class="disease-count">15位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#73d13d;"></div>
<span class="disease-name">甲状腺疾病</span>
<span class="disease-count">10位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff9c6e;"></div>
<span class="disease-name">肥胖症</span>
<span class="disease-count">7位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#b37feb;"></div>
<span class="disease-name">痛风</span>
<span class="disease-count">8位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#5cdbd3;"></div>
<span class="disease-name">骨质疏松</span>
<span class="disease-count">6位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
</div>
<!-- 骨骼肌肉 -->
<div id="dis-bone" class="disease-list">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff7a45;"></div>
<span class="disease-name">颈椎病</span>
<span class="disease-count">11位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffc53d;"></div>
<span class="disease-name">腰椎间盘突出</span>
<span class="disease-count">9位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff85c0;"></div>
<span class="disease-name">关节炎</span>
<span class="disease-count">13位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#597ef7;"></div>
<span class="disease-name">骨折</span>
<span class="disease-count">8位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#73d13d;"></div>
<span class="disease-name">肩周炎</span>
<span class="disease-count">7位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
</div>
<!-- 神经系统 -->
<div id="dis-neuro" class="disease-list">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#b37feb;"></div>
<span class="disease-name">头痛偏头痛</span>
<span class="disease-count">9位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#5cdbd3;"></div>
<span class="disease-name">失眠</span>
<span class="disease-count">12位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff9c6e;"></div>
<span class="disease-name">眩晕</span>
<span class="disease-count">7位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff4d4f;"></div>
<span class="disease-name">帕金森</span>
<span class="disease-count">5位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffa940;"></div>
<span class="disease-name">癫痫</span>
<span class="disease-count">6位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
</div>
<!-- 消化系统 -->
<div id="dis-digest" class="disease-list">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#73d13d;"></div>
<span class="disease-name">胃炎</span>
<span class="disease-count">14位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff7a45;"></div>
<span class="disease-name">胃溃疡</span>
<span class="disease-count">10位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#597ef7;"></div>
<span class="disease-name">结肠炎</span>
<span class="disease-count">8位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffc53d;"></div>
<span class="disease-name">肝炎</span>
<span class="disease-count">11位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#b37feb;"></div>
<span class="disease-name">胆囊炎</span>
<span class="disease-count">7位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
</div>
<!-- 呼吸系统 -->
<div id="dis-resp" class="disease-list">
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#5cdbd3;"></div>
<span class="disease-name">慢性咳嗽</span>
<span class="disease-count">9位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff85c0;"></div>
<span class="disease-name">哮喘</span>
<span class="disease-count">11位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff4d4f;"></div>
<span class="disease-name">慢阻肺</span>
<span class="disease-count">8位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ff9c6e;"></div>
<span class="disease-name">肺炎</span>
<span class="disease-count">13位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
</div>
<div class="disease-item" onclick="window.location.href='expert-list.html'">
<div class="disease-dot" style="background:#ffa940;"></div>
<span class="disease-name">支气管炎</span>
<span class="disease-count">10位专家</span>
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
<!-- 皮肤科疾病 -->
<div id="dis-pifu" class="disease-grid">
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff9c6e;"></div><span class="disease-name">湿疹</span><span class="disease-count">9位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#b37feb;"></div><span class="disease-name">荨麻疹</span><span class="disease-count">7位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#73d13d;"></div><span class="disease-name">痤疮</span><span class="disease-count">8位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
<div class="disease-item" onclick="window.location.href='expert-list.html'"><div class="disease-dot" style="background:#ff4d4f;"></div><span class="disease-name">银屑病</span><span class="disease-count">5位专家</span><svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
</div>
</div>
</div>
@@ -455,6 +300,15 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div><!-- /phone-shell -->
<script>
/**
* 跳转到专家列表页，携带类型和名称参数
* @param {string} type - 'dept'(科室) 或 'disease'(疾病)
* @param {string} name - 科室名或疾病名
*/
function goExpertList(type, name) {
window.location.href = 'expert-list.html?type=' + encodeURIComponent(type) + '&name=' + encodeURIComponent(name);
}
/**
* 切换主Tab面板（全部医院/全部科室/全部疾病）
* @param {HTMLElement} el - 被点击的Tab元素
@@ -500,20 +354,18 @@ function switchDeptCat(el, catId) {
}
/**
* 切换疾病一级分类Tab（横向滚动Tab → 疾病列表）
* @param {HTMLElement} el - 被点击的疾病分类Tab
* 切换疾病面板左侧科室分类（左侧导航 → 右侧疾病列表）
* @param {HTMLElement} el - 被点击的科室分类元素
* @param {string} catId - 目标疾病列表的id
*/
function switchDiseaseTab(el, catId) {
// 切换疾病分类Tab激活状态
document.querySelectorAll('.disease-cat-tab').forEach(function(t) {
t.classList.remove('active');
function switchDiseaseCat(el, catId) {
document.querySelectorAll('.disease-cat').forEach(function(c) {
c.classList.remove('active');
});
el.classList.add('active');
// 切换疾病列表显示
document.querySelectorAll('.disease-list').forEach(function(l) {
l.classList.remove('active');
document.querySelectorAll('.disease-grid').forEach(function(g) {
g.classList.remove('active');
});
var target = document.getElementById(catId);
if (target) {
employee-app/health-consult/hospital-detail.html
+141 -191
View File
@@ -23,14 +23,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
/* ===== 医院实景图区域 ===== */
.hospital-photo { width: 100%; height: 160px; background: linear-gradient(135deg, #c9d6e3 0%, #a8bfd4 50%, #8faec8 100%); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #6a8aaa; font-weight: 500; flex-shrink: 0; }
.hospital-photo { width: 100%; height: 140px; background: linear-gradient(135deg, #c9d6e3 0%, #a8bfd4 50%, #8faec8 100%); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #6a8aaa; font-weight: 500; flex-shrink: 0; }
/* ===== 医院信息卡片 ===== */
.hospital-detail-card { margin: 12px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.hospital-detail-card .hd-name { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.hospital-detail-card { margin: 2px 10px 0; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.hospital-detail-card .hd-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.hospital-detail-card .hd-level { display: inline-block; background: #1677ff; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px; margin-bottom: 10px; }
.hospital-detail-card .hd-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; margin-bottom: 6px; }
.hd-nav-btn { margin-top: 10px; background: #1677ff; color: #fff; border: none; border-radius: 20px; padding: 6px 18px; font-size: 13px; cursor: pointer; transition: opacity 0.2s; }
.hd-nav-btn { margin-top: 2px; background: #1677ff; color: #fff; border: none; border-radius: 20px; padding: 2px 12px; font-size: 10px; cursor: pointer; transition: opacity 0.2s; }
.hd-nav-btn:hover { opacity: 0.85; }
.hd-nav-btn:active { opacity: 0.7; }
@@ -46,44 +46,36 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.section-divider { height: 8px; background: #f5f5f5; margin-top: 12px; flex-shrink: 0; }
/* ===== 本院专家标题 ===== */
.section-title { padding: 14px 16px 6px; font-size: 16px; font-weight: 700; color: #1a1a1a; background: #fff; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; font-size: 16px; font-weight: 700; color: #1a1a1a; background: #fff; }
.section-title .section-more { font-size: 13px; font-weight: 400; color: #1677ff; cursor: pointer; display: flex; align-items: center; gap: 2px; }
/* ===== 排序栏 ===== */
.sort-bar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.sort-bar .sort-label { font-size: 12px; color: #999; white-space: nowrap; }
.sort-btn { font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid #e0e0e0; background: #fff; color: #666; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.sort-btn.active { background: #1677ff; color: #fff; border-color: #1677ff; }
/* ===== 专家卡片网格（两列） ===== */
.expert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px; background: #fff; }
.expert-mini-card { background: #f7f8fa; border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all 0.15s; }
.expert-mini-card:hover { background: #e6f4ff; }
.expert-mini-card:active { transform: scale(0.97); }
.emc-avatar { width: 48px; height: 48px; border-radius: 50%; background: #e6f0ff; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 8px; }
.emc-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.emc-title { font-size: 11px; color: #1677ff; background: #e6f0ff; padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; }
.emc-dept { font-size: 12px; color: #888; margin-top: 4px; }
.emc-score { font-size: 11px; color: #999; margin-top: 4px; }
.emc-score .val { color: #1677ff; font-weight: 600; }
/* ===== 搜索栏 ===== */
.list-search-bar { padding: 8px 16px; background: #f8f9fa; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.list-search-bar .lsb-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; padding: 7px 14px; }
.list-search-bar .lsb-icon { font-size: 14px; color: #bbb; }
.list-search-bar .lsb-wrap input { flex: 1; border: none; background: transparent; font-size: 13px; outline: none; color: #1a1a1a; }
.list-search-bar .lsb-wrap input::placeholder { color: #bbb; }
.lsb-clear { font-size: 14px; color: #bbb; cursor: pointer; display: none; background: none; border: none; padding: 0; }
/* ===== 专家卡片列表 ===== */
.expert-list-container { flex: 1; overflow-y: auto; padding: 12px 16px; }
.expert-card { display: flex; gap: 12px; padding: 14px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: box-shadow 0.2s; }
.expert-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.expert-card:active { background: #f8f9fa; }
/* 头像 */
.ec-avatar { width: 52px; height: 52px; border-radius: 50%; background: #e6f0ff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; color: #1677ff; }
/* 信息区 */
.ec-info { flex: 1; min-width: 0; }
.ec-row1 { display: flex; align-items: center; gap: 6px; }
.ec-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.ec-title-tag { font-size: 11px; color: #1677ff; background: #e6f0ff; padding: 1px 6px; border-radius: 4px; }
.ec-hospital { font-size: 12px; color: #888; margin-top: 4px; }
.ec-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ec-tag { font-size: 11px; color: #666; background: #f5f5f5; padding: 2px 8px; border-radius: 4px; }
.ec-stats { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #999; }
.ec-stat-val { color: #1677ff; font-weight: 600; }
/* ===== 空状态 ===== */
.expert-empty { text-align: center; padding: 40px 16px; color: #bbb; display: none; }
.expert-empty .ee-icon { font-size: 40px; margin-bottom: 10px; }
.expert-empty .ee-text { font-size: 14px; }
/* ===== 用户评价区域 ===== */
.review-section { background: #fff; }
.review-list { padding: 0 16px; }
.review-card { padding: 14px 0; border-bottom: 1px solid #f5f5f5; }
.review-card:last-child { border-bottom: none; }
.review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-avatar { width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.review-user-info { flex: 1; min-width: 0; }
.review-user-name { font-size: 13px; font-weight: 600; color: #333; }
.review-meta { font-size: 11px; color: #999; display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.review-dept-tag { font-size: 10px; color: #1677ff; background: #e6f4ff; padding: 1px 6px; border-radius: 4px; }
.review-stars { font-size: 12px; color: #faad14; flex-shrink: 0; }
.review-content { font-size: 13px; color: #555; line-height: 1.6; }
.review-all-btn { display: block; text-align: center; padding: 14px 16px; font-size: 14px; color: #1677ff; cursor: pointer; background: #fff; border-top: 1px solid #f0f0f0; }
.review-all-btn:hover { background: #fafafa; }
</style>
</head>
<body>
@@ -116,7 +108,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<!-- 医院信息卡片 -->
<div class="hospital-detail-card">
<div class="hd-name">北京协和医院</div>
<span class="hd-level">三甲</span>
<span class="hd-level">三级甲等</span>
<div class="hd-row">
<span>&#128205;</span>
<span>北京市西城区大木仓胡同41号</span>
@@ -124,9 +116,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="hd-row">
<span>&#128207;</span>
<span>距您 2.3 km</span>
<button class="hd-nav-btn" onclick="alert('正在为您导航...')">导航</button>
</div>
<!-- [交互] 点击导航按钮（原型演示，无实际跳转） -->
<button class="hd-nav-btn" onclick="alert('正在为您导航...')">导航</button>
</div>
<!-- 医院简介卡片 -->
@@ -141,97 +134,119 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="section-divider"></div>
<!-- 本院专家标题 -->
<div class="section-title">本院专家</div>
<!-- [交互] 排序栏 - 点击切换排序方式 -->
<div class="sort-bar">
<span class="sort-label">排序：</span>
<button class="sort-btn active" onclick="setSortOrder(this)">好评优先</button>
<button class="sort-btn" onclick="setSortOrder(this)">热度优先</button>
<button class="sort-btn" onclick="setSortOrder(this)">回复率</button>
<!-- [交互] 点击"全部专家"跳转到专家列表页，携带医院名称 -->
<div class="section-title">
<span>本院专家</span>
<span class="section-more" onclick="window.location.href='expert-list.html?type=hospital&name=' + encodeURIComponent('北京协和医院')">全部专家 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M5 3l4 4-4 4"/></svg></span>
</div>
<!-- [交互] 搜索栏 - 输入关键词过滤专家列表 -->
<div class="list-search-bar">
<div class="lsb-wrap">
<span class="lsb-icon">&#128269;</span>
<input type="text" id="expertSearchInput" placeholder="搜索医生姓名" oninput="filterExperts(this, 'expertListContainer')">
<button class="lsb-clear" id="expertClearBtn" onclick="clearSearch('expertSearchInput', 'expertListContainer', 'expertClearBtn')">&#10005;</button>
<!-- 专家网格（两列，6名热门专家） -->
<!-- [交互] 点击专家卡片跳转到专家主页 -->
<div class="expert-grid">
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="emc-name">张建国</div>
<div class="emc-title">主任医师</div>
<div class="emc-dept">心内科</div>
<div class="emc-score">&#11088; <span class="val">4.9</span> · 1280次咨询</div>
</div>
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128105;&#8205;&#9877;&#65039;</div>
<div class="emc-name">陈美华</div>
<div class="emc-title">主任医师</div>
<div class="emc-dept">神经内科</div>
<div class="emc-score">&#11088; <span class="val">4.9</span> · 2100次咨询</div>
</div>
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="emc-name">李明远</div>
<div class="emc-title">主任医师</div>
<div class="emc-dept">内分泌科</div>
<div class="emc-score">&#11088; <span class="val">4.9</span> · 1860次咨询</div>
</div>
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="emc-name">赵伟</div>
<div class="emc-title">主任医师</div>
<div class="emc-dept">骨科</div>
<div class="emc-score">&#11088; <span class="val">4.8</span> · 1120次咨询</div>
</div>
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128105;&#8205;&#9877;&#65039;</div>
<div class="emc-name">周婷</div>
<div class="emc-title">副主任医师</div>
<div class="emc-dept">妇科</div>
<div class="emc-score">&#11088; <span class="val">4.8</span> · 760次咨询</div>
</div>
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
<div class="emc-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="emc-name">刘海波</div>
<div class="emc-title">副主任医师</div>
<div class="emc-dept">消化内科</div>
<div class="emc-score">&#11088; <span class="val">4.7</span> · 430次咨询</div>
</div>
</div>
<!-- 专家列表容器 -->
<div class="expert-list-container" id="expertListContainer">
<!-- [交互] 专家卡片1 - 点击跳转到专家详情页 -->
<div class="expert-card" data-name="张建国" onclick="window.location.href='expert-profile.html'">
<div class="ec-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="ec-info">
<div class="ec-row1">
<span class="ec-name">张建国</span>
<span class="ec-title-tag">主任医师</span>
</div>
<div class="ec-hospital">北京协和医院·心内科</div>
<div class="ec-tags">
<span class="ec-tag">冠心病</span>
<span class="ec-tag">高血压</span>
</div>
<div class="ec-stats">
<span>&#11088; <span class="ec-stat-val">4.9</span>分</span>
<span>&#128172; <span class="ec-stat-val">1280</span>次</span>
<span>&#9993; 回复率 <span class="ec-stat-val">96%</span></span>
</div>
</div>
</div>
<!-- [交互] 专家卡片2 - 点击跳转到专家详情页 -->
<div class="expert-card" data-name="陈美华" onclick="window.location.href='expert-profile.html'">
<div class="ec-avatar">&#128105;&#8205;&#9877;&#65039;</div>
<div class="ec-info">
<div class="ec-row1">
<span class="ec-name">陈美华</span>
<span class="ec-title-tag">主任医师</span>
</div>
<div class="ec-hospital">北京协和医院·神经内科</div>
<div class="ec-tags">
<span class="ec-tag">头痛</span>
<span class="ec-tag">失眠</span>
</div>
<div class="ec-stats">
<span>&#11088; <span class="ec-stat-val">4.9</span>分</span>
<span>&#128172; <span class="ec-stat-val">2100</span>次</span>
<span>&#9993; 回复率 <span class="ec-stat-val">98%</span></span>
</div>
</div>
</div>
<!-- [交互] 专家卡片3 - 点击跳转到专家详情页 -->
<div class="expert-card" data-name="刘海波" onclick="window.location.href='expert-profile.html'">
<div class="ec-avatar">&#128104;&#8205;&#9877;&#65039;</div>
<div class="ec-info">
<div class="ec-row1">
<span class="ec-name">刘海波</span>
<span class="ec-title-tag">副主任医师</span>
</div>
<div class="ec-hospital">北京协和医院·消化内科</div>
<div class="ec-tags">
<span class="ec-tag">胃炎</span>
<span class="ec-tag">结肠炎</span>
</div>
<div class="ec-stats">
<span>&#11088; <span class="ec-stat-val">4.7</span>分</span>
<span>&#128172; <span class="ec-stat-val">430</span>次</span>
<span>&#9993; 回复率 <span class="ec-stat-val">85%</span></span>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="section-divider"></div>
<!-- 用户评价 -->
<div class="section-title">
<span>用户评价</span>
<span class="section-more" onclick="window.location.href='expert-reviews.html?from=hospital&name=' + encodeURIComponent('北京协和医院')">查看全部 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M5 3l4 4-4 4"/></svg></span>
</div>
<!-- 空状态提示（搜索无结果时显示） -->
<div class="expert-empty" id="expertEmpty">
<div class="ee-icon">&#128269;</div>
<div class="ee-text">未找到匹配的专家</div>
<div class="review-section">
<div class="review-list">
<!-- 评价1 -->
<div class="review-card">
<div class="review-header">
<div class="review-avatar">&#128100;</div>
<div class="review-user-info">
<div class="review-user-name">王**</div>
<div class="review-meta"><span>2026-04-10</span><span class="review-dept-tag">心内科</span></div>
</div>
<div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
</div>
<div class="review-content">张建国医生非常专业，对我的冠心病情况分析得很透彻，给出的治疗方案也很详细，非常感谢！</div>
</div>
<!-- 评价2 -->
<div class="review-card">
<div class="review-header">
<div class="review-avatar">&#128100;</div>
<div class="review-user-info">
<div class="review-user-name">李**</div>
<div class="review-meta"><span>2026-04-08</span><span class="review-dept-tag">神经内科</span></div>
</div>
<div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
</div>
<div class="review-content">陈美华医生回复很及时，耐心解答了我关于偏头痛的各种疑问，推荐的用药方案效果不错。</div>
</div>
<!-- 评价3 -->
<div class="review-card">
<div class="review-header">
<div class="review-avatar">&#128100;</div>
<div class="review-user-info">
<div class="review-user-name">赵**</div>
<div class="review-meta"><span>2026-04-06</span><span class="review-dept-tag">内分泌科</span></div>
</div>
<div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
</div>
<div class="review-content">李明远医生对糖尿病的管理建议很实用，饮食和运动方面的指导也很细致，整体体验很好。</div>
</div>
<!-- 评价4 -->
<div class="review-card">
<div class="review-header">
<div class="review-avatar">&#128100;</div>
<div class="review-user-info">
<div class="review-user-name">孙**</div>
<div class="review-meta"><span>2026-04-03</span><span class="review-dept-tag">骨科</span></div>
</div>
<div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
</div>
<div class="review-content">赵伟医生对我的颈椎问题给出了很专业的康复建议，还推荐了日常锻炼方法，非常贴心。</div>
</div>
</div>
</div>
</div><!-- /.phone-shell -->
@@ -239,12 +254,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<script>
/**
* [交互] 展开/收起医院简介
* 切换简介文本的展开/收起状态，同时更新按钮文字
*/
function toggleHospitalIntro() {
var textEl = document.getElementById('introText');
var btnEl = document.getElementById('introToggleBtn');
// 判断当前状态并切换
if (textEl.classList.contains('expanded')) {
textEl.classList.remove('expanded');
btnEl.textContent = '展开';
@@ -253,69 +266,6 @@ function toggleHospitalIntro() {
btnEl.textContent = '收起';
}
}
/**
* [交互] 排序按钮切换
* 点击某个排序按钮时，移除其他按钮的激活状态，激活当前按钮
* @param {HTMLElement} el - 被点击的排序按钮元素
*/
function setSortOrder(el) {
// 移除所有排序按钮的激活状态
document.querySelectorAll('.sort-btn').forEach(function(btn) {
btn.classList.remove('active');
});
// 激活当前点击的按钮
el.classList.add('active');
}
/**
* [交互] 搜索过滤专家列表
* 根据输入框内容实时过滤专家卡片，无匹配结果时显示空状态
* @param {HTMLInputElement} input - 搜索输入框元素
* @param {string} containerId - 专家列表容器的 ID
*/
function filterExperts(input, containerId) {
var keyword = input.value.trim().toLowerCase();
var container = document.getElementById(containerId);
var cards = container.querySelectorAll('.expert-card');
var clearBtn = document.getElementById('expertClearBtn');
var emptyEl = document.getElementById('expertEmpty');
var visibleCount = 0;
// 控制清空按钮的显示/隐藏
clearBtn.style.display = keyword.length > 0 ? 'block' : 'none';
// 遍历所有专家卡片，根据姓名匹配关键词
cards.forEach(function(card) {
var name = (card.getAttribute('data-name') || '').toLowerCase();
if (keyword === '' || name.indexOf(keyword) !== -1) {
card.style.display = 'flex';
visibleCount++;
} else {
card.style.display = 'none';
}
});
// 控制空状态提示的显示/隐藏
emptyEl.style.display = visibleCount === 0 ? 'block' : 'none';
}
/**
* [交互] 清空搜索输入框并重置列表
* @param {string} inputId - 搜索输入框的 ID
* @param {string} containerId - 专家列表容器的 ID
* @param {string} clearBtnId - 清空按钮的 ID
*/
function clearSearch(inputId, containerId, clearBtnId) {
var input = document.getElementById(inputId);
input.value = '';
// 隐藏清空按钮
document.getElementById(clearBtnId).style.display = 'none';
// 重新触发过滤，显示所有卡片
filterExperts(input, containerId);
// 聚焦输入框
input.focus();
}
</script>
</body>
employee-app/health-consult/index.html
+4 -4
View File
@@ -142,7 +142,7 @@
<div class="nav-bar">
<span class="nav-back" style="cursor:default;color:#999;">← 返回</span>
<span class="nav-title">健康咨询</span>
<span class="nav-right">💬</span>
</div>
<!-- 可滚动内容区 -->
@@ -159,17 +159,17 @@
<a class="action-card" onclick="window.location.href='find-expert.html'">
<div class="icon">🔍</div>
<div class="label">找专家</div>
<div class="sub">按科室查找</div>
<div class="sub">合作专家库</div>
</a>
<a class="action-card" onclick="window.location.href='assistant-chat.html'">
<div class="icon">🤖</div>
<div class="label">小助手</div>
<div class="sub">AI智能问诊</div>
<div class="sub">有问题找小助手</div>
</a>
<a class="action-card" onclick="window.location.href='my-records.html'">
<div class="icon">📋</div>
<div class="label">我的咨询</div>
<div class="sub">历史记录</div>
<div class="sub">历史咨询记录</div>
</a>
</div>
employee-app/health-consult/my-records.html
+238 -109
View File
@@ -63,10 +63,15 @@
.scroll-content { flex: 1; overflow-y: auto; }
.scroll-content::-webkit-scrollbar { display: none; }
/* 记录Tab栏 */
.record-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.record-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.record-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
/* 一级Tab栏 */
.primary-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.primary-tab { flex: 1; padding: 12px; text-align: center; font-size: 15px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.primary-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
/* 二级Tab栏 */
.sub-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.sub-tab { flex: 1; padding: 10px; text-align: center; font-size: 13px; color: #999; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.sub-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 500; }
/* 记录卡片 */
.record-item { margin: 12px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; text-decoration: none; color: inherit; display: block; transition: transform 0.15s; }
@@ -82,6 +87,7 @@
.status-pending { background: #fff7e6; color: #fa8c16; }
.status-cancelled { background: #f5f5f5; color: #999; }
.status-rejected { background: #fff2f0; color: #ff4d4f; }
.status-confirming { background: #f9f0ff; color: #722ed1; }
.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; }
@@ -91,6 +97,20 @@
.tab-content { display: none; padding-bottom: 20px; }
.tab-content.active { display: block; }
/* 小助手记录卡片 */
.assistant-item { margin: 12px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; text-decoration: none; color: inherit; display: block; transition: transform 0.15s; }
.assistant-item:active { transform: scale(0.98); }
.ai-top { display: flex; align-items: center; gap: 10px; }
.ai-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#e8f0ff,#c4d7ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ai-info { flex: 1; }
.ai-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
/* 状态筛选栏 */
.filter-bar { display: flex; gap: 8px; padding: 12px 16px; background: #fff; overflow-x: auto; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip { padding: 5px 14px; border-radius: 20px; font-size: 13px; color: #666; background: #f5f5f5; white-space: nowrap; cursor: pointer; border: none; transition: all 0.2s; flex-shrink: 0; }
.filter-chip.active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
/* 底部安全区留白 */
.bottom-spacer { height: 34px; flex-shrink: 0; }
</style>
@@ -114,121 +134,205 @@
<span class="nav-title">我的咨询</span>
</div>
<!-- [交互] 记录Tab栏：图文咨询 / 视频咨询 -->
<div class="record-tabs">
<div class="record-tab active" onclick="switchRecordTab(this, 'tab-text')">图文咨询</div>
<div class="record-tab" onclick="switchRecordTab(this, 'tab-video')">视频咨询</div>
<!-- [交互] 一级Tab栏：咨询专家 / 咨询小助手 -->
<div class="primary-tabs">
<div class="primary-tab active" onclick="switchPrimaryTab(this, 'panel-expert')">咨询专家</div>
<div class="primary-tab" onclick="switchPrimaryTab(this, 'panel-assistant')">咨询小助手</div>
</div>
<!-- 可滚动内容区 -->
<div class="scroll-content">
<!-- 图文咨询列表 -->
<div id="tab-text" class="tab-content active">
<!-- ========== 咨询专家面板 ========== -->
<div id="panel-expert" class="tab-content active">
<!-- [交互] 记录1：张建国医生 - 进行中 → 点击跳转 record-detail.html -->
<a class="record-item" href="record-detail.html">
<div class="ri-top">
<div class="ri-avatar">👨‍⚕️</div>
<div class="ri-info">
<div class="ri-name">张建国医生</div>
<div class="ri-dept">北京协和医院 · 心内科</div>
<!-- [交互] 二级Tab栏：图文咨询 / 视频咨询 -->
<div class="sub-tabs">
<div class="sub-tab active" onclick="switchSubTab(this, 'tab-text')">图文咨询</div>
<div class="sub-tab" onclick="switchSubTab(this, 'tab-video')">视频咨询</div>
</div>
<!-- [交互] 图文咨询列表 -->
<div id="tab-text" class="tab-content active">
<!-- [交互] 状态筛选栏 -->
<div class="filter-bar" data-target="tab-text">
<button class="filter-chip active" data-filter="all">全部</button>
<button class="filter-chip" data-filter="ongoing">进行中</button>
<button class="filter-chip" data-filter="ended">已结束</button>
</div>
<!-- [交互] 记录1：张建国医生 - 进行中 → 点击跳转 record-detail.html -->
<a class="record-item" href="text-chat.html?from=my-records" data-status="ongoing">
<div class="ri-top">
<div class="ri-avatar">👨‍⚕️</div>
<div class="ri-info">
<div class="ri-name">张建国医生</div>
<div class="ri-dept">北京协和医院 · 心内科</div>
</div>
<span class="ri-status status-ongoing">进行中</span>
</div>
<div class="ri-consult-person">咨询人：本人</div>
<div class="ri-msg">张医生：您好，胸闷气短需要引起重视...</div>
<div class="ri-time">2026-04-07 10:20</div>
</a>
<!-- [交互] 记录2：李晓梅医生 - 已完成 + 已评价 → 点击跳转 record-detail-rated.html -->
<a class="record-item" href="record-detail-rated.html" data-status="ended">
<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-done">已完成</span>
</div>
<div class="ri-consult-person">咨询人：张三（父亲）<span class="rated-tag">已评价</span></div>
<div class="ri-msg">您的血糖控制情况良好，继续保持...</div>
<div class="ri-time">2026-03-28 14:35</div>
</a>
<!-- [交互] 记录3：王志远医生 - 已完成 + 未评价 → 点击跳转 record-detail-unrated.html -->
<a class="record-item" href="record-detail-unrated.html" data-status="ended">
<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-done">已完成</span>
</div>
<div class="ri-consult-person">咨询人：本人</div>
<div class="ri-msg">建议您做颈椎MRI检查，明确诊断...</div>
<div class="ri-time">2026-03-15 09:10</div>
</a>
</div>
<!-- 视频咨询列表（默认隐藏） -->
<div id="tab-video" class="tab-content">
<!-- [交互] 状态筛选栏 -->
<div class="filter-bar" data-target="tab-video">
<button class="filter-chip active" data-filter="all">全部</button>
<button class="filter-chip" data-filter="confirming">待确认</button>
<button class="filter-chip" data-filter="pending">待开始</button>
<button class="filter-chip" data-filter="ended">已结束</button>
</div>
<!-- [交互] 视频记录0：周明辉医生 - 待确认 → 点击跳转 video-detail-confirming.html -->
<a class="record-item" href="video-detail-confirming.html" data-status="confirming">
<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-confirming">待确认</span>
</div>
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-15 10:00</div>
<div class="ri-time">预约于 2026-04-13 09:15</div>
</a>
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 video-detail-pending.html -->
<a class="record-item" href="video-detail-pending.html" data-status="pending">
<div class="ri-top">
<div class="ri-avatar">👨‍⚕️</div>
<div class="ri-info">
<div class="ri-name">张建国医生</div>
<div class="ri-dept">北京协和医院 · 心内科</div>
</div>
<span class="ri-status status-pending">待开始</span>
</div>
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-08 14:00</div>
<div class="ri-time">预约于 2026-04-07 11:00</div>
</a>
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 video-detail-done.html -->
<a class="record-item" href="video-detail-done.html" data-status="ended">
<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-done">已完成</span>
</div>
<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" data-status="ended">
<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" data-status="ended">
<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><!-- /panel-expert -->
<!-- ========== 咨询小助手面板 ========== -->
<div id="panel-assistant" class="tab-content">
<!-- [交互] 状态筛选栏 -->
<div class="filter-bar" data-target="panel-assistant">
<button class="filter-chip active" data-filter="all">全部</button>
<button class="filter-chip" data-filter="ongoing">进行中</button>
<button class="filter-chip" data-filter="ended">已结束</button>
</div>
<!-- [交互] 小助手记录1：进行中 → 点击跳转 assistant-chat.html -->
<a class="assistant-item" href="assistant-chat.html" data-status="ongoing">
<div class="ai-top">
<div class="ai-avatar">👩‍💼</div>
<div class="ai-info">
<div class="ai-title">小助手</div>
</div>
<span class="ri-status status-ongoing">进行中</span>
</div>
<div class="ri-consult-person">咨询人：本人</div>
<div class="ri-msg">张医生：您好，胸闷气短需要引起重视...</div>
<div class="ri-time">2026-04-07 10:20</div>
<div class="ri-time">2026-04-12 16:30</div>
</a>
<!-- [交互] 记录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">
<div class="ri-name">李晓梅医生</div>
<div class="ri-dept">上海瑞金医院 · 内分泌科</div>
<!-- [交互] 小助手记录3：已完成 → 点击跳转 assistant-chat-history.html -->
<a class="assistant-item" href="assistant-chat-history.html" data-status="ended">
<div class="ai-top">
<div class="ai-avatar">👩‍💼</div>
<div class="ai-info">
<div class="ai-title">小助手</div>
</div>
<span class="ri-status status-done">已完成</span>
</div>
<div class="ri-consult-person">咨询人：张三（父亲）<span class="rated-tag">已评价</span></div>
<div class="ri-msg">您的血糖控制情况良好，继续保持...</div>
<div class="ri-time">2026-03-28 14:35</div>
<div class="ri-time">2026-04-05 11:20</div>
</a>
<!-- [交互] 记录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">
<div class="ri-name">王志远医生</div>
<div class="ri-dept">广州中山医院 · 骨科</div>
<!-- [交互] 小助手记录4：已完成 → 点击跳转 assistant-chat-history.html -->
<a class="assistant-item" href="assistant-chat-history.html" data-status="ended">
<div class="ai-top">
<div class="ai-avatar">👩‍💼</div>
<div class="ai-info">
<div class="ai-title">小助手</div>
</div>
<span class="ri-status status-done">已完成</span>
</div>
<div class="ri-consult-person">咨询人：本人</div>
<div class="ri-msg">建议您做颈椎MRI检查，明确诊断...</div>
<div class="ri-time">2026-03-15 09:10</div>
</a>
</div>
<!-- 视频咨询列表（默认隐藏） -->
<div id="tab-video" class="tab-content">
<!-- [交互] 视频记录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">
<div class="ri-name">张建国医生</div>
<div class="ri-dept">北京协和医院 · 心内科</div>
</div>
<span class="ri-status status-pending">待开始</span>
</div>
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-08 14:00</div>
<div class="ri-time">预约于 2026-04-07 11:00</div>
</a>
<!-- [交互] 视频记录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">
<div class="ri-name">陈美华医生</div>
<div class="ri-dept">北京天坛医院 · 神经内科</div>
</div>
<span class="ri-status status-done">已完成</span>
</div>
<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>
<div class="ri-time">2026-03-28 20:45</div>
</a>
</div>
@@ -240,19 +344,44 @@
<script>
/**
* 切换图文/视频Tab
* @param {HTMLElement} el - 被点击的Tab元素
* @param {string} tabId - 目标Tab内容区的ID
* 切换一级Tab（咨询专家 / 咨询小助手）
*/
function switchRecordTab(el, tabId) {
// 移除所有Tab的激活状态
document.querySelectorAll('.record-tab').forEach(function(t) { t.classList.remove('active'); });
// 隐藏所有Tab内容区
document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
// 激活当前Tab和对应内容区
function switchPrimaryTab(el, panelId) {
document.querySelectorAll('.primary-tab').forEach(function(t) { t.classList.remove('active'); });
document.querySelectorAll('.scroll-content > .tab-content').forEach(function(c) { c.classList.remove('active'); });
el.classList.add('active');
document.getElementById(panelId).classList.add('active');
}
/**
* 切换二级Tab（图文咨询 / 视频咨询）
*/
function switchSubTab(el, tabId) {
document.querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
document.querySelectorAll('#panel-expert > .tab-content').forEach(function(c) { c.classList.remove('active'); });
el.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
/**
* 状态筛选
*/
document.querySelectorAll('.filter-bar').forEach(function(bar) {
bar.addEventListener('click', function(e) {
var chip = e.target.closest('.filter-chip');
if (!chip) return;
bar.querySelectorAll('.filter-chip').forEach(function(c) { c.classList.remove('active'); });
chip.classList.add('active');
var filter = chip.dataset.filter;
var container = bar.parentElement;
container.querySelectorAll('.record-item, .assistant-item').forEach(function(item) {
if (filter === 'all' || item.dataset.status === filter) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
});
</script>
</body>
</html>
employee-app/health-consult/rate-dialog.html
-127
View File
@@ -1,127 +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>
/* ===== 全局重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px;
height: 844px;
border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.page-content { flex: 1; background: #f5f5f5; }
/* ===== 弹窗遮罩层 ===== */
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
/* ===== 底部滑出弹窗面板 ===== */
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px; width: 100%; text-align: center; }
.modal-sheet h3 { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 8px; }
.doctor-name { font-size: 14px; color: #666; margin-bottom: 4px; }
.doctor-dept { font-size: 12px; color: #999; margin-bottom: 16px; }
.rate-label { font-size: 14px; color: #333; margin-bottom: 12px; }
/* ===== 星级评分 ===== */
.star-group { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.star { font-size: 32px; cursor: pointer; transition: transform 0.15s; }
.star:hover { transform: scale(1.15); }
/* ===== 评价文本域 ===== */
.rate-textarea { width: 100%; border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 12px; font-size: 14px; resize: none; outline: none; font-family: inherit; }
.rate-textarea:focus { border-color: #1677ff; }
/* ===== 按钮组 ===== */
.modal-btns { display: flex; gap: 12px; margin-top: 16px; }
.modal-btns button { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
.btn-cancel { background: #f5f5f5; color: #666; }
.btn-confirm { background: #1677ff; color: #fff; }
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons"><span>&#9679;&#9679;&#9679;&#9679;</span><span>WiFi</span><span>&#128267;</span></span>
</div>
<div class="page-content"></div>
<!-- [交互] 评价医生弹窗 - 默认打开状态 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-sheet">
<h3>评价医生</h3>
<div class="doctor-name">张建国医生</div>
<div class="doctor-dept">北京协和医院 · 心内科</div>
<div class="rate-label">请为本次咨询评分</div>
<!-- 星级评分区域 -->
<div class="star-group" id="starGroup">
<span class="star" data-val="1" onclick="setRating(1)">☆</span>
<span class="star" data-val="2" onclick="setRating(2)">☆</span>
<span class="star" data-val="3" onclick="setRating(3)">☆</span>
<span class="star" data-val="4" onclick="setRating(4)">☆</span>
<span class="star" data-val="5" onclick="setRating(5)">☆</span>
</div>
<textarea class="rate-textarea" rows="3" placeholder="请分享您的咨询体验（选填）..."></textarea>
<div class="modal-btns">
<button class="btn-cancel" onclick="handleCancel()">取消</button>
<button class="btn-confirm" onclick="handleSubmit()">提交评价</button>
</div>
</div>
</div>
</div>
<script>
/* ===== 交互逻辑 ===== */
/** 当前评分值 */
var currentRating = 0;
/** 设置星级评分 - 点击切换1~5星 */
function setRating(val) {
currentRating = val;
var stars = document.querySelectorAll('#starGroup .star');
for (var i = 0; i < stars.length; i++) {
// 小于等于选中值的显示实心星，否则空心星
stars[i].textContent = (i < val) ? '\u2B50' : '\u2606';
}
}
/** 取消 - 返回上一页 */
function handleCancel() {
history.back();
}
/** 提交评价 */
function handleSubmit() {
if (currentRating === 0) { alert('请先选择评分'); return; }
alert('感谢您的评价！评分：' + currentRating + '星');
document.getElementById('modalOverlay').style.display = 'none';
}
</script>
</body>
</html>
employee-app/health-consult/rate-doctor.html
+37 -1
View File
@@ -77,6 +77,26 @@
.rate-textarea:focus { border-color: #1677ff; }
.rate-textarea::placeholder { color: #bbb; }
/* 匿名评价开关 */
.anon-row {
display: flex; align-items: center; justify-content: space-between;
margin-top: 16px; padding: 0 2px;
}
.anon-row .anon-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; }
.anon-row .anon-label .anon-icon { font-size: 16px; }
.anon-toggle {
width: 44px; height: 24px; border-radius: 12px; background: #e0e0e0;
position: relative; cursor: pointer; transition: background 0.25s; flex-shrink: 0;
}
.anon-toggle.on { background: #1677ff; }
.anon-toggle::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s;
}
.anon-toggle.on::after { transform: translateX(20px); }
.anon-hint { font-size: 12px; color: #bbb; margin-top: 6px; text-align: left; padding: 0 2px; }
/* 提交按钮 */
.submit-btn {
width: 100%; height: 48px; border: none; border-radius: 24px; margin-top: 24px;
@@ -127,7 +147,14 @@
<!-- 文本域 -->
<textarea class="rate-textarea" rows="4" placeholder="请分享您的咨询体验（选填）..."></textarea>
<!-- [交互] 提交按钮：跳转到首页 -->
<!-- [交互] 匿名评价开关：点击切换 -->
<div class="anon-row">
<span class="anon-label"><span class="anon-icon">🔒</span>匿名评价</span>
<div class="anon-toggle" id="anonToggle" onclick="toggleAnon()"></div>
</div>
<div class="anon-hint">开启后，医生将无法看到您的姓名</div>
<!-- [交互] 提交按钮：跳转到咨询记录页 -->
<button class="submit-btn" onclick="submitRate()">提交评价</button>
</div>
</div>
@@ -149,6 +176,15 @@
});
}
/**
* 匿名评价开关
*/
let isAnonymous = false;
function toggleAnon() {
isAnonymous = !isAnonymous;
document.getElementById('anonToggle').classList.toggle('on', isAnonymous);
}
/**
* 提交评价，跳转到咨询记录页
*/
employee-app/health-consult/record-detail-rated.html
+20 -84
View File
@@ -103,8 +103,10 @@
/* 我的评价区域 */
.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 { display: flex; gap: 4px; margin-bottom: 10px; }
.rating-section .rs-stars .star { font-size: 20px; }
.rating-section .rs-text { font-size: 14px; color: #333; line-height: 1.6; }
.rating-section .rs-anon { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #999; margin-top: 8px; }
/* 咨询人健康档案 */
.health-record-entry {
@@ -218,17 +220,19 @@
<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 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">2026-03-28 14:35</span>
</div>
<div class="dic-row">
<span class="dic-label">咨询时长</span>
@@ -246,79 +250,20 @@
<span class="star">⭐</span>
<span class="star">⭐</span>
</div>
<div class="rs-text">李医生非常专业，耐心解答了我关于血糖控制的疑问，给出的饮食建议也很实用，非常感谢！</div>
<div class="rs-anon">🔒 匿名评价</div>
</div>
<!-- [交互] 咨询人健康档案入口 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<!-- [条件显示] 咨询人档案详情：点击展开 -->
<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">
<!-- [交互] 对话入口卡片：点击跳转 text-chat-history.html 查看历史对话 -->
<a class="chat-entry" href="text-chat-history.html?from=record-detail-rated">
<span class="ce-icon">💬</span>
<div class="ce-info">
<div class="ce-title">查看历史对话记录</div>
@@ -327,19 +272,10 @@
<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>
employee-app/health-consult/record-detail-unrated.html
+17 -80
View File
@@ -213,17 +213,19 @@
<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 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">2026-03-15 09:10</span>
</div>
<div class="dic-row">
<span class="dic-label">咨询时长</span>
@@ -231,77 +233,17 @@
</div>
</div>
<!-- [交互] 咨询人健康档案入口 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<!-- [条件显示] 咨询人档案详情：点击展开 -->
<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">
<!-- [交互] 对话入口卡片：点击跳转 text-chat-history.html 查看历史对话 -->
<a class="chat-entry" href="text-chat-history.html?from=record-detail-unrated">>
<span class="ce-icon">💬</span>
<div class="ce-info">
<div class="ce-title">查看历史对话记录</div>
@@ -310,18 +252,13 @@
<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>
<button class="btn-primary" onclick="window.location.href='rate-doctor.html'">评价</button>
</div>
<!-- 底部安全区留白 -->
employee-app/health-consult/search.html
+275
View File
@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合搜索</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
/* 状态栏 */
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; height: 44px; background: #fff; flex-shrink: 0; font-size: 14px; font-weight: 600; }
.status-bar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
/* 搜索头部 */
.search-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 24px; padding: 8px 16px; }
.search-box svg { flex-shrink: 0; color: #999; }
.search-box input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; color: #333; }
.search-box input::placeholder { color: #bbb; }
.search-box .search-clear { display: none; width: 18px; height: 18px; border-radius: 50%; background: #ccc; color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; flex-shrink: 0; }
.search-box .search-clear.show { display: block; }
.search-cancel { font-size: 14px; color: #1677ff; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
/* 内容区 */
.search-body { flex: 1; overflow-y: auto; background: #f5f5f5; }
/* 搜索历史 */
.search-history { padding: 16px; background: #fff; }
.history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.history-title { font-size: 15px; font-weight: 600; color: #333; }
.history-clear { font-size: 12px; color: #999; cursor: pointer; }
.history-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.history-tag { padding: 6px 14px; background: #f5f5f5; border-radius: 16px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s; }
.history-tag:hover { background: #e6f4ff; color: #1677ff; }
/* 热门搜索 */
.hot-search { padding: 16px; background: #fff; margin-top: 10px; }
.hot-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
.hot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-item { padding: 6px 14px; background: #f5f5f5; border-radius: 16px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s; }
.hot-item:hover { background: #fff0f0; color: #ff4d4f; }
/* 搜索结果区域 */
.search-results { display: none; }
.search-results.show { display: block; }
.result-section { background: #fff; margin-bottom: 10px; }
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; }
.section-title { font-size: 14px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 6px; }
.section-title .section-icon { font-size: 16px; }
.section-count { font-size: 12px; color: #999; }
.section-more { font-size: 12px; color: #1677ff; cursor: pointer; display: flex; align-items: center; gap: 2px; }
/* 专家结果卡片 */
.expert-result { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s; }
.expert-result:hover { background: #fafafa; }
.expert-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #bae0ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.expert-info { flex: 1; min-width: 0; }
.expert-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.expert-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.expert-title-tag { font-size: 10px; background: #e6f4ff; color: #1677ff; padding: 1px 6px; border-radius: 4px; }
.expert-dept { font-size: 12px; color: #999; }
.expert-hospital { font-size: 12px; color: #bbb; margin-top: 1px; }
/* 医院结果卡片 */
.hospital-result { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s; }
.hospital-result:hover { background: #fafafa; }
.hospital-result-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.hospital-result-info { flex: 1; min-width: 0; }
.hospital-result-name { font-size: 14px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
.hospital-result-name .tag { font-size: 10px; background: #e6f4ff; color: #1677ff; padding: 1px 6px; border-radius: 4px; }
.hospital-result-addr { font-size: 12px; color: #999; margin-top: 2px; }
/* 科室/疾病结果 */
.tag-result { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }
.tag-result-item { padding: 8px 16px; background: #f7f8fa; border-radius: 10px; font-size: 13px; color: #333; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
.tag-result-item:hover { background: #e6f4ff; color: #1677ff; }
.tag-result-item .tag-count { font-size: 11px; color: #999; }
/* 无结果 */
.no-result { display: none; text-align: center; padding: 80px 20px; color: #999; font-size: 14px; }
.no-result.show { display: block; }
.no-result svg { margin-bottom: 16px; }
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span>9:41</span>
<div class="status-bar-right">
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="3" width="3" height="9" rx="1"/><rect x="4.5" y="1.5" width="3" height="10.5" rx="1"/><rect x="9" y="0" width="3" height="12" rx="1"/></svg>
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.4C5.6 2.4 3.4 3.3 1.8 4.9L0 3.1C2 1.1 4.9 0 8 0s6 1.1 8 3.1L14.2 4.9C12.6 3.3 10.4 2.4 8 2.4zM8 6.4c-1.6 0-3 .6-4.1 1.6L2.1 6.2C3.6 4.8 5.7 4 8 4s4.4.8 5.9 2.2L12.1 8C11 7 9.6 6.4 8 6.4zM8 10.4c-.8 0-1.6.3-2.1.9L8 14l2.1-2.7c-.5-.6-1.3-.9-2.1-.9z"/></svg>
<svg width="22" height="12" viewBox="0 0 22 12" fill="currentColor"><rect x="0" y="1" width="18" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="4" width="2" height="4" rx="1"/><rect x="2" y="3" width="12" height="6" rx="1"/></svg>
</div>
</div>
<!-- 搜索头部 -->
<div class="search-header">
<div class="search-box">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input id="searchInput" type="text" placeholder="搜索医院、科室、疾病、专家" autofocus />
<span class="search-clear" id="clearBtn" onclick="clearSearch()">x</span>
</div>
<!-- [交互] 点击取消返回找专家页 -->
<span class="search-cancel" onclick="window.location.href='find-expert.html'">取消</span>
</div>
<!-- 内容区 -->
<div class="search-body">
<!-- 默认态：搜索历史 + 热门搜索 -->
<div id="defaultView">
<div class="search-history">
<div class="history-head">
<span class="history-title">搜索历史</span>
<span class="history-clear" onclick="clearHistory()">清空</span>
</div>
<div class="history-tags" id="historyTags">
<span class="history-tag" onclick="doSearch(this.textContent)">心内科</span>
<span class="history-tag" onclick="doSearch(this.textContent)">北京协和医院</span>
<span class="history-tag" onclick="doSearch(this.textContent)">糖尿病</span>
<span class="history-tag" onclick="doSearch(this.textContent)">张医生</span>
<span class="history-tag" onclick="doSearch(this.textContent)">骨科</span>
</div>
</div>
</div>
<!-- PLACEHOLDER_RESULTS -->
<!-- 搜索结果态 -->
<div class="search-results" id="resultsView">
<!-- 专家 -->
<div class="result-section">
<div class="section-header">
<div class="section-title"><span class="section-icon">👨‍⚕️</span>专家<span class="section-count">(6)</span></div>
<span class="section-more">查看全部 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M4.5 3l3 3-3 3"/></svg></span>
</div>
<!-- [交互] 点击专家卡片跳转到专家主页 -->
<div class="expert-result" onclick="window.location.href='expert-profile.html'">
<div class="expert-avatar">👨‍⚕️</div>
<div class="expert-info">
<div class="expert-name-row"><span class="expert-name">张伟明</span><span class="expert-title-tag">主任医师</span></div>
<div class="expert-dept">心内科 · 冠心病、高血压</div>
<div class="expert-hospital">北京协和医院</div>
</div>
</div>
<div class="expert-result" onclick="window.location.href='expert-profile.html'">
<div class="expert-avatar">👩‍⚕️</div>
<div class="expert-info">
<div class="expert-name-row"><span class="expert-name">李芳</span><span class="expert-title-tag">副主任医师</span></div>
<div class="expert-dept">内分泌科 · 糖尿病、甲亢</div>
<div class="expert-hospital">上海瑞金医院</div>
</div>
</div>
<div class="expert-result" onclick="window.location.href='expert-profile.html'">
<div class="expert-avatar">👨‍⚕️</div>
<div class="expert-info">
<div class="expert-name-row"><span class="expert-name">王建国</span><span class="expert-title-tag">主任医师</span></div>
<div class="expert-dept">骨科 · 颈椎病、关节置换</div>
<div class="expert-hospital">北京天坛医院</div>
</div>
</div>
</div>
<!-- 医院 -->
<div class="result-section">
<div class="section-header">
<div class="section-title"><span class="section-icon">🏥</span>医院<span class="section-count">(3)</span></div>
<span class="section-more">查看全部 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#1677ff" stroke-width="1.5"><path d="M4.5 3l3 3-3 3"/></svg></span>
</div>
<!-- [交互] 点击医院跳转到医院详情 -->
<div class="hospital-result" onclick="window.location.href='hospital-detail.html'">
<div class="hospital-result-icon" style="background:#e6f4ff;">🏥</div>
<div class="hospital-result-info">
<div class="hospital-result-name">北京协和医院 <span class="tag">三甲</span></div>
<div class="hospital-result-addr">北京市东城区帅府园1号 · 128位专家</div>
</div>
</div>
<div class="hospital-result" onclick="window.location.href='hospital-detail.html'">
<div class="hospital-result-icon" style="background:#fff7e6;">🏥</div>
<div class="hospital-result-info">
<div class="hospital-result-name">上海瑞金医院 <span class="tag">三甲</span></div>
<div class="hospital-result-addr">上海市黄浦区瑞金二路197号 · 96位专家</div>
</div>
</div>
</div>
<!-- 科室 -->
<div class="result-section">
<div class="section-header">
<div class="section-title"><span class="section-icon">🩺</span>科室<span class="section-count">(4)</span></div>
</div>
<div class="tag-result">
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=dept&name=心内科'">心内科 <span class="tag-count">12位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=dept&name=神经内科'">神经内科 <span class="tag-count">9位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=dept&name=内分泌科'">内分泌科 <span class="tag-count">8位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=dept&name=消化内科'">消化内科 <span class="tag-count">11位专家</span></div>
</div>
</div>
<!-- 疾病 -->
<div class="result-section">
<div class="section-header">
<div class="section-title"><span class="section-icon">📋</span>疾病<span class="section-count">(5)</span></div>
</div>
<div class="tag-result">
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=disease&name=高血压'">高血压 <span class="tag-count">18位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=disease&name=冠心病'">冠心病 <span class="tag-count">12位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=disease&name=糖尿病'">糖尿病 <span class="tag-count">15位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=disease&name=心律失常'">心律失常 <span class="tag-count">9位专家</span></div>
<div class="tag-result-item" onclick="window.location.href='expert-list.html?type=disease&name=颈椎病'">颈椎病 <span class="tag-count">11位专家</span></div>
</div>
</div>
</div>
<!-- 无结果态 -->
<div class="no-result" id="noResultView">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none"><circle cx="28" cy="28" r="20" stroke="#ddd" stroke-width="3"/><path d="M42 42l14 14" stroke="#ddd" stroke-width="3" stroke-linecap="round"/><path d="M22 28h12M28 22v12" stroke="#eee" stroke-width="2" stroke-linecap="round"/></svg>
<div>未找到相关结果</div>
<div style="font-size:12px;color:#bbb;margin-top:6px;">换个关键词试试</div>
</div>
</div><!-- /search-body -->
</div><!-- /phone-shell -->
<script>
var searchInput = document.getElementById('searchInput');
var clearBtn = document.getElementById('clearBtn');
var defaultView = document.getElementById('defaultView');
var resultsView = document.getElementById('resultsView');
var noResultView = document.getElementById('noResultView');
/* 输入监听：切换默认态/结果态 */
searchInput.addEventListener('input', function() {
var val = this.value.trim();
clearBtn.classList.toggle('show', val.length > 0);
if (val.length > 0) {
defaultView.style.display = 'none';
/* 模拟：输入"无"显示无结果，其他显示结果 */
if (val === '无') {
resultsView.classList.remove('show');
noResultView.classList.add('show');
} else {
noResultView.classList.remove('show');
resultsView.classList.add('show');
}
} else {
defaultView.style.display = 'block';
resultsView.classList.remove('show');
noResultView.classList.remove('show');
}
});
/* 清空输入 */
function clearSearch() {
searchInput.value = '';
clearBtn.classList.remove('show');
defaultView.style.display = 'block';
resultsView.classList.remove('show');
noResultView.classList.remove('show');
searchInput.focus();
}
/* 点击历史/热门标签触发搜索 */
function doSearch(keyword) {
searchInput.value = keyword;
searchInput.dispatchEvent(new Event('input'));
}
/* 清空搜索历史 */
function clearHistory() {
document.getElementById('historyTags').innerHTML = '<span style="font-size:13px;color:#bbb;">暂无搜索历史</span>';
}
</script>
</body>
</html>
employee-app/health-consult/select-person-dialog.html
+1
View File
@@ -165,6 +165,7 @@
<div class="form-group"><label class="form-label">遗传史</label><input class="form-input" id="fgenetic" placeholder="如：高血压家族史"></div>
<div class="form-group"><label class="form-label">既往史</label><input class="form-input" id="fpast" placeholder="如：2020年阑尾炎手术"></div>
<div class="form-group"><label class="form-label">其他疾病</label><input class="form-input" id="fother" placeholder="如：慢性胃炎"></div>
<div class="form-label">温馨提示：咨询人信息用于平台审核，不会外传。请输入正确的咨询人信息</div>
<button class="save-btn" onclick="savePerson()">保存</button>
</div>
</div>
employee-app/health-consult/select-person.html
+356
View File
@@ -0,0 +1,356 @@
<!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: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px; height: 844px; border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden; position: relative; display: flex; flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* ===== 导航栏 ===== */
.nav-bar {
height: 44px; display: flex; align-items: center; padding: 0 16px;
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; }
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
/* ===== 页面内容 ===== */
.page-content { flex: 1; overflow-y: auto; padding: 12px 16px 90px; background: #f5f5f5; }
/* ===== 咨询人卡片 ===== */
.person-section { margin-bottom: 12px; }
.person-card {
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
border-radius: 14px 14px 0 0; background: #fff;
border: 1.5px solid #e8e8e8; border-bottom: none; cursor: pointer;
}
.person-card.no-records { border-radius: 14px; border-bottom: 1.5px solid #e8e8e8; }
.person-card.selected { border-color: #1677ff; background: #f0f7ff; }
.person-card.selected + .record-list { border-color: #1677ff; }
.person-avatar { font-size: 28px; flex-shrink: 0; }
.person-info { flex: 1; }
.person-name { font-size: 15px; font-weight: 600; color: #333; }
.person-detail { font-size: 12px; color: #999; margin-top: 2px; }
.person-tag { font-size: 11px; background: #f0f5ff; color: #1677ff; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.person-arrow { color: #ccc; font-size: 14px; flex-shrink: 0; }
/* ===== 档案列表区域 ===== */
.record-list {
background: #fff; border: 1.5px solid #e8e8e8; border-top: none;
border-radius: 0 0 14px 14px; padding: 0 16px 12px;
}
.record-item {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border-radius: 10px; border: 1.5px solid #eee; margin-top: 8px; cursor: pointer;
}
.record-item:active, .record-item.selected { border-color: #1677ff; background: #f0f7ff; }
.record-icon { font-size: 20px; flex-shrink: 0; }
.record-info { flex: 1; min-width: 0; }
.record-name { font-size: 14px; font-weight: 600; color: #333; }
.record-desc { font-size: 12px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-meta { font-size: 11px; color: #bbb; margin-top: 2px; }
.record-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ddd; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.record-item.selected .record-check { background: #1677ff; border-color: #1677ff; }
/* ===== 新增档案按钮 ===== */
.add-record-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 10px; margin-top: 8px; border-radius: 10px;
border: 1.5px dashed #d0d0d0; background: #fafafa; font-size: 13px; color: #666; cursor: pointer;
}
.add-record-btn:active { background: #f0f0f0; }
/* ===== 新增咨询人入口 ===== */
.add-person-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 13px; border-radius: 14px;
border: 1.5px dashed #d0d0d0; background: #fafafa; font-size: 14px; color: #666; cursor: pointer;
margin-top: 4px;
}
.add-person-btn:active { background: #f0f0f0; }
/* ===== 新增咨询人弹窗 ===== */
.fullsheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; z-index: 100; }
.fullsheet-overlay.show { display: flex; }
.fullsheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 82%; display: flex; flex-direction: column; }
.fullsheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.fullsheet-header h3 { font-size: 16px; font-weight: 700; color: #333; }
.fullsheet-header .close-btn { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; line-height: 1; }
.fullsheet-body { flex: 1; overflow-y: auto; padding: 12px 16px 20px; }
.form-group { margin-bottom: 14px; }
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: block; }
.form-input { width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; outline: none; }
.form-input:focus { border-color: #1677ff; }
.form-section { font-size: 14px; font-weight: 600; color: #333; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0; }
.gender-group { display: flex; gap: 8px; margin-bottom: 14px; }
.gender-btn { flex: 1; padding: 9px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; background: #fff; cursor: pointer; text-align: center; }
.gender-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
.option-group { display: flex; gap: 8px; flex-wrap: wrap; }
.option-btn { padding: 7px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 13px; background: #fff; cursor: pointer; }
.option-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
.save-btn { width: 100%; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; background: #1677ff; color: #fff; border: none; cursor: pointer; margin-top: 16px; }
/* ===== 底部操作栏 ===== */
.bottom-bar {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 12px 16px 34px; background: #fff;
border-top: 1px solid #f0f0f0;
}
.submit-btn {
width: 100%; padding: 13px; border-radius: 24px; font-size: 15px; font-weight: 600;
border: none; cursor: pointer; text-align: center;
}
.submit-btn.disabled { background: #e0e0e0; color: #aaa; pointer-events: none; }
.submit-btn.active { background: #1677ff; color: #fff; }
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons"><span>&#9679;&#9679;&#9679;&#9679;</span><span>WiFi</span><span>&#128267;</span></span>
</div>
<div class="nav-bar">
<a class="nav-back" onclick="history.back()">‹</a>
<span class="nav-title">选择咨询人</span>
</div>
<!-- PLACEHOLDER_CONTENT -->
<div class="page-content">
<!-- 咨询人1：本人（有2条档案） -->
<div class="person-section">
<div class="person-card selected" onclick="selectPerson(this)">
<span class="person-avatar">👤</span>
<div class="person-info"><div class="person-name">本人</div><div class="person-detail">28岁 · 男 · 170cm · 65kg</div></div>
<span class="person-tag">本人</span>
</div>
<div class="record-list">
<div class="record-item selected" onclick="selectRecord(this)">
<span class="record-icon">📋</span>
<div class="record-info">
<div class="record-name">腰部疼痛咨询</div>
<div class="record-desc">久坐后腰部持续酸痛，弯腰时加重</div>
<div class="record-meta">2026-04-10 创建</div>
</div>
<span class="record-check">✓</span>
</div>
<div class="record-item" onclick="selectRecord(this)">
<span class="record-icon">📋</span>
<div class="record-info">
<div class="record-name">睡眠问题</div>
<div class="record-desc">近一个月入睡困难，多梦易醒</div>
<div class="record-meta">2026-04-05 创建</div>
</div>
<span class="record-check">✓</span>
</div>
<!-- [交互] 点击跳转到新增健康档案页 add-health-record.html -->
<div class="add-record-btn" onclick="location.href='add-health-record.html'">+ 新增健康档案</div>
</div>
</div>
<!-- 咨询人2：父亲（有1条档案） -->
<div class="person-section">
<div class="person-card" onclick="selectPerson(this)">
<span class="person-avatar">👴</span>
<div class="person-info"><div class="person-name">张三</div><div class="person-detail">58岁 · 男 · 172cm · 70kg</div></div>
<span class="person-tag">父亲</span>
</div>
<div class="record-list">
<div class="record-item" onclick="selectRecord(this)">
<span class="record-icon">📋</span>
<div class="record-info">
<div class="record-name">血压偏高复查</div>
<div class="record-desc">近期血压波动较大，头晕频繁</div>
<div class="record-meta">2026-04-08 创建</div>
</div>
<span class="record-check">✓</span>
</div>
<div class="add-record-btn" onclick="location.href='add-health-record.html'">+ 新增健康档案</div>
</div>
</div>
<!-- 咨询人3：母亲（无档案） -->
<div class="person-section">
<div class="person-card no-records" onclick="selectPerson(this)">
<span class="person-avatar">👩</span>
<div class="person-info"><div class="person-name">李梅</div><div class="person-detail">55岁 · 女 · 160cm · 55kg</div></div>
<span class="person-tag">母亲</span>
</div>
<div class="record-list">
<div class="add-record-btn" onclick="location.href='add-health-record.html'">+ 新增健康档案</div>
</div>
</div>
<!-- [交互] 点击进入新增咨询人流程 -->
<div class="add-person-btn" onclick="showAddPerson()">+ 新增咨询人</div>
</div>
<!-- 新增咨询人弹窗 -->
<div class="fullsheet-overlay" id="addPersonOverlay" onclick="if(event.target===this)closeAddPerson()">
<div class="fullsheet">
<div class="fullsheet-header">
<h3>新增咨询人</h3>
<button class="close-btn" onclick="closeAddPerson()">&times;</button>
</div>
<div class="fullsheet-body">
<div class="form-group"><label class="form-label">姓名</label><input class="form-input" id="fname" placeholder="请输入姓名"></div>
<div class="form-group">
<label class="form-label">性别</label>
<div class="gender-group" data-field="gender">
<div class="gender-btn active" onclick="toggleBtn(this)">男</div>
<div class="gender-btn" onclick="toggleBtn(this)">女</div>
</div>
</div>
<div class="form-group"><label class="form-label">出生日期</label><input class="form-input" type="date" id="fbirthdate"></div>
<div class="form-group"><label class="form-label">与本人关系</label><input class="form-input" id="frelation" placeholder="如：配偶、朋友等"></div>
<div class="form-section">生活习惯</div>
<div class="form-group">
<label class="form-label">是否吸烟</label>
<div class="option-group" data-field="smoke"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
</div>
<div class="form-group">
<label class="form-label">是否饮酒</label>
<div class="option-group" data-field="drink"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
</div>
<div class="form-group">
<label class="form-label">饮食喜好</label>
<div class="option-group" data-field="diet"><div class="option-btn active" onclick="toggleBtn(this)">清淡</div><div class="option-btn" onclick="toggleBtn(this)">均衡</div><div class="option-btn" onclick="toggleBtn(this)">偏油腻</div><div class="option-btn" onclick="toggleBtn(this)">偏辛辣</div></div>
</div>
<div class="form-group">
<label class="form-label">睡眠质量</label>
<div class="option-group" data-field="sleep"><div class="option-btn active" onclick="toggleBtn(this)">良好</div><div class="option-btn" onclick="toggleBtn(this)">一般</div><div class="option-btn" onclick="toggleBtn(this)">较差</div></div>
</div>
<div class="form-section">身体情况</div>
<div class="form-group" style="display:flex;gap:8px;">
<div style="flex:1"><label class="form-label">身高(cm)</label><input class="form-input" id="fheight" placeholder="170"></div>
<div style="flex:1"><label class="form-label">体重(kg)</label><input class="form-input" id="fweight" placeholder="65"></div>
</div>
<div class="form-group"><label class="form-label">过敏史</label><input class="form-input" id="fallergy" placeholder="如：青霉素过敏"></div>
<div class="form-group"><label class="form-label">遗传史</label><input class="form-input" id="fgenetic" placeholder="如：高血压家族史"></div>
<div class="form-group"><label class="form-label">既往史</label><input class="form-input" id="fpast" placeholder="如：2020年阑尾炎手术"></div>
<div class="form-group"><label class="form-label">其他疾病</label><input class="form-input" id="fother" placeholder="如：慢性胃炎"></div>
<div class="form-label">温馨提示：咨询人信息用于平台审核，不会外传。请输入正确的咨询人信息</div>
<button class="save-btn" onclick="savePerson()">保存</button>
</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="bottom-bar">
<button class="submit-btn active" id="submitBtn" onclick="submitConsult()">确定</button>
</div>
</div>
<!-- PLACEHOLDER_SCRIPT -->
<script>
/* ===== 交互逻辑 ===== */
/** 选中咨询人 - 高亮当前卡片，取消其他选中 */
function selectPerson(card) {
document.querySelectorAll('.person-card').forEach(function(c) { c.classList.remove('selected'); });
document.querySelectorAll('.record-item').forEach(function(r) { r.classList.remove('selected'); });
card.classList.add('selected');
updateSubmitBtn();
}
/** 选中档案 - 同时高亮所属咨询人 */
function selectRecord(item) {
document.querySelectorAll('.record-item').forEach(function(r) { r.classList.remove('selected'); });
document.querySelectorAll('.person-card').forEach(function(c) { c.classList.remove('selected'); });
item.classList.add('selected');
var section = item.closest('.person-section');
if (section) section.querySelector('.person-card').classList.add('selected');
updateSubmitBtn();
}
/** 更新底部按钮状态 */
function updateSubmitBtn() {
var btn = document.getElementById('submitBtn');
btn.className = 'submit-btn active';
btn.textContent = '确定';
}
/** [交互] 发送咨询 - 根据来源跳转不同页面 */
function submitConsult() {
var params = new URLSearchParams(window.location.search);
if (params.get('from') === 'video-booking') {
window.location.href = 'video-success.html';
} else {
window.location.href = 'text-chat.html';
}
}
/** [交互] 新增咨询人 - 打开弹窗 */
function showAddPerson() {
document.getElementById('addPersonOverlay').classList.add('show');
}
/** 关闭新增咨询人弹窗 */
function closeAddPerson() {
document.getElementById('addPersonOverlay').classList.remove('show');
}
/** 按钮组切换 - 同组内单选 */
function toggleBtn(btn) {
var siblings = btn.parentElement.children;
for (var i = 0; i < siblings.length; i++) { siblings[i].classList.remove('active'); }
btn.classList.add('active');
}
/** 保存新咨询人 - 添加卡片并关闭弹窗 */
function savePerson() {
var name = document.getElementById('fname').value.trim();
if (!name) { alert('请输入姓名'); return; }
var gender = document.querySelector('[data-field="gender"] .active').textContent;
var relation = document.getElementById('frelation').value.trim() || '其他';
var emoji = gender === '女' ? '👩' : '👤';
// 创建新咨询人卡片（无档案状态）
var section = document.createElement('div');
section.className = 'person-section';
section.innerHTML = '<div class="person-card no-records" onclick="selectPerson(this)"><span class="person-avatar">' + emoji + '</span><div class="person-info"><div class="person-name">' + name + '</div><div class="person-detail">' + gender + '</div></div><span class="person-tag">' + relation + '</span></div><div class="record-list"><div class="add-record-btn" onclick="location.href=\'add-health-record.html\'">+ 新增健康档案</div></div>';
// 插入到"新增咨询人"按钮之前
var addBtn = document.querySelector('.page-content > .add-person-btn');
addBtn.parentNode.insertBefore(section, addBtn);
// 重置表单并关闭弹窗
document.getElementById('fname').value = '';
document.getElementById('frelation').value = '';
document.getElementById('fbirthdate').value = '';
document.getElementById('fheight').value = '';
document.getElementById('fweight').value = '';
document.getElementById('fallergy').value = '';
document.getElementById('fgenetic').value = '';
document.getElementById('fpast').value = '';
document.getElementById('fother').value = '';
closeAddPerson();
}
</script>
</body>
</html>
employee-app/health-consult/text-chat-history.html
+230
View File
@@ -0,0 +1,230 @@
<!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: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* ===== 手机壳模拟器 ===== */
.phone-shell {
width: 390px;
height: 844px;
border-radius: 44px;
background: #f5f5f5;
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 54px;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 24px 8px;
font-size: 14px;
font-weight: 600;
color: #333;
flex-shrink: 0;
background: #fff;
}
.status-bar .time { font-size: 15px; font-weight: 700; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* ===== 聊天头部栏 ===== */
.chat-header { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chat-header .back-btn { font-size: 20px; cursor: pointer; color: #333; text-decoration: none; }
.chat-header .chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.chat-header .chat-info { display: flex; flex-direction: column; }
.chat-header .chat-name { font-size: 15px; font-weight: 600; }
.chat-header .chat-status { font-size: 12px; color: #999; }
/* ===== 聊天消息区域 ===== */
.chat-messages { flex: 1; overflow-y: auto; padding: 8px 16px; }
.chat-messages::-webkit-scrollbar { display: none; }
.msg-row { display: flex; margin-bottom: 16px; align-items: flex-end; gap: 8px; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.msg-row.mine .msg-avatar { background: linear-gradient(135deg, #d9f7be, #95de64); }
.bubble { max-width: 240px; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #f0f0f0; }
.msg-row.mine .bubble { background: #1677ff; color: #fff; border-bottom-right-radius: 4px; }
.msg-row:not(.mine) .bubble { border-bottom-left-radius: 4px; }
/* ===== 健康档案卡片气泡 ===== */
.bubble-record { max-width: 260px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.mine .bubble-record { border-bottom-right-radius: 4px; }
.bubble-record__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); }
.bubble-record__avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bubble-record__name { font-size: 13px; font-weight: 600; color: #333; }
.bubble-record__meta { font-size: 11px; color: #666; }
.bubble-record__body { padding: 10px 12px; }
.bubble-record__title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.bubble-record__desc { font-size: 12px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble-record__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.bubble-record__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
.bubble-record__images { display: flex; gap: 4px; margin-top: 8px; }
.bubble-record__img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 1px solid #f0f0f0; background: #f5f5f5; }
/* ===== 体检报告卡片气泡 ===== */
.bubble-report { max-width: 240px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.mine .bubble-report { border-bottom-right-radius: 4px; }
.bubble-report__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #fff7e6, #ffd591); }
.bubble-report__icon { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.bubble-report__title { font-size: 13px; font-weight: 600; color: #333; line-height: 1.4; }
.bubble-report__body { padding: 8px 12px 10px; }
.bubble-report__meta { font-size: 11px; color: #999; }
.bubble-report__tag { display: inline-block; font-size: 10px; color: #1677ff; background: #e8f4ff; padding: 2px 6px; border-radius: 4px; margin-top: 4px; }
/* ===== 结束咨询卡片气泡 ===== */
.bubble-end-card {
background: #fff; border-radius: 18px; border-bottom-right-radius: 4px; padding: 14px 16px;
border: 1px solid #f0f0f0; text-align: center;
}
.bubble-end-card .end-icon { font-size: 28px; margin-bottom: 6px; }
.bubble-end-card .end-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.bubble-end-card .end-time { font-size: 12px; color: #999; }
/* ===== 底部已结束提示 ===== */
.chat-ended-bar {
background: #fff; border-top: 1px solid #f0f0f0; padding: 14px 16px;
text-align: center; flex-shrink: 0;
}
.chat-ended-bar .ended-text {
font-size: 14px; color: #999; display: flex; align-items: center; justify-content: center; gap: 6px;
}
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<span class="icons">
<span>&#9679;&#9679;&#9679;&#9679;&#9679;</span>
<span>WiFi</span>
<span>&#128267;</span>
</span>
</div>
<!-- [交互] 聊天头部：返回按钮，无结束咨询按钮 -->
<div class="chat-header">
<a class="back-btn" id="backBtn" href="my-records.html">‹</a>
<div class="chat-avatar">👨‍⚕️</div>
<div class="chat-info">
<span class="chat-name">张建国医生</span>
<span class="chat-status">咨询已结束</span>
</div>
</div>
<!-- 聊天消息区域（只读，可滚动） -->
<div class="chat-messages">
<!-- 医生消息 -->
<div class="msg-row">
<div class="msg-avatar">👨‍⚕️</div>
<div class="bubble">您好，我是张建国医生，请问有什么可以帮助您的？请详细描述您的症状。</div>
</div>
<!-- 用户发送健康档案卡片 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble-record" style="cursor:pointer" onclick="location.href='consult-person-detail.html'">
<div class="bubble-record__header">
<div class="bubble-record__avatar">👤</div>
<div>
<div class="bubble-record__name">张旭(父亲) · 28岁 · 男</div>
<div class="bubble-record__meta">170cm · 65kg · 不吸烟 · 睡眠良好</div>
</div>
</div>
<div class="bubble-record__body">
<div class="bubble-record__title">腰部疼痛咨询</div>
<div class="bubble-record__desc">久坐后腰部持续酸痛，弯腰时加重</div>
<div class="bubble-record__tags">
<span class="bubble-record__tag bubble-record__tag--orange">持续时间：1-2周</span>
</div>
<div class="bubble-record__images">
<img class="bubble-record__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect fill='%23e8f4ff' width='56' height='56'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='10'%3E检查1%3C/text%3E%3C/svg%3E" alt="检查报告">
<img class="bubble-record__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect fill='%23fff7e6' width='56' height='56'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23d46b08' font-size='10'%3E患处%3C/text%3E%3C/svg%3E" alt="患处图片">
</div>
</div>
</div>
</div>
<!-- 医生消息 -->
<div class="msg-row">
<div class="msg-avatar">👨‍⚕️</div>
<div class="bubble">您好，胸闷气短需要引起重视。请问您有没有伴随心跳加速、出汗或者胸痛的情况？平时血压情况如何？</div>
</div>
<!-- 用户消息 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble">张医生您好，我父亲最近经常感到胸闷气短，尤其是爬楼梯的时候，已经持续两周了。</div>
</div>
<!-- 用户发送体检报告 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble-report">
<div class="bubble-report__header">
<div class="bubble-report__icon">📄</div>
<div class="bubble-report__title">2026年度综合体检报告</div>
</div>
<div class="bubble-report__body">
<div class="bubble-report__meta">2026-03-15 · 北京协和医院</div>
<span class="bubble-report__tag">体检报告</span>
</div>
</div>
</div>
<!-- 医生回复 -->
<div class="msg-row">
<div class="msg-avatar">👨‍⚕️</div>
<div class="bubble">已收到您的体检报告，我仔细看一下。从报告来看各项指标基本正常，建议您尽快到医院做一个心电图和胸片检查，排除心肺方面的问题。</div>
</div>
<!-- 用户发出的结束咨询卡片 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble-end-card">
<div class="end-icon">✅</div>
<div class="end-title">已结束本次咨询</div>
<div class="end-time">2026-03-15 09:35</div>
</div>
</div>
</div>
<!-- 底部已结束提示条 -->
<div class="chat-ended-bar">
<div class="ended-text">— 咨询已结束 —</div>
</div>
</div>
<script>
/** 根据 ?from 参数设置返回按钮目标 */
(function() {
var params = new URLSearchParams(window.location.search);
var from = params.get('from');
var backBtn = document.getElementById('backBtn');
if (from === 'record-detail-rated') {
backBtn.href = 'record-detail-rated.html';
} else if (from === 'record-detail-unrated') {
backBtn.href = 'record-detail-unrated.html';
}
})();
</script>
</body>
</html>
employee-app/health-consult/text-chat.html
+84 -7
View File
@@ -73,6 +73,15 @@
.chat-input-row input { flex: 1; background: #f5f5f5; border: none; border-radius: 20px; padding: 9px 16px; font-size: 14px; outline: none; }
.chat-input-row .plus-btn { width: 36px; height: 36px; border-radius: 50%; background: #1677ff; color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-input-row .send-btn { background: #1677ff; color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
/* 语音切换按钮 */
.voice-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: #f5f5f5; color: #666; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.voice-toggle-btn:active { background: #e8e8e8; }
/* 按住说话按钮 */
.hold-to-talk { flex: 1; height: 36px; border: 1.5px solid #e8e8e8; border-radius: 20px; background: #f9f9f9; color: #333; font-size: 14px; font-weight: 500; cursor: pointer; display: none; align-items: center; justify-content: center; user-select: none; transition: background 0.15s; }
.hold-to-talk:active { background: #e6f4ff; border-color: #1677ff; color: #1677ff; }
.hold-to-talk.show { display: flex; }
.chat-input-row input.hide { display: none; }
.chat-input-row .send-btn.hide { display: none; }
.plus-panel { display: none; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 8px 8px; }
.plus-panel.show { display: grid; }
.plus-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
@@ -104,6 +113,24 @@
.report-sheet__card-meta { font-size: 12px; color: #999; margin-top: 3px; }
.report-sheet__send-btn { margin-left: auto; font-size: 12px; background: #1677ff; color: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; cursor: pointer; border: none; }
/* ===== 健康档案卡片气泡 ===== */
.bubble-record { max-width: 260px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
.msg-row.mine .bubble-record { border-bottom-right-radius: 4px; }
.bubble-record__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); }
.bubble-record__avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bubble-record__name { font-size: 13px; font-weight: 600; color: #333; }
.bubble-record__meta { font-size: 11px; color: #666; }
.bubble-record__body { padding: 10px 12px; }
.bubble-record__title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.bubble-record__desc { font-size: 12px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble-record__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.bubble-record__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.bubble-record__tag--blue { color: #1677ff; background: #e8f4ff; }
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
.bubble-record__images { display: flex; gap: 4px; margin-top: 8px; }
.bubble-record__img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 1px solid #f0f0f0; background: #f5f5f5; }
.bubble-record__footer { padding: 6px 12px 10px; font-size: 11px; color: #bbb; }
/* ===== 模态弹窗 ===== */
.modal-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
@@ -133,7 +160,6 @@
<div class="chat-avatar">👨‍⚕️</div>
<div class="chat-info">
<span class="chat-name">张建国医生</span>
<span class="chat-status">● 在线</span>
</div>
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
<button class="end-btn" onclick="showEndConfirm()">结束咨询</button>
@@ -149,15 +175,40 @@
<div class="msg-avatar">👨‍⚕️</div>
<div class="bubble">您好，我是张建国医生，请问有什么可以帮助您的？请详细描述您的症状。</div>
</div>
<!-- 我的消息 -->
<!-- [交互] 发送健康档案卡片 - 点击跳转到咨询人档案详情页 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble">张医生您好，我最近经常感到胸闷气短，尤其是爬楼梯的时候，已经持续两周了。</div>
<div class="bubble-record" style="cursor:pointer" onclick="location.href='consult-person-detail.html'">
<div class="bubble-record__header">
<div class="bubble-record__avatar">👤</div>
<div>
<div class="bubble-record__name">张旭(父亲) · 28岁 · 男</div>
<div class="bubble-record__meta">170cm · 65kg · 不吸烟 · 睡眠良好</div>
</div>
</div>
<div class="bubble-record__body">
<div class="bubble-record__title">腰部疼痛咨询</div>
<div class="bubble-record__desc">久坐后腰部持续酸痛，弯腰时加重</div>
<div class="bubble-record__tags">
<span class="bubble-record__tag bubble-record__tag--orange">持续时间：1-2周</span>
</div>
<div class="bubble-record__images">
<img class="bubble-record__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect fill='%23e8f4ff' width='56' height='56'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='10'%3E检查1%3C/text%3E%3C/svg%3E" alt="检查报告">
<img class="bubble-record__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect fill='%23fff7e6' width='56' height='56'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23d46b08' font-size='10'%3E患处%3C/text%3E%3C/svg%3E" alt="患处图片">
</div>
</div>
</div>
</div>
<!-- 医生消息 -->
<div class="msg-row">
<div class="msg-avatar">👨‍⚕️</div>
<div class="bubble">您好，胸闷气短需要引起重视。请问您有没有伴随心跳加速、出汗或者胸痛的情况？平时血压情况如何？</div>
</div>
<!-- 我的消息 -->
<div class="msg-row mine">
<div class="msg-avatar">😊</div>
<div class="bubble">张医生您好，我父亲最近经常感到胸闷气短，尤其是爬楼梯的时候，已经持续两周了。</div>
</div>
</div>
@@ -166,9 +217,13 @@
<div class="chat-input-row">
<!-- [交互] 点击+按钮展开/收起功能面板 -->
<button class="plus-btn" onclick="togglePlus()">+</button>
<!-- [交互] 语音/键盘切换按钮 -->
<button class="voice-toggle-btn" id="voiceToggle" onclick="toggleVoice()">🎤</button>
<input type="text" id="msgInput" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendMsg()">
<!-- [交互] 按住说话按钮，语音模式下显示 -->
<button class="hold-to-talk" id="holdToTalk">按住 说话</button>
<!-- [交互] 点击发送按钮发送消息 -->
<button class="send-btn" onclick="sendMsg()">发送</button>
<button class="send-btn" id="sendBtn" onclick="sendMsg()">发送</button>
</div>
<!-- [交互] 展开面板，默认隐藏 -->
<div class="plus-panel" id="plusPanel">
@@ -177,10 +232,9 @@
<!-- [交互] 点击打开体检报告选择弹窗 -->
<div class="plus-item" onclick="openReportSheet()"><div class="pi-icon">📋</div><div class="pi-label">体检报告</div></div>
<!-- [交互] 跳转到选择档案弹窗页 -->
<div class="plus-item" onclick="location.href='select-person-dialog.html'"><div class="pi-icon">📁</div><div class="pi-label">选择档案</div></div>
<div class="plus-item" onclick="location.href='select-person.html'"><div class="pi-icon">📁</div><div class="pi-label">选择档案</div></div>
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
<div class="plus-item" onclick="showEndConfirm()"><div class="pi-icon">❌</div><div class="pi-label">结束咨询</div></div>
</div>
</div>
</div>
<!-- 结束咨询确认弹窗 -->
@@ -243,6 +297,29 @@
}
})();
/**
* 切换语音/文字输入模式
*/
var isVoiceMode = false;
function toggleVoice() {
isVoiceMode = !isVoiceMode;
var toggleBtn = document.getElementById('voiceToggle');
var msgInput = document.getElementById('msgInput');
var holdBtn = document.getElementById('holdToTalk');
var sendBtn = document.getElementById('sendBtn');
if (isVoiceMode) {
toggleBtn.textContent = '⌨️';
msgInput.classList.add('hide');
sendBtn.classList.add('hide');
holdBtn.classList.add('show');
} else {
toggleBtn.textContent = '🎤';
msgInput.classList.remove('hide');
sendBtn.classList.remove('hide');
holdBtn.classList.remove('show');
}
}
/**
* 切换展开面板的显示/隐藏
*/
employee-app/health-consult/video-booking.html
+7 -7
View File
@@ -122,12 +122,12 @@
<div class="section-title">选择日期</div>
<!-- [交互] 日期横向滚动：点击切换选中日期 -->
<div class="date-scroll">
<div class="date-chip" onclick="selectDate(this,'04/07')"><div class="day">今天</div><div class="date">04/07</div></div>
<div class="date-chip active" onclick="selectDate(this,'04/08')"><div class="day">明天</div><div class="date">04/08</div></div>
<div class="date-chip" onclick="selectDate(this,'04/09')"><div class="day">周四</div><div class="date">04/09</div></div>
<div class="date-chip" onclick="selectDate(this,'04/10')"><div class="day">周五</div><div class="date">04/10</div></div>
<div class="date-chip" onclick="selectDate(this,'04/11')"><div class="day">周六</div><div class="date">04/11</div></div>
<div class="date-chip" onclick="selectDate(this,'04/12')"><div class="day">周日</div><div class="date">04/12</div></div>
<div class="date-chip" onclick="selectDate(this,'04/07')"><div class="day">明天</div><div class="date">04/07</div></div>
<div class="date-chip active" onclick="selectDate(this,'04/08')"><div class="day">周一</div><div class="date">04/08</div></div>
<div class="date-chip" onclick="selectDate(this,'04/09')"><div class="day">周二</div><div class="date">04/09</div></div>
<div class="date-chip" onclick="selectDate(this,'04/10')"><div class="day">周三</div><div class="date">04/10</div></div>
<div class="date-chip" onclick="selectDate(this,'04/11')"><div class="day">周四</div><div class="date">04/11</div></div>
<div class="date-chip" onclick="selectDate(this,'04/12')"><div class="day">周五</div><div class="date">04/12</div></div>
</div>
<!-- 上午时段 -->
<div class="section-title">上午</div>
@@ -158,7 +158,7 @@
<div class="value" id="selectedText">04/08 10:00</div>
</div>
<!-- [交互] 立即预约按钮：跳转预约成功页 -->
<button class="book-btn" onclick="window.location.href='video-success.html'">立即预约</button>
<button class="book-btn" onclick="window.location.href='select-person.html?from=video-booking'">立即预约</button>
</div>
</div>
employee-app/health-consult/video-detail-cancelled.html
+4 -35
View File
@@ -125,34 +125,12 @@
<!-- PLACEHOLDER_BODY -->
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<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">
@@ -160,17 +138,12 @@
<div class="vb-info">
<div class="vb-title">视频咨询</div>
<div class="vb-sub">预约时间：2026-03-10 15:00</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">
@@ -187,10 +160,6 @@
</div>
<script>
function toggleHealthRecord(el) {
el.classList.toggle('expanded');
el.nextElementSibling.classList.toggle('show');
}
</script>
</body>
</html>
employee-app/health-consult/video-detail-confirming.html
+154
View File
@@ -0,0 +1,154 @@
<!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--confirming { background: #f9f0ff; color: #722ed1; }
/* 咨询人健康档案 */
.health-record-entry {
margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px;
display: flex; align-items: center; gap: 12px; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.15s;
}
.health-record-entry:active { transform: scale(0.98); }
.hre-icon { font-size: 24px; flex-shrink: 0; }
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
/* 视频咨询Banner */
.video-banner {
margin: 12px 16px; background: linear-gradient(135deg, #722ed1, #b37feb); 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; }
/* 信息卡片 */
.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: #f9f0ff; border-radius: 14px; padding: 14px 16px;
font-size: 13px; color: #722ed1; 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: #722ed1; border: 2px solid #722ed1;
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--confirming">待确认</span>
</div>
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<!-- 视频咨询Banner -->
<div class="video-banner">
<div class="vb-icon">📹</div>
<div class="vb-info">
<div class="vb-title">视频咨询</div>
<div class="vb-sub">期望时间：2026-04-15 10:00</div>
</div>
<span class="vb-tag">待确认</span>
</div>
<!-- 温馨提示 -->
<div class="tip-box">📌 温馨提示：您的预约申请已提交，正在等待医生确认。</div>
</div>
<!-- [交互] 底部操作栏 -->
<div class="detail-footer">
<button class="btn-outline">取消预约</button>
</div>
<div class="bottom-spacer"></div>
</div>
</body>
</html>
employee-app/health-consult/video-detail-done.html
+7 -39
View File
@@ -123,54 +123,26 @@
<!-- PLACEHOLDER_BODY -->
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<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-title">视频咨询</div><span class="vb-tag">已完成</span>
<div class="vb-sub">预约时间：2026-03-20 10:00</div>
<div class="vb-sub">视频拨打时间：2026-03-20 11:00</div>
<div class="vb-sub">通话时长：18分钟</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">
@@ -181,10 +153,6 @@
</div>
<script>
function toggleHealthRecord(el) {
el.classList.toggle('expanded');
el.nextElementSibling.classList.toggle('show');
}
</script>
</body>
</html>
employee-app/health-consult/video-detail-pending.html
+5 -36
View File
@@ -135,34 +135,12 @@
<!-- PLACEHOLDER_BODY -->
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<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">
@@ -176,30 +154,21 @@
<!-- 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 class="tip-box">📌 温馨提示：请在预约时间前5分钟准备好，保持网络畅通，等待医生拨打视频通话</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>
employee-app/health-consult/video-detail-rejected.html
+3 -34
View File
@@ -125,34 +125,12 @@
<!-- PLACEHOLDER_BODY -->
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
<!-- [交互] 咨询人健康档案入口：点击跳转到咨询人档案详情页 -->
<div class="health-record-entry" onclick="location.href='consult-person-detail.html'">
<span class="hre-icon">📋</span>
<span class="hre-title">咨询人健康档案</span>
<span class="hre-arrow">›</span>
</div>
<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">
@@ -164,12 +142,7 @@
<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">
@@ -186,10 +159,6 @@
</div>
<script>
function toggleHealthRecord(el) {
el.classList.toggle('expanded');
el.nextElementSibling.classList.toggle('show');
}
</script>
</body>
</html>
employee-app/health-consult/video-success.html
+4 -4
View File
@@ -81,8 +81,8 @@
<!-- 成功图标 -->
<div class="success-icon">✅</div>
<div class="success-title">预约成功！</div>
<div class="success-desc">请在预约时间内准时上线
系统将提前15分钟推送提醒</div>
<div class="success-desc">请在预约时间前打开APP
等待医生拨打视频通话</div>
<!-- 预约信息卡片 -->
<div class="info-card">
@@ -91,11 +91,11 @@
<div class="info-row"><span class="label">科室</span><span class="value">心内科</span></div>
<div class="info-row"><span class="label">类型</span><span class="value">📹 视频咨询</span></div>
<div class="info-row"><span class="label">时间</span><span class="value">2026-04-08 10:00</span></div>
<div class="info-row"><span class="label">费用</span><span class="value blue">¥50</span></div>
</div>
<!-- [交互] 查看我的咨询按钮：跳转咨询记录页 -->
<button class="btn-primary" onclick="window.location.href='my-records.html'">查看我的咨询</button>
<button class="btn-primary" onclick="window.location.href='video-detail-pending.html'">查看我的咨询</button>
<!-- [交互] 返回首页按钮：跳转首页 -->
<button class="btn-outline" onclick="window.location.href='index.html'">返回首页</button>
</div>