Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
  liuyunqinandClaude Sonnet 4.6
|
95b0346983 | ||
|
liuyunqinandClaude Sonnet 4.6
|
52776c18e9 |
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 已完成咨询详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
.profile-collapsible { background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工信息卡 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:28px;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:17px;font-weight:700;color:#1a1a1a;">孙丽</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:2px;">行政部 · 行政专员</div>
|
||||
</div>
|
||||
<span class="tag tag-gray" style="margin-left:auto;">已完成</span>
|
||||
</div>
|
||||
<!-- 咨询信息 -->
|
||||
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><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:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 14:10</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">完成时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 14:38</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;"><span style="font-size:13px;color:#999;">员工评分</span><span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐⭐⭐⭐⭐ 5.0</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工评价 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">员工评价</div>
|
||||
<div style="font-size:13px;color:#666;line-height:1.6;background:#fffbe6;border-radius:8px;padding:12px;border-left:3px solid #faad14;">"小助手回复很及时，解答很专业，帮我解决了体检报告的疑问，非常感谢！"</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html 查看历史对话记录 -->
|
||||
<div onclick="location.href='./text-chat.html'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">💬</span>
|
||||
<span style="font-size:14px;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 class="profile-collapsible">
|
||||
<!-- [交互] 点击展开/收起档案 -->
|
||||
<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;">女 / 26岁</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;">160 cm / 50 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:#1a1a1a;">良好</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>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleProfile(el) {
|
||||
var card = el.closest('.profile-collapsible');
|
||||
var body = card.querySelector('.profile-body');
|
||||
var arrow = card.querySelector('.profile-arrow');
|
||||
var isOpen = body.style.display !== 'none';
|
||||
body.style.display = isOpen ? 'none' : 'block';
|
||||
if (arrow) arrow.style.transform = isOpen ? '' : 'rotate(180deg)';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 员工健康档案 | 健康长庆原型</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; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./text-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工档案</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工头像和基本信息 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;text-align:center;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;">👩</div>
|
||||
<div style="font-size:18px;font-weight:700;color:#1a1a1a;">张小红</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:4px;">研发部 · 工程师</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息列表 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<!-- 基本信息 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#1677ff;margin-bottom:8px;">基本信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">女 / 28岁</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">163 cm / 52 kg</span></div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#52c41a;margin:12px 0 8px;">生活习惯</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 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:9px 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:9px 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="font-size:13px;font-weight:600;color:#fa8c16;margin:12px 0 8px;">身体情况</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#ff4d4f;font-weight:600;">青霉素过敏</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 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:9px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!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: rgba(0,0,0,0.5); 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; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-actions button:last-child { color: #ff4d4f; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 结束咨询确认弹窗 -->
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束咨询</div>
|
||||
<div class="modal-body">确认结束与张小红的咨询？结束后将无法继续发送消息。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 点击取消: 返回 ./text-chat.html -->
|
||||
<button onclick="location.href='./text-chat.html'">取消</button>
|
||||
<!-- [交互] 点击确认结束: 跳转至 ./index.html -->
|
||||
<button onclick="location.href='./index.html'">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,211 @@
|
||||
<!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; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
.consult-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.consult-card:active { transform: scale(0.98); }
|
||||
.cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.cc-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.cc-info { flex: 1; min-width: 0; }
|
||||
.cc-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.cc-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.cc-bottom { display: flex; align-items: center; justify-content: space-between; }
|
||||
.cc-preview { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
|
||||
.cc-time { font-size: 12px; color: #bbb; flex-shrink: 0; }
|
||||
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; flex-shrink: 0; }
|
||||
</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 style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，小助手</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 统计数字 -->
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">待回复</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">进行中</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">24</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">今日完成</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">96%</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">满意度</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待回复 / 进行中 / 已完成 -->
|
||||
<div class="seg-tabs" style="flex-shrink:0;">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待回复<span class="badge">3</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-ongoing')">进行中<span class="badge" style="background:#fa8c16;">2</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 待回复列表 -->
|
||||
<div id="panel-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-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-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>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.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">人事部 · HR专员</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:30</span><span class="unread-dot"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 进行中列表 -->
|
||||
<div id="panel-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-bottom">
|
||||
<div class="cc-preview">好的，我按您说的方法试试看</div>
|
||||
<span class="cc-time">昨天</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.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">生产部 · 操作工</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>
|
||||
</div>
|
||||
|
||||
<!-- 已完成列表 -->
|
||||
<div id="panel-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./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-bottom">
|
||||
<div class="cc-preview">感谢，问题已解决</div>
|
||||
<span class="cc-time">08:40</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-done.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-gray">已完成</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>
|
||||
|
||||
<!-- 底部5Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换二级Tab（待回复/进行中/已完成）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板ID
|
||||
*/
|
||||
function switchTab(el, panelId) {
|
||||
document.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['panel-pending','panel-ongoing','panel-done'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!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; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.expert-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.expert-card:active { transform: scale(0.98); }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #e6f4ff; color: #1677ff; margin: 2px 4px 2px 0; }
|
||||
</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="location.href='./text-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">选择专家</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div style="padding:10px 16px;background:#fff;border-bottom:1px solid #f0f0f0;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;background:#f5f5f5;border-radius:20px;padding:8px 14px;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#999" stroke-width="1.5"><circle cx="6" cy="6" r="4.5"/><path d="M9.5 9.5l3 3"/></svg>
|
||||
<span style="font-size:14px;color:#bbb;">搜索专家姓名、科室...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家列表 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 专家卡片：王明远 - 心内科 -->
|
||||
<!-- [交互] 点击推送该专家名片至聊天: 存入 sessionStorage 并返回 text-chat.html -->
|
||||
<div class="expert-card" onclick="pushExpert({avatar:'👨⚕️',name:'王明远',hospital:'长庆油田职工医院',dept:'心内科',title:'主任医师',specialty:'高血压、冠心病、心律失常',monthCount:86})">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
||||
<div style="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;">👨⚕️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:15px;font-weight:700;color:#1a1a1a;">王明远</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:2px;">长庆油田职工医院</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:1px;">心内科 · 主任医师</div>
|
||||
</div>
|
||||
<div style="text-align:center;flex-shrink:0;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">86</div>
|
||||
<div style="font-size:10px;color:#999;margin-top:1px;">本月咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">擅长疾病</div>
|
||||
<div>
|
||||
<span class="tag">高血压</span>
|
||||
<span class="tag">冠心病</span>
|
||||
<span class="tag">心律失常</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家卡片：李秀芬 - 神经内科 -->
|
||||
<div class="expert-card" onclick="pushExpert({avatar:'👩⚕️',name:'李秀芬',hospital:'长庆油田职工医院',dept:'神经内科',title:'副主任医师',specialty:'偏头痛、脑梗、眩晕症',monthCount:64})">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
||||
<div style="width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#fff0f6,#ffadd2);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;">👩⚕️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:15px;font-weight:700;color:#1a1a1a;">李秀芬</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:2px;">长庆油田职工医院</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:1px;">神经内科 · 副主任医师</div>
|
||||
</div>
|
||||
<div style="text-align:center;flex-shrink:0;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">64</div>
|
||||
<div style="font-size:10px;color:#999;margin-top:1px;">本月咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">擅长疾病</div>
|
||||
<div>
|
||||
<span class="tag">偏头痛</span>
|
||||
<span class="tag">脑梗</span>
|
||||
<span class="tag">眩晕症</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家卡片：张国强 - 骨科 -->
|
||||
<div class="expert-card" onclick="pushExpert({avatar:'👨⚕️',name:'张国强',hospital:'西安交大一附院',dept:'骨科',title:'主任医师',specialty:'腰椎间盘突出、颈椎病、骨折',monthCount:102})">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
||||
<div style="width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:15px;font-weight:700;color:#1a1a1a;">张国强</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:2px;">西安交大一附院</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:1px;">骨科 · 主任医师</div>
|
||||
</div>
|
||||
<div style="text-align:center;flex-shrink:0;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">102</div>
|
||||
<div style="font-size:10px;color:#999;margin-top:1px;">本月咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">擅长疾病</div>
|
||||
<div>
|
||||
<span class="tag">腰椎间盘突出</span>
|
||||
<span class="tag">颈椎病</span>
|
||||
<span class="tag">骨折</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家卡片：赵晓燕 - 消化内科 -->
|
||||
<div class="expert-card" onclick="pushExpert({avatar:'👩⚕️',name:'赵晓燕',hospital:'长庆油田职工医院',dept:'消化内科',title:'主治医师',specialty:'胃炎、胃溃疡、肠易激综合征',monthCount:47})">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
||||
<div style="width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#fff7e6,#ffd591);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;">👩⚕️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:15px;font-weight:700;color:#1a1a1a;">赵晓燕</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:2px;">长庆油田职工医院</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:1px;">消化内科 · 主治医师</div>
|
||||
</div>
|
||||
<div style="text-align:center;flex-shrink:0;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">47</div>
|
||||
<div style="font-size:10px;color:#999;margin-top:1px;">本月咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">擅长疾病</div>
|
||||
<div>
|
||||
<span class="tag">胃炎</span>
|
||||
<span class="tag">胃溃疡</span>
|
||||
<span class="tag">肠易激综合征</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家卡片：刘鹏 - 呼吸内科 -->
|
||||
<div class="expert-card" onclick="pushExpert({avatar:'👨⚕️',name:'刘鹏',hospital:'西安交大一附院',dept:'呼吸内科',title:'副主任医师',specialty:'哮喘、慢阻肺、肺炎',monthCount:73})">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
||||
<div style="width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#f0f5ff,#adc6ff);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:15px;font-weight:700;color:#1a1a1a;">刘鹏</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:2px;">西安交大一附院</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:1px;">呼吸内科 · 副主任医师</div>
|
||||
</div>
|
||||
<div style="text-align:center;flex-shrink:0;">
|
||||
<div style="font-size:20px;font-weight:700;color:#1677ff;">73</div>
|
||||
<div style="font-size:10px;color:#999;margin-top:1px;">本月咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">擅长疾病</div>
|
||||
<div>
|
||||
<span class="tag">哮喘</span>
|
||||
<span class="tag">慢阻肺</span>
|
||||
<span class="tag">肺炎</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 将专家数据存入 sessionStorage，然后跳回聊天页
|
||||
* text-chat.html 页面加载时会读取并发送名片气泡
|
||||
* @param {Object} expert - 专家信息对象
|
||||
*/
|
||||
function pushExpert(expert) {
|
||||
sessionStorage.setItem('pendingExpertCard', JSON.stringify(expert));
|
||||
location.href = './text-chat.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,211 @@
|
||||
<!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; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红</span>
|
||||
<!-- [交互] 点击跳转至: ./end-consult-dialog.html -->
|
||||
<button class="nav-right" onclick="location.href='./end-consult-dialog.html'">结束咨询</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-09 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 style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">您好，我最近总是头痛，尤其是下午工作时特别明显，已经持续一周了。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
|
||||
<!-- 小助手消息（右侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，头痛持续一周需要重视。请问头痛的位置主要在哪里？是否伴有恶心、视力模糊等症状？</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>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">主要是太阳穴两侧，有时候会有点恶心，但没有视力问题。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 常用语面板 -->
|
||||
<div id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:8px;">常用语</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">您好，请详细描述症状</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">建议及时就医检查</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">请上传相关检查报告</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">注意休息，保持规律作息</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">如有不适请及时复诊</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./push-expert.html -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="location.href='./push-expert.html'">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">👨⚕️</div>
|
||||
<span style="font-size:11px;color:#666;">推送专家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<button onclick="toggleQuick()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">⚡</button>
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<input id="chat-input" type="text" placeholder="输入回复内容..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;">按住说话</button>
|
||||
<button onclick="toggleMediaPanel()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;font-weight:300;cursor:pointer;flex-shrink:0;color:#666;line-height:1;">+</button>
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// 页面加载时检查是否有待发送的专家名片
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var cardData = sessionStorage.getItem('pendingExpertCard');
|
||||
if (cardData) {
|
||||
sessionStorage.removeItem('pendingExpertCard');
|
||||
var expert = JSON.parse(cardData);
|
||||
sendExpertCard(expert);
|
||||
}
|
||||
});
|
||||
|
||||
function sendExpertCard(expert) {
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML =
|
||||
'<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div>' +
|
||||
'<div style="display:flex;flex-direction:column;align-items:flex-end;">' +
|
||||
'<div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div>' +
|
||||
'<div style="background:#fff;border-radius:12px 0 12px 12px;padding:12px 14px;max-width:220px;box-shadow:0 2px 8px rgba(0,0,0,0.1);border:1px solid #e8e8e8;">' +
|
||||
'<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">' +
|
||||
'<div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">' + expert.avatar + '</div>' +
|
||||
'<div>' +
|
||||
'<div style="font-size:14px;font-weight:700;color:#1a1a1a;">' + expert.name + '</div>' +
|
||||
'<div style="font-size:11px;color:#666;margin-top:1px;">' + expert.dept + ' · ' + expert.title + '</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:12px;color:#666;margin-bottom:4px;">🏥 ' + expert.hospital + '</div>' +
|
||||
'<div style="font-size:11px;color:#999;line-height:1.4;">擅长：' + expert.specialty + '</div>' +
|
||||
'<div style="margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;">' +
|
||||
'<span style="font-size:11px;color:#1677ff;background:#e6f4ff;padding:2px 8px;border-radius:4px;font-weight:600;">专家名片</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
|
||||
function toggleQuick() {
|
||||
var p = document.getElementById('quick-panel');
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
function toggleMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
m.style.display = m.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
function closeMediaPanel() {
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
}
|
||||
var isVoiceMode = false;
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) {
|
||||
input.style.display = 'none'; recordBtn.style.display = 'flex';
|
||||
voiceBtn.textContent = '⌨️'; voiceBtn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
input.style.display = ''; recordBtn.style.display = 'none';
|
||||
voiceBtn.textContent = '🎤'; voiceBtn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
function useQuick(el) {
|
||||
document.getElementById('chat-input').value = el.textContent;
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
}
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -113,7 +113,7 @@
|
||||
<div class="expert-list-container" id="expertListContainer">
|
||||
|
||||
<!-- [交互] 专家卡片1 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="张建国" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" data-name="张建国" onclick="window.location.href='expert-profile.html?from=expert-list'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
@@ -134,7 +134,7 @@
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片2 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="陈美华" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" data-name="陈美华" onclick="window.location.href='expert-profile.html?from=expert-list'">
|
||||
<div class="ec-avatar">👩‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
@@ -155,7 +155,7 @@
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片3 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="刘海波" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" data-name="刘海波" onclick="window.location.href='expert-profile.html?from=expert-list'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
|
||||
@@ -360,7 +360,7 @@
|
||||
<!-- 导航栏（透明，绝对定位在头部上方） -->
|
||||
<!-- [交互] 返回按钮：点击返回上一页 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="history.back()">←</button>
|
||||
<button class="nav-back" onclick="goBack()">←</button>
|
||||
<!-- [交互] 分享按钮 -->
|
||||
<button class="nav-share">分享</button>
|
||||
</div>
|
||||
@@ -518,7 +518,7 @@
|
||||
/* [交互] 确认须知后根据类型跳转 */
|
||||
function confirmNotice() {
|
||||
if (currentNoticeType === 'text') {
|
||||
window.location.href = 'text-chat.html';
|
||||
window.location.href = 'text-chat.html?from=expert-profile';
|
||||
} else if (currentNoticeType === 'video') {
|
||||
window.location.href = 'video-booking.html';
|
||||
}
|
||||
@@ -530,6 +530,23 @@
|
||||
closeModal('noticeModal');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 返回上一页：优先读取 ?from 参数，否则 history.back()，最终 fallback 到 index.html
|
||||
*/
|
||||
function goBack() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var from = params.get('from');
|
||||
if (from === 'index') {
|
||||
window.location.href = 'index.html';
|
||||
} else if (from === 'expert-list') {
|
||||
window.location.href = 'expert-list.html';
|
||||
} else if (history.length > 1) {
|
||||
history.back();
|
||||
} else {
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -70,10 +70,12 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.dept-right-content { flex: 1; overflow-y: auto; padding: 16px 12px; background: #fff; }
|
||||
.dept-grid { display: none; flex-wrap: wrap; gap: 10px; }
|
||||
.dept-grid.active { display: flex; }
|
||||
.dept-item { width: calc(50% - 5px); background: #f7f8fa; border-radius: 10px; padding: 14px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s; font-size: 13px; color: #333; }
|
||||
.dept-item { width: calc(50% - 5px); background: #f7f8fa; border-radius: 10px; padding: 12px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s; font-size: 13px; color: #333; }
|
||||
.dept-item:hover { background: #e6f4ff; color: #1677ff; }
|
||||
.dept-item:active { transform: scale(0.96); }
|
||||
.dept-icon { font-size: 18px; flex-shrink: 0; }
|
||||
.dept-item-text { display: flex; flex-direction: column; gap: 2px; }
|
||||
.dept-item-count { font-size: 11px; color: #999; }
|
||||
|
||||
/* ===== 疾病面板 ===== */
|
||||
/* 疾病分类横向Tab */
|
||||
@@ -90,6 +92,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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; }
|
||||
.disease-count { font-size: 12px; color: #999; margin-right: 4px; }
|
||||
.disease-arrow { color: #ccc; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -201,37 +204,37 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="dept-right-content">
|
||||
<!-- [交互] 点击二级科室跳转到expert-list.html -->
|
||||
<div id="dept-neike" class="dept-grid active">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">❤️</span><span>心内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><span>神经内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔬</span><span>内分泌科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫁</span><span>消化内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💨</span><span>呼吸科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫘</span><span>肾内科</span></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">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>
|
||||
<div id="dept-waike" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦴</span><span>骨科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔪</span><span>普通外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><span>神经外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫀</span><span>泌尿外科</span></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">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>
|
||||
<div id="dept-fuchan" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👩</span><span>妇科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🤰</span><span>产科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧬</span><span>生殖科</span></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">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>
|
||||
<div id="dept-erke" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👶</span><span>儿内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🩹</span><span>儿外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🍼</span><span>新生儿科</span></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">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><span>眼科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👂</span><span>耳鼻喉科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦷</span><span>口腔科</span></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="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>
|
||||
<div id="dept-pifu" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧴</span><span>皮肤科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💊</span><span>性病科</span></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">3位专家</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -253,26 +256,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
@@ -281,26 +289,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
@@ -309,26 +322,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
@@ -337,26 +355,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
@@ -365,26 +388,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
@@ -393,26 +421,31 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 + 标题 + 右侧消息图标 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="history.back()">← 返回</a>
|
||||
<a class="nav-back" onclick="goBack()">← 返回</a>
|
||||
<span class="nav-title">健康咨询</span>
|
||||
<span class="nav-right">💬</span>
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片1：张建国，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html?from=index'">
|
||||
<div class="expert-avatar">👨⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">张建国 <span style="font-size:12px;font-weight:400;color:#666;">主任医师</span></div>
|
||||
@@ -196,12 +196,12 @@
|
||||
<div class="count">咨询 2,356次</div>
|
||||
<div class="reply">回复率 99%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html?from=index'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片2：李晓梅，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html?from=index'">
|
||||
<div class="expert-avatar">👩⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">李晓梅 <span style="font-size:12px;font-weight:400;color:#666;">副主任医师</span></div>
|
||||
@@ -217,12 +217,12 @@
|
||||
<div class="count">咨询 1,892次</div>
|
||||
<div class="reply">回复率 98%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html?from=index'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片3：王志远，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html?from=index'">
|
||||
<div class="expert-avatar">👨⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">王志远 <span style="font-size:12px;font-weight:400;color:#666;">主任医师</span></div>
|
||||
@@ -238,7 +238,7 @@
|
||||
<div class="count">咨询 3,105次</div>
|
||||
<div class="reply">回复率 97%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html?from=index'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -248,5 +248,13 @@
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
<script>
|
||||
function goBack() {
|
||||
if (history.length > 1) {
|
||||
history.back();
|
||||
}
|
||||
// index.html 是入口页，无需 fallback 跳转
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -96,8 +96,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏（无返回按钮） -->
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back-btn" onclick="goBack()" style="position:absolute;left:16px;font-size:22px;cursor:pointer;color:#1a1a1a;">←</span>
|
||||
<span class="nav-title">评价医生</span>
|
||||
</div>
|
||||
|
||||
@@ -149,10 +150,25 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交评价，跳转到首页
|
||||
* 提交评价，跳转到咨询记录页
|
||||
*/
|
||||
function submitRate() {
|
||||
window.location.href = 'index.html';
|
||||
window.location.href = 'my-records.html';
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回上一页：读取 ?from 参数决定目标页
|
||||
*/
|
||||
function goBack() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var from = params.get('from');
|
||||
if (from === 'text-chat') {
|
||||
window.location.href = 'text-chat.html';
|
||||
} else if (history.length > 1) {
|
||||
history.back();
|
||||
} else {
|
||||
window.location.href = 'my-records.html';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -173,7 +173,7 @@
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html">
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
<div class="ce-info">
|
||||
<div class="ce-title">查看历史对话记录</div>
|
||||
@@ -186,7 +186,7 @@
|
||||
|
||||
<!-- [交互] 底部操作栏：继续咨询按钮 → text-chat.html -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-continue" onclick="window.location.href='text-chat.html'">💬 继续咨询</button>
|
||||
<button class="btn-continue" onclick="window.location.href='text-chat.html?from=record-detail'">💬 继续咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
|
||||
@@ -102,9 +102,8 @@
|
||||
<span>🔋</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- [交互] 返回按钮跳转到专家主页 -->
|
||||
<!-- [交互] 聊天头部：无返回键，通过"结束咨询"按钮离开 -->
|
||||
<div class="chat-header">
|
||||
<a href="expert-profile.html" class="back-btn">←</a>
|
||||
<div class="chat-avatar">👨⚕️</div>
|
||||
<div class="chat-info">
|
||||
<span class="chat-name">张建国医生</span>
|
||||
@@ -167,7 +166,7 @@
|
||||
<!-- [交互] 关闭弹窗继续咨询 -->
|
||||
<button class="btn-cancel" onclick="closeModal('endConfirmModal')">继续咨询</button>
|
||||
<!-- [交互] 确认结束跳转到评价页面 -->
|
||||
<button class="btn-confirm" onclick="location.href='rate-doctor.html'">确认结束</button>
|
||||
<button class="btn-confirm" onclick="location.href='rate-doctor.html?from=text-chat'">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user