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();
|
||||
|
||||
@@ -61,6 +61,17 @@
|
||||
}
|
||||
/* 箭头图标 */
|
||||
.arrow-icon { flex-shrink: 0; }
|
||||
/* 分组展开收起 */
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.group-toggle { transition: transform 0.25s ease; font-size: 0; flex-shrink: 0; }
|
||||
.contacts-group.collapsed .group-toggle { transform: rotate(-90deg); }
|
||||
.contacts-group.collapsed .contact-item { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -94,7 +105,7 @@
|
||||
|
||||
<!-- 小助手分组 -->
|
||||
<div class="contacts-group" data-group="小助手">
|
||||
<div class="group-header">小助手</div>
|
||||
<div class="group-header" onclick="toggleGroup(this)">小助手<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
|
||||
<div class="contact-info">
|
||||
@@ -102,31 +113,54 @@
|
||||
<span class="contact-name">咨询小助手</span>
|
||||
<span class="tag tag-gray" style="font-size:10px;padding:1px 6px;">小助手</span>
|
||||
</div>
|
||||
<div class="contact-desc" style="color:#52c41a;">● 在线</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 咨询专家分组 -->
|
||||
<div class="contacts-group" data-group="咨询专家">
|
||||
<div class="group-header" onclick="toggleGroup(this)">咨询专家<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">刘汐</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">咨询专家</span>
|
||||
</div>
|
||||
<div class="contact-desc">主任医师·心内科·西京医院</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">刘博</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">咨询专家</span>
|
||||
</div>
|
||||
<div class="contact-desc">主任医师·心内科·西京医院</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 管理员分组 -->
|
||||
<div class="contacts-group" data-group="管理员">
|
||||
<div class="group-header">管理员</div>
|
||||
<div class="group-header" onclick="toggleGroup(this)">健康管理员<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff1f0,#ffb3b3);">👤</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">系统管理员</span>
|
||||
<span class="tag tag-red" style="font-size:10px;padding:1px 6px;">管理员</span>
|
||||
<span class="contact-name">王旭</span>
|
||||
<span class="tag tag-red" style="font-size:10px;padding:1px 6px;">健康管理员</span>
|
||||
</div>
|
||||
<div class="contact-desc">平台管理</div>
|
||||
<div class="contact-desc">第一采油厂·XXX作业区</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 操作人员分组 -->
|
||||
<div class="contacts-group" data-group="操作人员">
|
||||
<div class="group-header">操作人员</div>
|
||||
<div class="group-header" onclick="toggleGroup(this)">操作人员<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">🧑💼</div>
|
||||
<div class="contact-info">
|
||||
@@ -134,10 +168,9 @@
|
||||
<span class="contact-name">陈运营</span>
|
||||
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">运营部 · 运营专员</div>
|
||||
<div class="contact-desc">西安应急中心</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">👩💼</div>
|
||||
<div class="contact-info">
|
||||
@@ -145,42 +178,15 @@
|
||||
<span class="contact-name">王数据</span>
|
||||
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">数据部 · 数据分析师</div>
|
||||
<div class="contact-desc">西安应急中心</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 驻场人员分组 -->
|
||||
<div class="contacts-group" data-group="驻场人员">
|
||||
<div class="group-header">驻场人员</div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">刘驻场</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">健康顾问 · A栋驻场</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">赵驻场</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">健康顾问 · B栋驻场</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 专业人员分组 -->
|
||||
<div class="contacts-group" data-group="专业人员">
|
||||
<div class="group-header">专业人员</div>
|
||||
<div class="group-header" onclick="toggleGroup(this)">专业人员<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👨⚕️</div>
|
||||
<div class="contact-info">
|
||||
@@ -188,40 +194,72 @@
|
||||
<span class="contact-name">李主任</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">心内科 · 主任医师</div>
|
||||
<div class="contact-desc">主任医师 · 西安应急中心</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">👩⚕️</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">张护士长</span>
|
||||
<span class="contact-name">张明</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">内科 · 护士长</div>
|
||||
<div class="contact-desc">主治医师 · 西安应急中心</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item" style="border-bottom:none;">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">👨⚕️</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">孙营养师</span>
|
||||
<span class="contact-name">高谢琼</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">营养科 · 营养师</div>
|
||||
<div class="contact-desc">住院医师 · 西安应急中心</div>
|
||||
</div>
|
||||
<svg class="arrow-icon" 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>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 驻场人员分组 -->
|
||||
<div class="contacts-group" data-group="驻场人员">
|
||||
<div class="group-header" onclick="toggleGroup(this)">驻场人员<svg class="group-toggle" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M3 1.5l4.5 4.5-4.5 4.5"/></svg></div>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">刘汐</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">西京医院</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<span class="contact-name">刘博</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
|
||||
</div>
|
||||
<div class="contact-desc">宝石花医院</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换分组展开/收起
|
||||
*/
|
||||
function toggleGroup(headerEl) {
|
||||
headerEl.closest('.contacts-group').classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
/**
|
||||
* 通讯录搜索过滤功能
|
||||
* 根据输入关键词过滤联系人，隐藏不匹配的联系人及空分组
|
||||
|
||||
@@ -0,0 +1,294 @@
|
||||
<!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: #f5f7fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
color: #1a1a1a;
|
||||
padding: 32px;
|
||||
min-width: 1100px;
|
||||
}
|
||||
.page-header {
|
||||
text-align: center; margin-bottom: 32px;
|
||||
}
|
||||
.page-header h1 { font-size: 24px; font-weight: 700; color: #1a1a1a; }
|
||||
.page-header p { font-size: 14px; color: #8c8c8c; margin-top: 6px; }
|
||||
.legend {
|
||||
display: flex; justify-content: center; gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #595959; }
|
||||
.legend-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
|
||||
|
||||
/* 流程图容器 */
|
||||
.flowchart-wrap {
|
||||
display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: nowrap;
|
||||
}
|
||||
.flow-column {
|
||||
background: #fff; border-radius: 16px; padding: 24px 20px 28px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); min-width: 320px; max-width: 360px; flex: 1;
|
||||
}
|
||||
.flow-column-title {
|
||||
font-size: 16px; font-weight: 700; text-align: center; padding: 8px 0 16px;
|
||||
border-bottom: 2px solid #f0f0f0; margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 节点样式 */
|
||||
.node {
|
||||
position: relative; border-radius: 10px; padding: 10px 14px; margin: 0 auto;
|
||||
text-align: center; font-size: 13px; font-weight: 500; width: 90%;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.node:hover { transform: scale(1.03); }
|
||||
.node-entry { background: #e6f4ff; border: 1.5px solid #91caff; color: #0958d9; }
|
||||
.node-page { background: #f6ffed; border: 1.5px solid #b7eb8f; color: #389e0d; }
|
||||
.node-action { background: #fff7e6; border: 1.5px solid #ffd591; color: #d46b08; }
|
||||
.node-state { border-radius: 20px; padding: 7px 14px; font-size: 12px; }
|
||||
.node-state.s-progress { background: #e6f4ff; border: 1.5px solid #91caff; color: #1677ff; }
|
||||
.node-state.s-done { background: #f6ffed; border: 1.5px solid #b7eb8f; color: #52c41a; }
|
||||
.node-state.s-timeout { background: #fff7e6; border: 1.5px solid #ffd591; color: #fa8c16; }
|
||||
.node-state.s-cancel { background: #f5f5f5; border: 1.5px solid #d9d9d9; color: #8c8c8c; }
|
||||
.node-state.s-reject { background: #fff2f0; border: 1.5px solid #ffccc7; color: #ff4d4f; }
|
||||
.node-state.s-confirm { background: #f9f0ff; border: 1.5px solid #d3adf7; color: #722ed1; }
|
||||
.node-state.s-wait { background: #fff7e6; border: 1.5px solid #ffd591; color: #fa8c16; }
|
||||
.node-dialog { background: #fff0f6; border: 1.5px dashed #ffadd2; color: #c41d7f; border-radius: 10px; }
|
||||
.node-end { background: #f5f5f5; border: 1.5px solid #d9d9d9; color: #595959; border-radius: 20px; }
|
||||
|
||||
.file-tag {
|
||||
display: block; font-size: 10px; color: #8c8c8c; font-weight: 400; margin-top: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 箭头连接线 */
|
||||
.arrow-down {
|
||||
display: flex; flex-direction: column; align-items: center; padding: 6px 0;
|
||||
}
|
||||
.arrow-down .line { width: 2px; height: 18px; background: #d9d9d9; }
|
||||
.arrow-down .head { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #d9d9d9; }
|
||||
.arrow-label {
|
||||
font-size: 10px; color: #8c8c8c; background: #fff; padding: 0 4px; margin: -2px 0;
|
||||
}
|
||||
|
||||
/* 分支容器 */
|
||||
.branch-wrap {
|
||||
display: flex; gap: 10px; justify-content: center; margin: 0 -6px;
|
||||
}
|
||||
.branch { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
||||
.branch .node { width: 100%; font-size: 12px; padding: 8px 6px; }
|
||||
.branch .file-tag { font-size: 9px; }
|
||||
|
||||
/* 分支线 */
|
||||
.branch-line {
|
||||
display: flex; align-items: flex-start; justify-content: center; height: 24px; position: relative; width: 100%;
|
||||
}
|
||||
.branch-line::before {
|
||||
content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: #d9d9d9;
|
||||
}
|
||||
.branch-line .bl { position: absolute; top: 0; width: 2px; height: 24px; background: #d9d9d9; }
|
||||
.branch-line .bl-l { left: 25%; }
|
||||
.branch-line .bl-r { right: 25%; }
|
||||
.branch-line .bl-c { left: 50%; transform: translateX(-50%); }
|
||||
|
||||
.branch-line-3::before { left: 16.6%; right: 16.6%; }
|
||||
.branch-line-3 .bl-l { left: 16.6%; }
|
||||
.branch-line-3 .bl-r { right: 16.6%; }
|
||||
|
||||
.branch-line-5::before { left: 10%; right: 10%; }
|
||||
.branch-line-5 .bl-1 { left: 10%; }
|
||||
.branch-line-5 .bl-2 { left: 30%; }
|
||||
.branch-line-5 .bl-3 { left: 50%; transform: translateX(-50%); }
|
||||
.branch-line-5 .bl-4 { right: 30%; }
|
||||
.branch-line-5 .bl-5 { right: 10%; }
|
||||
|
||||
/* 状态分支 - 更紧凑 */
|
||||
.state-branches { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 -4px; }
|
||||
.state-branches .node-state { flex-shrink: 0; }
|
||||
|
||||
.section-label {
|
||||
font-size: 11px; color: #8c8c8c; text-align: center; margin: 12px 0 6px;
|
||||
border-top: 1px dashed #e8e8e8; padding-top: 10px;
|
||||
}
|
||||
|
||||
/* 起始大节点 */
|
||||
.node-start {
|
||||
background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff;
|
||||
border: none; font-size: 15px; font-weight: 700; padding: 14px; border-radius: 12px;
|
||||
width: 60%; margin: 0 auto;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.flowchart-wrap { flex-wrap: wrap; }
|
||||
.flow-column { max-width: 100%; min-width: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-header">
|
||||
<h1>员工健康咨询 — 完整业务流程图</h1>
|
||||
<p>覆盖咨询专家（图文 / 视频）与咨询小助手两大路径，标注页面文件与状态流转</p>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#e6f4ff;border:1px solid #91caff"></div>入口 / 导航页</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#f6ffed;border:1px solid #b7eb8f"></div>功能页面</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#fff7e6;border:1px solid #ffd591"></div>操作 / 选择</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#fff0f6;border:1px dashed #ffadd2"></div>弹窗 / 对话框</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#f5f5f5;border:1px solid #d9d9d9"></div>终态</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#e6f4ff;border:1px solid #91caff"></div>进行中</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#f6ffed;border:1px solid #b7eb8f"></div>已完成</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#fff7e6;border:1px solid #ffd591"></div>已超时/待开始</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#fff2f0;border:1px solid #ffccc7"></div>已拒绝</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="border-radius:10px;background:#f9f0ff;border:1px solid #d3adf7"></div>待确认</div>
|
||||
</div>
|
||||
|
||||
<!-- 起始节点 -->
|
||||
<div style="text-align:center;margin-bottom:8px;">
|
||||
<div class="node node-start">健康咨询首页<span class="file-tag" style="color:rgba(255,255,255,.7)">index.html</span></div>
|
||||
</div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<!-- 三列流程 -->
|
||||
<div class="flowchart-wrap">
|
||||
|
||||
<!-- ========== 图文咨询 ========== -->
|
||||
<div class="flow-column">
|
||||
<div class="flow-column-title" style="color:#0958d9">📝 咨询专家 — 图文咨询</div>
|
||||
|
||||
<div class="node node-entry">找专家<span class="file-tag">find-expert.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">按医院/科室/疾病</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-page">专家列表<span class="file-tag">expert-list.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-page">专家详情<span class="file-tag">expert-profile.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">点击「图文咨询」</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-action">选择咨询人 & 健康档案<span class="file-tag">select-person.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-state s-progress">进行中 — 图文聊天<span class="file-tag">text-chat.html</span></div>
|
||||
|
||||
<div class="section-label">咨询结束后的状态分支</div>
|
||||
|
||||
<div class="branch-line"><div class="bl bl-l"></div><div class="bl bl-c"></div><div class="bl bl-r"></div></div>
|
||||
<div class="branch-wrap">
|
||||
<div class="branch">
|
||||
<div class="node node-state s-timeout">已超时<span class="file-tag">record-detail-timeout.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-end">再次咨询</div>
|
||||
</div>
|
||||
<div class="branch">
|
||||
<div class="node node-state s-done">已完成·未评价<span class="file-tag">record-detail-unrated.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">评价</div><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-dialog">评价医生<span class="file-tag">rate-doctor.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-state s-done">已完成·已评价<span class="file-tag">record-detail-rated.html</span></div>
|
||||
</div>
|
||||
<div class="branch">
|
||||
<div class="node node-dialog">结束咨询确认<span class="file-tag">end-consult-dialog.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">确认结束</div><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-dialog">评价医生<span class="file-tag">rate-doctor.html</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 视频咨询 ========== -->
|
||||
<div class="flow-column">
|
||||
<div class="flow-column-title" style="color:#722ed1">🎥 咨询专家 — 视频咨询</div>
|
||||
|
||||
<div class="node node-entry">找专家<span class="file-tag">find-expert.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">按医院/科室/疾病</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-page">专家列表<span class="file-tag">expert-list.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-page">专家详情<span class="file-tag">expert-profile.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">点击「视频咨询」</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-action">预约视频咨询<span class="file-tag">video-booking.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">选择日期时段</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-action">选择咨询人 & 健康档案<span class="file-tag">select-person.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-page">预约成功<span class="file-tag">video-success.html</span></div>
|
||||
|
||||
<div class="section-label">视频咨询状态流转</div>
|
||||
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-state s-confirm">待确认<span class="file-tag">video-detail-confirming.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">医生确认</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-state s-wait">待开始<span class="file-tag">video-detail-pending.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">进入视频</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-state s-done">已完成<span class="file-tag">video-detail-done.html</span></div>
|
||||
|
||||
<div class="section-label">异常状态分支</div>
|
||||
<div class="branch-line"><div class="bl bl-l"></div><div class="bl bl-r"></div></div>
|
||||
<div class="branch-wrap">
|
||||
<div class="branch">
|
||||
<div class="node node-state s-cancel">已取消<span class="file-tag">video-detail-cancelled.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-end">重新预约</div>
|
||||
</div>
|
||||
<div class="branch">
|
||||
<div class="node node-state s-reject">已拒绝<span class="file-tag">video-detail-rejected.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
<div class="node node-end">重新预约</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 小助手咨询 ========== -->
|
||||
<div class="flow-column" style="max-width:300px;min-width:260px">
|
||||
<div class="flow-column-title" style="color:#389e0d">💬 咨询小助手</div>
|
||||
|
||||
<div class="node node-entry">首页点击「小助手」<span class="file-tag">index.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-state s-progress">进行中 — 小助手聊天<span class="file-tag">assistant-chat.html</span></div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="arrow-label">结束咨询</div><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-state s-done">已完成 — 历史记录<span class="file-tag">assistant-chat-history.html</span></div>
|
||||
|
||||
<div class="section-label">咨询记录入口</div>
|
||||
<div class="arrow-down"><div class="line"></div><div class="head"></div></div>
|
||||
|
||||
<div class="node node-entry">我的咨询<span class="file-tag">my-records.html</span></div>
|
||||
<div style="font-size:11px;color:#8c8c8c;text-align:center;margin-top:10px;line-height:1.8;">
|
||||
一级Tab：咨询专家 / 小助手<br>
|
||||
二级Tab（专家）：图文咨询 / 视频咨询<br>
|
||||
列表按状态跳转到对应详情页
|
||||
</div>
|
||||
|
||||
<div class="section-label">辅助页面</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:8px;">
|
||||
<div class="node node-dialog" style="width:100%">选择咨询人弹窗<span class="file-tag">select-person-dialog.html</span></div>
|
||||
<div class="node node-dialog" style="width:100%">选择体检报告弹窗<span class="file-tag">select-report-dialog.html</span></div>
|
||||
<div class="node node-dialog" style="width:100%">结束咨询确认弹窗<span class="file-tag">end-consult-dialog.html</span></div>
|
||||
<div class="node node-page" style="width:100%">专家评价列表<span class="file-tag">expert-reviews.html</span></div>
|
||||
<div class="node node-page" style="width:100%">医院详情<span class="file-tag">hospital-detail.html</span></div>
|
||||
<div class="node node-page" style="width:100%">搜索页<span class="file-tag">search.html</span></div>
|
||||
<div class="node node-page" style="width:100%">选择咨询记录<span class="file-tag">select-record.html</span></div>
|
||||
<div class="node node-page" style="width:100%">咨询人详情<span class="file-tag">consult-person-detail.html</span></div>
|
||||
<div class="node node-page" style="width:100%">添加健康档案<span class="file-tag">add-health-record.html</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部说明 -->
|
||||
<div style="text-align:center;margin-top:36px;font-size:12px;color:#bfbfbf;">
|
||||
员工端 · 健康咨询模块 · 业务流程图 | 共 <?php echo count(glob('*.html')); ?> 个页面
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 统计当前目录页面数（静态标注）
|
||||
document.querySelector('[style*="margin-top:36px"]').innerHTML =
|
||||
'员工端 · 健康咨询模块 · 业务流程图';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -264,8 +264,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="submit-btn active" id="submitBtn" onclick="submitConsult()">确定</button>
|
||||
<div class="bottom-bar" style="display:flex;gap:12px;">
|
||||
<button class="submit-btn" style="flex:1;background:#fff;color:#1677ff;border:1.5px solid #1677ff;" onclick="quickConsult()">快速咨询</button>
|
||||
<button class="submit-btn active" id="submitBtn" style="flex:1;" onclick="submitConsult()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_SCRIPT -->
|
||||
@@ -298,6 +299,11 @@
|
||||
|
||||
}
|
||||
|
||||
/** [交互] 快速咨询 - 跳转聊天页，不发送健康档案卡片 */
|
||||
function quickConsult() {
|
||||
window.location.href = 'text-chat.html?from=quick';
|
||||
}
|
||||
|
||||
/** [交互] 发送咨询 - 根据来源跳转不同页面 */
|
||||
function submitConsult() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>发送档案</title>
|
||||
<style>
|
||||
/* ===== 全局重置 ===== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; padding: 0 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
|
||||
}
|
||||
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; cursor: pointer; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
|
||||
|
||||
/* ===== 页面内容 ===== */
|
||||
.page-content { flex: 1; overflow-y: auto; padding: 12px 16px 90px; background: #f5f5f5; }
|
||||
|
||||
/* ===== 咨询人信息头 ===== */
|
||||
.person-header {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
|
||||
border-radius: 14px; background: #fff; border: 1.5px solid #e8e8e8; margin-bottom: 12px;
|
||||
}
|
||||
.person-avatar { font-size: 28px; flex-shrink: 0; }
|
||||
.person-info { flex: 1; }
|
||||
.person-name { font-size: 15px; font-weight: 600; color: #333; }
|
||||
.person-detail { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.person-tag { font-size: 11px; background: #f0f5ff; color: #1677ff; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 档案提示 ===== */
|
||||
.section-tip { font-size: 13px; color: #999; margin-bottom: 10px; }
|
||||
|
||||
/* ===== 档案卡片 ===== */
|
||||
.record-card {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
|
||||
border-radius: 14px; border: 1.5px solid #e8e8e8; background: #fff;
|
||||
margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.record-card:active, .record-card.selected { border-color: #1677ff; background: #f0f7ff; }
|
||||
.record-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.record-info { flex: 1; min-width: 0; }
|
||||
.record-name { font-size: 14px; font-weight: 600; color: #333; }
|
||||
.record-desc { font-size: 12px; color: #999; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.record-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.record-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
|
||||
.record-tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
.record-tag--blue { color: #1677ff; background: #e8f4ff; }
|
||||
.record-meta { font-size: 11px; color: #bbb; margin-top: 4px; }
|
||||
.record-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ddd; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; transition: all 0.15s; }
|
||||
.record-card.selected .record-check { background: #1677ff; border-color: #1677ff; }
|
||||
|
||||
/* ===== 底部操作栏 ===== */
|
||||
.bottom-bar {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: 12px 16px 34px; background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.submit-btn {
|
||||
width: 100%; padding: 13px; border-radius: 24px; font-size: 15px; font-weight: 600;
|
||||
border: none; cursor: pointer; text-align: center;
|
||||
}
|
||||
.submit-btn.disabled { background: #e0e0e0; color: #aaa; pointer-events: none; }
|
||||
.submit-btn.active { background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="history.back()">‹</a>
|
||||
<span class="nav-title">发送档案</span>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_CONTENT -->
|
||||
<div class="page-content">
|
||||
<!-- 当前咨询人信息 -->
|
||||
<div class="person-header">
|
||||
<span class="person-avatar">👤</span>
|
||||
<div class="person-info">
|
||||
<div class="person-name">张旭</div>
|
||||
<div class="person-detail">28岁 · 男 · 170cm · 65kg</div>
|
||||
</div>
|
||||
<span class="person-tag">父亲</span>
|
||||
</div>
|
||||
|
||||
<div class="section-tip">发送给医生的健康档案</div>
|
||||
|
||||
<!-- 档案1 -->
|
||||
<div class="record-card selected" onclick="selectRecord(this)">
|
||||
<div class="record-icon">📋</div>
|
||||
<div class="record-info">
|
||||
<div class="record-name">腰部疼痛咨询</div>
|
||||
<div class="record-desc">久坐后腰部持续酸痛，弯腰时加重</div>
|
||||
<div class="record-tags">
|
||||
<span class="record-tag record-tag--orange">持续时间：1-2周</span>
|
||||
</div>
|
||||
<div class="record-meta">2026-04-10 创建</div>
|
||||
</div>
|
||||
<span class="record-check">✓</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<!-- [交互] 点击发送选中的档案，返回聊天页 -->
|
||||
<button class="submit-btn active" id="submitBtn" onclick="sendRecord()">发送档案</button>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_SCRIPT -->
|
||||
<script>
|
||||
/** 选中档案 - 单选切换 */
|
||||
function selectRecord(card) {
|
||||
document.querySelectorAll('.record-card').forEach(function(c) { c.classList.remove('selected'); });
|
||||
card.classList.add('selected');
|
||||
}
|
||||
|
||||
/** [交互] 发送档案 - 返回聊天页 */
|
||||
function sendRecord() {
|
||||
history.back();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -176,8 +176,8 @@
|
||||
<div class="bubble">您好，我是张建国医生，请问有什么可以帮助您的？请详细描述您的症状。</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 发送健康档案卡片 - 点击跳转到咨询人档案详情页 -->
|
||||
<div class="msg-row mine">
|
||||
<!-- [交互] 发送健康档案卡片 - 点击跳转到咨询人档案详情页；快速咨询模式下隐藏 -->
|
||||
<div class="msg-row mine" id="healthRecordCard">
|
||||
<div class="msg-avatar">😊</div>
|
||||
<div class="bubble-record" style="cursor:pointer" onclick="location.href='consult-person-detail.html'">
|
||||
<div class="bubble-record__header">
|
||||
@@ -229,10 +229,13 @@
|
||||
<div class="plus-panel" id="plusPanel">
|
||||
<div class="plus-item"><div class="pi-icon">🖼️</div><div class="pi-label">图片</div></div>
|
||||
<div class="plus-item"><div class="pi-icon">📷</div><div class="pi-label">拍摄</div></div>
|
||||
<div class="plus-item"><div class="pi-icon">📄</div><div class="pi-label">发送文件</div></div>
|
||||
<div class="plus-item"><div class="pi-icon">📍</div><div class="pi-label">发送位置</div></div>
|
||||
<!-- [交互] 点击打开体检报告选择弹窗 -->
|
||||
<div class="plus-item" onclick="openReportSheet()"><div class="pi-icon">📋</div><div class="pi-label">体检报告</div></div>
|
||||
<!-- [交互] 跳转到选择档案弹窗页 -->
|
||||
<div class="plus-item" onclick="location.href='select-person.html'"><div class="pi-icon">📁</div><div class="pi-label">选择档案</div></div>
|
||||
<div class="plus-item" onclick="location.href='select-record.html'"><div class="pi-icon">📁</div><div class="pi-label">发送档案</div></div>
|
||||
|
||||
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -285,7 +288,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/** 根据 ?from 参数设置返回按钮目标 */
|
||||
/** 根据 ?from 参数设置返回按钮目标 & 快速咨询模式隐藏健康档案卡片 */
|
||||
(function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var from = params.get('from');
|
||||
@@ -294,6 +297,13 @@
|
||||
backBtn.href = 'record-detail.html';
|
||||
} else if (from === 'expert-profile') {
|
||||
backBtn.href = 'expert-profile.html';
|
||||
} else if (from === 'quick') {
|
||||
backBtn.href = 'select-person.html';
|
||||
}
|
||||
// 快速咨询模式：隐藏健康档案卡片消息
|
||||
if (from === 'quick') {
|
||||
var card = document.getElementById('healthRecordCard');
|
||||
if (card) card.style.display = 'none';
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@@ -133,23 +133,15 @@
|
||||
<div class="section-title">上午</div>
|
||||
<!-- [交互] 时间网格：点击选择可用时段，已约满不可选 -->
|
||||
<div class="time-grid">
|
||||
<div class="time-slot full"><div class="t">08:00</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot full"><div class="t">08:30</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'09:00')"><div class="t">09:00</div><div class="remain">剩余3名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'09:30')"><div class="t">09:30</div><div class="remain">剩余5名</div></div>
|
||||
<div class="time-slot active" onclick="selectSlot(this,'10:00')"><div class="t">10:00</div><div class="remain">剩余2名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'10:30')"><div class="t">10:30</div><div class="remain">剩余4名</div></div>
|
||||
</div>
|
||||
<div class="time-slot full"><div class="t">08:00~10:00</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'10:00~12:00')"><div class="t">10:00~12:00</div><div class="remain">剩余3名</div></div>
|
||||
</div>
|
||||
<!-- 下午时段 -->
|
||||
<div class="section-title">下午</div>
|
||||
<div class="time-grid" style="margin-bottom: 20px;">
|
||||
<div class="time-slot" onclick="selectSlot(this,'14:00')"><div class="t">14:00</div><div class="remain">剩余3名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'14:30')"><div class="t">14:30</div><div class="remain">剩余5名</div></div>
|
||||
<div class="time-slot full"><div class="t">15:00</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'15:30')"><div class="t">15:30</div><div class="remain">剩余1名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'16:00')"><div class="t">16:00</div><div class="remain">剩余6名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'16:30')"><div class="t">16:30</div><div class="remain">剩余4名</div></div>
|
||||
</div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'14:00~16:00')"><div class="t">14:00~16:00</div><div class="remain">剩余3名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'16:00~18:00')"><div class="t">16:00~18:00</div><div class="remain">剩余5名</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部确认栏 -->
|
||||
<div class="bottom-bar">
|
||||
|
||||
+3
-1
@@ -196,6 +196,7 @@ const SITE_MAP = [
|
||||
{ file:'archive-unit.html', label:'单位报表数据' },
|
||||
{ file:'archive-unit-detail.html', label:'单位报表明细' },
|
||||
{ file:'expert-statistics.html', label:'专家咨询统计' },
|
||||
{ file:'unit-statistics.html', label:'单位咨询统计' },
|
||||
{ file:'settlement.html', label:'咨询结算' },
|
||||
{ file:'settlement-add.html', label:'新增结算' },
|
||||
{ file:'settlement-report.html', label:'结算报表' },
|
||||
@@ -268,7 +269,8 @@ const SITE_MAP = [
|
||||
{ file:'rate-doctor.html', label:'评价医生' },
|
||||
{ file:'end-consult-dialog.html', label:'结束咨询弹窗', dialog:true },
|
||||
{ file:'select-person-dialog.html', label:'选择就诊人弹窗', dialog:true },
|
||||
{ file:'select-report-dialog.html', label:'选择报告弹窗', dialog:true }
|
||||
{ file:'select-report-dialog.html', label:'选择报告弹窗', dialog:true },
|
||||
{ file:'consult-flowchart.html', label:'咨询流程图' }
|
||||
]},
|
||||
{ name:'应急就医', dir:'employee-app/emergency-medical', pages:[] },
|
||||
{ name:'一线医疗', dir:'employee-app/frontline-medical', pages:[] },
|
||||
|
||||
@@ -95,8 +95,8 @@
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<nav class="top-bar__nav" id="topNav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
@@ -112,27 +112,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人咨询数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="6" width="12" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M5 6V4a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"/><path d="M6 10h4M8 9v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
单位咨询数据
|
||||
</a>
|
||||
</aside>
|
||||
<aside class="sidebar" id="sidebar"></aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ① 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="breadcrumb__sep">›</span>
|
||||
<span class="breadcrumb__cur">采油一厂</span>
|
||||
</div>
|
||||
<div class="breadcrumb" id="breadcrumb"></div>
|
||||
|
||||
<!-- ② 单位信息卡片 -->
|
||||
<div class="info-card">
|
||||
@@ -277,6 +263,59 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 根据来源参数动态渲染导航、侧边栏、面包屑
|
||||
var from = new URLSearchParams(location.search).get('from') || 'archive-unit';
|
||||
|
||||
// 顶部导航高亮
|
||||
var navLinks = document.querySelectorAll('#topNav a');
|
||||
navLinks.forEach(function(a) {
|
||||
if (from === 'unit-statistics' && a.getAttribute('href') === 'history-expert.html') {
|
||||
a.classList.add('active');
|
||||
} else if (from !== 'unit-statistics' && a.getAttribute('href') === 'archive-personal.html') {
|
||||
a.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 侧边栏
|
||||
var sidebarEl = document.getElementById('sidebar');
|
||||
if (from === 'unit-statistics') {
|
||||
sidebarEl.innerHTML =
|
||||
'<div class="sidebar-group-title">咨询数据</div>' +
|
||||
'<a href="history-expert.html" class="sidebar-item" style="justify-content:space-between;">' +
|
||||
'<div style="display:flex;align-items:center;gap:10px;"><svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>' +
|
||||
'<span style="font-size:10px;color:rgba(255,255,255,0.35);">▾</span>' +
|
||||
'</a>' +
|
||||
'<a href="consult-record.html" class="sidebar-item">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案' +
|
||||
'</a>' +
|
||||
'<a href="expert-statistics.html" class="sidebar-item">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计' +
|
||||
'</a>' +
|
||||
'<a href="unit-statistics.html" class="sidebar-item active">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计' +
|
||||
'</a>' +
|
||||
'<a href="settlement.html" class="sidebar-item">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算' +
|
||||
'</a>';
|
||||
} else {
|
||||
sidebarEl.innerHTML =
|
||||
'<div class="sidebar-group-title">档案</div>' +
|
||||
'<a href="archive-personal.html" class="sidebar-item">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>个人咨询数据' +
|
||||
'</a>' +
|
||||
'<a href="archive-unit.html" class="sidebar-item active">' +
|
||||
'<svg viewBox="0 0 16 16" fill="none" width="16" height="16"><rect x="2" y="6" width="12" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M5 6V4a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"/><path d="M6 10h4M8 9v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>单位报表数据' +
|
||||
'</a>';
|
||||
}
|
||||
|
||||
// 面包屑
|
||||
var bc = document.getElementById('breadcrumb');
|
||||
if (from === 'unit-statistics') {
|
||||
bc.innerHTML = '<a href="unit-statistics.html">单位咨询统计</a><span class="breadcrumb__sep">›</span><span class="breadcrumb__cur">采油一厂</span>';
|
||||
} else {
|
||||
bc.innerHTML = '<a href="archive-unit.html">单位报表数据</a><span class="breadcrumb__sep">›</span><span class="breadcrumb__cur">采油一厂</span>';
|
||||
}
|
||||
|
||||
// [交互] 查看个人明细，弹窗加载 archive-personal-detail.html
|
||||
function openPersonDetail(empNo) {
|
||||
document.getElementById('overlayFrame').src = 'archive-personal-detail.html';
|
||||
|
||||
@@ -445,7 +445,7 @@
|
||||
|
||||
// [交互] 查看明细，跳转到单位明细页
|
||||
function viewDetail(unitName) {
|
||||
window.location.href = 'archive-unit-detail.html';
|
||||
window.location.href = 'archive-unit-detail.html?from=archive-unit';
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html" class="active">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html" class="active">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -63,9 +63,11 @@
|
||||
.chat-expert-info{display:flex;align-items:center;gap:6px;font-size:var(--font-xs);color:var(--text-secondary);width:100%;margin-top:2px;}
|
||||
.chat-expert-info span{white-space:nowrap;}
|
||||
/* 咨询结束卡片（员工侧发出） */
|
||||
.end-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);}
|
||||
.end-card__icon{width:36px;height:36px;border-radius:50%;background:#FFF1F0;color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.end-card__text{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;}
|
||||
.end-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-sm);min-width:180px;}
|
||||
.end-card__icon{width:44px;height:44px;border-radius:10px;background:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.end-card__icon svg{width:24px;height:24px;}
|
||||
.end-card__text{font-size:var(--font-base);color:var(--text-primary);font-weight:600;margin-top:4px;}
|
||||
.end-card__time{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.chat-header__actions{display:flex;gap:8px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
@@ -98,6 +100,24 @@
|
||||
.expert-card-msg__dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.expert-card-msg__btn{font-size:var(--font-xs);color:var(--primary);cursor:pointer;}
|
||||
|
||||
/* 咨询信息卡片（员工发出的第一条消息） */
|
||||
.consult-card{background:#fff;border:1px solid #E8ECF1;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm);min-width:280px;max-width:340px;cursor:pointer;transition:border-color .2s;}
|
||||
.consult-card:hover{border-color:var(--primary);}
|
||||
.consult-card__header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
|
||||
.consult-card__avatar{width:36px;height:36px;border-radius:50%;background:#EDE7F6;color:#5C3D99;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
|
||||
.consult-card__avatar svg{width:20px;height:20px;}
|
||||
.consult-card__name{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.consult-card__meta{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
.consult-card__body-info{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #F0F0F0;}
|
||||
.consult-card__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin-bottom:6px;}
|
||||
.consult-card__desc{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:4px;}
|
||||
.consult-card__duration{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.consult-card__duration b{color:var(--text-primary);font-weight:500;}
|
||||
.consult-card__images{display:flex;gap:8px;margin-top:12px;}
|
||||
.consult-card__img{width:64px;height:64px;border-radius:var(--radius-sm);background:#F5F5F5;border:1px solid #E8E8E8;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:relative;}
|
||||
.consult-card__img svg{width:24px;height:24px;color:#bbb;}
|
||||
.consult-card__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.2;}
|
||||
|
||||
/* 底部输入区 */
|
||||
.chat-footer{background:#fff;border-top:1px solid var(--border);padding:12px 20px;flex-shrink:0;}
|
||||
.chat-toolbar{display:flex;gap:8px;margin-bottom:8px;}
|
||||
@@ -145,7 +165,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html" class="active">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
@@ -263,11 +283,6 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M2 13c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
咨询人档案
|
||||
</button>
|
||||
<!-- [交互] 仅咨询专家时显示，点击发送短信 -->
|
||||
<button class="btn btn-default btn-sm" id="btnSendSms">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1.5 3.5h11v7.5h-11z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M1.5 3.5L7 8l5.5-4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发送短信
|
||||
</button>
|
||||
<!-- [交互] 点击结束当前咨询；已结束时置灰不可点 -->
|
||||
<button class="btn btn-default btn-sm" id="btnEndConsult" style="color:var(--danger);border-color:var(--danger);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.2"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
@@ -297,7 +312,16 @@
|
||||
<div class="msg__avatar emp">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李明（采油二厂）</div>
|
||||
<div class="msg__bubble">我体检报告显示空腹血糖6.8，这是糖尿病吗？</div>
|
||||
<div class="consult-card" onclick="openOverlay('employee-profile-dialog.html',680,720)">
|
||||
<div class="consult-card__header">
|
||||
<div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div>
|
||||
<div><div class="consult-card__name">李明(本人) · 35岁 · 男</div><div class="consult-card__meta">170cm · 72kg · 不吸烟 · 睡眠一般</div></div>
|
||||
</div>
|
||||
<div class="consult-card__title">血糖偏高咨询</div>
|
||||
<div class="consult-card__desc">体检报告显示空腹血糖6.8，想了解是否属于糖尿病</div>
|
||||
<div class="consult-card__duration">持续时间：<b>近1个月</b></div>
|
||||
<div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div>
|
||||
</div>
|
||||
<div class="msg__time">10:25</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -429,12 +453,36 @@ convContents[0] = document.getElementById('chatBody').innerHTML;
|
||||
convContents[1] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 09:40</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">09:40</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">最近总是头疼，尤其是下午比较严重，已经持续一周了。</div><div class="msg__time">09:42</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="consult-card" onclick="openOverlay(\'employee-profile-dialog.html\',680,720)"><div class="consult-card__header"><div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div><div><div class="consult-card__name">张伟(本人) · 42岁 · 男</div><div class="consult-card__meta">175cm · 78kg · 不吸烟 · 睡眠不好</div></div></div><div class="consult-card__title">持续性头痛咨询</div><div class="consult-card__desc">最近总是头疼，尤其是下午比较严重，已经持续一周</div><div class="consult-card__duration">持续时间：<b>1周</b></div><div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div></div><div class="msg__time">09:42</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">请问头疼的位置是前额、太阳穴还是后脑勺？有没有伴随恶心、视力模糊等情况？平时睡眠和用眼情况如何？</div><div class="msg__time">09:44</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">主要是太阳穴两侧，有时候会恶心。最近加班比较多，睡眠不太好。</div><div class="msg__time">09:50</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">根据您的描述，可能是紧张性头痛，与疲劳和睡眠不足有关。建议：<br>1. 保证充足睡眠，每天7-8小时<br>2. 适当放松，避免长时间伏案<br>3. 如持续不缓解，建议做头颅CT排查</div><div class="msg__time">09:52</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="msg__bubble">好的，谢谢！我先注意休息看看。</div><div class="msg__time">09:55</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="end-card"><div class="end-card__icon">✕</div><div class="end-card__text">本次咨询已结束</div></div><div class="msg__time">09:58</div></div></div>';
|
||||
+ '<div class="msg"><div class="msg__avatar emp">张</div><div class="msg__content"><div class="msg__name">张伟（钻井工程公司）</div><div class="end-card"><div class="end-card__icon"><svg 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 class="end-card__text">已结束本次咨询</div><div class="end-card__time">2026-04-10 09:58</div></div><div class="msg__time">09:58</div></div></div>';
|
||||
|
||||
convContents[2] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 11:05</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">11:05</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">王</div><div class="msg__content"><div class="msg__name">王芳（长庆油田总医院）</div><div class="consult-card" onclick="openOverlay(\'employee-profile-dialog.html\',680,720)"><div class="consult-card__header"><div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div><div><div class="consult-card__name">王芳(本人) · 29岁 · 女</div><div class="consult-card__meta">162cm · 52kg · 不吸烟 · 睡眠良好</div></div></div><div class="consult-card__title">月经不调咨询</div><div class="consult-card__desc">近三个月月经周期不规律，经量偏少</div><div class="consult-card__duration">持续时间：<b>3个月</b></div><div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div></div><div class="msg__time">11:07</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">请问您最近有没有压力较大、作息不规律的情况？有没有服用什么药物？</div><div class="msg__time">11:09</div></div></div>';
|
||||
|
||||
convContents[3] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 10:50</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">10:50</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">赵</div><div class="msg__content"><div class="msg__name">赵静（第五采气厂）</div><div class="consult-card" onclick="openOverlay(\'employee-profile-dialog.html\',680,720)"><div class="consult-card__header"><div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div><div><div class="consult-card__name">赵静(本人) · 38岁 · 女</div><div class="consult-card__meta">165cm · 58kg · 不吸烟 · 睡眠一般</div></div></div><div class="consult-card__title">颈椎疼痛咨询</div><div class="consult-card__desc">长期伏案工作导致颈椎酸痛，偶尔手臂发麻</div><div class="consult-card__duration">持续时间：<b>半年</b></div><div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div></div><div class="msg__time">10:52</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">颈椎问题很常见，请问您之前有做过颈椎X光或MRI检查吗？手臂发麻是单侧还是双侧？</div><div class="msg__time">10:54</div></div></div>';
|
||||
|
||||
convContents[4] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 10:35</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">10:35</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">刘</div><div class="msg__content"><div class="msg__name">刘洋（勘探开发研究院）</div><div class="consult-card" onclick="openOverlay(\'employee-profile-dialog.html\',680,720)"><div class="consult-card__header"><div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div><div><div class="consult-card__name">刘洋(本人) · 45岁 · 男</div><div class="consult-card__meta">178cm · 85kg · 吸烟 · 睡眠不好</div></div></div><div class="consult-card__title">胸闷气短咨询</div><div class="consult-card__desc">近期活动后感觉胸闷气短，上楼梯时明显加重</div><div class="consult-card__duration">持续时间：<b>2周</b></div><div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div></div><div class="msg__time">10:37</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">胸闷气短需要重视，请问您有高血压、高血脂或糖尿病病史吗？家族中有心脏病史吗？</div><div class="msg__time">10:39</div></div></div>';
|
||||
|
||||
convContents[5] = ''
|
||||
+ '<div class="system-msg">会话开始 · 2026-04-10 11:20</div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div><div class="msg__time">11:20</div></div></div>'
|
||||
+ '<div class="msg"><div class="msg__avatar emp">陈</div><div class="msg__content"><div class="msg__name">陈强（采油三厂）</div><div class="consult-card" onclick="openOverlay(\'employee-profile-dialog.html\',680,720)"><div class="consult-card__header"><div class="consult-card__avatar"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M3 18c0-3.9 3.1-7 7-7s7 3.1 7 7" stroke="currentColor" stroke-width="1.4"/></svg></div><div><div class="consult-card__name">陈强(本人) · 31岁 · 男</div><div class="consult-card__meta">172cm · 68kg · 不吸烟 · 睡眠良好</div></div></div><div class="consult-card__title">皮肤过敏咨询</div><div class="consult-card__desc">手臂和颈部出现红色皮疹，伴有瘙痒</div><div class="consult-card__duration">持续时间：<b>3天</b></div><div class="consult-card__images"><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div><div class="consult-card__img"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="consult-card__img-label">图片</div></div></div></div><div class="msg__time">11:22</div></div></div>'
|
||||
+ '<div class="msg right"><div class="msg__avatar asst">助</div><div class="msg__content"><div class="msg__name">健康小助手</div><div class="msg__bubble">请问最近有没有接触新的化学品、更换洗涤用品或食用容易过敏的食物？之前有过敏史吗？</div><div class="msg__time">11:24</div></div></div>';
|
||||
|
||||
/* 各对话的状态配置：tag文字 + 是否已结束 */
|
||||
var convStatus = {
|
||||
@@ -488,7 +536,6 @@ function selectConv(el, idx) {
|
||||
} else {
|
||||
empInfo.style.display = 'none';
|
||||
}
|
||||
document.getElementById('btnSendSms').style.display = status.type === 'expert' ? '' : 'none';
|
||||
var btnEnd = document.getElementById('btnEndConsult');
|
||||
if (status.ended) {
|
||||
btnEnd.disabled = true;
|
||||
|
||||
@@ -37,16 +37,16 @@
|
||||
.archive-value{color:#333;flex:1;}
|
||||
.archive-tag{display:inline-block;background:var(--primary-light);color:var(--primary);border-radius:20px;padding:2px 12px;font-size:var(--font-xs);}
|
||||
.archive-files{display:flex;gap:12px;flex-wrap:wrap;}
|
||||
.file-card{width:100px;height:72px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);cursor:pointer;}
|
||||
.file-card--blue{background:#E6F7FF;color:var(--primary);border:1px solid #BAE7FF;}
|
||||
.file-card--yellow{background:#FFFBE6;color:#FA8C16;border:1px solid #FFE58F;}
|
||||
.archive-img{width:80px;height:80px;border-radius:var(--radius-sm);background:#F5F5F5;border:1px solid #E8E8E8;position:relative;overflow:hidden;cursor:pointer;}
|
||||
.archive-img svg{width:100%;height:100%;}
|
||||
.archive-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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section__title">基本信息</div>
|
||||
<div class="section__title">员工信息</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label">姓名</td><td class="value">张伟</td>
|
||||
@@ -132,8 +132,8 @@
|
||||
<div class="archive-row archive-row--top">
|
||||
<span class="archive-label">检查资料</span>
|
||||
<div class="archive-files">
|
||||
<div class="file-card file-card--blue">检查报告</div>
|
||||
<div class="file-card file-card--yellow">患处照片</div>
|
||||
<div class="archive-img"><svg viewBox="0 0 80 80" fill="none"><rect width="80" height="80" fill="#F5F5F5"/><rect x="16" y="20" width="48" height="40" rx="4" fill="#fff" stroke="#D9D9D9" stroke-width="1.5"/><circle cx="32" cy="36" r="6" fill="#D9D9D9"/><path d="M16 52l12-10 8 6 14-12 14 16" fill="#E8E8E8"/></svg><div class="archive-img__label">图片</div></div>
|
||||
<div class="archive-img"><svg viewBox="0 0 80 80" fill="none"><rect width="80" height="80" fill="#F5F5F5"/><rect x="16" y="20" width="48" height="40" rx="4" fill="#fff" stroke="#D9D9D9" stroke-width="1.5"/><circle cx="32" cy="36" r="6" fill="#D9D9D9"/><path d="M16 52l12-10 8 6 14-12 14 16" fill="#E8E8E8"/></svg><div class="archive-img__label">图片</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="archive-row archive-row--divided">
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html" class="active">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html" class="active">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询·小助手 - 历史咨询 | 健康长庆原型</title>
|
||||
<title>专家咨询·小助手 - 咨询记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
@@ -109,7 +109,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html" class="active">历史咨询</a>
|
||||
<a href="history-consult.html" class="active">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="history-consult.html">咨询记录</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html" class="active">短信发送</a>
|
||||
|
||||
@@ -121,6 +121,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -122,6 +122,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -119,6 +119,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -109,6 +109,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -145,6 +145,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -140,6 +140,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -118,6 +118,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -162,6 +162,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -92,6 +92,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -113,6 +113,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -121,6 +121,9 @@
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,453 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询 - 单位咨询统计 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 汇总卡片 */
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:var(--font-xxl);font-weight:700;margin-top:8px;}
|
||||
.blue{color:var(--primary);}
|
||||
.green{color:var(--success);}
|
||||
.orange{color:var(--warning);}
|
||||
.stat-card__trend{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
thead th.sortable{cursor:pointer;}
|
||||
thead th.sortable:hover{color:var(--primary);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;box-shadow:-2px 0 4px rgba(0,0,0,0.04);}
|
||||
.col-fixed-3::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;background:linear-gradient(to right,rgba(0,0,0,0.04),transparent);pointer-events:none;}
|
||||
.rank-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:700;}
|
||||
.rank-1{background:#FAAD14;color:#fff;}
|
||||
.rank-2{background:#C0C0C0;color:#fff;}
|
||||
.rank-3{background:#CD7F32;color:#fff;}
|
||||
.rank-n{background:var(--background);color:var(--text-secondary);}
|
||||
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:100px;}
|
||||
.progress-fill{height:100%;background:var(--primary);border-radius:3px;}
|
||||
.amount{font-weight:600;color:var(--text-primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">咨询数据</div>
|
||||
<a href="history-expert.html" class="sidebar-item sidebar-item--parent">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▾</span>
|
||||
</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="unit-statistics.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
|
||||
<!-- [交互] Tab 切换二级单位 / 三级单位维度 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('unit',this)">二级单位</div>
|
||||
<div class="tab-item" onclick="switchTab('dept',this)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 二级单位面板 ========== -->
|
||||
<div id="panel-unit" class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
<option>2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<option>勘探开发研究院</option>
|
||||
<option>机关事务服务中心</option>
|
||||
<option>天然气开采厂</option>
|
||||
<option>长庆石化公司</option>
|
||||
<option>工程技术研究院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">二级单位咨询数据列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">单位名称</th>
|
||||
<th class="col-fixed col-fixed-3">员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-1">1</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">623</td><td>2,341</td><td>7,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:72%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">72%</span></div></td>
|
||||
<td><span class="amount">¥ 46,820</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-2">2</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">558</td><td>1,986</td><td>6,540</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:65%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">65%</span></div></td>
|
||||
<td><span class="amount">¥ 39,720</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-3">3</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油三厂</td><td class="col-fixed col-fixed-3">502</td><td>1,675</td><td>5,890</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:58%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">58%</span></div></td>
|
||||
<td><span class="amount">¥ 33,500</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">4</span></td>
|
||||
<td class="col-fixed col-fixed-2">勘探开发研究院</td><td class="col-fixed col-fixed-3">389</td><td>1,203</td><td>4,210</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:45%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">45%</span></div></td>
|
||||
<td><span class="amount">¥ 24,060</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">5</span></td>
|
||||
<td class="col-fixed col-fixed-2">机关事务服务中心</td><td class="col-fixed col-fixed-3">312</td><td>876</td><td>3,150</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 17,520</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">6</span></td>
|
||||
<td class="col-fixed col-fixed-2">天然气开采厂</td><td class="col-fixed col-fixed-3">278</td><td>743</td><td>2,680</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 14,860</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">7</span></td>
|
||||
<td class="col-fixed col-fixed-2">长庆石化公司</td><td class="col-fixed col-fixed-3">245</td><td>612</td><td>2,190</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:28%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">28%</span></div></td>
|
||||
<td><span class="amount">¥ 12,240</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">8</span></td>
|
||||
<td class="col-fixed col-fixed-2">工程技术研究院</td><td class="col-fixed col-fixed-3">198</td><td>487</td><td>1,730</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:22%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">22%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 三级单位面板 ========== -->
|
||||
<div id="panel-dept" class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
<option>2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<option>勘探开发研究院</option>
|
||||
<option>机关事务服务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部部门</option>
|
||||
<option>生产一队</option>
|
||||
<option>生产二队</option>
|
||||
<option>综合管理部</option>
|
||||
<option>安全环保部</option>
|
||||
<option>地质研究室</option>
|
||||
<option>物探研究室</option>
|
||||
<option>财务部</option>
|
||||
<option>后勤服务部</option>
|
||||
<option>行政事务管理处</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">三级单位咨询数据列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">所属单位</th>
|
||||
<th class="col-fixed col-fixed-3">部门名称</th>
|
||||
<th>员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-1">1</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">生产一队</td><td>186</td><td>712</td><td>2,430</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:68%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">68%</span></div></td>
|
||||
<td><span class="amount">¥ 14,240</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-2">2</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">生产二队</td><td>174</td><td>658</td><td>2,180</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:63%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">63%</span></div></td>
|
||||
<td><span class="amount">¥ 13,160</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-3">3</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">生产一队</td><td>163</td><td>598</td><td>1,960</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:57%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">57%</span></div></td>
|
||||
<td><span class="amount">¥ 11,960</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">4</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油三厂</td><td class="col-fixed col-fixed-3">生产二队</td><td>158</td><td>543</td><td>1,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:52%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">52%</span></div></td>
|
||||
<td><span class="amount">¥ 10,860</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">5</span></td>
|
||||
<td class="col-fixed col-fixed-2">勘探开发研究院</td><td class="col-fixed col-fixed-3">地质研究室</td><td>142</td><td>487</td><td>1,640</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:47%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">47%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">6</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">安全环保部</td><td>136</td><td>432</td><td>1,450</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:43%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">43%</span></div></td>
|
||||
<td><span class="amount">¥ 8,640</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">7</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">综合管理部</td><td>128</td><td>378</td><td>1,260</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 7,560</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">8</span></td>
|
||||
<td class="col-fixed col-fixed-2">机关事务服务中心</td><td class="col-fixed col-fixed-3">综合管理部</td><td>115</td><td>312</td><td>1,080</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 6,240</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail()">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 142 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function switchTab(type, el) {
|
||||
document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('panel-' + type).classList.add('active');
|
||||
}
|
||||
|
||||
// [交互] 查看明细，跳转到单位明细页
|
||||
function viewDetail() {
|
||||
window.location.href = 'archive-unit-detail.html?from=unit-statistics';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user