feat(assistant): 新增咨询小助手工作台全套页面
包含工作台主页、图文聊天、已完成详情、员工档案、结束咨询弹窗、推送专家列表共6个独立HTML文件。 聊天页支持推送专家名片功能，通过sessionStorage传递专家数据并在对话框渲染名片气泡。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -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>
|
||||
Reference in New Issue
Block a user