feat: 新增单位咨询统计、咨询流程图、快速咨询等多项功能
- 管理端新增单位咨询统计页面，11个侧边栏页面同步更新菜单 - 单位报表详情页支持多入口共用（动态导航/侧边栏/面包屑） - 员工端新增咨询流程图页面、选择档案页面 - 聊天页增加发送文件/发送位置按钮，支持快速咨询模式 - 选择咨询人页面增加快速咨询按钮 - 批量优化管理端小助手及应急端页面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -31,6 +31,27 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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; }
|
||||
/* ========== 子分类Tab ========== */
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab {
|
||||
font-size: 12px; padding: 4px 14px; border-radius: 16px;
|
||||
background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ========== PDF文档条目 ========== */
|
||||
.pdf-item {
|
||||
background: #fff; border-radius: 10px; padding: 12px 14px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer;
|
||||
}
|
||||
.pdf-item__icon {
|
||||
width: 44px; height: 44px; border-radius: 10px; background: #fff1f0;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.pdf-item__info { flex: 1; }
|
||||
.pdf-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.pdf-item__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -48,14 +69,22 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类Tab -->
|
||||
<div class="seg-tabs" style="background:#fff;">
|
||||
<div class="seg-tab active" onclick="switchKbTab(this,'kb-exam')">体检知识</div>
|
||||
<div class="seg-tab" onclick="switchKbTab(this,'kb-drug')">药品知识</div>
|
||||
<div class="seg-tab" onclick="switchKbTab(this,'kb-disease')">疾病知识</div>
|
||||
<div class="seg-tab" onclick="switchKbTab(this,'kb-health')">保健知识</div>
|
||||
<!-- 一级分类Tab -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTopTab(this,'panel-article')">知识文章</div>
|
||||
<div class="seg-tab" onclick="switchTopTab(this,'panel-rule')">规章制度</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识文章面板 -->
|
||||
<div id="panel-article" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<!-- 子分类Tab -->
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-exam')">体检知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-drug')">药品知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-disease')">疾病知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-health')">保健知识</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识条目列表 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 体检知识 -->
|
||||
@@ -146,6 +175,54 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /panel-article -->
|
||||
|
||||
<!-- 规章制度面板 -->
|
||||
<div id="panel-rule" style="display:none;flex:1;overflow-y:auto;background:#f7f8fa;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">员工健康管理办法（2026版）</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 2.3MB</span><span>2026-01-15</span></div>
|
||||
</div>
|
||||
<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="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">职业病防治管理规定</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.8MB</span><span>2025-12-20</span></div>
|
||||
</div>
|
||||
<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="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">体检异常结果处置流程</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 0.9MB</span><span>2025-11-08</span></div>
|
||||
</div>
|
||||
<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="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">健康咨询服务管理细则</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-10-22</span></div>
|
||||
</div>
|
||||
<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="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">应急救护操作规范</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
@@ -179,18 +256,30 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
sessionStorage.setItem('appRole', 'assistant');
|
||||
|
||||
/**
|
||||
* 切换知识库分类Tab
|
||||
* 切换一级Tab（知识文章 / 规章制度）
|
||||
*/
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
var displayMap = { 'panel-article': 'flex', 'panel-rule': 'block' };
|
||||
['panel-article', 'panel-rule'].forEach(function(id) {
|
||||
var p = document.getElementById(id);
|
||||
if (p) p.style.display = id === panelId ? displayMap[id] : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换知识库子分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 对应面板的ID
|
||||
*/
|
||||
function switchKbTab(el, panelId) {
|
||||
// 移除所有Tab的选中状态
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
// 设置当前Tab为选中
|
||||
el.classList.add('active');
|
||||
// 切换面板显示
|
||||
['kb-exam', 'kb-drug', 'kb-disease', 'kb-health'].forEach(function(id) {
|
||||
var p = document.getElementById(id);
|
||||
if (p) p.style.display = id === panelId ? 'block' : 'none';
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人信息设置 | 健康长庆原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
|
||||
.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; }
|
||||
.avatar-section { display: flex; flex-direction: column; align-items: center; padding: 32px 0 24px; background: #fff; }
|
||||
.avatar-wrap { position: relative; cursor: pointer; }
|
||||
.avatar-img { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid #f0f0f0; }
|
||||
.avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #1677ff; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-hint { font-size: 13px; color: #999; margin-top: 10px; }
|
||||
.form-group { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 15px; color: #1a1a1a; width: 72px; flex-shrink: 0; }
|
||||
.form-input { flex: 1; font-size: 15px; color: #1a1a1a; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.form-value { flex: 1; font-size: 15px; color: #999; text-align: right; }
|
||||
.bottom-action { padding: 16px; flex-shrink: 0; background: #f7f8fa; }
|
||||
.btn-save { width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
|
||||
.action-sheet-mask.active { display: block; }
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 20px; z-index: 201; transform: translateY(100%); transition: transform 0.3s ease; }
|
||||
.action-sheet-mask.active .action-sheet { transform: translateY(0); }
|
||||
.action-sheet-item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet-item:active { background: #f5f5f5; }
|
||||
.action-sheet-cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; background: #f7f8fa; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</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">
|
||||
<a href="./index.html" class="back-btn">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</a>
|
||||
<span class="nav-title">个人信息设置</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap" onclick="openSheet()">
|
||||
<div class="avatar-img" id="avatarDisplay">👩💼</div>
|
||||
<div class="avatar-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="1.5"><path d="M7 3v8M3 7h8"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-hint">点击更换头像</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-label">姓名</span>
|
||||
<input class="form-input" id="inputName" type="text" value="李小雨" placeholder="请输入姓名" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-action">
|
||||
<button class="btn-save" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
<div id="avatarSheet" class="action-sheet-mask" onclick="closeSheet(event)">
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-item" onclick="pickAvatar('camera')">拍照</div>
|
||||
<div class="action-sheet-item" onclick="pickAvatar('album')">从相册选择</div>
|
||||
<div class="action-sheet-cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openSheet() {
|
||||
document.getElementById('avatarSheet').classList.add('active');
|
||||
}
|
||||
function closeSheet(e) {
|
||||
if (!e || e.target.id === 'avatarSheet' || e.target.closest('.action-sheet-cancel')) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
}
|
||||
}
|
||||
function pickAvatar(source) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
showToast('已选择：' + (source === 'camera' ? '拍照' : '从相册选择'));
|
||||
}
|
||||
function handleSave() {
|
||||
var name = document.getElementById('inputName').value.trim();
|
||||
if (!name) { showToast('请输入姓名'); return; }
|
||||
showToast('保存成功');
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function() { t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -46,7 +46,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">李小雨</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">咨询小助手</div>
|
||||
<div style="color:rgba(255,255,255,0.65);font-size:12px;margin-top:2px;">健康管理中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,17 +53,22 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<!-- 功能列表滚动区域 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<!-- 第一组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./stats.html -->
|
||||
<div onclick="location.href='./stats.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📊</span><span style="font-size:15px;color:#1a1a1a;flex:1;">咨询统计</span>
|
||||
<span style="font-size:13px;color:#1677ff;margin-right:8px;">今日 24 次</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">-->
|
||||
<!-- <!– [交互] 点击跳转至: ./stats.html –>-->
|
||||
<!-- <div onclick="location.href='./stats.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">-->
|
||||
<!-- <span style="font-size:18px;margin-right:12px;">📊</span><span style="font-size:15px;color:#1a1a1a;flex:1;">咨询统计</span>-->
|
||||
<!-- <span style="font-size:13px;color:#1677ff;margin-right:8px;">今日 24 次</span>-->
|
||||
<!-- <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 第二组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./edit-profile.html -->
|
||||
<div onclick="location.href='./edit-profile.html'" style="display:flex;align-items:center;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">📝</span><span style="font-size:15px;color:#1a1a1a;flex:1;">个人信息设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./change-pwd.html -->
|
||||
<div onclick="location.href='./change-pwd.html'" style="display:flex;align-items:center;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span>
|
||||
|
||||
@@ -1,76 +1,244 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询小助手 - 员工健康档案 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* ===== 全局重置 ===== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; padding: 0 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
|
||||
}
|
||||
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; cursor: pointer; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
|
||||
|
||||
/* ===== 页面内容 ===== */
|
||||
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f5f5f5; }
|
||||
|
||||
/* ===== 个人信息头部 ===== */
|
||||
.profile-header {
|
||||
background: linear-gradient(135deg, #e8f4ff, #d6e8ff);
|
||||
padding: 20px 16px 16px; display: flex; align-items: center; gap: 14px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 56px; height: 56px; border-radius: 50%; background: #fff;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name-row { display: flex; align-items: center; gap: 8px; }
|
||||
.profile-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.profile-tag { font-size: 11px; background: #1677ff; color: #fff; padding: 2px 8px; border-radius: 10px; }
|
||||
.profile-meta { font-size: 13px; color: #555; margin-top: 4px; }
|
||||
|
||||
/* ===== 信息卡片 ===== */
|
||||
.info-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; padding: 16px; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
|
||||
.info-item__label { font-size: 12px; color: #999; margin-bottom: 2px; }
|
||||
.info-item__value { font-size: 14px; color: #333; font-weight: 500; }
|
||||
.info-item__value--danger { color: #cf1322; font-weight: 600; }
|
||||
|
||||
/* ===== 生活习惯标签 ===== */
|
||||
.habit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.habit-tag {
|
||||
font-size: 13px; padding: 6px 14px; border-radius: 20px;
|
||||
background: #f5f5f5; color: #555;
|
||||
}
|
||||
.habit-tag--good { background: #f6ffed; color: #389e0d; }
|
||||
.habit-tag--warn { background: #fff7e6; color: #d46b08; }
|
||||
|
||||
/* ===== 健康档案卡片 ===== */
|
||||
.record-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; overflow: hidden; }
|
||||
.record-card__header {
|
||||
padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.record-card__icon {
|
||||
width: 40px; height: 40px; border-radius: 10px;
|
||||
background: linear-gradient(135deg, #e8f4ff, #bae0ff);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
|
||||
}
|
||||
.record-card__title { font-size: 15px; font-weight: 600; color: #333; }
|
||||
.record-card__date { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.record-card__body { padding: 12px 16px 14px; }
|
||||
.record-card__section { margin-bottom: 12px; }
|
||||
.record-card__section:last-child { margin-bottom: 0; }
|
||||
.record-card__label { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.record-card__text { font-size: 14px; color: #333; line-height: 1.6; }
|
||||
.record-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
|
||||
.record-card__tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
|
||||
.record-card__tag--blue { color: #1677ff; background: #e8f4ff; }
|
||||
.record-card__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
.record-card__tag--red { color: #cf1322; background: #fff1f0; }
|
||||
.record-card__images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.record-card__img {
|
||||
width: 80px; height: 80px; border-radius: 8px; object-fit: cover;
|
||||
border: 1px solid #f0f0f0; background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="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 class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<a class="nav-back" onclick="location.href='./text-chat.html'">‹</a>
|
||||
<span class="nav-title">咨询人档案</span>
|
||||
</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 class="page-content">
|
||||
|
||||
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">📋 基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">姓名</div>
|
||||
<div class="info-item__value">张小红</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">与本人关系</div>
|
||||
<div class="info-item__value">本人</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">性别</div>
|
||||
<div class="info-item__value">女</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">年龄</div>
|
||||
<div class="info-item__value">28岁</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">身高</div>
|
||||
<div class="info-item__value">163cm</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">体重</div>
|
||||
<div class="info-item__value">52kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="info-card">
|
||||
<div class="info-card__title">🏃 生活习惯</div>
|
||||
<div class="habit-tags">
|
||||
<span class="habit-tag habit-tag--good">不吸烟</span>
|
||||
<span class="habit-tag habit-tag--good">不饮酒</span>
|
||||
<span class="habit-tag habit-tag--good">饮食均衡</span>
|
||||
<span class="habit-tag habit-tag--good">睡眠良好</span>
|
||||
</div>
|
||||
</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 class="info-card">
|
||||
<div class="info-card__title">🩺 身体情况</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">过敏史</div>
|
||||
<div class="info-item__value info-item__value--danger">青霉素过敏</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">遗传史</div>
|
||||
<div class="info-item__value">无</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">既往史</div>
|
||||
<div class="info-item__value">无</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">其他疾病</div>
|
||||
<div class="info-item__value">无</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息 -->
|
||||
<div class="record-card">
|
||||
<div class="record-card__header">
|
||||
<div class="record-card__icon">📋</div>
|
||||
<div>
|
||||
<div class="record-card__title">颈椎不适咨询</div>
|
||||
<div class="record-card__date">2026-04-15 创建</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__body">
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">问题描述</div>
|
||||
<div class="record-card__text">长期伏案工作后颈部僵硬酸痛，偶有头晕，转头时有弹响感，近一周症状加重。</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">持续时间</div>
|
||||
<div class="record-card__tags">
|
||||
<span class="record-card__tag record-card__tag--orange">1-2周</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">检查资料</div>
|
||||
<div class="record-card__images">
|
||||
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23e8f4ff' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='11'%3E颈椎X光%3C/text%3E%3C/svg%3E" alt="颈椎X光">
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">就诊经历</div>
|
||||
<div class="record-card__text">
|
||||
<div class="info-grid" style="margin-top:4px">
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">医院名称</div>
|
||||
<div class="info-item__value">西安交大一附院</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">科室</div>
|
||||
<div class="info-item__value">骨科</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">疾病名称</div>
|
||||
<div class="info-item__value">颈椎病</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">期望帮助</div>
|
||||
<div class="record-card__text">希望了解颈椎不适的缓解方法，是否需要进一步检查，以及日常工作中的预防建议。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -28,6 +28,17 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-purple { background: #f9f0ff; color: #722ed1; }
|
||||
.filter-bar { display: flex; gap: 8px; padding: 10px 16px 0; flex-wrap: wrap; }
|
||||
.filter-chip { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; font-size: 12px; color: #666; background: #f5f5f5; border: 1px solid #e8e8e8; cursor: pointer; user-select: none; transition: all .2s; }
|
||||
.filter-chip.active { color: #1677ff; background: #e6f4ff; border-color: #91caff; }
|
||||
.filter-chip__check { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #d9d9d9; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
|
||||
.filter-chip.active .filter-chip__check { background: #1677ff; border-color: #1677ff; }
|
||||
.filter-chip.active .filter-chip__check::after { content: ''; display: block; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -1px; }
|
||||
.cc-role { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: middle; }
|
||||
.cc-role--expert { background: #e6f4ff; color: #1677ff; }
|
||||
.cc-role--assistant { background: #f9f0ff; color: #722ed1; }
|
||||
.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; }
|
||||
@@ -63,10 +74,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
|
||||
@@ -82,11 +90,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 待回复列表 -->
|
||||
<div id="panel-pending">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="filter-bar" data-panel="pending">
|
||||
<div class="filter-chip" data-filter="expert" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询专家</div>
|
||||
<div class="filter-chip" data-filter="assistant" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询小助手</div>
|
||||
<div class="filter-chip" data-filter="no-reply" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>专家未回复</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=expert -->
|
||||
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert'">
|
||||
<div class="cc-top">
|
||||
<div class="cc-avatar">👩</div>
|
||||
<div class="cc-info"><div class="cc-name">张小红</div><div class="cc-meta">研发部 · 工程师</div></div>
|
||||
<div class="cc-info"><div class="cc-name">张小红<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">研发部 · 工程师</div></div>
|
||||
<span class="tag tag-red">待回复</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
@@ -94,11 +107,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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'">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=expert -->
|
||||
<div class="consult-card" data-type="expert no-reply" onclick="location.href='./text-chat.html?type=expert'">
|
||||
<div class="cc-top">
|
||||
<div class="cc-avatar">👨</div>
|
||||
<div class="cc-info"><div class="cc-name">李建国</div><div class="cc-meta">市场部 · 销售专员</div></div>
|
||||
<div class="cc-info"><div class="cc-name">李建国<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">市场部 · 销售专员</div></div>
|
||||
<span class="tag tag-red">待回复</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
@@ -106,11 +119,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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'">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant -->
|
||||
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant'">
|
||||
<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>
|
||||
<div class="cc-info"><div class="cc-name">王芳<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">人事部 · HR专员</div></div>
|
||||
<span class="tag tag-red">待回复</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
@@ -123,11 +136,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 进行中列表 -->
|
||||
<div id="panel-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="filter-bar" data-panel="ongoing">
|
||||
<div class="filter-chip" data-filter="expert" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询专家</div>
|
||||
<div class="filter-chip" data-filter="assistant" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询小助手</div>
|
||||
<div class="filter-chip" data-filter="no-reply" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>专家未回复</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=expert -->
|
||||
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert'">
|
||||
<div class="cc-top">
|
||||
<div class="cc-avatar">👨</div>
|
||||
<div class="cc-info"><div class="cc-name">陈伟</div><div class="cc-meta">技术部 · 开发工程师</div></div>
|
||||
<div class="cc-info"><div class="cc-name">陈伟<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">技术部 · 开发工程师</div></div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
@@ -135,11 +153,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<span class="cc-time">昨天</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant -->
|
||||
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant'">
|
||||
<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>
|
||||
<div class="cc-info"><div class="cc-name">刘海波<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">生产部 · 操作工</div></div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
@@ -152,27 +170,43 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 已完成列表 -->
|
||||
<div id="panel-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./consult-done.html'">
|
||||
<div class="filter-bar" data-panel="done">
|
||||
<div class="filter-chip" data-filter="expert" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询专家</div>
|
||||
<div class="filter-chip" data-filter="assistant" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询小助手</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=expert&status=done -->
|
||||
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert&status=done'">
|
||||
<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 class="cc-info"><div class="cc-name">赵磊<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">运营部 · 运营专员</div></div>
|
||||
<span class="tag tag-green">已完成</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'">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant&status=done -->
|
||||
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant&status=done'">
|
||||
<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 class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">行政部 · 行政专员</div></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="cc-bottom">
|
||||
<div class="cc-preview">⭐⭐⭐⭐⭐ 解答很专业，谢谢！</div>
|
||||
<div class="cc-preview">解答很专业，谢谢！</div>
|
||||
<span class="cc-time">昨天</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant&status=done -->
|
||||
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant&status=done'">
|
||||
<div class="cc-top">
|
||||
<div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
|
||||
<div class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></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>
|
||||
@@ -209,6 +243,25 @@ function switchTab(el, panelId) {
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFilter(chip) {
|
||||
chip.classList.toggle('active');
|
||||
var bar = chip.closest('.filter-bar');
|
||||
var panel = bar.parentElement;
|
||||
applyFilter(panel);
|
||||
}
|
||||
|
||||
function applyFilter(panel) {
|
||||
var bar = panel.querySelector('.filter-bar');
|
||||
var activeFilters = [];
|
||||
bar.querySelectorAll('.filter-chip.active').forEach(function(c) { activeFilters.push(c.dataset.filter); });
|
||||
panel.querySelectorAll('.consult-card').forEach(function(card) {
|
||||
if (activeFilters.length === 0) { card.style.display = ''; return; }
|
||||
var types = (card.dataset.type || '').split(' ');
|
||||
var show = activeFilters.every(function(f) { return types.indexOf(f) !== -1; });
|
||||
card.style.display = show ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,6 +17,24 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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; }
|
||||
.consult-card-msg { background: #fff; border: 1px solid #E8ECF1; border-radius: 12px; padding: 14px; max-width: 260px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: border-color .2s; }
|
||||
.consult-card-msg:hover { border-color: #1677ff; }
|
||||
.consult-card-msg__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.consult-card-msg__avatar { width: 32px; height: 32px; border-radius: 50%; background: #EDE7F6; color: #5C3D99; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.consult-card-msg__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.consult-card-msg__body-info { font-size: 11px; color: #999; margin-bottom: 8px; }
|
||||
.consult-card-msg__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.consult-card-msg__desc { font-size: 12px; color: #722ed1; margin-bottom: 2px; }
|
||||
.consult-card-msg__duration { font-size: 11px; color: #999; margin-bottom: 10px; }
|
||||
.consult-card-msg__images { display: flex; gap: 8px; }
|
||||
.consult-card-msg__img { width: 64px; height: 64px; border-radius: 6px; background: #F5F5F5; border: 1px solid #E8E8E8; position: relative; overflow: hidden; }
|
||||
.consult-card-msg__img svg { width: 100%; height: 100%; }
|
||||
.consult-card-msg__img-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.45); color: #fff; font-size: 10px; text-align: center; padding: 2px 0; line-height: 1.4; }
|
||||
.quick-cat { font-size: 12px; padding: 4px 12px; border-radius: 14px; background: #f5f5f5; color: #666; cursor: pointer; user-select: none; transition: all .2s; }
|
||||
.quick-cat.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.quick-item { font-size: 13px; color: #1a1a1a; padding: 8px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.quick-item:last-child { border-bottom: none; }
|
||||
.quick-item:active { color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -34,31 +52,66 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
<span class="nav-title" id="nav-title">张小红 <span id="nav-tag" style="font-size:11px;font-weight:600;color:#1677ff;background:#e6f4ff;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">咨询专家</span></span>
|
||||
<!-- [交互] 点击跳转至: ./end-consult-dialog.html -->
|
||||
<button class="nav-right" onclick="location.href='./end-consult-dialog.html'">结束咨询</button>
|
||||
<button class="nav-right" id="end-consult-btn" 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 id="consult-info" class="consult-info" style="background:#f0f7ff;padding:10px 16px;flex-shrink:0;border-bottom:1px solid #ddeeff;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<!-- [交互] 点击收起/展开咨询信息详情 -->
|
||||
<button id="toggle-info-btn" onclick="toggleConsultInfo()" style="background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform .2s;">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">2026-04-09 10:20 发起</span>
|
||||
</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 id="consult-info-detail" style="display:flex;gap:12px;">
|
||||
<div style="flex:1;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:12px;color:#999;">员工</div>
|
||||
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">张小红 · 女 · 28岁 · 采油一厂</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:1px;background:#ddeeff;" id="info-divider"></div>
|
||||
<div style="flex:1;display:flex;align-items:center;gap:8px;" id="expert-info">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;">👨⚕</div>
|
||||
<div>
|
||||
<div style="font-size:12px;color:#999;">专家</div>
|
||||
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">王医生 · 主任医师 · 长庆医院 · 内科</div>
|
||||
</div>
|
||||
</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>
|
||||
<!-- [交互] 点击跳转至: ./employee-profile.html -->
|
||||
<div class="consult-card-msg" onclick="location.href='./employee-profile.html'">
|
||||
<div class="consult-card-msg__header">
|
||||
<div class="consult-card-msg__avatar">张</div>
|
||||
<div class="consult-card-msg__name">张小红(本人) · 28岁 · 女</div>
|
||||
</div>
|
||||
<div class="consult-card-msg__body-info">165cm · 55kg · 不吸烟 · 睡眠一般</div>
|
||||
<div class="consult-card-msg__title">持续性头痛咨询</div>
|
||||
<div class="consult-card-msg__desc">最近总是头痛，尤其是下午工作时特别明显</div>
|
||||
<div class="consult-card-msg__duration">持续时间：近1周</div>
|
||||
<div class="consult-card-msg__images">
|
||||
<div class="consult-card-msg__img"><svg viewBox="0 0 64 64" fill="none"><rect width="64" height="64" fill="#F5F5F5"/><rect x="12" y="16" width="40" height="32" rx="3" fill="#fff" stroke="#D9D9D9" stroke-width="1.2"/><circle cx="26" cy="28" r="5" fill="#D9D9D9"/><path d="M12 42l10-8 6 5 12-10 12 13" fill="#E8E8E8"/></svg><div class="consult-card-msg__img-label">图片</div></div>
|
||||
<div class="consult-card-msg__img"><svg viewBox="0 0 64 64" fill="none"><rect width="64" height="64" fill="#F5F5F5"/><rect x="12" y="16" width="40" height="32" rx="3" fill="#fff" stroke="#D9D9D9" stroke-width="1.2"/><circle cx="26" cy="28" r="5" fill="#D9D9D9"/><path d="M12 42l10-8 6 5 12-10 12 13" fill="#E8E8E8"/></svg><div class="consult-card-msg__img-label">图片</div></div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -82,14 +135,24 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</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 id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;max-height:200px;overflow-y:auto;">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;">
|
||||
<span class="quick-cat active" data-cat="all" onclick="filterQuick(this)">全部</span>
|
||||
<span class="quick-cat" data-cat="greet" onclick="filterQuick(this)">问候语</span>
|
||||
<span class="quick-cat" data-cat="notice" onclick="filterQuick(this)">注意事项</span>
|
||||
<span class="quick-cat" data-cat="end" onclick="filterQuick(this)">结束语</span>
|
||||
</div>
|
||||
<div id="quick-list">
|
||||
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好，请详细描述症状</div>
|
||||
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">您好，我是您的健康咨询助手</div>
|
||||
<div class="quick-item" data-cat="greet" onclick="useQuick(this)">请问有什么可以帮您的？</div>
|
||||
<div class="quick-item" data-cat="notice" onclick="useQuick(this)">建议及时就医检查</div>
|
||||
<div class="quick-item" data-cat="notice" onclick="useQuick(this)">请上传相关检查报告</div>
|
||||
<div class="quick-item" data-cat="notice" onclick="useQuick(this)">注意休息，保持规律作息</div>
|
||||
<div class="quick-item" data-cat="notice" onclick="useQuick(this)">饮食清淡，避免辛辣刺激</div>
|
||||
<div class="quick-item" data-cat="end" onclick="useQuick(this)">如有不适请及时复诊</div>
|
||||
<div class="quick-item" data-cat="end" onclick="useQuick(this)">祝您早日康复！</div>
|
||||
<div class="quick-item" data-cat="end" onclick="useQuick(this)">感谢您的咨询，再见</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,7 +176,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div id="input-area" 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>
|
||||
@@ -126,6 +189,59 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
|
||||
<script>
|
||||
/* 根据URL参数判断咨询类型，调整UI */
|
||||
var consultType = new URLSearchParams(location.search).get('type') || 'expert';
|
||||
if (consultType === 'assistant') {
|
||||
var tag = document.getElementById('nav-tag');
|
||||
tag.textContent = '咨询小助手';
|
||||
tag.style.color = '#722ed1';
|
||||
tag.style.background = '#f9f0ff';
|
||||
document.getElementById('info-divider').style.display = 'none';
|
||||
document.getElementById('expert-info').style.display = 'none';
|
||||
}
|
||||
|
||||
/* 已结束咨询：隐藏结束按钮、替换输入区、追加结束卡片 */
|
||||
var consultStatus = new URLSearchParams(location.search).get('status');
|
||||
if (consultStatus === 'done') {
|
||||
document.getElementById('end-consult-btn').style.display = 'none';
|
||||
// 隐藏输入区、常用语面板、媒体面板
|
||||
document.getElementById('input-area').style.display = 'none';
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
// 插入底部已结束提示条
|
||||
var endBar = document.createElement('div');
|
||||
endBar.style.cssText = 'background:#f5f5f5;border-top:1px solid #f0f0f0;padding:14px 16px;text-align:center;flex-shrink:0;';
|
||||
endBar.innerHTML = '<span style="font-size:13px;color:#999;">— 咨询已结束 —</span>';
|
||||
document.getElementById('input-area').insertAdjacentElement('afterend', endBar);
|
||||
// 在聊天区末尾追加结束卡片消息
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var endMsg = document.createElement('div');
|
||||
endMsg.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
endMsg.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:20px 24px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid #f0f0f0;text-align:center;">' +
|
||||
'<div style="margin:0 auto 10px;width:44px;height:44px;border-radius:10px;background:#52c41a;display:flex;align-items:center;justify-content:center;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12.5l4 4 8-8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>' +
|
||||
'<div style="font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;">已结束本次咨询</div>' +
|
||||
'<div style="font-size:12px;color:#999;line-height:1.5;">2026-04-15 09:35</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
scroll.appendChild(endMsg);
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleConsultInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
var detail = document.getElementById('consult-info-detail');
|
||||
var btn = document.getElementById('toggle-info-btn');
|
||||
detail.style.display = infoCollapsed ? 'none' : 'flex';
|
||||
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
// 收起时去掉底部间距
|
||||
detail.previousElementSibling.style.marginBottom = infoCollapsed ? '0' : '8px';
|
||||
}
|
||||
|
||||
// 页面加载时检查是否有待发送的专家名片
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var cardData = sessionStorage.getItem('pendingExpertCard');
|
||||
@@ -194,6 +310,14 @@ function useQuick(el) {
|
||||
document.getElementById('chat-input').value = el.textContent;
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
}
|
||||
function filterQuick(tab) {
|
||||
tab.parentElement.querySelectorAll('.quick-cat').forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
var cat = tab.dataset.cat;
|
||||
document.querySelectorAll('#quick-list .quick-item').forEach(function(item) {
|
||||
item.style.display = (cat === 'all' || item.dataset.cat === cat) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
|
||||
Reference in New Issue
Block a user