feat: 健康咨询三端原型大规模更新，新增13个页面/弹窗，优化22个页面
- 员工端APP：新增综合搜索、选择咨询人、咨询人档案、健康档案、历史对话只读页、视频待确认详情页；重构找专家页、我的记录页、医院详情页；优化对话页面交互 - 小助手后台：新增专家管理模块（列表+详情+导入导出）；重构当前咨询页和员工档案弹窗 - 管理端后台：重构咨询须知配置（分TAB+双栏预览）；优化咨询记录和结算页 - 应急APP专家端：新增咨询人档案页；优化工作台和对话页面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家工作台 - 咨询人档案 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-left: 8px; }
|
||||
/* 页面内容 */
|
||||
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f7f8fa; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 个人信息头部 */
|
||||
.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 { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.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__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>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询人档案</span>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_CONTENT -->
|
||||
<div class="page-content">
|
||||
<!-- 个人信息头部 -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">👩</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">张小红</div>
|
||||
<div class="profile-meta">女 · 28岁 · 165cm · 50kg</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">28岁</div></div>
|
||||
<div class="info-item"><div class="info-item__label">身高</div><div class="info-item__value">165cm</div></div>
|
||||
<div class="info-item"><div class="info-item__label">体重</div><div class="info-item__value">50kg</div></div>
|
||||
<div class="info-item"><div class="info-item__label">血型</div><div class="info-item__value">A型</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--good">不饮酒</span>
|
||||
<span class="habit-tag habit-tag--good">饮食均衡</span>
|
||||
<span class="habit-tag habit-tag--warn">睡眠一般</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-13 创建</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周</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'%3ECT片%3C/text%3E%3C/svg%3E" alt="CT片">
|
||||
</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>
|
||||
@@ -102,12 +102,12 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-text-pending">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👩</div><div class="cc-info"><div class="cc-name">张小红</div><div class="cc-meta">研发部 · 工程师</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar">👩</div><div class="cc-info"><div class="cc-name">张小红</div><div class="cc-meta">女 · 28岁</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">最近总是头痛，尤其是下午工作时...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">10:23</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">李建国</div><div class="cc-meta">市场部 · 销售专员</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">李建国</div><div class="cc-meta">男 · 45岁</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">血压最近偏高，想咨询一下用药...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">09:55</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
@@ -116,7 +116,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-text-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">陈伟</div><div class="cc-meta">技术部 · 开发工程师</div></div><span class="tag tag-blue">进行中</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">陈伟</div><div class="cc-meta">男 · 32岁</div></div><span class="tag tag-blue">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">好的，我按您说的方法试试看</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
@@ -125,7 +125,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-text-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-consult-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">运营部 · 运营专员</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">感谢医生，问题已解决</div><span class="cc-time">08:40</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
@@ -138,14 +138,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-video-pending')">待确认<span class="badge">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-ongoing')">进行中<span class="badge" style="background:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-done')">已完成</div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-done')">已结束</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 视频待确认列表 -->
|
||||
<div id="wb-video-pending">
|
||||
<!-- [交互] 点击跳转至: ./video-appt.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-appt.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">王芳</div><div class="cc-meta">人事部 · HR专员</div></div><span class="tag tag-orange">待确认</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">王芳</div><div class="cc-meta">女 · 30岁</div></div><span class="tag tag-orange">待确认</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 14:00–14:30</div><span class="cc-time">09:30</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
@@ -154,18 +154,28 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-video-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./video-ongoing.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-ongoing.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div><div class="cc-info"><div class="cc-name">刘梅</div><div class="cc-meta">财务部 · 会计</div></div><span class="tag tag-green">进行中</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div><div class="cc-info"><div class="cc-name">刘梅</div><div class="cc-meta">女 · 38岁</div></div><span class="tag tag-green">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 14:00–14:30 · 已确认</div><span class="cc-time">14:00</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 视频已完成列表 -->
|
||||
<!-- 视频已结束列表 -->
|
||||
<div id="wb-video-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">行政部 · 行政专员</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">女 · 29岁</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">⭐⭐⭐⭐⭐ 非常专业，感谢！</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨</div><div class="cc-info"><div class="cc-name">周明</div><div class="cc-meta">男 · 33岁</div></div><span class="tag tag-gray">已取消</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">用户取消：临时有会议冲突</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">👩</div><div class="cc-info"><div class="cc-name">吴静</div><div class="cc-meta">女 · 26岁</div></div><span class="tag tag-red">已拒绝</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">该时段已有其他预约安排</div><span class="cc-time">前天</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,20 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
/* 咨询人档案卡片 */
|
||||
.bubble-record { max-width: 260px; border-radius: 0 12px 12px 12px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.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; }
|
||||
.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__footer { display: flex; align-items: center; justify-content: flex-end; padding: 6px 12px 10px; font-size: 12px; color: #1677ff; gap: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -54,21 +68,39 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<button class="nav-right" onclick="openModal('modal-end-confirm')">结束咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 员工信息条 -->
|
||||
<div style="background:#f0f7ff;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:1px solid #ddeeff;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;">👩</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:13px;font-weight:600;color:#1a1a1a;">张小红 · 研发部</div>
|
||||
<div style="font-size:11px;color:#666;">图文咨询 · 2026-04-08 10:20 发起</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./employee-profile.html -->
|
||||
<button onclick="location.href='./employee-profile.html'" style="font-size:12px;color:#1677ff;background:none;border:1px solid #1677ff;border-radius:6px;padding:4px 10px;cursor:pointer;">查看档案</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
|
||||
<!-- [交互] 咨询人档案卡片（首发消息）- 点击查看详情跳转咨询人档案页 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div class="bubble-record" 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">165cm · 50kg · 不吸烟 · 睡眠一般</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周</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>
|
||||
<!-- 员工消息（左侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
@@ -82,7 +114,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="width:140px;height:90px;background:linear-gradient(135deg,#e8f4ff,#c5deff);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;">🩺</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">体检报告.jpg</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">体检报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -80,32 +80,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- 咨询人健康档案（可折叠） -->
|
||||
<div class="profile-collapsible" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);overflow:hidden;">
|
||||
<!-- [交互] 点击展开/收起档案 -->
|
||||
<div onclick="toggleProfile(this)" style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">📋 咨询人健康档案</span>
|
||||
<span class="profile-arrow" style="font-size:12px;color:#999;transition:transform 0.2s;">∨</span>
|
||||
</div>
|
||||
<div class="profile-body" style="display:none;padding:0 16px 14px;">
|
||||
<!-- 基本信息 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#1677ff;margin:4px 0 6px;">基本信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">姓名</span><span style="font-size:13px;color:#1a1a1a;">赵磊</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">男 / 32岁</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">175 cm / 70 kg</span></div>
|
||||
<!-- 生活习惯 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#52c41a;margin:10px 0 6px;">生活习惯</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">吸烟</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮酒</span><span style="font-size:13px;color:#1a1a1a;">偶尔</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮食喜好</span><span style="font-size:13px;color:#1a1a1a;">均衡</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">睡眠质量</span><span style="font-size:13px;color:#fa8c16;">较差</span></div>
|
||||
<!-- 身体情况 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#fa8c16;margin:10px 0 6px;">身体情况</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">遗传史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">既往史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">失眠</span></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./consult-person-detail.html 查看咨询人健康档案 -->
|
||||
<div onclick="location.href='./consult-person-detail.html'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">📋</span>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;flex:1;">咨询人健康档案</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
|
||||
@@ -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>●●●●</span><span>WiFi</span><span>🔋</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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</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>
|
||||
@@ -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>●●●●</span><span>WiFi</span><span>🔋</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>
|
||||
@@ -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个）：**
|
||||
|
||||
@@ -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）
|
||||
- 消息区可上下滚动浏览历史对话
|
||||
- 健康档案卡片点击可跳转到咨询人档案详情页
|
||||
|
||||
@@ -83,13 +83,13 @@
|
||||
<!-- [交互] 点击返回按钮跳转到 find-expert.html -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="window.location.href='find-expert.html'">‹</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 ? '👩‍⚕️' : '👨‍⚕️';
|
||||
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>⭐ <span class="ec-stat-val">'+d.s+'</span>分</span><span>💬 <span class="ec-stat-val">'+d.c+'</span>次</span><span>✉ 回复率 <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>
|
||||
|
||||
@@ -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()">←</button>
|
||||
<!-- [交互] 分享按钮 -->
|
||||
<button class="nav-share">分享</button>
|
||||
</div>
|
||||
|
||||
<!-- 页面滚动内容 -->
|
||||
@@ -404,15 +419,27 @@
|
||||
<button class="btn-outline" onclick="showNotice('video')">📹 视频咨询</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';
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>📍</span>
|
||||
<span>北京市西城区大木仓胡同41号</span>
|
||||
@@ -124,9 +116,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="hd-row">
|
||||
<span>📏</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">🔍</span>
|
||||
<input type="text" id="expertSearchInput" placeholder="搜索医生姓名" oninput="filterExperts(this, 'expertListContainer')">
|
||||
<button class="lsb-clear" id="expertClearBtn" onclick="clearSearch('expertSearchInput', 'expertListContainer', 'expertClearBtn')">✕</button>
|
||||
|
||||
<!-- 专家网格（两列，6名热门专家） -->
|
||||
<!-- [交互] 点击专家卡片跳转到专家主页 -->
|
||||
<div class="expert-grid">
|
||||
<div class="expert-mini-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="emc-avatar">👨‍⚕️</div>
|
||||
<div class="emc-name">张建国</div>
|
||||
<div class="emc-title">主任医师</div>
|
||||
<div class="emc-dept">心内科</div>
|
||||
<div class="emc-score">⭐ <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">👩‍⚕️</div>
|
||||
<div class="emc-name">陈美华</div>
|
||||
<div class="emc-title">主任医师</div>
|
||||
<div class="emc-dept">神经内科</div>
|
||||
<div class="emc-score">⭐ <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">👨‍⚕️</div>
|
||||
<div class="emc-name">李明远</div>
|
||||
<div class="emc-title">主任医师</div>
|
||||
<div class="emc-dept">内分泌科</div>
|
||||
<div class="emc-score">⭐ <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">👨‍⚕️</div>
|
||||
<div class="emc-name">赵伟</div>
|
||||
<div class="emc-title">主任医师</div>
|
||||
<div class="emc-dept">骨科</div>
|
||||
<div class="emc-score">⭐ <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">👩‍⚕️</div>
|
||||
<div class="emc-name">周婷</div>
|
||||
<div class="emc-title">副主任医师</div>
|
||||
<div class="emc-dept">妇科</div>
|
||||
<div class="emc-score">⭐ <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">👨‍⚕️</div>
|
||||
<div class="emc-name">刘海波</div>
|
||||
<div class="emc-title">副主任医师</div>
|
||||
<div class="emc-dept">消化内科</div>
|
||||
<div class="emc-score">⭐ <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">👨‍⚕️</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>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">1280</span>次</span>
|
||||
<span>✉ 回复率 <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">👩‍⚕️</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>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">2100</span>次</span>
|
||||
<span>✉ 回复率 <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">👨‍⚕️</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>⭐ <span class="ec-stat-val">4.7</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">430</span>次</span>
|
||||
<span>✉ 回复率 <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">🔍</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">👤</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">★★★★★</div>
|
||||
</div>
|
||||
<div class="review-content">张建国医生非常专业，对我的冠心病情况分析得很透彻，给出的治疗方案也很详细，非常感谢！</div>
|
||||
</div>
|
||||
<!-- 评价2 -->
|
||||
<div class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-avatar">👤</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">★★★★★</div>
|
||||
</div>
|
||||
<div class="review-content">陈美华医生回复很及时，耐心解答了我关于偏头痛的各种疑问，推荐的用药方案效果不错。</div>
|
||||
</div>
|
||||
<!-- 评价3 -->
|
||||
<div class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-avatar">👤</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">★★★★☆</div>
|
||||
</div>
|
||||
<div class="review-content">李明远医生对糖尿病的管理建议很实用，饮食和运动方面的指导也很细致，整体体验很好。</div>
|
||||
</div>
|
||||
<!-- 评价4 -->
|
||||
<div class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-avatar">👤</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">★★★★★</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>●●●●</span><span>WiFi</span><span>🔋</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>
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交评价，跳转到咨询记录页
|
||||
*/
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>●●●●</span><span>WiFi</span><span>🔋</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()">×</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>
|
||||
@@ -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>●●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</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>
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换展开面板的显示/隐藏
|
||||
*/
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -108,6 +108,7 @@
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html" class="active">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
|
||||
@@ -63,6 +63,7 @@
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html" class="active">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
|
||||
@@ -73,6 +73,7 @@
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html" class="active">咨询结算</a>
|
||||
|
||||
@@ -30,6 +30,9 @@
|
||||
.conv-list__header{padding:16px;border-bottom:1px solid var(--border);}
|
||||
.conv-list__search{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px 0 36px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M10 10l2.5 2.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;}
|
||||
.conv-list__search:focus{border-color:var(--primary);}
|
||||
.conv-list__filters{display:flex;gap:16px;padding:10px 10px 0;font-size:var(--font-sm);}
|
||||
.conv-list__filters label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-secondary);user-select:none;}
|
||||
.conv-list__filters input[type="checkbox"]{width:10px;height:10px;accent-color:var(--primary);cursor:pointer;}
|
||||
.conv-list__body{flex:1;overflow-y:auto;}
|
||||
.conv-item{display:flex;gap:12px;padding:14px 16px;cursor:pointer;border-bottom:1px solid #F5F5F5;transition:background .15s;}
|
||||
.conv-item:hover{background:#FAFAFA;}
|
||||
@@ -48,6 +51,11 @@
|
||||
.chat-header__left{display:flex;align-items:center;gap:12px;}
|
||||
.chat-header__name{font-size:var(--font-base);font-weight:600;}
|
||||
.chat-header__tag{font-size:var(--font-xs);padding:2px 8px;border-radius:10px;background:#F6FFED;color:var(--success);}
|
||||
.chat-header__tag--ended{background:#F5F5F5;color:#999;}
|
||||
/* 咨询结束卡片（员工侧发出） */
|
||||
.end-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);}
|
||||
.end-card__icon{width:36px;height:36px;border-radius:50%;background:#FFF1F0;color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.end-card__text{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;}
|
||||
.chat-header__actions{display:flex;gap:8px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
@@ -125,6 +133,7 @@
|
||||
<a href="current-consult.html" class="active">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
@@ -147,6 +156,11 @@
|
||||
<div class="conv-list">
|
||||
<div class="conv-list__header">
|
||||
<input class="conv-list__search" type="text" placeholder="搜索员工姓名/工号">
|
||||
<div class="conv-list__filters">
|
||||
<label><input type="checkbox"> 咨询专家</label>
|
||||
<label><input type="checkbox"> 咨询小助手</label>
|
||||
<label><input type="checkbox"> 专家未回复</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conv-list__body">
|
||||
<!-- [交互] 点击切换右侧对话内容 -->
|
||||
@@ -220,13 +234,13 @@
|
||||
<div class="chat-header">
|
||||
<div class="chat-header__left">
|
||||
<span class="chat-header__name" id="chatName">李明</span>
|
||||
<span class="chat-header__tag">咨询中</span>
|
||||
<span class="chat-header__tag" id="chatTag">咨询中</span>
|
||||
</div>
|
||||
<div class="chat-header__actions">
|
||||
<!-- [交互] 点击打开咨询人档案弹窗 -->
|
||||
<button class="btn btn-default btn-sm" onclick="openOverlay('employee-profile-dialog.html',680,720)">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M2 13c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
查看档案
|
||||
咨询人档案
|
||||
</button>
|
||||
<!-- [交互] 点击结束当前咨询 -->
|
||||
<button class="btn btn-default btn-sm" style="color:var(--danger);border-color:var(--danger);">
|
||||
@@ -323,7 +337,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-input-wrap">
|
||||
<textarea class="chat-input" rows="1" placeholder="输入消息..."></textarea>
|
||||
<textarea class="chat-input" rows="4" placeholder="输入消息..."></textarea>
|
||||
<button class="btn btn-primary">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -358,13 +372,61 @@ window.addEventListener('message', function(e) {
|
||||
if (e.data === 'close-dialog') closeOverlay();
|
||||
});
|
||||
|
||||
/* 各对话的聊天内容 */
|
||||
var convContents = {};
|
||||
convContents[0] = document.getElementById('chatBody').innerHTML;
|
||||
convContents[1] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 09:40</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">09:40</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">最近总是头疼，尤其是下午比较严重，已经持续一周了。</div><div class="msg__time">09:42</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">请问头疼的位置是前额、太阳穴还是后脑勺？有没有伴随恶心、视力模糊等情况？平时睡眠和用眼情况如何？</div><div class="msg__time">09:44</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">主要是太阳穴两侧，有时候会恶心。最近加班比较多，睡眠不太好。</div><div class="msg__time">09:50</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">根据您的描述，可能是紧张性头痛，与疲劳和睡眠不足有关。建议：<br>1. 保证充足睡眠，每天7-8小时<br>2. 适当放松，避免长时间伏案<br>3. 如持续不缓解，建议做头颅CT排查</div><div class="msg__time">09:52</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">好的，谢谢！我先注意休息看看。</div><div class="msg__time">09:55</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="end-card"><div class="end-card__icon">✕</div><div class="end-card__text">本次咨询已结束</div></div><div class="msg__time">09:58</div></div></div>';
|
||||
|
||||
/* 各对话的状态配置：tag文字 + 是否已结束 */
|
||||
var convStatus = {
|
||||
0: { text: '咨询中', ended: false },
|
||||
1: { text: '已结束', ended: true },
|
||||
2: { text: '咨询中', ended: false },
|
||||
3: { text: '咨询中', ended: false },
|
||||
4: { text: '咨询中', ended: false },
|
||||
5: { text: '咨询中', ended: false }
|
||||
};
|
||||
|
||||
var currentConvIdx = 0;
|
||||
|
||||
function selectConv(el, idx) {
|
||||
/* 保存当前对话内容 */
|
||||
convContents[currentConvIdx] = document.getElementById('chatBody').innerHTML;
|
||||
currentConvIdx = idx;
|
||||
|
||||
document.querySelectorAll('.conv-item').forEach(i => i.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
const badge = el.querySelector('.conv-badge');
|
||||
if (badge) badge.remove();
|
||||
const name = el.querySelector('.conv-info__name').textContent;
|
||||
document.getElementById('chatName').textContent = name;
|
||||
|
||||
/* 切换状态标签 */
|
||||
var tag = document.getElementById('chatTag');
|
||||
var status = convStatus[idx] || { text: '咨询中', ended: false };
|
||||
tag.textContent = status.text;
|
||||
if (status.ended) {
|
||||
tag.classList.add('chat-header__tag--ended');
|
||||
} else {
|
||||
tag.classList.remove('chat-header__tag--ended');
|
||||
}
|
||||
|
||||
/* 切换聊天内容 */
|
||||
var body = document.getElementById('chatBody');
|
||||
if (convContents[idx]) {
|
||||
body.innerHTML = convContents[idx];
|
||||
} else {
|
||||
body.innerHTML = '<div class="system-msg">暂无消息记录</div>';
|
||||
}
|
||||
body.scrollTop = body.scrollHeight;
|
||||
}
|
||||
|
||||
/* 常用语弹出 */
|
||||
|
||||
@@ -1,5 +1,32 @@
|
||||
# 变更记录 - 专家咨询·小助手角色（后台管理系统）
|
||||
|
||||
## 2026-04-13
|
||||
|
||||
### feat: 新增专家管理模块
|
||||
|
||||
**涉及文件：**
|
||||
|
||||
- `expert-manage.html` — 新增专家管理列表页（筛选、表格、操作按钮、导入导出）
|
||||
- `expert-detail-dialog.html` — 新增专家详情弹窗（新增/编辑/查看共用）
|
||||
- `expert-import-dialog.html` — 新增批量导入专家弹窗（下载模板+上传文件）
|
||||
- `export-task-dialog.html` — 新增导出任务列表弹窗
|
||||
- `import-task-dialog.html` — 新增导入任务列表弹窗
|
||||
- `current-consult.html` — 顶部导航栏增加"专家管理"链接
|
||||
- `chat-message.html` — 顶部导航栏增加"专家管理"链接
|
||||
- `history-consult.html` — 顶部导航栏增加"专家管理"链接
|
||||
- `checkup-standard.html` — 顶部导航栏增加"专家管理"链接
|
||||
- `sms-send.html` — 顶部导航栏增加"专家管理"链接
|
||||
- `consult-settle.html` — 顶部导航栏增加"专家管理"链接
|
||||
|
||||
**变更说明：**
|
||||
|
||||
- 新增"专家管理"一级菜单，位于"历史咨询"之后，用于管理平台咨询专家信息
|
||||
- 列表页支持按姓名、科室、咨询状态筛选，操作列包含查看详情、编辑、关闭/开启咨询、重置密码、删除
|
||||
- 顶部操作区支持新增专家、导出列表数据、查看导出任务、批量导入专家、查看导入任务
|
||||
- 专家详情弹窗包含基本信息、执业信息、咨询设置三个区块
|
||||
- 批量导入弹窗支持下载模板和拖拽上传
|
||||
- 同步更新全部6个同级页面的顶部导航栏
|
||||
|
||||
## 2026-04-10
|
||||
|
||||
### feat: 新增对话消息模块及通讯录功能
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
├── 当前咨询（IM对话）
|
||||
├── 对话消息（内部IM）
|
||||
├── 历史咨询（列表）
|
||||
├── 专家管理（列表）
|
||||
├── 体检标准化（分类+列表）
|
||||
├── 短信发送（列表）
|
||||
└── 咨询结算（列表）
|
||||
@@ -40,13 +41,18 @@ stateDiagram-v2
|
||||
| 5 | | 通讯录弹窗 | contacts-dialog.html |
|
||||
| 6 | 历史咨询 | 历史咨询列表页 | history-consult.html |
|
||||
| 7 | | 历史对话详情弹窗 | chat-detail-dialog.html |
|
||||
| 8 | 体检标准化 | 体检标准化页面 | checkup-standard.html |
|
||||
| 9 | | 体检项目明细弹窗 | item-detail-dialog.html |
|
||||
| 10 | 短信发送 | 短信发送记录列表 | sms-send.html |
|
||||
| 11 | | 新建短信弹窗 | send-dialog.html |
|
||||
| 12 | | 短信发送详情弹窗 | sms-detail-dialog.html |
|
||||
| 13 | 咨询结算 | 咨询结算列表页 | consult-settle.html |
|
||||
| 14 | | 报表详情弹窗 | report-detail-dialog.html |
|
||||
| 8 | 专家管理 | 专家管理列表页 | expert-manage.html |
|
||||
| 9 | | 专家详情弹窗 | expert-detail-dialog.html |
|
||||
| 10 | | 批量导入专家弹窗 | expert-import-dialog.html |
|
||||
| 11 | | 导出任务列表弹窗 | export-task-dialog.html |
|
||||
| 12 | | 导入任务列表弹窗 | import-task-dialog.html |
|
||||
| 13 | 体检标准化 | 体检标准化页面 | checkup-standard.html |
|
||||
| 14 | | 体检项目明细弹窗 | item-detail-dialog.html |
|
||||
| 15 | 短信发送 | 短信发送记录列表 | sms-send.html |
|
||||
| 16 | | 新建短信弹窗 | send-dialog.html |
|
||||
| 17 | | 短信发送详情弹窗 | sms-detail-dialog.html |
|
||||
| 18 | 咨询结算 | 咨询结算列表页 | consult-settle.html |
|
||||
| 19 | | 报表详情弹窗 | report-detail-dialog.html |
|
||||
|
||||
---
|
||||
|
||||
@@ -157,7 +163,85 @@ stateDiagram-v2
|
||||
- 中部为完整对话消息流
|
||||
- 转专家记录以黄色提示条展示
|
||||
|
||||
### 8. 体检标准化页面
|
||||
### 8. 专家管理列表页
|
||||
|
||||
**功能说明：** 展示平台所有咨询专家信息，支持新增、编辑、删除专家，以及开启/关闭咨询状态、重置密码等操作。支持批量导入导出。
|
||||
|
||||
**业务规则：**
|
||||
- 列表字段：专家姓名（含头像）、科室、职称、手机号、咨询状态、创建时间
|
||||
- 咨询状态：已开启（绿色）、已关闭（红色）
|
||||
- 关闭咨询后该专家不再出现在员工端可选专家列表中
|
||||
|
||||
**交互说明：**
|
||||
- 筛选条件：专家姓名、科室、咨询状态
|
||||
- 点击「新增专家」→ 打开专家详情弹窗（新增模式）
|
||||
- 点击行末「详情」→ 打开专家详情弹窗（查看模式）
|
||||
- 点击行末「编辑」→ 打开专家详情弹窗（编辑模式）
|
||||
- 点击行末「关闭咨询」→ 确认后关闭该专家的咨询服务
|
||||
- 点击行末「开启咨询」→ 确认后开启该专家的咨询服务（仅已关闭状态显示）
|
||||
- 点击行末「重置密码」→ 确认后重置专家登录密码
|
||||
- 点击行末「删除」→ 二次确认后删除专家
|
||||
- 点击「导出列表数据」→ 导出当前筛选结果
|
||||
- 点击「查看导出任务」→ 打开导出任务列表弹窗
|
||||
- 点击「批量导入专家」→ 打开批量导入弹窗
|
||||
- 点击「查看导入任务」→ 打开导入任务列表弹窗
|
||||
|
||||
### 9. 专家详情弹窗
|
||||
|
||||
**功能说明：** 新增/编辑/查看专家信息，包含基本信息、执业信息和咨询设置三个区块。
|
||||
|
||||
**交互说明：**
|
||||
- 以弹窗形式打开
|
||||
- 新增模式：所有字段可编辑，底部显示「取消」和「保存」按钮
|
||||
- 编辑模式：回填已有数据，可修改
|
||||
- 查看模式：所有字段只读
|
||||
|
||||
| 字段名 | 类型 | 必填 | 规则 |
|
||||
|--------|------|------|------|
|
||||
| 头像 | 图片上传 | 是 | 支持jpg/png |
|
||||
| 姓名 | 文本 | 是 | — |
|
||||
| 性别 | 下拉 | 是 | 男/女 |
|
||||
| 手机号 | 文本 | 是 | 11位手机号 |
|
||||
| 身份证号 | 文本 | 否 | 18位 |
|
||||
| 科室 | 下拉 | 是 | 预设科室列表 |
|
||||
| 职称 | 下拉 | 是 | 主任医师/副主任医师/主治医师/住院医师 |
|
||||
| 执业证号 | 文本 | 否 | — |
|
||||
| 执业年限 | 数字 | 否 | — |
|
||||
| 擅长领域 | 文本 | 否 | 逗号分隔 |
|
||||
| 图文单价 | 数字 | 否 | 默认30 |
|
||||
| 视频单价 | 数字 | 否 | 默认80 |
|
||||
| 个人简介 | 文本域 | 否 | — |
|
||||
|
||||
### 10. 批量导入专家弹窗
|
||||
|
||||
**功能说明：** 通过Excel模板批量导入专家信息，分两步操作：下载模板、上传文件。
|
||||
|
||||
**交互说明：**
|
||||
- 点击「下载导入模板」→ 下载xlsx模板文件
|
||||
- 拖拽或点击上传区域 → 选择填好的xlsx文件
|
||||
- 点击「开始导入」→ 提交导入任务
|
||||
- 支持xlsx、xls格式，单次最多500条
|
||||
|
||||
### 11. 导出任务列表弹窗
|
||||
|
||||
**功能说明：** 展示历史导出任务记录，支持下载已完成的导出文件或重试失败任务。
|
||||
|
||||
**交互说明：**
|
||||
- 列表字段：任务名称、创建时间、状态、操作
|
||||
- 状态：已完成（绿色）、已失败（红色）
|
||||
- 已完成 → 点击「下载」获取文件
|
||||
- 已失败 → 点击「重试」重新执行
|
||||
|
||||
### 12. 导入任务列表弹窗
|
||||
|
||||
**功能说明：** 展示历史导入任务记录，包含导入结果统计（成功/失败条数）。
|
||||
|
||||
**交互说明：**
|
||||
- 列表字段：文件名、导入时间、状态、结果、操作
|
||||
- 有失败记录时 → 点击「下载失败记录」获取失败明细
|
||||
- 已失败 → 点击「重新导入」
|
||||
|
||||
### 13. 体检标准化页面
|
||||
|
||||
**功能说明：** 左侧体检分类树 + 右侧项目列表，供小助手查阅体检项目明细以回答员工相关问题。
|
||||
|
||||
@@ -169,7 +253,7 @@ stateDiagram-v2
|
||||
- 点击左侧分类 → 右侧切换为该分类下的项目列表
|
||||
- 点击行末「查看明细」→ 打开体检项目明细弹窗
|
||||
|
||||
### 9. 体检项目明细弹窗
|
||||
### 14. 体检项目明细弹窗
|
||||
|
||||
**功能说明：** 展示单个体检项目的详细信息，包括参考范围、临床意义、关联套餐和注意事项。
|
||||
|
||||
@@ -177,7 +261,7 @@ stateDiagram-v2
|
||||
- 以新窗口弹窗形式打开
|
||||
- 参考范围以可视化条形图辅助展示
|
||||
|
||||
### 10. 短信发送记录列表
|
||||
### 15. 短信发送记录列表
|
||||
|
||||
**功能说明：** 展示短信发送历史记录和统计概览，支持新建短信。
|
||||
|
||||
@@ -190,7 +274,7 @@ stateDiagram-v2
|
||||
- 点击行末「查看详情」→ 打开短信发送详情弹窗
|
||||
- 支持按状态和时间范围筛选
|
||||
|
||||
### 11. 新建短信弹窗
|
||||
### 16. 新建短信弹窗
|
||||
|
||||
**功能说明：** 创建并发送通知短信，支持选择发送对象和定时发送。
|
||||
|
||||
@@ -208,7 +292,7 @@ stateDiagram-v2
|
||||
| 短信内容 | 文本域 | 是 | 不超过70字 |
|
||||
| 定时发送 | 开关+时间 | 否 | 开启后必填时间 |
|
||||
|
||||
### 12. 短信发送详情弹窗
|
||||
### 17. 短信发送详情弹窗
|
||||
|
||||
**功能说明：** 展示某批次短信的发送结果，包括基本信息、短信内容预览、发送统计和失败记录。
|
||||
|
||||
@@ -216,7 +300,7 @@ stateDiagram-v2
|
||||
- 以新窗口弹窗形式打开
|
||||
- 失败记录列出失败人员和原因
|
||||
|
||||
### 13. 咨询结算列表页
|
||||
### 18. 咨询结算列表页
|
||||
|
||||
**功能说明：** 按月展示各专家的咨询结算数据，支持生成和下载结算报表。
|
||||
|
||||
@@ -230,7 +314,7 @@ stateDiagram-v2
|
||||
- 点击「下载报表」→ 下载报表文件
|
||||
- 点击行末「查看明细」→ 打开报表详情弹窗
|
||||
|
||||
### 14. 报表详情弹窗
|
||||
### 19. 报表详情弹窗
|
||||
|
||||
**功能说明：** 展示单个专家的结算明细，包括专家信息、结算金额、咨询明细和月度趋势。
|
||||
|
||||
|
||||
@@ -6,146 +6,148 @@
|
||||
<title>咨询人档案 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.dialog{max-width:640px;margin:0 auto;background:#fff;min-height:100vh;}
|
||||
.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:10;}
|
||||
.dialog-title{font-size:var(--font-lg);font-weight:600;}
|
||||
.dialog-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
|
||||
.dialog-close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog-body{padding:24px;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;padding:24px;overflow-y:auto;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--text-secondary:#666;--border:#E8E8E8;--font-xs:12px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
|
||||
/* 头部信息卡 */
|
||||
.profile-header{display:flex;gap:16px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:20px;}
|
||||
.profile-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;flex-shrink:0;}
|
||||
.profile-name{font-size:var(--font-lg);font-weight:600;}
|
||||
.profile-meta{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);margin-left:8px;}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.section{margin-bottom:28px;}
|
||||
.section__title{font-size:var(--font-base);font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--primary);margin-bottom:0;}
|
||||
.info-table{width:100%;border-collapse:collapse;border:1px solid var(--border);}
|
||||
.info-table td{padding:12px 16px;font-size:var(--font-sm);border:1px solid var(--border);}
|
||||
.info-table .label{color:var(--primary);width:90px;white-space:nowrap;background:#FAFBFC;}
|
||||
.info-table .value{color:#333;min-width:120px;}
|
||||
|
||||
/* 信息区块 */
|
||||
.section{margin-bottom:24px;}
|
||||
.section__title{font-size:var(--font-base);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
|
||||
.section__title::before{content:'';width:3px;height:16px;background:var(--primary);border-radius:2px;}
|
||||
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 咨询人信息 */
|
||||
.consult-header{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;}
|
||||
.consult-header__title{font-size:var(--font-base);font-weight:700;}
|
||||
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;}
|
||||
.tab{padding:8px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;user-select:none;}
|
||||
.tab:hover{color:var(--primary);}
|
||||
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
|
||||
/* 健康指标 */
|
||||
.health-indicators{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
|
||||
.indicator{background:#FAFAFA;border-radius:var(--radius-md);padding:12px;text-align:center;}
|
||||
.indicator__value{font-size:var(--font-lg);font-weight:700;}
|
||||
.indicator__label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.indicator--normal .indicator__value{color:var(--success);}
|
||||
.indicator--warning .indicator__value{color:var(--warning);}
|
||||
.indicator--danger .indicator__value{color:var(--danger);}
|
||||
|
||||
/* 咨询历史 */
|
||||
.history-list{display:flex;flex-direction:column;gap:10px;}
|
||||
.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#FAFAFA;border-radius:var(--radius-sm);font-size:var(--font-sm);}
|
||||
.history-item__left{display:flex;flex-direction:column;gap:2px;}
|
||||
.history-item__title{color:var(--text-primary);}
|
||||
.history-item__time{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.history-item__type{font-size:var(--font-xs);padding:2px 6px;border-radius:8px;}
|
||||
.type-expert{background:var(--primary-light);color:var(--primary);}
|
||||
.type-assistant{background:#F6FFED;color:var(--success);}
|
||||
.sub-title{font-size:var(--font-sm);font-weight:600;color:#333;margin:20px 0 10px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
.sub-title:first-child{margin-top:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog">
|
||||
<div class="dialog-header">
|
||||
<div class="dialog-title">咨询人档案</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section__title">基本信息</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">姓名</td><td class="value">张伟</td>
|
||||
<td class="label">员工编号</td><td class="value">CQ001234</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">性别</td><td class="value">男</td>
|
||||
<td class="label">年龄</td><td class="value">38岁</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">单位</td><td class="value">采油一厂</td>
|
||||
<td class="label">部门</td><td class="value">心血管科</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 咨询人信息 -->
|
||||
<div class="section">
|
||||
<div class="consult-header">
|
||||
<span class="consult-header__title">咨询人信息</span>
|
||||
</div>
|
||||
<div class="tabs" style="display:none;">
|
||||
<div class="tab active" onclick="switchTab(0)">本人</div>
|
||||
<div class="tab" onclick="switchTab(1)">配偶</div>
|
||||
<div class="tab" onclick="switchTab(2)">子女</div>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<!-- 头部信息 -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">李</div>
|
||||
<div>
|
||||
<div class="profile-name">李明 <span class="tag tag-green">在职</span></div>
|
||||
<div class="profile-meta">工号：CQ002571 · 采油二厂 · 生产运行科 · 班长</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section__title">基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="info-item__label">性别</span><span class="info-item__value">男</span></div>
|
||||
<div class="info-item"><span class="info-item__label">年龄</span><span class="info-item__value">38岁</span></div>
|
||||
<div class="info-item"><span class="info-item__label">联系电话</span><span class="info-item__value">138****5678</span></div>
|
||||
<div class="info-item"><span class="info-item__label">入职日期</span><span class="info-item__value">2012-07-01</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">采油二厂</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属部门</span><span class="info-item__value">生产运行科</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab: 本人 -->
|
||||
<div class="tab-panel active" id="tabPanel0">
|
||||
<div class="sub-title">基本信息</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">咨询人姓名</td><td class="value">张伟父亲</td>
|
||||
<td class="label">性别</td><td class="value">男</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">出生日期</td><td class="value">1960-02-18</td>
|
||||
<td class="label">与本人关系</td><td class="value">父亲</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 健康概况 -->
|
||||
<div class="section">
|
||||
<div class="section__title">健康概况</div>
|
||||
<div class="health-indicators">
|
||||
<div class="indicator indicator--warning">
|
||||
<div class="indicator__value">6.8</div>
|
||||
<div class="indicator__label">空腹血糖(mmol/L)</div>
|
||||
</div>
|
||||
<div class="indicator indicator--normal">
|
||||
<div class="indicator__value">125/82</div>
|
||||
<div class="indicator__label">血压(mmHg)</div>
|
||||
</div>
|
||||
<div class="indicator indicator--normal">
|
||||
<div class="indicator__value">24.5</div>
|
||||
<div class="indicator__label">BMI</div>
|
||||
</div>
|
||||
<div class="indicator indicator--normal">
|
||||
<div class="indicator__value">4.8</div>
|
||||
<div class="indicator__label">总胆固醇(mmol/L)</div>
|
||||
</div>
|
||||
<div class="indicator indicator--warning">
|
||||
<div class="indicator__value">1.9</div>
|
||||
<div class="indicator__label">甘油三酯(mmol/L)</div>
|
||||
</div>
|
||||
<div class="indicator indicator--normal">
|
||||
<div class="indicator__value">68</div>
|
||||
<div class="indicator__label">心率(次/分)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title">生活习惯</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">是否抽烟</td><td class="value">否</td>
|
||||
<td class="label">是否饮酒</td><td class="value">偶尔</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">饮食喜好</td><td class="value">清淡</td>
|
||||
<td class="label">睡眠质量</td><td class="value">一般</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 最近咨询记录 -->
|
||||
<div class="section">
|
||||
<div class="section__title">最近咨询记录</div>
|
||||
<div class="history-list">
|
||||
<div class="history-item">
|
||||
<div class="history-item__left">
|
||||
<span class="history-item__title">空腹血糖偏高咨询</span>
|
||||
<span class="history-item__time">2026-04-10 10:20</span>
|
||||
</div>
|
||||
<span class="history-item__type type-assistant">小助手</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<div class="history-item__left">
|
||||
<span class="history-item__title">体检报告解读</span>
|
||||
<span class="history-item__time">2026-03-15 14:30</span>
|
||||
</div>
|
||||
<span class="history-item__type type-expert">专家</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<div class="history-item__left">
|
||||
<span class="history-item__title">颈椎不适咨询</span>
|
||||
<span class="history-item__time">2026-02-20 09:10</span>
|
||||
</div>
|
||||
<span class="history-item__type type-assistant">小助手</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<div class="history-item__left">
|
||||
<span class="history-item__title">高血脂饮食建议</span>
|
||||
<span class="history-item__time">2025-12-08 16:45</span>
|
||||
</div>
|
||||
<span class="history-item__type type-expert">专家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title">身体情况</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">身高</td><td class="value">175cm</td>
|
||||
<td class="label">体重</td><td class="value">72kg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">过敏史</td><td class="value">无</td>
|
||||
<td class="label">遗传史</td><td class="value">高血压家族史</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">既往史</td><td class="value">无</td>
|
||||
<td class="label">其他疾病</td><td class="value">无</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 配偶 -->
|
||||
<div class="tab-panel" id="tabPanel1">
|
||||
<div class="sub-title">基本信息</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">咨询人姓名</td><td class="value">李芳</td>
|
||||
<td class="label">性别</td><td class="value">女</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">出生日期</td><td class="value">1990-03-22</td>
|
||||
<td class="label">与本人关系</td><td class="value">配偶</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 子女 -->
|
||||
<div class="tab-panel" id="tabPanel2">
|
||||
<div class="sub-title">基本信息</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">咨询人姓名</td><td class="value">张小明</td>
|
||||
<td class="label">性别</td><td class="value">男</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">出生日期</td><td class="value">2015-09-10</td>
|
||||
<td class="label">与本人关系</td><td class="value">子女</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(idx) {
|
||||
document.querySelectorAll('.tab').forEach(function(t, i) {
|
||||
t.classList.toggle('active', i === idx);
|
||||
});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p, i) {
|
||||
p.classList.toggle('active', i === idx);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询·小助手 - 新增专家 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--danger:#FF4D4F;--warning:#FAAD14;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.main{margin-top:56px;padding:24px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-secondary);}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:28px 32px;max-width:960px;}
|
||||
.page-title{font-size:var(--font-lg);font-weight:700;margin-bottom:24px;}
|
||||
.form-group{margin-bottom:18px;display:flex;align-items:center;gap:12px;}
|
||||
.form-group label{width:90px;font-size:var(--font-sm);color:var(--text-secondary);text-align:right;flex-shrink:0;white-space:nowrap;}
|
||||
.form-group label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{flex:1;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;max-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{flex:1;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;max-width:320px;}
|
||||
.form-textarea{flex:1;min-height:90px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;max-width:320px;}
|
||||
.form-textarea:focus,.form-select:focus{border-color:var(--primary);}
|
||||
.form-row{display:flex;gap:0;}
|
||||
.form-row .form-group{flex:1;min-width:0;}
|
||||
.section-title{font-size:var(--font-base);font-weight:600;color:#333;margin:28px 0 16px;padding-left:10px;border-left:3px solid var(--primary);}
|
||||
.section-title:first-of-type{margin-top:0;}
|
||||
.avatar-upload{width:80px;height:80px;border-radius:var(--radius-sm);background:#F5F7FA;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);font-size:var(--font-xs);flex-direction:column;gap:4px;transition:all .15s;}
|
||||
.avatar-upload:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.radio-group{display:flex;align-items:center;gap:20px;flex:1;font-size:var(--font-sm);}
|
||||
.radio-group label{width:auto;color:var(--text-primary);display:flex;align-items:center;gap:5px;cursor:pointer;}
|
||||
.radio-group input[type="radio"]{margin:0;accent-color:var(--primary);}
|
||||
.form-hint{font-size:var(--font-xs);color:var(--danger);white-space:nowrap;}
|
||||
.form-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:#333;border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#52C41A"/><path d="M9 14.5l3 3 7-7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询–小助手</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html" class="active">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">助</div><span style="color:rgba(255,255,255,0.65);">健康小助手 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="expert-manage.html">专家管理</a><span>/</span><span>新增专家</span>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div class="page-title">新增专家</div>
|
||||
|
||||
<div class="section-title">基本信息</div>
|
||||
<div class="form-group">
|
||||
<label>头像</label>
|
||||
<div class="avatar-upload"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>上传</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label><span class="required">*</span>账号</label><input class="form-input" placeholder="请输入"></div>
|
||||
<div class="form-group"><label><span class="required">*</span>密码</label><input class="form-input" type="password" placeholder="请输入"> <span class="form-hint">密码不能少于12位，必须包含大小写字母、数字、特殊符号。</span></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label><span class="required">*</span>姓名</label><input class="form-input" placeholder="请输入"></div>
|
||||
<div class="form-group"><label><span class="required">*</span>性别</label><div class="radio-group"><label><input type="radio" name="gender"> 男</label><label><input type="radio" name="gender"> 女</label></div></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>身份证号</label><input class="form-input" placeholder="请输入"></div>
|
||||
<div class="form-group"><label>手机号</label><input class="form-input" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label><span class="required">*</span>医院</label><select class="form-select"><option>请选择</option><option>西安市第九医院</option><option>西安交大一附院</option><option>西京医院</option><option>唐都医院</option><option>西安市中心医院</option></select></div>
|
||||
<div class="form-group"><label><span class="required">*</span>科室</label><select class="form-select"><option>请选择</option><option>心脏内科</option><option>内分泌科</option><option>神经内科</option><option>骨科</option><option>消化内科</option><option>呼吸内科</option></select></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label><span class="required">*</span>职称</label><select class="form-select"><option>请选择</option><option>主任医师</option><option>副主任医师</option><option>主治医师</option><option>住院医师</option></select></div>
|
||||
<div class="form-group"><label>职务</label><select class="form-select"><option>请选择</option><option>科室主任</option><option>副主任</option><option>无</option></select></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label><span class="required">*</span>专家类型</label><div class="radio-group"><label><input type="radio" name="expertType"> 收费专家</label><label><input type="radio" name="expertType"> 免费专家</label><label><input type="radio" name="expertType"> 其他专家</label></div></div>
|
||||
<div class="form-group"><label><span class="required">*</span>专家状态</label><div class="radio-group"><label><input type="radio" name="expertStatus"> 有效</label><label><input type="radio" name="expertStatus"> 无效</label></div></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>专家编号</label><input class="form-input" placeholder="请输入"></div>
|
||||
<div class="form-group"><label>擅长疾病</label><input class="form-input" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>注册日期</label><input class="form-input" type="date"></div>
|
||||
<div class="form-group"><label>出库如期</label><input class="form-input" type="date"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>是否推荐</label><div class="radio-group"><label><input type="radio" name="recommend"> 是</label><label><input type="radio" name="recommend" checked> 否</label></div></div>
|
||||
<div class="form-group"><label>排序</label><input class="form-input" type="number" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>邮箱</label><input class="form-input" placeholder="请输入"></div>
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">扩展信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>学历</label><select class="form-select"><option>请选择</option><option>博士</option><option>硕士</option><option>本科</option><option>大专</option><option>其他</option></select></div>
|
||||
<div class="form-group"><label>毕业院校</label><input class="form-input" placeholder="请输入"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>毕业时间</label><input class="form-input" type="date"></div>
|
||||
<div class="form-group"><label>参加工作时间</label><input class="form-input" type="date"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>民族</label><select class="form-select"><option>请选择</option><option>汉族</option><option>回族</option><option>藏族</option><option>其他</option></select></div>
|
||||
<div class="form-group"><label>籍贯</label><select class="form-select"><option>请选择</option><option>陕西</option><option>北京</option><option>上海</option><option>其他</option></select></div>
|
||||
</div>
|
||||
<div class="form-row" style="align-items:flex-start;">
|
||||
<div class="form-group" style="align-items:flex-start;"><label style="margin-top:8px;">个人简介</label><textarea class="form-textarea" placeholder="请输入"></textarea></div>
|
||||
<div class="form-group" style="align-items:flex-start;"><label style="margin-top:8px;">职业经历</label><textarea class="form-textarea" placeholder="请输入"></textarea></div>
|
||||
</div>
|
||||
<div class="form-row" style="align-items:flex-start;">
|
||||
<div class="form-group" style="align-items:flex-start;"><label style="margin-top:8px;">获奖/论文</label><textarea class="form-textarea" placeholder="请输入"></textarea></div>
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<a class="btn btn-default" href="expert-manage.html">取消</a>
|
||||
<button class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>批量导入专家 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;padding:24px;overflow-y:auto;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--danger:#FF4D4F;--text-secondary:#666;--border:#E8E8E8;--font-xs:12px;--font-sm:13px;--font-base:15px;--radius-sm:4px;--radius-md:8px;}
|
||||
.dialog-title{font-size:var(--font-base);font-weight:700;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.step{margin-bottom:24px;}
|
||||
.step__label{font-size:var(--font-sm);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
|
||||
.step__num{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:var(--font-xs);display:inline-flex;align-items:center;justify-content:center;font-weight:700;}
|
||||
.step__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:12px;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.upload-area{border:2px dashed var(--border);border-radius:var(--radius-md);padding:32px;text-align:center;cursor:pointer;transition:all .15s;}
|
||||
.upload-area:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.upload-area__icon{font-size:32px;color:var(--primary);margin-bottom:8px;}
|
||||
.upload-area__text{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.upload-area__hint{font-size:var(--font-xs);color:#999;margin-top:6px;}
|
||||
.dialog-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:#333;border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog-title">批量导入专家</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step__label"><span class="step__num">1</span>下载导入模板</div>
|
||||
<div class="step__desc">请先下载标准模板，按模板格式填写专家信息后上传</div>
|
||||
<a class="link">下载导入模板（.xlsx）</a>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step__label"><span class="step__num">2</span>上传文件</div>
|
||||
<div class="step__desc">支持 .xlsx、.xls 格式，单次最多导入 500 条</div>
|
||||
<div class="upload-area">
|
||||
<div class="upload-area__icon"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 6v20M12 14l8-8 8 8" stroke="#1890FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 28v6h28v-6" stroke="#1890FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="upload-area__text">点击或拖拽文件到此区域上传</div>
|
||||
<div class="upload-area__hint">仅支持 .xlsx、.xls 格式文件</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button class="btn btn-default" onclick="parent.postMessage('close-dialog','*')">取消</button>
|
||||
<button class="btn btn-primary">开始导入</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询·小助手 - 专家管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.main{margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#73d13d;}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#FFF1F0;}
|
||||
.btn-warning{background:#fff;color:var(--warning);border:1px solid var(--warning);}.btn-warning:hover{background:#FFFBE6;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.expert-info{display:flex;align-items:center;gap:10px;}
|
||||
.expert-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:600;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.expert-name{font-weight:500;}
|
||||
.expert-dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{color:#ff7875;}
|
||||
.link-warning{color:var(--warning);cursor:pointer;font-size:var(--font-sm);}.link-warning:hover{color:#ffc53d;}
|
||||
.op-divider{color:var(--border);margin:0 4px;}
|
||||
.toggle{position:relative;width:40px;height:22px;background:#ccc;border-radius:11px;cursor:pointer;transition:background .2s;display:inline-block;vertical-align:middle;}
|
||||
.toggle.on{background:var(--primary);}
|
||||
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s;}
|
||||
.toggle.on::after{left:20px;}
|
||||
.sort-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);background:#fff;text-align:center;}
|
||||
.dropdown{position:relative;display:inline-block;}
|
||||
.dropdown__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);user-select:none;}.dropdown__trigger:hover{color:#40a9ff;}
|
||||
.dropdown__menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,0.15);min-width:110px;z-index:50;padding:4px 0;}
|
||||
.dropdown.open .dropdown__menu{display:block;}
|
||||
.dropdown__item{display:block;padding:8px 16px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background .15s;}
|
||||
.dropdown__item:hover{background:#F5F7FA;color:var(--primary);}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.action-bar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
|
||||
.overlay-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
|
||||
.overlay-modal.open{display:flex;}
|
||||
.overlay-modal__box{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.15);position:relative;max-height:90vh;display:flex;flex-direction:column;}
|
||||
.overlay-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;z-index:10;transition:all .15s;}
|
||||
.overlay-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.overlay-modal iframe{border:none;display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#52C41A"/><path d="M9 14.5l3 3 7-7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询–小助手</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html" class="active">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">助</div><span style="color:rgba(255,255,255,0.65);">健康小助手 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>用户账号</label><input class="filter-input" type="text" placeholder="请输入用户账号" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>专家编号</label><input class="filter-input" type="text" placeholder="请输入专家编号" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>专家姓名</label><input class="filter-input" type="text" placeholder="请输入专家姓名" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>医院</label>
|
||||
<select class="filter-select"><option>全部医院</option></select></div>
|
||||
<div class="filter-item"><label>科室</label>
|
||||
<select class="filter-select"><option>全部科室</option><option>心血管内科</option><option>内分泌科</option><option>神经内科</option><option>骨科</option><option>消化内科</option><option>呼吸内科</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>专家状态</label>
|
||||
<select class="filter-select"><option>全部状态</option><option>有效</option><option>无效</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>咨询状态</label>
|
||||
<select class="filter-select"><option>全部状态</option><option>开启咨询</option><option>关闭咨询</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-primary" href="expert-detail-dialog.html" style="text-decoration:none;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>新增专家</a>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default" onclick="openOverlay('export-task-dialog.html',720,520)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.3" fill="none"/><path d="M5 7h4M7 5v4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-success" onclick="openOverlay('expert-import-dialog.html',600,480)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>批量导入专家</button>
|
||||
<button class="btn btn-default" onclick="openOverlay('import-task-dialog.html',720,520)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.3" fill="none"/><path d="M5 7h4M7 5v4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>查看导入任务</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">专家列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 86 位专家</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>序号</th><th>用户账号</th><th>专家编号</th><th>姓名</th><th>医院</th><th>科室</th><th>职称</th><th>专家状态</th><th>咨询状态</th><th>收费类型</th><th>排序</th><th>是否推荐</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>guojianqiang</td><td>CQZJ20250018</td>
|
||||
<td><div class="expert-info"><div class="expert-avatar">郭</div><div class="expert-name">郭建强</div></div></td>
|
||||
<td>西安市第九医院</td><td>心脏内科</td><td>副主任医师</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><span class="tag tag-green">开启咨询</span></td>
|
||||
<td>免费专家</td><td><span class="sort-num">1</span></td>
|
||||
<td><span class="toggle on"></span></td>
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>wangxiuying</td><td>CQZJ20250025</td>
|
||||
<td><div class="expert-info"><div class="expert-avatar">王</div><div class="expert-name">王秀英</div></div></td>
|
||||
<td>西安交大一附院</td><td>内分泌科</td><td>主任医师</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><span class="tag tag-green">开启咨询</span></td>
|
||||
<td>收费专家</td><td><span class="sort-num">2</span></td>
|
||||
<td><span class="toggle on"></span></td>
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>zhangweiqiang</td><td>CQZJ20260003</td>
|
||||
<td><div class="expert-info"><div class="expert-avatar">张</div><div class="expert-name">张伟强</div></div></td>
|
||||
<td>西安市中心医院</td><td>神经内科</td><td>主治医师</td>
|
||||
<td><span class="tag tag-red">无效</span></td>
|
||||
<td><span class="tag tag-red">关闭咨询</span></td>
|
||||
<td>收费专家</td><td><span class="sort-num">3</span></td>
|
||||
<td><span class="toggle"></span></td>
|
||||
<td>
|
||||
<span class="link" style="color:var(--success)">开启咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>chenjianguo</td><td>CQZJ20260008</td>
|
||||
<td><div class="expert-info"><div class="expert-avatar">陈</div><div class="expert-name">陈建国</div></div></td>
|
||||
<td>唐都医院</td><td>骨科</td><td>主任医师</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><span class="tag tag-green">开启咨询</span></td>
|
||||
<td>免费专家</td><td><span class="sort-num">4</span></td>
|
||||
<td><span class="toggle on"></span></td>
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>sunliping</td><td>CQZJ20260012</td>
|
||||
<td><div class="expert-info"><div class="expert-avatar">孙</div><div class="expert-name">孙丽萍</div></div></td>
|
||||
<td>西京医院</td><td>消化内科</td><td>副主任医师</td>
|
||||
<td><span class="tag tag-green">有效</span></td>
|
||||
<td><span class="tag tag-green">开启咨询</span></td>
|
||||
<td>收费专家</td><td><span class="sort-num">5</span></td>
|
||||
<td><span class="toggle on"></span></td>
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 86 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="overlay-modal" id="overlayModal" onclick="if(event.target===this)closeOverlay()">
|
||||
<div class="overlay-modal__box" id="overlayBox">
|
||||
<button class="overlay-modal__close" onclick="closeOverlay()">✕</button>
|
||||
<iframe id="overlayFrame" src=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openOverlay(url, w, h) {
|
||||
var box = document.getElementById('overlayBox');
|
||||
box.style.width = w + 'px';
|
||||
var frame = document.getElementById('overlayFrame');
|
||||
frame.style.width = w + 'px';
|
||||
frame.style.height = h + 'px';
|
||||
frame.src = url;
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlayModal').classList.remove('open');
|
||||
document.getElementById('overlayFrame').src = '';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
window.addEventListener('message', function(e) {
|
||||
if (e.data === 'close-dialog') closeOverlay();
|
||||
});
|
||||
function toggleDropdown(el) {
|
||||
var dd = el.parentElement;
|
||||
var wasOpen = dd.classList.contains('open');
|
||||
document.querySelectorAll('.dropdown.open').forEach(function(d){ d.classList.remove('open'); });
|
||||
if (!wasOpen) dd.classList.add('open');
|
||||
}
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.dropdown')) {
|
||||
document.querySelectorAll('.dropdown.open').forEach(function(d){ d.classList.remove('open'); });
|
||||
}
|
||||
});
|
||||
</script></main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>导出任务 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;padding:24px;overflow-y:auto;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-secondary:#666;--border:#E8E8E8;--font-xs:12px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.dialog-title{font-size:var(--font-base);font-weight:700;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 14px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:12px 14px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.empty{text-align:center;padding:40px;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog-title">导出任务列表</div>
|
||||
<table>
|
||||
<thead><tr><th>任务名称</th><th>创建时间</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>专家列表导出_20260413</td>
|
||||
<td>2026-04-13 14:30:22</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专家列表导出_20260410</td>
|
||||
<td>2026-04-10 09:15:08</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专家列表导出_20260405</td>
|
||||
<td>2026-04-05 16:42:11</td>
|
||||
<td><span class="tag tag-red">已失败</span></td>
|
||||
<td><span class="link">重试</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专家列表导出_20260401</td>
|
||||
<td>2026-04-01 10:20:33</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">下载</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -84,6 +84,7 @@
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html" class="active">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>导入任务 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;padding:24px;overflow-y:auto;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-secondary:#666;--border:#E8E8E8;--font-xs:12px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.dialog-title{font-size:var(--font-base);font-weight:700;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 14px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:12px 14px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.result{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.result-success{color:var(--success);}
|
||||
.result-fail{color:var(--danger);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog-title">导入任务列表</div>
|
||||
<table>
|
||||
<thead><tr><th>文件名</th><th>导入时间</th><th>状态</th><th>结果</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>专家信息_批量导入.xlsx</td>
|
||||
<td>2026-04-12 11:20:15</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="result">成功 <span class="result-success">48</span> 条，失败 <span class="result-fail">2</span> 条</span></td>
|
||||
<td><span class="link">下载失败记录</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>新增专家名单.xlsx</td>
|
||||
<td>2026-04-08 09:45:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="result">成功 <span class="result-success">25</span> 条，失败 <span class="result-fail">0</span> 条</span></td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专家补录_0401.xlsx</td>
|
||||
<td>2026-04-01 14:10:22</td>
|
||||
<td><span class="tag tag-red">已失败</span></td>
|
||||
<td><span class="result">文件格式错误</span></td>
|
||||
<td><span class="link">重新导入</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -70,6 +70,7 @@
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html" class="active">短信发送</a>
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
@@ -17,6 +17,7 @@
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
|
||||
@@ -25,61 +26,71 @@
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between;}
|
||||
.page-header__left{}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 须知编辑区 */
|
||||
/* TAB 切换 */
|
||||
.notice-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);}
|
||||
.notice-tab{padding:14px 32px;font-size:var(--font-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;font-weight:500;}
|
||||
.notice-tab:hover{color:var(--primary);}
|
||||
.notice-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
/* 双栏布局 */
|
||||
.notice-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.notice-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.notice-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.notice-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.notice-card__actions{display:flex;gap:8px;}
|
||||
.notice-card__body{padding:24px;}
|
||||
.preview-box{background:#F8FBFF;border:1px solid #D6E8FF;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:24px;}
|
||||
.preview-box__label{font-size:var(--font-xs);color:var(--primary);margin-bottom:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
|
||||
.preview-box__label svg{width:14px;height:14px;}
|
||||
.preview-title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;}
|
||||
.preview-content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;}
|
||||
.preview-content p{margin-bottom:8px;}
|
||||
.preview-content strong{color:var(--text-primary);}
|
||||
.editor-section{}
|
||||
.notice-layout{display:flex;gap:24px;padding:24px;}
|
||||
.notice-editor{flex:1;min-width:0;}
|
||||
.notice-preview{width:340px;flex-shrink:0;}
|
||||
/* 编辑器 */
|
||||
.editor-section__label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.editor-title-input{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;font-size:var(--font-base);outline:none;margin-bottom:16px;font-weight:600;}
|
||||
.editor-title-input:focus{border-color:var(--primary);}
|
||||
.editor-title-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.editor-toolbar{display:flex;gap:4px;padding:8px 12px;border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:#FAFAFA;flex-wrap:wrap;}
|
||||
.toolbar-btn{padding:4px 8px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;}
|
||||
.toolbar-btn:hover{background:#E8E8E8;color:var(--text-primary);}
|
||||
.toolbar-divider{width:1px;background:var(--border);margin:2px 4px;}
|
||||
.editor-body{width:100%;min-height:240px;border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:14px;font-size:var(--font-sm);outline:none;line-height:1.8;color:var(--text-primary);}
|
||||
.editor-body{width:100%;min-height:280px;border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:14px;font-size:var(--font-sm);outline:none;line-height:1.8;color:var(--text-primary);}
|
||||
.editor-body:focus{border-color:var(--primary);}
|
||||
.editor-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
|
||||
.editor-footer__hint{font-size:var(--font-xs);color:#999;}
|
||||
/* 历史版本 */
|
||||
.version-list{margin-top:24px;}
|
||||
.version-list__title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;color:var(--text-secondary);}
|
||||
.version-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
|
||||
/* 预览区 */
|
||||
.preview-panel{background:#F8FBFF;border:1px solid #D6E8FF;border-radius:var(--radius-md);padding:16px;}
|
||||
.preview-panel__label{font-size:var(--font-xs);color:var(--primary);margin-bottom:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
|
||||
.preview-panel__label svg{width:14px;height:14px;}
|
||||
.preview-phone{border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
|
||||
.preview-phone__title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;}
|
||||
.preview-phone__content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;min-height:160px;white-space:pre-wrap;}
|
||||
.preview-phone__content p{margin-bottom:8px;}
|
||||
.preview-phone__content strong{color:var(--text-primary);}
|
||||
.preview-phone__btns{margin-top:16px;display:flex;gap:8px;}
|
||||
.preview-phone__btn{flex:1;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;}
|
||||
.preview-phone__btn--cancel{border:1px solid var(--border);color:#666;}
|
||||
.preview-phone__btn--ok{background:var(--primary);color:#fff;}
|
||||
/* 历史版本弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.modal-overlay.open{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:560px;max-height:80vh;display:flex;flex-direction:column;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.modal__close:hover{background:#F5F5F5;}
|
||||
.modal__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.version-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
|
||||
.version-item:last-child{border-bottom:none;}
|
||||
.version-tag{font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:10px;}
|
||||
.version-tag.current{background:#F6FFED;color:var(--success);}
|
||||
.version-info{flex:1;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.version-time{font-size:var(--font-xs);color:#999;}
|
||||
.version-tag{font-size:var(--font-xs);padding:2px 8px;border-radius:10px;}
|
||||
.version-tag--current{background:#F6FFED;color:var(--success);}
|
||||
.version-tag--history{background:var(--primary-light);color:var(--primary);}
|
||||
.version-info{flex:1;}
|
||||
.version-info__title{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:2px;}
|
||||
.version-info__meta{font-size:var(--font-xs);color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
/* 编辑弹窗 */
|
||||
.edit-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.edit-modal-overlay.open{display:flex;}
|
||||
.edit-modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;}
|
||||
.edit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.edit-modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.edit-modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.edit-modal__close:hover{background:#F5F5F5;}
|
||||
.edit-modal__body{flex:1;padding:24px;overflow-y:auto;}
|
||||
.edit-modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* TAB内容切换 */
|
||||
.tab-pane{display:none;}
|
||||
.tab-pane.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -127,98 +138,222 @@
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">当前生效版本预览</div>
|
||||
<div class="notice-card__actions">
|
||||
<!-- [交互] 点击进入编辑模式（打开编辑弹窗） -->
|
||||
<button class="btn btn-primary" onclick="openEditModal()">>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10L10 2l2 2-8 8-2.5.5.5-2.5z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
编辑内容
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-card__body">
|
||||
<!-- 移动端弹窗预览 -->
|
||||
<div class="preview-box">
|
||||
<div class="preview-box__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览效果
|
||||
</div>
|
||||
<div style="max-width:320px;margin:0 auto;border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
|
||||
<div class="preview-title">咨询须知</div>
|
||||
<div class="preview-content">
|
||||
<p><strong>1. 服务说明</strong></p>
|
||||
<p>本平台提供图文咨询和视频咨询两种方式，专家将在24小时内回复您的问题。</p>
|
||||
<p><strong>2. 使用规范</strong></p>
|
||||
<p>请详细描述您的症状或健康问题，上传相关检查报告有助于专家准确判断。</p>
|
||||
<p><strong>3. 注意事项</strong></p>
|
||||
<p>本咨询服务仅供健康指导参考，不作为正式医疗诊断依据。如病情紧急，请立即前往医院就诊或拨打急救电话120。</p>
|
||||
<p><strong>4. 隐私保护</strong></p>
|
||||
<p>您的咨询内容将严格保密，仅接诊专家可查看。</p>
|
||||
</div>
|
||||
<div style="margin-top:16px;display:flex;gap:8px;">
|
||||
<div style="flex:1;height:36px;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#666;">不同意</div>
|
||||
<div style="flex:1;height:36px;background:var(--primary);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;">同意并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- TAB 切换 -->
|
||||
<div class="notice-tabs">
|
||||
<div class="notice-tab active" onclick="switchTab('text')">图文咨询</div>
|
||||
<div class="notice-tab" onclick="switchTab('video')">视频咨询</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<div class="edit-modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="edit-modal">
|
||||
<div class="edit-modal__header">
|
||||
<div class="edit-modal__title">编辑咨询须知</div>
|
||||
<button class="edit-modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="edit-modal__body">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" type="text" value="咨询须知" placeholder="请输入弹窗标题">
|
||||
<div class="editor-section__label" style="margin-top:16px;">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
<!-- 图文咨询 -->
|
||||
<div class="tab-pane active" id="pane-text">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">图文咨询须知</div>
|
||||
<div class="notice-card__actions">
|
||||
<button class="btn btn-default" onclick="openHistory('text')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1a6 6 0 106 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
历史版本
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveNotice('text')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发布生效
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body" contenteditable="true">
|
||||
1. 服务说明
|
||||
本平台提供图文咨询和视频咨询两种方式，专家将在24小时内回复您的问题。
|
||||
<div class="notice-layout">
|
||||
<div class="notice-editor">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" id="title-text" type="text" value="图文咨询须知" placeholder="请输入弹窗标题" oninput="syncPreview('text')">
|
||||
<div class="editor-section__label">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" id="editor-text" contenteditable="true" oninput="syncPreview('text')">1. 服务说明
|
||||
本平台提供在线图文咨询服务，专家将在接诊后24小时内回复您的问题。单次咨询有效期为48小时。
|
||||
|
||||
2. 使用规范
|
||||
请详细描述您的症状或健康问题，上传相关检查报告有助于专家准确判断。
|
||||
请详细描述您的症状或健康问题，上传相关检查报告有助于专家准确判断。每次咨询限一个主要问题。
|
||||
|
||||
3. 注意事项
|
||||
本咨询服务仅供健康指导参考，不作为正式医疗诊断依据。如病情紧急，请立即前往医院就诊或拨打急救电话120。
|
||||
|
||||
4. 隐私保护
|
||||
您的咨询内容将严格保密，仅接诊专家可查看。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端咨询发起弹窗中</span>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端发起图文咨询时的弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-preview">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览
|
||||
</div>
|
||||
<div class="preview-phone">
|
||||
<div class="preview-phone__title" id="preview-title-text">图文咨询须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-text"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">不同意</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">同意并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary">发布生效</button>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询 -->
|
||||
<div class="tab-pane" id="pane-video">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">视频咨询须知</div>
|
||||
<div class="notice-card__actions">
|
||||
<button class="btn btn-default" onclick="openHistory('video')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1a6 6 0 106 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M7 4v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
历史版本
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveNotice('video')">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发布生效
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-layout">
|
||||
<div class="notice-editor">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" id="title-video" type="text" value="视频咨询须知" placeholder="请输入弹窗标题" oninput="syncPreview('video')">
|
||||
<div class="editor-section__label">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" id="editor-video" contenteditable="true" oninput="syncPreview('video')">1. 服务说明
|
||||
本平台提供在线视频咨询服务，您将与专家进行实时视频沟通。单次视频时长不超过30分钟。
|
||||
|
||||
2. 设备要求
|
||||
请确保手机摄像头和麦克风权限已开启，建议在安静、光线充足的环境下进行视频咨询，使用WiFi或4G/5G网络以保证通话质量。
|
||||
|
||||
3. 预约规则
|
||||
视频咨询需提前预约，请在预约时段前5分钟进入等候。超过预约时间10分钟未接入，本次预约将自动取消。
|
||||
|
||||
4. 注意事项
|
||||
本咨询服务仅供健康指导参考，不作为正式医疗诊断依据。如病情紧急，请立即前往医院就诊或拨打急救电话120。
|
||||
|
||||
5. 隐私保护
|
||||
视频咨询过程不会被录制，您的咨询内容将严格保密。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端发起视频咨询时的弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-preview">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览
|
||||
</div>
|
||||
<div class="preview-phone">
|
||||
<div class="preview-phone__title" id="preview-title-video">视频咨询须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-video"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">不同意</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">同意并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 历史版本弹窗 -->
|
||||
<div class="modal-overlay" id="history-modal" onclick="if(event.target===this)closeHistory()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="history-modal-title">历史版本</div>
|
||||
<button class="modal__close" onclick="closeHistory()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--current">当前版本</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V3 — 新增隐私保护条款</div>
|
||||
<div class="version-info__meta">2026-04-10 14:30 · 张管理员 发布</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--history">历史</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V2 — 补充使用规范说明</div>
|
||||
<div class="version-info__meta">2026-03-20 09:15 · 李管理员 发布</div>
|
||||
</div>
|
||||
<span class="link">查看</span>
|
||||
<span class="link" style="margin-left:4px;">恢复</span>
|
||||
</div>
|
||||
<div class="version-item">
|
||||
<span class="version-tag version-tag--history">历史</span>
|
||||
<div class="version-info">
|
||||
<div class="version-info__title">V1 — 初始版本</div>
|
||||
<div class="version-info__meta">2026-02-01 10:00 · 张管理员 发布</div>
|
||||
</div>
|
||||
<span class="link">查看</span>
|
||||
<span class="link" style="margin-left:4px;">恢复</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openEditModal() {
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
// TAB 切换
|
||||
function switchTab(type) {
|
||||
document.querySelectorAll('.notice-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
document.querySelectorAll('.tab-pane').forEach(function(p){ p.classList.remove('active'); });
|
||||
event.currentTarget.classList.add('active');
|
||||
document.getElementById('pane-' + type).classList.add('active');
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
// 实时同步预览
|
||||
function syncPreview(type) {
|
||||
var title = document.getElementById('title-' + type).value;
|
||||
var content = document.getElementById('editor-' + type).innerText;
|
||||
document.getElementById('preview-title-' + type).textContent = title || '咨询须知';
|
||||
document.getElementById('preview-content-' + type).textContent = content;
|
||||
}
|
||||
|
||||
// 初始化预览
|
||||
syncPreview('text');
|
||||
syncPreview('video');
|
||||
|
||||
// 历史版本弹窗
|
||||
function openHistory(type) {
|
||||
var label = type === 'text' ? '图文咨询' : '视频咨询';
|
||||
document.getElementById('history-modal-title').textContent = label + ' — 历史版本';
|
||||
document.getElementById('history-modal').classList.add('open');
|
||||
}
|
||||
function closeHistory() {
|
||||
document.getElementById('history-modal').classList.remove('open');
|
||||
}
|
||||
|
||||
// 发布（原型演示）
|
||||
function saveNotice(type) {
|
||||
alert((type === 'text' ? '图文' : '视频') + '咨询须知已发布生效');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
# 专家咨询（管理端）变更记录
|
||||
|
||||
## 2026-04-13
|
||||
|
||||
### refactor: 重构咨询须知配置页面
|
||||
|
||||
将咨询须知页面从单一须知改为按咨询类型分TAB管理，新增实时预览和历史版本弹窗。
|
||||
|
||||
**涉及文件：**
|
||||
|
||||
- `config-notice.html` — 咨询须知配置页
|
||||
- 新增「图文咨询」「视频咨询」TAB标签切换
|
||||
- 改为左侧编辑区 + 右侧移动端预览的双栏布局
|
||||
- 编辑内容实时同步到右侧预览窗口
|
||||
- 底部历史版本区域改为按钮触发弹窗显示
|
||||
- 图文/视频各自独立编辑和发布
|
||||
|
||||
## 2026-04-09
|
||||
|
||||
### init: 初始化专家咨询管理端原型
|
||||
|
||||
@@ -155,6 +155,10 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-bar__row">
|
||||
<div class="filter-item">
|
||||
<label>咨询单号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入咨询单号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名">
|
||||
@@ -281,6 +285,7 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th>员工工号</th>
|
||||
<th>所属单位</th>
|
||||
@@ -301,6 +306,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -319,6 +325,7 @@
|
||||
<td><span class="link" onclick="openChat('张伟','李医生','长庆医院','心血管内科','2026-04-09 09:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409002</td>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
@@ -337,6 +344,7 @@
|
||||
<td><span class="link" onclick="openChat('李明','王医生','长庆医院','内分泌科','2026-04-09 10:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409003</td>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
@@ -355,6 +363,7 @@
|
||||
<td><span class="link" onclick="openChat('王芳','张医生','长庆医院','神经内科','2026-04-09 11:05')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260408004</td>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
@@ -373,6 +382,7 @@
|
||||
<td><span class="link" onclick="openChat('刘洋','陈医生','长庆医院','骨科','2026-04-08 14:22')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260408005</td>
|
||||
<td>赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
@@ -391,6 +401,26 @@
|
||||
<td><span class="link" onclick="openChat('赵静','孙医生','长庆医院','消化内科','2026-04-08 16:40')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260407006</td>
|
||||
<td>孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP010</td>
|
||||
<td>采油二厂</td>
|
||||
<td>技术部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td>陈医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>骨科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>2026-04-07 08:20</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-07 08:45</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('孙丽','陈医生','长庆医院','骨科','2026-04-07 08:20')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260407007</td>
|
||||
<td>陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP006</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -409,6 +439,7 @@
|
||||
<td><span class="link" onclick="openChat('陈磊','李医生','长庆医院','心血管内科','2026-04-07 09:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409008</td>
|
||||
<td>周华</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP007</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -427,6 +458,7 @@
|
||||
<td><span class="link" onclick="openChat('周华','刘医生','长庆医院','呼吸科','2026-04-09 14:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409009</td>
|
||||
<td>吴娟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP008</td>
|
||||
<td>采油二厂</td>
|
||||
@@ -445,6 +477,7 @@
|
||||
<td><span class="link" onclick="openChat('吴娟','王医生','长庆医院','内分泌科','2026-04-09 15:10')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409010</td>
|
||||
<td>何军</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP009</td>
|
||||
<td>勘探开发研究院</td>
|
||||
@@ -519,7 +552,7 @@ const deptMap = {
|
||||
// 咨询状态映射
|
||||
const consultStatusMap = {
|
||||
'text': ['待回复', '进行中', '已完成'],
|
||||
'video': ['待确认', '待开始', '已拒绝', '已完成']
|
||||
'video': ['待确认', '待开始', '已完成', '已取消', '已拒绝']
|
||||
};
|
||||
|
||||
function updateConsultStatus() {
|
||||
|
||||
@@ -117,28 +117,6 @@
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月待结算金额</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">¥ 32,450</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月已结算金额</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">¥ 18,200</div>
|
||||
<div class="stat-card__sub">已完成结算</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年累计结算</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">¥ 248,600</div>
|
||||
<div class="stat-card__sub">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待结算专家数</div>
|
||||
<div class="stat-card__value">28</div>
|
||||
<div class="stat-card__sub">本月待处理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>结算周期</label>
|
||||
|
||||
Reference in New Issue
Block a user