拆解专家端原型为独立页面文件
将 expert-app.html 单体原型按项目规范拆解为 20 个独立自包含 HTML 文件， 分别放置到 workbench/expert、knowledge、ai-assistant、message、profile 目录下， 删除已被替代的 .gitkeep 占位文件。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-BLB5287\FP
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
d764ababf9
commit
6eecd54f49
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI助手</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; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ========== 底部Tab栏样式 ========== */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #722ed1; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 紫色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#722ed1,#531dab);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">智能辅助</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">AI 助手</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天内容区 -->
|
||||
<div class="scroll-content" id="ai-scroll" style="padding:12px 16px;">
|
||||
<!-- AI欢迎消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:16px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#722ed1,#531dab);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🤖</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">AI 助手</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:12px 14px;font-size:14px;color:#1a1a1a;max-width:240px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.6;">您好，我是您的AI医疗助手。我可以帮您查询医学知识、辅助诊断分析、提供用药参考。请问有什么可以帮您？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷提问标签 -->
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:8px;text-align:center;">快捷提问</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center;">
|
||||
<div onclick="aiQuickAsk(this)" style="background:#f5f0ff;color:#722ed1;font-size:12px;padding:7px 14px;border-radius:16px;cursor:pointer;border:1px solid #d3adf7;">偏头痛的鉴别诊断</div>
|
||||
<div onclick="aiQuickAsk(this)" style="background:#f5f0ff;color:#722ed1;font-size:12px;padding:7px 14px;border-radius:16px;cursor:pointer;border:1px solid #d3adf7;">高血压用药建议</div>
|
||||
<div onclick="aiQuickAsk(this)" style="background:#f5f0ff;color:#722ed1;font-size:12px;padding:7px 14px;border-radius:16px;cursor:pointer;border:1px solid #d3adf7;">血脂异常处理方案</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户提问 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生</div>
|
||||
<div style="background:#722ed1;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">偏头痛和紧张性头痛如何鉴别？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#722ed1,#531dab);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🤖</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">AI 助手</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:12px 14px;font-size:13px;color:#1a1a1a;max-width:240px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.7;"><b>偏头痛</b>：单侧搏动性疼痛，中重度，伴恶心/呕吐/畏光，持续4–72小时，活动加重。<br><br><b>紧张性头痛</b>：双侧压迫性/紧箍感，轻中度，不伴恶心，活动不加重。<br><br>关键鉴别点：搏动性 vs 压迫性，单侧 vs 双侧，是否伴随症状。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- AI输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:10px 12px 16px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input id="ai-input" type="text" placeholder="向AI助手提问..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:10px 14px;font-size:14px;outline:none;color:#1a1a1a;" onkeydown="if(event.key==='Enter')sendAiMsg()" />
|
||||
<button onclick="sendAiMsg()" style="width:38px;height:38px;border-radius:50%;background:#722ed1;border:none;font-size:16px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../workbench/expert/index.html">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../knowledge/index.html">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
<a class="tab-item active" href="./index.html">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../message/index.html">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../profile/index.html">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 发送AI消息
|
||||
* 获取输入框内容，生成用户气泡和模拟的AI回复
|
||||
*/
|
||||
function sendAiMsg() {
|
||||
var input = document.getElementById('ai-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
var scroll = document.getElementById('ai-scroll');
|
||||
|
||||
// 创建用户消息气泡
|
||||
var userBubble = document.createElement('div');
|
||||
userBubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
userBubble.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:#722ed1;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div>' +
|
||||
'</div>';
|
||||
// 插入到最后一个子元素（底部间距div）之前
|
||||
scroll.insertBefore(userBubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
|
||||
// 延迟800ms模拟AI正在思考，然后显示回复
|
||||
setTimeout(function() {
|
||||
var aiBubble = document.createElement('div');
|
||||
aiBubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;';
|
||||
aiBubble.innerHTML =
|
||||
'<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#722ed1,#531dab);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🤖</div>' +
|
||||
'<div>' +
|
||||
'<div style="font-size:11px;color:#999;margin-bottom:4px;">AI 助手</div>' +
|
||||
'<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:240px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.6;">正在分析您的问题，请稍候…</div>' +
|
||||
'</div>';
|
||||
scroll.insertBefore(aiBubble, scroll.lastElementChild);
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
/**
|
||||
* 快捷提问
|
||||
* 将快捷标签的文本填入输入框并触发发送
|
||||
* @param {HTMLElement} el - 被点击的快捷标签元素
|
||||
*/
|
||||
function aiQuickAsk(el) {
|
||||
document.getElementById('ai-input').value = el.textContent;
|
||||
sendAiMsg();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="window.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" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<!-- 由JS动态填充内容 -->
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 知识库数据集合
|
||||
* 每个key对应一个知识条目的完整内容
|
||||
*/
|
||||
var KB_DATA = {
|
||||
'blood-routine': {
|
||||
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
|
||||
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0\u201310.0 \u00d7 10\u2079/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
|
||||
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5\u20135.5 \u00d7 10\u00b9\u00b2/L；女性：3.8\u20135.1 \u00d7 10\u00b9\u00b2/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
|
||||
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100\u2013300 \u00d7 10\u2079/L。降低有出血风险，升高见于炎症或血小板增多症。' }
|
||||
]
|
||||
},
|
||||
'ecg': {
|
||||
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
|
||||
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低\u22650.1mV提示心肌缺血；ST段抬高需警惕急性心肌梗死，需立即就医。' },
|
||||
{ color: '#fa8c16', name: '心律失常', desc: '包括窦性心动过速（>100次/分）、窦性心动过缓（<60次/分）、房颤等，需结合症状评估。' },
|
||||
{ color: '#1677ff', name: '束支传导阻滞', desc: '完全性左束支传导阻滞常提示器质性心脏病；右束支传导阻滞可见于正常人，需随访观察。' }
|
||||
]
|
||||
},
|
||||
'liver': {
|
||||
icon: '🔬', bg: '#fff7e6', title: '肝功能指标详解', cat: '体检知识', date: '2026-03-12',
|
||||
summary: '肝功能检查通过检测血液中多种酶和蛋白质水平，评估肝脏的合成、代谢和排泄功能，是发现肝脏疾病的重要手段。',
|
||||
items: [
|
||||
{ color: '#fa8c16', name: '谷丙转氨酶（ALT）', desc: '正常值：男\u226450 U/L，女\u226440 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
|
||||
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：\u226440 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
|
||||
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4\u201317.1 \u03bcmol/L。升高引起黄疸，需区分溶血性、肝细胞性和梗阻性黄疸。' }
|
||||
]
|
||||
},
|
||||
'glucose': {
|
||||
icon: '💉', bg: '#fff1f0', title: '血糖检测与糖尿病筛查', cat: '体检知识', date: '2026-03-08',
|
||||
summary: '血糖检测是糖尿病筛查和管理的核心手段，包括空腹血糖、餐后2小时血糖和糖化血红蛋白三项主要指标。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '空腹血糖（FPG）', desc: '正常：<6.1 mmol/L；糖尿病前期：6.1\u20137.0 mmol/L；糖尿病诊断标准：\u22657.0 mmol/L（需两次确认）。' },
|
||||
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8\u201311.1 mmol/L；\u226511.1 mmol/L结合症状可诊断糖尿病。' },
|
||||
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2\u20133个月平均血糖水平。正常<5.7%；5.7\u20136.4%为糖尿病前期；\u22656.5%可诊断糖尿病。' }
|
||||
]
|
||||
},
|
||||
'antihypertensive': {
|
||||
icon: '💊', bg: '#e6f4ff', title: '常用降压药物对比', cat: '药品知识', date: '2026-02-20',
|
||||
summary: '降压药物分为五大类，各有适应症和禁忌症，临床选药需结合患者合并症、年龄、肾功能等综合考量。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: 'ACEI/ARB类', desc: '代表药：依那普利、缬沙坦。适用于合并糖尿病、蛋白尿、心衰患者。禁用于妊娠、双侧肾动脉狭窄。' },
|
||||
{ color: '#52c41a', name: '钙通道阻滞剂（CCB）', desc: '代表药：氨氯地平、硝苯地平。适用于老年、单纯收缩期高血压。不良反应：踝部水肿、头痛。' },
|
||||
{ color: '#fa8c16', name: '利尿剂', desc: '代表药：氢氯噻嗪、螺内酯。适用于容量负荷过重、心衰患者。注意监测血钾、血糖、血尿酸。' }
|
||||
]
|
||||
},
|
||||
'statin': {
|
||||
icon: '🧪', bg: '#f6ffed', title: '他汀类药物使用指南', cat: '药品知识', date: '2026-02-15',
|
||||
summary: '他汀类药物是目前最有效的调脂药物，通过抑制HMG-CoA还原酶降低LDL-C，同时具有抗炎、稳定斑块等多效性作用。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '适应症与目标值', desc: '适用于LDL-C升高、动脉粥样硬化性心血管病（ASCVD）患者。高危患者LDL-C目标<1.8 mmol/L。' },
|
||||
{ color: '#fa8c16', name: '常用药物与剂量', desc: '阿托伐他汀10\u201380mg/日；瑞舒伐他汀5\u201340mg/日；辛伐他汀20\u201340mg/日（晚间服用效果更佳）。' },
|
||||
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4\u20138周复查ALT/AST；血糖轻度升高。' }
|
||||
]
|
||||
},
|
||||
'hypertension': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
|
||||
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140\u2013159/90\u201399 mmHg；2级：160\u2013179/100\u2013109 mmHg；3级：\u2265180/110 mmHg。非同日3次测量均达标方可诊断。' },
|
||||
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周\u2265150分钟）、减少精神压力。' },
|
||||
{ color: '#1677ff', name: '药物治疗原则', desc: '小剂量起始，优先选用长效制剂，联合用药，个体化治疗。血压目标：一般患者<140/90 mmHg，高危患者<130/80 mmHg。' }
|
||||
]
|
||||
},
|
||||
'migraine': {
|
||||
icon: '🧠', bg: '#fff1f0', title: '偏头痛的诊断与治疗', cat: '疾病知识', date: '2026-03-05',
|
||||
summary: '偏头痛是一种反复发作的神经血管性头痛，以单侧搏动性头痛为主要特征，常伴恶心、畏光、畏声，严重影响生活质量。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断要点', desc: '发作5次以上；持续4\u201372小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
|
||||
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50\u2013100mg）为首选，发作早期使用效果最佳。' },
|
||||
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作\u22654次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
|
||||
]
|
||||
},
|
||||
'nutrition': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
|
||||
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50\u201365%，蛋白质15\u201320%，脂肪20\u201330%。' },
|
||||
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
|
||||
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500\u20131700ml；避免久坐后立即进食。' }
|
||||
]
|
||||
},
|
||||
'exercise': {
|
||||
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
|
||||
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '运动推荐量', desc: '每周\u2265150分钟中等强度有氧运动（如快走、游泳、骑车），或\u226575分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
|
||||
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50\u201370%，可说话但不能唱歌。高强度：心率达70\u201385%，说话困难。' },
|
||||
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5\u201310分钟，运动后拉伸放松，避免突然停止。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 页面加载时根据URL参数渲染知识详情
|
||||
* 从URL的key参数获取知识条目标识，查找数据并填充页面
|
||||
*/
|
||||
function renderDetail() {
|
||||
// 解析URL参数获取知识条目key
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var key = params.get('key') || 'blood-routine'; // 默认显示血常规
|
||||
var d = KB_DATA[key];
|
||||
if (!d) {
|
||||
// 未找到对应数据时使用默认值
|
||||
d = KB_DATA['blood-routine'];
|
||||
}
|
||||
|
||||
// 设置导航栏标题
|
||||
document.getElementById('kd-nav-title').textContent = d.title;
|
||||
|
||||
// 生成主要内容条目的HTML
|
||||
var itemsHtml = d.items.map(function(it) {
|
||||
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
|
||||
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
|
||||
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
|
||||
// 填充内容区域
|
||||
document.getElementById('kd-content').innerHTML =
|
||||
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
|
||||
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
|
||||
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' \u00b7 更新于 ' + d.date + '</div></div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
|
||||
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
|
||||
itemsHtml;
|
||||
}
|
||||
|
||||
// 页面加载完成后渲染详情
|
||||
renderDetail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!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; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ========== 分段Tab样式 ========== */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab {
|
||||
flex: 1; text-align: center; padding: 12px 0;
|
||||
font-size: 14px; color: #666; cursor: pointer;
|
||||
border-bottom: 2px solid transparent; transition: all 0.2s;
|
||||
}
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ========== 底部Tab栏样式 ========== */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">专业参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类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>
|
||||
</div>
|
||||
|
||||
<!-- 知识条目列表 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 体检知识 -->
|
||||
<div id="kb-exam">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 血常规检查解读指南 -->
|
||||
<div style="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;" onclick="goDetail('blood-routine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🩺</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血常规检查解读指南</div><div style="font-size:12px;color:#999;margin-top:3px;">了解各项血常规指标的正常范围与临床意义</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 style="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;" onclick="goDetail('ecg')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">❤️</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">心电图异常结果说明</div><div style="font-size:12px;color:#999;margin-top:3px;">常见心电图异常表现及处理建议</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 style="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;" onclick="goDetail('liver')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🔬</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">肝功能指标详解</div><div style="font-size:12px;color:#999;margin-top:3px;">ALT、AST等肝功能指标的临床意义</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 style="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;" onclick="goDetail('glucose')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💉</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血糖检测与糖尿病筛查</div><div style="font-size:12px;color:#999;margin-top:3px;">空腹血糖、糖化血红蛋白的判读标准</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>
|
||||
|
||||
<!-- 药品知识 -->
|
||||
<div id="kb-drug" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 常用降压药物对比 -->
|
||||
<div style="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;" onclick="goDetail('antihypertensive')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💊</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">常用降压药物对比</div><div style="font-size:12px;color:#999;margin-top:3px;">各类降压药的适应症与注意事项</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 style="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;" onclick="goDetail('statin')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧪</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">他汀类药物使用指南</div><div style="font-size:12px;color:#999;margin-top:3px;">调脂药物的用法用量与副作用监测</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>
|
||||
|
||||
<!-- 疾病知识 -->
|
||||
<div id="kb-disease" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 高血压诊断与管理 -->
|
||||
<div style="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;" onclick="goDetail('hypertension')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🫀</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高血压诊断与管理</div><div style="font-size:12px;color:#999;margin-top:3px;">高血压分级标准及生活方式干预</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 style="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;" onclick="goDetail('migraine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧠</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">偏头痛的诊断与治疗</div><div style="font-size:12px;color:#999;margin-top:3px;">偏头痛的临床特征、诱因及处理方案</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>
|
||||
|
||||
<!-- 保健知识 -->
|
||||
<div id="kb-health" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 职场人群营养膳食指南 -->
|
||||
<div style="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;" onclick="goDetail('nutrition')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🥗</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">职场人群营养膳食指南</div><div style="font-size:12px;color:#999;margin-top:3px;">针对久坐办公人群的饮食建议</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 style="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;" onclick="goDetail('exercise')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🏃</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">运动与心血管健康</div><div style="font-size:12px;color:#999;margin-top:3px;">有氧运动对心血管的保护作用</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>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../workbench/expert/index.html">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</a>
|
||||
<a class="tab-item active" href="./index.html">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../ai-assistant/index.html">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../message/index.html">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../profile/index.html">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换知识库分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 对应面板的ID
|
||||
*/
|
||||
function switchKbTab(el, panelId) {
|
||||
// 移除所有Tab的选中状态
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-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';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到知识详情页
|
||||
* @param {string} key - 知识条目的标识key
|
||||
*/
|
||||
function goDetail(key) {
|
||||
window.location.href = './detail.html?key=' + key;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,250 @@
|
||||
<!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; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
|
||||
/* ========== 联系人列表项样式 ========== */
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.contact-item:last-child { border-bottom: none; }
|
||||
.contact-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-info { flex: 1; }
|
||||
.contact-name-row { display: flex; align-items: center; gap: 6px; }
|
||||
.contact-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.contact-desc { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
/* 分组标题 */
|
||||
.group-header {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
/* 箭头图标 */
|
||||
.arrow-icon { flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div 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 style="padding:10px 16px;background:#fff;border-bottom:1px solid #f0f0f0;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;background:#f5f5f5;border-radius:20px;padding:8px 14px;gap:8px;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#999" stroke-width="1.5"><circle cx="6" cy="6" r="4.5"/><path d="M10 10l2.5 2.5"/></svg>
|
||||
<input id="contacts-search" type="text" placeholder="搜索联系人姓名..." oninput="filterContacts(this.value)" style="flex:1;border:none;background:transparent;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系人列表滚动区域 -->
|
||||
<div class="scroll-content" id="contacts-list">
|
||||
<div style="padding:8px 0;">
|
||||
|
||||
<!-- 小助手分组 -->
|
||||
<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-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>
|
||||
</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,#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>
|
||||
</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>
|
||||
</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,#f9f0ff,#d3adf7);">🧑💼</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<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>
|
||||
<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,#f9f0ff,#d3adf7);">👩💼</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<a href="./im-chat.html" class="contact-item">
|
||||
<div class="contact-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👨⚕️</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<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>
|
||||
<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,#e6f4ff,#91caff);">👩⚕️</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name-row">
|
||||
<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>
|
||||
<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" 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="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 通讯录搜索过滤功能
|
||||
* 根据输入关键词过滤联系人，隐藏不匹配的联系人及空分组
|
||||
* @param {string} val - 搜索关键词
|
||||
*/
|
||||
function filterContacts(val) {
|
||||
var kw = val.trim().toLowerCase();
|
||||
// 遍历每个分组
|
||||
document.querySelectorAll('.contacts-group').forEach(function(group) {
|
||||
var hasVisible = false;
|
||||
// 遍历分组内的联系人项
|
||||
group.querySelectorAll('.contact-item').forEach(function(item) {
|
||||
var nameEl = item.querySelector('.contact-name');
|
||||
var match = !kw || (nameEl && nameEl.textContent.toLowerCase().indexOf(kw) !== -1);
|
||||
item.style.display = match ? '' : 'none';
|
||||
if (match) hasVisible = true;
|
||||
});
|
||||
// 隐藏空分组标题和整个分组容器
|
||||
var header = group.querySelector('.group-header');
|
||||
if (header) header.style.display = hasVisible ? '' : 'none';
|
||||
group.style.display = hasVisible ? '' : 'none';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IM聊天</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; }
|
||||
|
||||
/* ========== 聊天气泡样式 ========== */
|
||||
/* 时间标签 */
|
||||
.chat-time-label {
|
||||
text-align: center;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.chat-time-label span {
|
||||
font-size: 11px;
|
||||
color: #bbb;
|
||||
background: #ebebeb;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* 对方消息（左侧） */
|
||||
.msg-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.msg-left .avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.msg-left .sender-name {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.msg-left .bubble {
|
||||
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;
|
||||
}
|
||||
/* 自己消息（右侧） */
|
||||
.msg-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.msg-right .avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.msg-right .msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.msg-right .sender-name {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.msg-right .bubble {
|
||||
background: #1677ff;
|
||||
border-radius: 12px 0 12px 12px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
max-width: 220px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ========== 媒体选择面板 ========== */
|
||||
.media-panel {
|
||||
display: none;
|
||||
background: #f7f8fa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
max-width: 180px;
|
||||
}
|
||||
.media-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.media-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
.media-label { font-size: 11px; color: #666; }
|
||||
|
||||
/* ========== 输入区域 ========== */
|
||||
.input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px 14px;
|
||||
}
|
||||
.voice-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.msg-input {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.voice-record-btn {
|
||||
display: none;
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
background: #f5f5f5;
|
||||
border: 1.5px solid #d9d9d9;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.plus-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
}
|
||||
.send-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div 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" id="im-scroll" style="padding:12px 16px;">
|
||||
|
||||
<!-- 时间标签 -->
|
||||
<div class="chat-time-label"><span>今天 10:28</span></div>
|
||||
|
||||
<!-- 小助手发来的第一条消息 -->
|
||||
<div class="msg-left">
|
||||
<div class="avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
|
||||
<div>
|
||||
<div class="sender-name">咨询小助手</div>
|
||||
<div class="bubble">王医生您好，有一位员工（王芳）想预约您明天下午14:00的视频咨询，请问方便吗？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 王医生回复（右侧蓝色气泡） -->
|
||||
<div class="msg-right">
|
||||
<div class="avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨⚕️</div>
|
||||
<div class="msg-content">
|
||||
<div class="sender-name">王医生（我）</div>
|
||||
<div class="bubble">可以的，帮我确认一下预约。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小助手回复确认消息 -->
|
||||
<div class="msg-left">
|
||||
<div class="avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
|
||||
<div>
|
||||
<div class="sender-name">咨询小助手</div>
|
||||
<div class="bubble">好的，已为您确认预约，届时系统会提醒您。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:0;flex-shrink:0;">
|
||||
|
||||
<!-- 媒体选择面板（拍照、图库） -->
|
||||
<div id="im-media-panel" class="media-panel">
|
||||
<div class="media-grid">
|
||||
<div class="media-item" onclick="document.getElementById('im-media-panel').style.display='none'">
|
||||
<div class="media-icon">📷</div>
|
||||
<span class="media-label">拍照</span>
|
||||
</div>
|
||||
<div class="media-item" onclick="document.getElementById('im-media-panel').style.display='none'">
|
||||
<div class="media-icon">🖼️</div>
|
||||
<span class="media-label">图库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入行 -->
|
||||
<div class="input-bar">
|
||||
<!-- 语音/键盘切换按钮 -->
|
||||
<button id="im-voice-btn" class="voice-btn" onclick="toggleImVoice()">🎤</button>
|
||||
<!-- 文本输入框 -->
|
||||
<input id="im-input" class="msg-input" type="text" placeholder="输入消息..." />
|
||||
<!-- 按住说话按钮（语音模式） -->
|
||||
<button id="im-voice-record-btn" class="voice-record-btn">按住说话</button>
|
||||
<!-- 加号按钮（展开媒体面板） -->
|
||||
<button class="plus-btn" onclick="toggleMediaPanel()">+</button>
|
||||
<!-- 发送按钮 -->
|
||||
<button class="send-btn" onclick="sendImMsg()">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 发送消息功能
|
||||
* 获取输入框内容，创建右侧蓝色气泡并追加到聊天区域
|
||||
*/
|
||||
function sendImMsg() {
|
||||
var input = document.getElementById('im-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
var scroll = document.getElementById('im-scroll');
|
||||
// 创建消息气泡容器
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML =
|
||||
'<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>' +
|
||||
'<div style="display:flex;flex-direction:column;align-items:flex-end;">' +
|
||||
'<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>' +
|
||||
'<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div>' +
|
||||
'</div>';
|
||||
// 在底部留白前插入消息
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
// 滚动到最新消息
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* 语音/键盘模式切换
|
||||
* 在文字输入和语音录制两种模式之间切换
|
||||
*/
|
||||
var isImVoiceMode = false;
|
||||
function toggleImVoice() {
|
||||
isImVoiceMode = !isImVoiceMode;
|
||||
var input = document.getElementById('im-input');
|
||||
var btn = document.getElementById('im-voice-btn');
|
||||
var recordBtn = document.getElementById('im-voice-record-btn');
|
||||
if (isImVoiceMode) {
|
||||
// 切换到语音模式
|
||||
input.style.display = 'none';
|
||||
recordBtn.style.display = 'flex';
|
||||
btn.textContent = '⌨️';
|
||||
btn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
// 切换回文字模式
|
||||
input.style.display = '';
|
||||
recordBtn.style.display = 'none';
|
||||
btn.textContent = '🎤';
|
||||
btn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 媒体面板展开/收起切换
|
||||
*/
|
||||
function toggleMediaPanel() {
|
||||
var panel = document.getElementById('im-media-panel');
|
||||
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!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; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
|
||||
/* ========== 底部Tab栏样式 ========== */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
|
||||
/* ========== 消息列表项样式 ========== */
|
||||
.msg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.msg-item:last-child { border-bottom: none; }
|
||||
.msg-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
/* 未读角标 */
|
||||
.msg-unread {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.msg-body { flex: 1; min-width: 0; }
|
||||
.msg-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.msg-name-group { display: flex; align-items: center; gap: 6px; }
|
||||
.msg-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.msg-time { font-size: 12px; color: #bbb; }
|
||||
.msg-preview {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">内部沟通</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">消息</div>
|
||||
</div>
|
||||
<!-- 通讯录跳转按钮 -->
|
||||
<a href="./contacts.html" style="background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;text-decoration:none;">通讯录</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表滚动区域 -->
|
||||
<div class="scroll-content">
|
||||
<div style="padding:8px 0;">
|
||||
|
||||
<!-- 消息1：咨询小助手（未读2条） -->
|
||||
<a href="./im-chat.html" class="msg-item">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">
|
||||
🤖
|
||||
<div class="msg-unread">2</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">咨询小助手</span>
|
||||
<span class="tag tag-gray" style="font-size:10px;padding:1px 6px;">小助手</span>
|
||||
</div>
|
||||
<span class="msg-time">10:30</span>
|
||||
</div>
|
||||
<div class="msg-preview">有一位员工想预约您明天下午的视频咨询...</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 消息2：李主任 -->
|
||||
<a href="./im-chat.html" class="msg-item">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">
|
||||
👨⚕️
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">李主任</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</div>
|
||||
<span class="msg-time">昨天</span>
|
||||
</div>
|
||||
<div class="msg-preview">下周科室会议时间调整到周三下午3点</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 消息3：张护士长 -->
|
||||
<a href="./im-chat.html" class="msg-item">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">
|
||||
👩⚕️
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">张护士长</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
|
||||
</div>
|
||||
<span class="msg-time">周一</span>
|
||||
</div>
|
||||
<div class="msg-preview">好的，我已经安排好了，谢谢王医生</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 消息4：陈运营 -->
|
||||
<a href="./im-chat.html" class="msg-item">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">
|
||||
🧑💼
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">陈运营</span>
|
||||
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
|
||||
</div>
|
||||
<span class="msg-time">周二</span>
|
||||
</div>
|
||||
<div class="msg-preview">本月咨询数据报表已生成，请查收</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 消息5：刘驻场 -->
|
||||
<a href="./im-chat.html" class="msg-item">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">
|
||||
🏥
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">刘驻场</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
|
||||
</div>
|
||||
<span class="msg-time">周三</span>
|
||||
</div>
|
||||
<div class="msg-preview">明天下午我在A栋3楼，有需要可以联系</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 消息6：系统管理员 -->
|
||||
<a href="./im-chat.html" class="msg-item" style="border-bottom:none;">
|
||||
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff1f0,#ffb3b3);">
|
||||
👤
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<div class="msg-name-group">
|
||||
<span class="msg-name">系统管理员</span>
|
||||
<span class="tag tag-red" style="font-size:10px;padding:1px 6px;">管理员</span>
|
||||
</div>
|
||||
<span class="msg-time">上周</span>
|
||||
</div>
|
||||
<div class="msg-preview">您的排班已更新，请查看本月排班表</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<!-- 工作台 -->
|
||||
<a href="../workbench/expert/index.html" class="tab-item">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
</a>
|
||||
<!-- 知识库 -->
|
||||
<a href="../knowledge/index.html" class="tab-item">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
<!-- AI助手 -->
|
||||
<a href="../ai-assistant/index.html" class="tab-item">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</a>
|
||||
<!-- 消息（当前激活状态） -->
|
||||
<a href="./index.html" class="tab-item active">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<!-- 我的 -->
|
||||
<a href="../profile/index.html" class="tab-item">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /phone-shell -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 密码表单 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<!-- 当前密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<!-- 新密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码（至少8位）" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<!-- 确认新密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存修改按钮 -->
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
|
||||
<!-- 修改成功弹窗 -->
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 确定后跳转至: ./index.html -->
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="color:#1677ff;font-weight:600;flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">个人信息设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 头像区 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="position:relative;display:inline-block;">
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:40px;">👨⚕️</div>
|
||||
<!-- 更换头像按钮 -->
|
||||
<div style="position:absolute;bottom:0;right:0;width:26px;height:26px;background:#1677ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff;cursor:pointer;">📷</div>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#999;margin-top:10px;">点击更换头像</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息表单 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">基础信息</div>
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">姓名</span>
|
||||
<input type="text" value="王建明" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">所属医院</span>
|
||||
<input type="text" value="北京协和医院" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">科室</span>
|
||||
<input type="text" value="心内科" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">职称</span>
|
||||
<input type="text" value="主治医师" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">执业年限</span>
|
||||
<input type="text" value="12年" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 擅长病种标签选择 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">擅长病种</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:10px;">点击选择/取消（可多选）</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;" id="disease-tags">
|
||||
<!-- 已选中标签（蓝色） -->
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">高血压</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">冠心病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">心律失常</div>
|
||||
<!-- 未选中标签（灰色） -->
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">心力衰竭</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">糖尿病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">高脂血症</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">脑卒中</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">睡眠障碍</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">颈椎病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">焦虑抑郁</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人简介 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">个人简介</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请输入个人简介...">北京协和医院心内科主治医师，从事心血管疾病临床工作12年，具有丰富的临床经验，擅长心血管疾病的综合管理与健康指导。</textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 68/200 字</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人擅长 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">个人擅长</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请描述您的专业擅长方向...">高血压、冠心病、心律失常的诊断与治疗，擅长心血管疾病的综合管理，对职场人群慢性病预防与健康管理有丰富经验。</textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 62/300 字</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换病种标签选中状态
|
||||
* 已选中（蓝色）→ 取消选中（灰色），反之亦然
|
||||
* @param {HTMLElement} el - 标签元素
|
||||
*/
|
||||
function toggleDiseaseTag(el) {
|
||||
var isOn = el.style.background === 'rgb(22, 119, 255)' || el.style.background === '#1677ff';
|
||||
el.style.background = isOn ? '#f5f5f5' : '#1677ff';
|
||||
el.style.color = isOn ? '#666' : '#fff';
|
||||
el.style.borderColor = isOn ? '#e8e8e8' : '#1677ff';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
<!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; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar" style="background:transparent;position:absolute;top:0;left:0;right:0;z-index:10;">
|
||||
<span class="time" style="color:#fff;">9:41</span>
|
||||
<div class="icons" style="color:#fff;"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:30px 20px 24px;flex-shrink:0;padding-top:60px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<!-- 头像 -->
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">👨⚕️</div>
|
||||
<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>
|
||||
<!-- 服务中按钮 -->
|
||||
<button onclick="togglePause()" id="pause-btn-mine" style="margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 12px;color:#fff;font-size:12px;cursor:pointer;">
|
||||
<span style="width:7px;height:7px;border-radius:50%;background:#52c41a;display:inline-block;"></span>服务中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表滚动区域 -->
|
||||
<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;">今日 18 次</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>
|
||||
<!-- [交互] 点击跳转至: ./schedule.html -->
|
||||
<div onclick="location.href='./schedule.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>
|
||||
<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>
|
||||
<!-- [交互] 点击跳转至: ./edit-profile.html -->
|
||||
<div onclick="location.href='./edit-profile.html'" style="display:flex;align-items:center;padding:16px;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>
|
||||
</div>
|
||||
|
||||
<!-- 第二组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./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>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:16px;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<button onclick="openModal('modal-logout')" style="width:100%;padding:14px;background:#fff;color:#ff4d4f;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,0.06);">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">退出登录</div>
|
||||
<div class="modal-body">确认退出当前账号？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-logout')">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="color:#ff4d4f;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏，我的为active状态 -->
|
||||
<div class="tab-bar">
|
||||
<!-- [交互] 点击跳转至: ../workbench/expert/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../workbench/expert/index.html'">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../knowledge/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../ai-assistant/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../ai-assistant/index.html'">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../message/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../message/index.html'">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</div>
|
||||
<!-- [状态] 当前为: 已选中态 -->
|
||||
<div class="tab-item active" onclick="location.href='./index.html'">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 服务状态标记 */
|
||||
let isPaused = false;
|
||||
|
||||
/**
|
||||
* 切换服务状态（服务中/暂停服务）
|
||||
*/
|
||||
function togglePause() {
|
||||
isPaused = !isPaused;
|
||||
const bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
const text = isPaused ? '暂停服务' : '服务中';
|
||||
const mineBtn = document.getElementById('pause-btn-mine');
|
||||
if (mineBtn) {
|
||||
const dot = mineBtn.querySelector('span');
|
||||
if (dot) dot.style.background = bg;
|
||||
/* 更新按钮文字 */
|
||||
mineBtn.childNodes.forEach(function(n) { if (n.nodeType === 3) n.textContent = text; });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: ./stats.html -->
|
||||
<button class="back-btn" onclick="location.href='./stats.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">全部评价</span>
|
||||
</div>
|
||||
|
||||
<!-- 顶部统计 -->
|
||||
<div style="background:#fff;border-bottom:1px solid #f0f0f0;padding:12px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:14px;color:#1a1a1a;">共 <b>1,248</b> 条评价</span>
|
||||
<span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐ 综合 4.9</span>
|
||||
</div>
|
||||
|
||||
<!-- 评价列表 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<!-- 评价1：孙*丽 - 视频咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<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:15px;">👩</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">孙*丽</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">视频咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">昨天</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">非常专业，王医生耐心解答了我所有的问题，给出了很实用的建议，感谢！</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价2：赵*磊 - 图文咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:15px;">👨</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">赵*磊</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">图文咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-08</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">回复及时，建议很实用，明显感觉睡眠有所改善。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价3：王*芳 - 视频咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:15px;">👩</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">王*芳</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">视频咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-07</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">医生很有耐心，讲解血脂问题通俗易懂，饮食调整建议很落地。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价4：李*建 - 图文咨询 - 4星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#fff7e6,#ffd591);display:flex;align-items:center;justify-content:center;font-size:15px;">👨</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">李*建</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">图文咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-06</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">解答了我关于血压用药的疑惑，专业可信。</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div style="text-align:center;padding:16px 0;">
|
||||
<span style="font-size:13px;color:#bbb;">— 已加载全部近期评价 —</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">排班设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 日历卡片 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<span style="font-size:15px;font-weight:600;color:#1a1a1a;">2026年4月</span>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:14px;cursor:pointer;">‹</button>
|
||||
<button style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:14px;cursor:pointer;">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星期标题行 -->
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;">
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">日</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">一</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">二</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">三</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">四</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">五</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">六</div>
|
||||
<!-- 第一行：1-6日 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#ccc;"></div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">1</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">2</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">3</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">4</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">5</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">6</div>
|
||||
<!-- 第二行：7-13日，8号为今天，9/10/12为选中 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">7</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1677ff;background:#e6f4ff;border-radius:50%;font-weight:700;">8</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">9</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">10</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#1a1a1a;cursor:pointer;">11</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">12</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">13</div>
|
||||
<!-- 第三行：14-20日，15/16/18/19为选中，17为未选中可点击 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">14</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">15</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">16</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#1a1a1a;cursor:pointer;">17</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">18</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">19</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时段设置卡片 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">时段设置（每日）</div>
|
||||
<!-- 上午时段 -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5;">
|
||||
<div>
|
||||
<div style="font-size:14px;color:#1a1a1a;">上午 09:00 – 12:00</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">每时段接诊人数</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<button onclick="adjustCount(this,-1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">−</button>
|
||||
<span id="count-am" style="font-size:16px;font-weight:700;color:#1677ff;min-width:20px;text-align:center;">3</span>
|
||||
<button onclick="adjustCount(this,1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下午时段 -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;">
|
||||
<div>
|
||||
<div style="font-size:14px;color:#1a1a1a;">下午 14:00 – 17:00</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">每时段接诊人数</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<button onclick="adjustCount(this,-1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">−</button>
|
||||
<span id="count-pm" style="font-size:16px;font-weight:700;color:#1677ff;min-width:20px;text-align:center;">3</span>
|
||||
<button onclick="adjustCount(this,1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换日期选中状态
|
||||
* 点击已选中的日期取消选中，点击未选中的日期设为选中
|
||||
* @param {HTMLElement} el - 日期单元格元素
|
||||
*/
|
||||
function toggleDay(el) {
|
||||
var isOn = el.style.background === 'rgb(22, 119, 255)';
|
||||
el.style.background = isOn ? '' : '#1677ff';
|
||||
el.style.color = isOn ? '#1a1a1a' : '#fff';
|
||||
el.style.fontWeight = isOn ? '' : '600';
|
||||
el.style.borderRadius = isOn ? '' : '50%';
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整接诊人数（最小1，最大10）
|
||||
* @param {HTMLElement} btn - 触发按钮
|
||||
* @param {number} delta - 增减量（+1 或 -1）
|
||||
*/
|
||||
function adjustCount(btn, delta) {
|
||||
var sibling = btn.parentElement.querySelector('span[id]');
|
||||
if (!sibling) return;
|
||||
var val = parseInt(sibling.textContent) + delta;
|
||||
if (val < 1) val = 1;
|
||||
if (val > 10) val = 10;
|
||||
sibling.textContent = val;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询统计</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 数据概览（2x2网格） -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:14px;">数据概览</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
<!-- 今日 - 蓝色 -->
|
||||
<div style="background:#f0f7ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#1677ff;">18</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">今日完成</div>
|
||||
</div>
|
||||
<!-- 本周 - 绿色 -->
|
||||
<div style="background:#f6ffed;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#52c41a;">87</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本周完成</div>
|
||||
</div>
|
||||
<!-- 本月 - 橙色 -->
|
||||
<div style="background:#fff7e6;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#fa8c16;">312</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本月完成</div>
|
||||
</div>
|
||||
<!-- 累计 - 紫色 -->
|
||||
<div style="background:#f9f0ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#722ed1;">1,248</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">累计完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月咨询类型 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">本月咨询类型</div>
|
||||
<!-- 图文咨询进度条 -->
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
|
||||
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">图文咨询</span>
|
||||
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
|
||||
<div style="width:68%;height:100%;background:#1677ff;border-radius:5px;"></div>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#1677ff;font-weight:600;width:36px;text-align:right;">213</span>
|
||||
</div>
|
||||
<!-- 视频咨询进度条 -->
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">视频咨询</span>
|
||||
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
|
||||
<div style="width:32%;height:100%;background:#52c41a;border-radius:5px;"></div>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#52c41a;font-weight:600;width:36px;text-align:right;">99</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近7日完成量柱状图 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">近7日完成量</div>
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;height:70px;gap:4px;">
|
||||
<!-- 4/2: 12 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">12</div>
|
||||
<div style="width:100%;height:40%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/2</div>
|
||||
</div>
|
||||
<!-- 4/3: 15 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">15</div>
|
||||
<div style="width:100%;height:50%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/3</div>
|
||||
</div>
|
||||
<!-- 4/4: 20 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">20</div>
|
||||
<div style="width:100%;height:67%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/4</div>
|
||||
</div>
|
||||
<!-- 4/5: 10 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">10</div>
|
||||
<div style="width:100%;height:33%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/5</div>
|
||||
</div>
|
||||
<!-- 4/6: 22 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">22</div>
|
||||
<div style="width:100%;height:73%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/6</div>
|
||||
</div>
|
||||
<!-- 4/7: 16 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">16</div>
|
||||
<div style="width:100%;height:53%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/7</div>
|
||||
</div>
|
||||
<!-- 今日: 18（高亮蓝色） -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">18</div>
|
||||
<div style="width:100%;height:60%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">今日</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 综合评分 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;">综合评分</div>
|
||||
<!-- [交互] 点击跳转至: ./reviews.html -->
|
||||
<button onclick="location.href='./reviews.html'" style="font-size:12px;color:#1677ff;background:none;border:none;cursor:pointer;">查看全部评价 ›</button>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<!-- 左侧评分 -->
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:40px;font-weight:700;color:#fa8c16;line-height:1;">4.9</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-top:4px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:3px;">1,248次评价</div>
|
||||
</div>
|
||||
<!-- 右侧星级分布条 -->
|
||||
<div style="flex:1;">
|
||||
<!-- 5星 88% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">5</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:88%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">88%</span>
|
||||
</div>
|
||||
<!-- 4星 8% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">4</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:8%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">8%</span>
|
||||
</div>
|
||||
<!-- 3星 3% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">3</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:3%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">3%</span>
|
||||
</div>
|
||||
<!-- 2星 1% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">2</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:1%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">1%</span>
|
||||
</div>
|
||||
<!-- 1星 0% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">1</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:0%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./text-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工档案</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工头像和基本信息 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;text-align:center;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;">👩</div>
|
||||
<div style="font-size:18px;font-weight:700;color:#1a1a1a;">张小红</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:4px;">研发部 · 工程师</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息列表 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<!-- 基本信息 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#1677ff;margin-bottom:8px;">基本信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">姓名</span><span style="font-size:13px;color:#1a1a1a;">张小红</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">女 / 28岁</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">163 cm / 52 kg</span></div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#52c41a;margin:12px 0 8px;">生活习惯</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">吸烟</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮酒</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮食喜好</span><span style="font-size:13px;color:#1a1a1a;">均衡</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">睡眠质量</span><span style="font-size:13px;color:#1a1a1a;">良好</span></div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#fa8c16;margin:12px 0 8px;">身体情况</div>
|
||||
<!-- 过敏史高亮红色 -->
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#ff4d4f;font-weight:600;">青霉素过敏</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">遗传史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">既往史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,235 @@
|
||||
<!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; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
/* 分段Tab */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
/* 咨询卡片 */
|
||||
.consult-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.consult-card:active { transform: scale(0.98); }
|
||||
.cc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.cc-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.cc-info { flex: 1; min-width: 0; }
|
||||
.cc-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.cc-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.cc-bottom { display: flex; align-items: center; justify-content: space-between; }
|
||||
.cc-preview { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
|
||||
.cc-time { font-size: 12px; color: #bbb; flex-shrink: 0; }
|
||||
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，王医生</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
<!-- [交互] 点击切换服务状态 -->
|
||||
<button id="wb-pause-btn" onclick="togglePause()" style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;">
|
||||
<span id="pause-dot" style="width:8px;height:8px;border-radius:50%;background:#52c41a;display:inline-block;flex-shrink:0;"></span>
|
||||
<span id="pause-label">服务中</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 统计数字 -->
|
||||
<div style="display:flex;">
|
||||
<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;">1</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;">18</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;">4.9</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">评分</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab：图文/视频 -->
|
||||
<div style="display:flex;background:#fff;border-bottom:1px solid #f0f0f0;flex-shrink:0;">
|
||||
<div id="wb-type-text" onclick="switchWbType('text')" style="flex:1;text-align:center;padding:12px 0;font-size:15px;font-weight:700;color:#1677ff;border-bottom:2px solid #1677ff;cursor:pointer;">图文咨询</div>
|
||||
<div id="wb-type-video" onclick="switchWbType('video')" style="flex:1;text-align:center;padding:12px 0;font-size:15px;font-weight:600;color:#999;border-bottom:2px solid transparent;cursor:pointer;">视频咨询</div>
|
||||
</div>
|
||||
|
||||
<!-- 图文咨询面板 -->
|
||||
<div id="wb-panel-text" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-text-pending')">待回复<span class="badge">2</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-ongoing')">进行中<span class="badge" style="background:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已完成</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 待回复列表 -->
|
||||
<div id="wb-text-pending">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👩</div><div class="cc-info"><div class="cc-name">张小红</div><div class="cc-meta">研发部 · 工程师</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">最近总是头痛，尤其是下午工作时...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">10:23</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">李建国</div><div class="cc-meta">市场部 · 销售专员</div></div><span class="tag tag-red">待回复</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">血压最近偏高，想咨询一下用药...</div><div style="display:flex;align-items:center;gap:6px;"><span class="cc-time">09:55</span><span class="unread-dot"></span></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 进行中列表 -->
|
||||
<div id="wb-text-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-chat.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">陈伟</div><div class="cc-meta">技术部 · 开发工程师</div></div><span class="tag tag-blue">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">好的，我按您说的方法试试看</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 已完成列表 -->
|
||||
<div id="wb-text-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-consult-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">运营部 · 运营专员</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">感谢医生，问题已解决</div><span class="cc-time">08:40</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询面板 -->
|
||||
<div id="wb-panel-video" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-video-pending')">待确认<span class="badge">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-ongoing')">进行中<span class="badge" style="background:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-video-done')">已完成</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 视频待确认列表 -->
|
||||
<div id="wb-video-pending">
|
||||
<!-- [交互] 点击跳转至: ./video-appt.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-appt.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">王芳</div><div class="cc-meta">人事部 · HR专员</div></div><span class="tag tag-orange">待确认</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 14:00–14:30</div><span class="cc-time">09:30</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 视频进行中列表 -->
|
||||
<div id="wb-video-ongoing" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./video-ongoing.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-ongoing.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div><div class="cc-info"><div class="cc-name">刘梅</div><div class="cc-meta">财务部 · 会计</div></div><span class="tag tag-green">进行中</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">预约时间：今日 14:00–14:30 · 已确认</div><span class="cc-time">14:00</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<!-- 视频已完成列表 -->
|
||||
<div id="wb-video-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">行政部 · 行政专员</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">⭐⭐⭐⭐⭐ 非常专业，感谢！</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部5Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换一级Tab（图文/视频）
|
||||
* @param {string} type - 'text' 或 'video'
|
||||
*/
|
||||
function switchWbType(type) {
|
||||
var isText = type === 'text';
|
||||
var textTab = document.getElementById('wb-type-text');
|
||||
var videoTab = document.getElementById('wb-type-video');
|
||||
// 更新Tab样式
|
||||
textTab.style.color = isText ? '#1677ff' : '#999';
|
||||
textTab.style.borderBottomColor = isText ? '#1677ff' : 'transparent';
|
||||
textTab.style.fontWeight = isText ? '700' : '600';
|
||||
videoTab.style.color = isText ? '#999' : '#1677ff';
|
||||
videoTab.style.borderBottomColor = isText ? 'transparent' : '#1677ff';
|
||||
videoTab.style.fontWeight = isText ? '600' : '700';
|
||||
// 切换面板显示
|
||||
document.getElementById('wb-panel-text').style.display = isText ? 'flex' : 'none';
|
||||
document.getElementById('wb-panel-video').style.display = isText ? 'none' : 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换二级Tab（待回复/进行中/已完成）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板ID
|
||||
*/
|
||||
function switchWorkTab(el, panelId) {
|
||||
// 清除同级Tab的选中态
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
// 切换对应面板
|
||||
var scrollContent = el.closest('.seg-tabs').nextElementSibling;
|
||||
Array.from(scrollContent.children).forEach(function(p) {
|
||||
if (p.id) p.style.display = p.id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* 服务状态切换 */
|
||||
var isPaused = false;
|
||||
function togglePause() {
|
||||
isPaused = !isPaused;
|
||||
var bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
var text = isPaused ? '暂停服务' : '服务中';
|
||||
var dot = document.getElementById('pause-dot');
|
||||
var label = document.getElementById('pause-label');
|
||||
if (dot) dot.style.background = bg;
|
||||
if (label) label.textContent = text;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 居中弹窗 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红</span>
|
||||
<!-- [交互] 点击打开结束咨询弹窗 -->
|
||||
<button class="nav-right" onclick="openModal('modal-end-confirm')">结束咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 员工信息条 -->
|
||||
<div style="background:#f0f7ff;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:1px solid #ddeeff;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;">👩</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:13px;font-weight:600;color:#1a1a1a;">张小红 · 研发部</div>
|
||||
<div style="font-size:11px;color:#666;">图文咨询 · 2026-04-08 10:20 发起</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./employee-profile.html -->
|
||||
<button onclick="location.href='./employee-profile.html'" style="font-size:12px;color:#1677ff;background:none;border:1px solid #1677ff;border-radius:6px;padding:4px 10px;cursor:pointer;">查看档案</button>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
|
||||
<!-- 员工消息（左侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">您好医生，我最近总是头痛，尤其是下午工作时特别明显，已经持续一周了。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工发送图片消息 -->
|
||||
<div style="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:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="width:140px;height:90px;background:linear-gradient(135deg,#e8f4ff,#c5deff);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;">🩺</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">体检报告.jpg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
|
||||
<!-- 专家消息（右侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，头痛持续一周需要重视。请问头痛的位置主要在哪里？是否伴有恶心、视力模糊等症状？</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">主要是太阳穴两侧，有时候会有点恶心，但没有视力问题。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 常用语面板 -->
|
||||
<div id="quick-panel" style="display:none;background:#fff;border-top:1px solid #f0f0f0;padding:10px 16px;flex-shrink:0;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:8px;">常用语</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">您好，请详细描述症状</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">建议及时就医检查</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">请上传相关检查报告</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">注意休息，按时服药</div>
|
||||
<div onclick="useQuick(this)" style="background:#f0f7ff;color:#1677ff;font-size:12px;padding:6px 12px;border-radius:16px;cursor:pointer;">如有不适请及时复诊</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:180px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<!-- 常用语按钮 -->
|
||||
<button onclick="toggleQuick()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">⚡</button>
|
||||
<!-- 语音按钮 -->
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<!-- 文本输入框 -->
|
||||
<input id="chat-input" type="text" placeholder="输入回复内容..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<!-- 语音录制按钮（默认隐藏） -->
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;align-items:center;justify-content:center;letter-spacing:1px;">按住说话</button>
|
||||
<!-- 附件按钮 -->
|
||||
<button onclick="toggleMediaPanel()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;font-weight:300;cursor:pointer;flex-shrink:0;color:#666;line-height:1;">+</button>
|
||||
<!-- 发送按钮 -->
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束咨询确认弹窗 -->
|
||||
<div id="modal-end-confirm" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束咨询</div>
|
||||
<div class="modal-body">确认结束与张小红的图文咨询？结束后将无法继续发送消息。</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-end-confirm')">取消</button>
|
||||
<button onclick="closeModal('modal-end-confirm');location.href='./index.html'">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换常用语面板显示/隐藏
|
||||
*/
|
||||
function toggleQuick() {
|
||||
var p = document.getElementById('quick-panel');
|
||||
var m = document.getElementById('media-panel');
|
||||
if (m) m.style.display = 'none';
|
||||
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换媒体选择面板显示/隐藏
|
||||
*/
|
||||
function toggleMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
var q = document.getElementById('quick-panel');
|
||||
if (q) q.style.display = 'none';
|
||||
m.style.display = m.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭媒体选择面板
|
||||
*/
|
||||
function closeMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
if (m) m.style.display = 'none';
|
||||
}
|
||||
|
||||
/* 语音模式状态 */
|
||||
var isVoiceMode = false;
|
||||
|
||||
/**
|
||||
* 切换语音/文字输入模式
|
||||
*/
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) {
|
||||
input.style.display = 'none';
|
||||
recordBtn.style.display = 'flex';
|
||||
voiceBtn.textContent = '⌨️';
|
||||
voiceBtn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
input.style.display = '';
|
||||
recordBtn.style.display = 'none';
|
||||
voiceBtn.textContent = '🎤';
|
||||
voiceBtn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用常用语填充输入框
|
||||
* @param {HTMLElement} el - 被点击的常用语元素
|
||||
*/
|
||||
function useQuick(el) {
|
||||
document.getElementById('chat-input').value = el.textContent;
|
||||
document.getElementById('quick-panel').style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息，在聊天区追加一条专家消息气泡
|
||||
*/
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工信息卡 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:28px;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:17px;font-weight:700;color:#1a1a1a;">赵磊</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:2px;">运营部 · 运营专员</div>
|
||||
</div>
|
||||
<span class="tag tag-gray" style="margin-left:auto;">已完成</span>
|
||||
</div>
|
||||
<!-- 咨询信息 -->
|
||||
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">图文咨询</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:10</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">完成时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:40</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;"><span style="font-size:13px;color:#999;">员工评分</span><span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐⭐⭐⭐⭐ 5.0</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工评价 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">员工评价</div>
|
||||
<div style="font-size:13px;color:#666;line-height:1.6;background:#fffbe6;border-radius:8px;padding:12px;border-left:3px solid #faad14;">"王医生回复很及时，建议也很实用，睡眠问题得到了很好的指导，非常感谢！"</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html 查看历史对话记录 -->
|
||||
<div onclick="location.href='./text-chat.html'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">💬</span>
|
||||
<span style="font-size:14px;color:#1a1a1a;flex:1;">查看历史对话记录</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- 咨询人健康档案（可折叠） -->
|
||||
<div class="profile-collapsible" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);overflow:hidden;">
|
||||
<!-- [交互] 点击展开/收起档案 -->
|
||||
<div onclick="toggleProfile(this)" style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">📋 咨询人健康档案</span>
|
||||
<span class="profile-arrow" style="font-size:12px;color:#999;transition:transform 0.2s;">∨</span>
|
||||
</div>
|
||||
<div class="profile-body" style="display:none;padding:0 16px 14px;">
|
||||
<!-- 基本信息 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#1677ff;margin:4px 0 6px;">基本信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">姓名</span><span style="font-size:13px;color:#1a1a1a;">赵磊</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">男 / 32岁</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">175 cm / 70 kg</span></div>
|
||||
<!-- 生活习惯 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#52c41a;margin:10px 0 6px;">生活习惯</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">吸烟</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮酒</span><span style="font-size:13px;color:#1a1a1a;">偶尔</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮食喜好</span><span style="font-size:13px;color:#1a1a1a;">均衡</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">睡眠质量</span><span style="font-size:13px;color:#fa8c16;">较差</span></div>
|
||||
<!-- 身体情况 -->
|
||||
<div style="font-size:12px;font-weight:600;color:#fa8c16;margin:10px 0 6px;">身体情况</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">遗传史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">既往史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">失眠</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 健康档案折叠/展开切换
|
||||
* @param {HTMLElement} el - 被点击的标题行元素
|
||||
*/
|
||||
function toggleProfile(el) {
|
||||
var card = el.closest('.profile-collapsible');
|
||||
var body = card.querySelector('.profile-body');
|
||||
var arrow = card.querySelector('.profile-arrow');
|
||||
var isOpen = body.style.display !== 'none';
|
||||
body.style.display = isOpen ? 'none' : 'block';
|
||||
if (arrow) arrow.style.transform = isOpen ? '' : 'rotate(180deg)';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ===== 页面专属样式 ===== */
|
||||
/* 员工信息区 */
|
||||
.user-info { padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; }
|
||||
.user-info__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 600; flex-shrink: 0; }
|
||||
.user-info__detail { flex: 1; }
|
||||
.user-info__name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.user-info__dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
|
||||
/* 预约信息卡 */
|
||||
.appt-card { margin: 12px 16px; padding: 14px; border-radius: 12px; background: #fffbe6; border: 1px solid #ffe58f; }
|
||||
.appt-card__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
|
||||
.appt-card__label { color: #8c8c8c; }
|
||||
.appt-card__value { color: #1a1a1a; font-weight: 500; }
|
||||
.appt-card__value--highlight { color: #fa8c16; font-weight: 700; font-size: 15px; }
|
||||
|
||||
/* 健康档案折叠区 */
|
||||
.profile-section { margin: 12px 16px; background: #fff; border-radius: 12px; overflow: hidden; }
|
||||
.profile-section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
|
||||
.profile-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.profile-section__arrow { font-size: 12px; color: #999; transition: transform 0.3s; }
|
||||
.profile-section__arrow--open { transform: rotate(180deg); }
|
||||
.profile-section__body { display: none; padding: 0 16px 14px; }
|
||||
.profile-section__body.active { display: block; }
|
||||
.profile-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
|
||||
.profile-item:last-child { border-bottom: none; }
|
||||
.profile-item__label { color: #8c8c8c; }
|
||||
.profile-item__value { color: #1a1a1a; }
|
||||
.profile-item__value--warn { color: #fa8c16; }
|
||||
|
||||
/* 咨询说明 */
|
||||
.consult-note { margin: 12px 16px; background: #fff; border-radius: 12px; padding: 14px 16px; }
|
||||
.consult-note__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.consult-note__text { font-size: 14px; color: #666; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-actions { padding: 12px 16px 28px; background: #fff; display: flex; gap: 12px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.bottom-actions__btn { flex: 1; height: 44px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.bottom-actions__btn--reject { background: #fff; border: 1px solid #ff4d4f; color: #ff4d4f; }
|
||||
.bottom-actions__btn--accept { background: #1677ff; border: none; color: #fff; }
|
||||
</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">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">‹ 返回</button>
|
||||
<span class="nav-title">视频咨询预约</span>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 员工信息 -->
|
||||
<div class="user-info">
|
||||
<div class="user-info__avatar">王</div>
|
||||
<div class="user-info__detail">
|
||||
<div class="user-info__name">王芳 <span class="tag tag-orange">待接受</span></div>
|
||||
<div class="user-info__dept">人事部 · 员工</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 预约信息卡 -->
|
||||
<div class="appt-card">
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">预约时间</span>
|
||||
<span class="appt-card__value appt-card__value--highlight">今日 14:00-14:30</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">咨询类型</span>
|
||||
<span class="appt-card__value">视频咨询</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">预约时间</span>
|
||||
<span class="appt-card__value">2026-04-08 09:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康档案（可折叠） -->
|
||||
<div class="profile-section">
|
||||
<div class="profile-section__header" onclick="toggleProfile()">
|
||||
<span class="profile-section__title">咨询人健康档案</span>
|
||||
<span class="profile-section__arrow" id="profileArrow">▼</span>
|
||||
</div>
|
||||
<div class="profile-section__body" id="profileBody">
|
||||
<div class="profile-item"><span class="profile-item__label">姓名</span><span class="profile-item__value">王芳</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">性别/年龄</span><span class="profile-item__value">女 / 34岁</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">身高/体重</span><span class="profile-item__value">160cm / 58kg</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">饮酒情况</span><span class="profile-item__value">偶尔饮酒</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">饮食习惯</span><span class="profile-item__value profile-item__value--warn">偏油腻</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">睡眠质量</span><span class="profile-item__value">一般</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">家族病史</span><span class="profile-item__value profile-item__value--warn">高血压</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">异常指标</span><span class="profile-item__value profile-item__value--warn">血脂偏高</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 咨询说明 -->
|
||||
<div class="consult-note">
|
||||
<div class="consult-note__title">咨询说明</div>
|
||||
<div class="consult-note__text">最近体检发现血脂偏高，想咨询一下饮食和生活方式方面需要注意什么，以及是否需要进一步检查。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="bottom-actions">
|
||||
<button class="bottom-actions__btn bottom-actions__btn--reject">拒绝预约</button>
|
||||
<button class="bottom-actions__btn bottom-actions__btn--accept" onclick="openModal()">接受预约</button>
|
||||
</div>
|
||||
<!-- 接受确认弹窗 -->
|
||||
<div class="modal-center" id="confirmModal">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">确认接受</div>
|
||||
<div class="modal-body">确认接受王芳的视频咨询预约？<br>预约时间：今日 14:00-14:30</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal()">取消</button>
|
||||
<button onclick="location.href='./index.html'">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 打开确认弹窗 */
|
||||
function openModal() {
|
||||
document.getElementById('confirmModal').classList.add('active');
|
||||
}
|
||||
/* 关闭确认弹窗 */
|
||||
function closeModal() {
|
||||
document.getElementById('confirmModal').classList.remove('active');
|
||||
}
|
||||
/* 切换健康档案折叠/展开 */
|
||||
function toggleProfile() {
|
||||
var body = document.getElementById('profileBody');
|
||||
var arrow = document.getElementById('profileArrow');
|
||||
body.classList.toggle('active');
|
||||
arrow.classList.toggle('profile-section__arrow--open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!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: #1a1a2e; 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; }
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #ff4d4f; font-weight: 600; }
|
||||
|
||||
/* ===== 视频通话页专属样式 ===== */
|
||||
/* 状态栏（深色背景适配） */
|
||||
.status-bar { height: 44px; 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: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
|
||||
/* 远端画面区域 */
|
||||
.video-call__remote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
||||
.video-call__remote-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; font-weight: 600; margin-bottom: 16px; }
|
||||
.video-call__remote-name { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 6px; }
|
||||
.video-call__remote-status { font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
|
||||
/* 通话时长 */
|
||||
.video-call__duration { text-align: center; padding: 16px 0; }
|
||||
.video-call__duration-text { font-size: 32px; font-weight: 300; color: #fff; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* 本地小窗（右上角） */
|
||||
.video-call__local { position: absolute; top: 100px; right: 24px; width: 90px; height: 120px; border-radius: 12px; background: linear-gradient(135deg, #2d3436, #636e72); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10; }
|
||||
.video-call__local-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #00b894, #00cec9); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600; }
|
||||
|
||||
/* 底部控制栏 */
|
||||
.video-call__controls { padding: 20px 40px 48px; display: flex; align-items: center; justify-content: space-around; flex-shrink: 0; }
|
||||
.video-call__ctrl-btn { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
|
||||
.video-call__ctrl-btn--mic { background: rgba(255,255,255,0.15); }
|
||||
.video-call__ctrl-btn--mic.muted { background: #ff4d4f; }
|
||||
.video-call__ctrl-btn--hangup { background: #ff4d4f; width: 64px; height: 64px; }
|
||||
.video-call__ctrl-btn--cam { background: rgba(255,255,255,0.15); }
|
||||
.video-call__ctrl-btn--cam.off { background: #ff4d4f; }
|
||||
.video-call__ctrl-btn svg { pointer-events: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏（白色文字） -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 本地小窗（右上角） -->
|
||||
<div class="video-call__local">
|
||||
<div class="video-call__local-avatar">我</div>
|
||||
</div>
|
||||
|
||||
<!-- 远端画面区域 -->
|
||||
<div class="video-call__remote">
|
||||
<div class="video-call__remote-avatar">王</div>
|
||||
<div class="video-call__remote-name">王芳</div>
|
||||
<div class="video-call__remote-status">视频通话中</div>
|
||||
</div>
|
||||
|
||||
<!-- 通话时长 -->
|
||||
<div class="video-call__duration">
|
||||
<div class="video-call__duration-text">05:23</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部控制栏 -->
|
||||
<div class="video-call__controls">
|
||||
<!-- 麦克风按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--mic" id="micBtn" onclick="toggleMic()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||
</button>
|
||||
<!-- 挂断按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--hangup" onclick="openModal()">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 2.59 3.4z"/></svg>
|
||||
</button>
|
||||
<!-- 摄像头按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--cam" id="camBtn" onclick="toggleCam()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 挂断确认弹窗 -->
|
||||
<div class="modal-center" id="confirmModal">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束通话</div>
|
||||
<div class="modal-body">确认结束当前视频通话？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal()">取消</button>
|
||||
<button onclick="location.href='./index.html'">结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 打开挂断确认弹窗 */
|
||||
function openModal() {
|
||||
document.getElementById('confirmModal').classList.add('active');
|
||||
}
|
||||
/* 关闭挂断确认弹窗 */
|
||||
function closeModal() {
|
||||
document.getElementById('confirmModal').classList.remove('active');
|
||||
}
|
||||
/* 切换麦克风状态（静音/取消静音） */
|
||||
function toggleMic() {
|
||||
document.getElementById('micBtn').classList.toggle('muted');
|
||||
}
|
||||
/* 切换摄像头状态（开启/关闭） */
|
||||
function toggleCam() {
|
||||
document.getElementById('camBtn').classList.toggle('off');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
|
||||
/* 员工信息区 */
|
||||
.user-info { padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; }
|
||||
.user-info__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #a18cd1, #fbc2eb); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 600; flex-shrink: 0; }
|
||||
.user-info__detail { flex: 1; }
|
||||
.user-info__name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.user-info__dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
|
||||
/* 完成信息卡（灰色） */
|
||||
.done-card { margin: 12px 16px; padding: 14px; border-radius: 12px; background: #fafafa; border: 1px solid #e8e8e8; }
|
||||
.done-card__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
|
||||
.done-card__label { color: #8c8c8c; }
|
||||
.done-card__value { color: #1a1a1a; font-weight: 500; }
|
||||
.done-card__stars { color: #faad14; font-size: 14px; letter-spacing: 2px; }
|
||||
|
||||
/* 员工评价（黄色引用框） */
|
||||
.feedback-card { margin: 12px 16px; padding: 14px 16px; border-radius: 12px; background: #fffbe6; border-left: 4px solid #faad14; }
|
||||
.feedback-card__title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.feedback-card__text { font-size: 13px; color: #666; line-height: 1.6; font-style: italic; }
|
||||
|
||||
/* 健康档案折叠区 */
|
||||
.profile-section { margin: 12px 16px; background: #fff; border-radius: 12px; overflow: hidden; }
|
||||
.profile-section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
|
||||
.profile-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.profile-section__arrow { font-size: 12px; color: #999; transition: transform 0.3s; }
|
||||
.profile-section__arrow--open { transform: rotate(180deg); }
|
||||
.profile-section__body { display: none; padding: 0 16px 14px; }
|
||||
.profile-section__body.active { display: block; }
|
||||
.profile-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
|
||||
.profile-item:last-child { border-bottom: none; }
|
||||
.profile-item__label { color: #8c8c8c; }
|
||||
.profile-item__value { color: #1a1a1a; }
|
||||
.profile-item__value--warn { color: #fa8c16; }
|
||||
|
||||
/* 咨询说明 */
|
||||
.consult-note { margin: 12px 16px; background: #fff; border-radius: 12px; padding: 14px 16px; }
|
||||
.consult-note__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.consult-note__text { font-size: 14px; color: #666; line-height: 1.6; }
|
||||
</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">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">‹ 返回</button>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 员工信息 -->
|
||||
<div class="user-info">
|
||||
<div class="user-info__avatar">孙</div>
|
||||
<div class="user-info__detail">
|
||||
<div class="user-info__name">孙丽 <span class="tag tag-gray">已完成</span></div>
|
||||
<div class="user-info__dept">行政部 · 行政专员</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 完成信息卡（灰色） -->
|
||||
<div class="done-card">
|
||||
<div class="done-card__row">
|
||||
<span class="done-card__label">咨询时间</span>
|
||||
<span class="done-card__value">昨天 10:00-10:28</span>
|
||||
</div>
|
||||
<div class="done-card__row">
|
||||
<span class="done-card__label">通话时长</span>
|
||||
<span class="done-card__value">28分钟</span>
|
||||
</div>
|
||||
<div class="done-card__row">
|
||||
<span class="done-card__label">员工评分</span>
|
||||
<span class="done-card__stars">★★★★★ 5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工评价 -->
|
||||
<div class="feedback-card">
|
||||
<div class="feedback-card__title">员工评价</div>
|
||||
<div class="feedback-card__text">"医生非常专业耐心，详细解答了我关于颈椎保养的问题，给出了很实用的建议，非常感谢！"</div>
|
||||
</div>
|
||||
<!-- 健康档案（可折叠） -->
|
||||
<div class="profile-section">
|
||||
<div class="profile-section__header" onclick="toggleProfile()">
|
||||
<span class="profile-section__title">咨询人健康档案</span>
|
||||
<span class="profile-section__arrow" id="profileArrow">▼</span>
|
||||
</div>
|
||||
<div class="profile-section__body" id="profileBody">
|
||||
<div class="profile-item"><span class="profile-item__label">姓名</span><span class="profile-item__value">孙丽</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">性别/年龄</span><span class="profile-item__value">女 / 26岁</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">身高/体重</span><span class="profile-item__value">162cm / 50kg</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">饮食习惯</span><span class="profile-item__value">清淡饮食</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">睡眠质量</span><span class="profile-item__value">一般</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">健康问题</span><span class="profile-item__value profile-item__value--warn">颈椎不适</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 咨询说明 -->
|
||||
<div class="consult-note">
|
||||
<div class="consult-note__title">咨询说明</div>
|
||||
<div class="consult-note__text">长期伏案工作导致颈椎不适，想了解日常保养方法和是否需要就医检查。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 切换健康档案折叠/展开 */
|
||||
function toggleProfile() {
|
||||
var body = document.getElementById('profileBody');
|
||||
var arrow = document.getElementById('profileArrow');
|
||||
body.classList.toggle('active');
|
||||
arrow.classList.toggle('profile-section__arrow--open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!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; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
|
||||
/* 员工信息区 */
|
||||
.user-info { padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; }
|
||||
.user-info__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #36d1dc, #5b86e5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 600; flex-shrink: 0; }
|
||||
.user-info__detail { flex: 1; }
|
||||
.user-info__name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.user-info__dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
|
||||
/* 预约信息卡（绿色） */
|
||||
.appt-card { margin: 12px 16px; padding: 14px; border-radius: 12px; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.appt-card__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
|
||||
.appt-card__label { color: #8c8c8c; }
|
||||
.appt-card__value { color: #1a1a1a; font-weight: 500; }
|
||||
.appt-card__value--highlight { color: #52c41a; font-weight: 700; font-size: 15px; }
|
||||
|
||||
/* 健康档案折叠区 */
|
||||
.profile-section { margin: 12px 16px; background: #fff; border-radius: 12px; overflow: hidden; }
|
||||
.profile-section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
|
||||
.profile-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.profile-section__arrow { font-size: 12px; color: #999; transition: transform 0.3s; }
|
||||
.profile-section__arrow--open { transform: rotate(180deg); }
|
||||
.profile-section__body { display: none; padding: 0 16px 14px; }
|
||||
.profile-section__body.active { display: block; }
|
||||
.profile-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
|
||||
.profile-item:last-child { border-bottom: none; }
|
||||
.profile-item__label { color: #8c8c8c; }
|
||||
.profile-item__value { color: #1a1a1a; }
|
||||
.profile-item__value--warn { color: #fa8c16; }
|
||||
|
||||
/* 咨询说明 */
|
||||
.consult-note { margin: 12px 16px; background: #fff; border-radius: 12px; padding: 14px 16px; }
|
||||
.consult-note__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.consult-note__text { font-size: 14px; color: #666; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-actions { padding: 12px 16px 28px; background: #fff; display: flex; gap: 12px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.bottom-actions__btn { flex: 1; height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; background: #52c41a; border: none; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
</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">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">‹ 返回</button>
|
||||
<span class="nav-title">视频咨询详情</span>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 员工信息 -->
|
||||
<div class="user-info">
|
||||
<div class="user-info__avatar">刘</div>
|
||||
<div class="user-info__detail">
|
||||
<div class="user-info__name">刘梅 <span class="tag tag-green">进行中</span></div>
|
||||
<div class="user-info__dept">财务部 · 会计</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 预约信息卡（绿色） -->
|
||||
<div class="appt-card">
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">预约时间</span>
|
||||
<span class="appt-card__value appt-card__value--highlight">今日 14:00-14:30</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">咨询类型</span>
|
||||
<span class="appt-card__value">视频咨询</span>
|
||||
</div>
|
||||
<div class="appt-card__row">
|
||||
<span class="appt-card__label">状态</span>
|
||||
<span class="appt-card__value appt-card__value--highlight">已确认</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康档案（可折叠） -->
|
||||
<div class="profile-section">
|
||||
<div class="profile-section__header" onclick="toggleProfile()">
|
||||
<span class="profile-section__title">咨询人健康档案</span>
|
||||
<span class="profile-section__arrow" id="profileArrow">▼</span>
|
||||
</div>
|
||||
<div class="profile-section__body" id="profileBody">
|
||||
<div class="profile-item"><span class="profile-item__label">姓名</span><span class="profile-item__value">刘梅</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">性别/年龄</span><span class="profile-item__value">女 / 31岁</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">身高/体重</span><span class="profile-item__value">165cm / 55kg</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">饮食习惯</span><span class="profile-item__value">均衡饮食</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">睡眠质量</span><span class="profile-item__value">良好</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">重大病史</span><span class="profile-item__value">无</span></div>
|
||||
<div class="profile-item"><span class="profile-item__label">异常指标</span><span class="profile-item__value profile-item__value--warn">血脂偏高</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 咨询说明 -->
|
||||
<div class="consult-note">
|
||||
<div class="consult-note__title">咨询说明</div>
|
||||
<div class="consult-note__text">近期体检血脂指标偏高，希望了解日常饮食调整建议及是否需要药物干预。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="bottom-actions">
|
||||
<button class="bottom-actions__btn" onclick="location.href='./video-call.html'">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
发起视频通话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 切换健康档案折叠/展开 */
|
||||
function toggleProfile() {
|
||||
var body = document.getElementById('profileBody');
|
||||
var arrow = document.getElementById('profileArrow');
|
||||
body.classList.toggle('active');
|
||||
arrow.classList.toggle('profile-section__arrow--open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user