yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 咨询档案详情页新增咨询人档案信息折叠展示区域

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-04-17 17:39:13 +08:00
co-authored by Claude Opus 4.6
parent 5325d17593
commit 367391f568
2 changed files with 204 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emergency-app/expert/workbench/video-call.html
-126
View File
@@ -1,126 +0,0 @@
<!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>
web-admin/health-consult/consult-record-detail.html
+204
View File
@@ -86,6 +86,35 @@
.consult-row{display:flex;flex-direction:column;gap:4px;}
.consult-row__label{font-size:var(--font-xs);color:var(--text-secondary);}
.consult-row__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
/* 咨询档案折叠区域 */
.archive-section{margin-top:16px;}
.archive-section__header{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 0;user-select:none;}
.archive-section__header::before{content:'';width:3px;height:14px;background:var(--primary);border-radius:2px;}
.archive-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);flex:1;}
.archive-section__count{font-size:var(--font-xs);color:var(--text-secondary);}
.archive-section__arrow{font-size:10px;color:var(--text-secondary);transition:transform .2s;}
.archive-section__arrow.collapsed{transform:rotate(-90deg);}
.archive-section__body{display:flex;flex-direction:column;gap:8px;padding-top:8px;}
.archive-section__body.collapsed{display:none;}
.archive-section__empty{font-size:var(--font-xs);color:#bbb;padding:20px 0;text-align:center;}
.archive-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;overflow:hidden;}
.archive-item__header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;transition:background .2s;}
.archive-item__header:hover{background:#F5F7FA;}
.archive-item__name{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
.archive-item__arrow{font-size:12px;color:var(--text-secondary);transition:transform .25s;}
.archive-item__arrow.expanded{transform:rotate(90deg);}
.archive-item__detail{display:none;padding:16px;border-top:1px solid var(--border);background:#FAFBFC;}
.archive-item__detail.expanded{display:block;}
.archive-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;font-size:var(--font-sm);}
.archive-row:last-child{margin-bottom:0;}
.archive-row__label{color:var(--primary);min-width:100px;flex-shrink:0;white-space:nowrap;}
.archive-row__value{color:var(--text-primary);line-height:1.6;}
.archive-row__value .tag{margin-left:0;}
.archive-row__sub{display:inline-flex;align-items:center;gap:6px;margin-left:16px;color:var(--primary);font-size:var(--font-sm);}
.archive-row__sub-val{color:var(--text-primary);}
.archive-img-list{display:flex;gap:10px;flex-wrap:wrap;}
.archive-img-placeholder{width:80px;height:80px;background:#F0F0F0;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#bbb;font-size:var(--font-xs);border:1px solid var(--border);}
.archive-img-placeholder svg{width:28px;height:28px;color:#ccc;}
</style>
</head>
<body>
@@ -267,6 +296,103 @@
</div>
</div>
</div>
<!-- 咨询档案列表 -->
<div class="archive-section">
<div class="archive-section__header" onclick="toggleArchiveSection(this)">
<span class="archive-section__title">档案信息</span>
<span class="archive-section__count">共 2 条</span>
<span class="archive-section__arrow">▾</span>
</div>
<div class="archive-section__body">
<!-- 档案1 -->
<div class="archive-item">
<div class="archive-item__header" onclick="toggleArchiveItem(this)">
<span class="archive-item__name">久坐腰部疼痛</span>
<span class="archive-item__arrow">›</span>
</div>
<div class="archive-item__detail">
<div class="archive-row">
<span class="archive-row__label">档案名称</span>
<span class="archive-row__value">久坐腰部疼痛</span>
</div>
<div class="archive-row">
<span class="archive-row__label">问题描述</span>
<span class="archive-row__value">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</span>
</div>
<div class="archive-row">
<span class="archive-row__label">持续时间</span>
<span class="archive-row__value"><span class="tag tag-blue">1-2周</span></span>
</div>
<div class="archive-row">
<span class="archive-row__label">检查资料</span>
<span class="archive-row__value">
<div class="archive-img-list">
<div class="archive-img-placeholder"><svg viewBox="0 0 28 28" fill="none"><rect x="3" y="5" width="22" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 19l6-6 4 4 4-5 8 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/></svg>图片</div>
<div class="archive-img-placeholder"><svg viewBox="0 0 28 28" fill="none"><rect x="3" y="5" width="22" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 19l6-6 4 4 4-5 8 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/></svg>图片</div>
</div>
</span>
</div>
<div class="archive-row">
<span class="archive-row__label">是否前往医院就诊</span>
<span class="archive-row__value">是
<span class="archive-row__sub">医院名称 <span class="archive-row__sub-val">北京协和医院</span></span>
<span class="archive-row__sub">科室 <span class="archive-row__sub-val">骨科</span></span>
</span>
</div>
<div class="archive-row">
<span class="archive-row__label">疾病名称</span>
<span class="archive-row__value">腰肌劳损</span>
</div>
<div class="archive-row">
<span class="archive-row__label">期望帮助</span>
<span class="archive-row__value">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</span>
</div>
</div>
</div>
<!-- 档案2 -->
<div class="archive-item">
<div class="archive-item__header" onclick="toggleArchiveItem(this)">
<span class="archive-item__name">头痛反复发作</span>
<span class="archive-item__arrow">›</span>
</div>
<div class="archive-item__detail">
<div class="archive-row">
<span class="archive-row__label">档案名称</span>
<span class="archive-row__value">头痛反复发作</span>
</div>
<div class="archive-row">
<span class="archive-row__label">问题描述</span>
<span class="archive-row__value">近一个月头痛频繁，每次持续1-2小时，以前额和太阳穴为主。</span>
</div>
<div class="archive-row">
<span class="archive-row__label">持续时间</span>
<span class="archive-row__value"><span class="tag tag-blue">1个月</span></span>
</div>
<div class="archive-row">
<span class="archive-row__label">检查资料</span>
<span class="archive-row__value">
<div class="archive-img-list">
<div class="archive-img-placeholder"><svg viewBox="0 0 28 28" fill="none"><rect x="3" y="5" width="22" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 19l6-6 4 4 4-5 8 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/></svg>图片</div>
</div>
</span>
</div>
<div class="archive-row">
<span class="archive-row__label">是否前往医院就诊</span>
<span class="archive-row__value">否</span>
</div>
<div class="archive-row">
<span class="archive-row__label">疾病名称</span>
<span class="archive-row__value">紧张型头痛</span>
</div>
<div class="archive-row">
<span class="archive-row__label">期望帮助</span>
<span class="archive-row__value">想了解头痛的可能原因和缓解方法。</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 咨询人2 -->
@@ -344,6 +470,60 @@
</div>
</div>
</div>
<!-- 咨询档案列表 -->
<div class="archive-section">
<div class="archive-section__header" onclick="toggleArchiveSection(this)">
<span class="archive-section__title">本次档案</span>
<span class="archive-section__count">共 1 条</span>
<span class="archive-section__arrow">▾</span>
</div>
<div class="archive-section__body">
<div class="archive-item">
<div class="archive-item__header" onclick="toggleArchiveItem(this)">
<span class="archive-item__name">血压控制不稳定</span>
<span class="archive-item__arrow">›</span>
</div>
<div class="archive-item__detail">
<div class="archive-row">
<span class="archive-row__label">档案名称</span>
<span class="archive-row__value">血压控制不稳定</span>
</div>
<div class="archive-row">
<span class="archive-row__label">问题描述</span>
<span class="archive-row__value">近期血压波动较大，早晨测量偏高，服药后有时偏低，头晕频繁。</span>
</div>
<div class="archive-row">
<span class="archive-row__label">持续时间</span>
<span class="archive-row__value"><span class="tag tag-blue">2-3周</span></span>
</div>
<div class="archive-row">
<span class="archive-row__label">检查资料</span>
<span class="archive-row__value">
<div class="archive-img-list">
<div class="archive-img-placeholder"><svg viewBox="0 0 28 28" fill="none"><rect x="3" y="5" width="22" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 19l6-6 4 4 4-5 8 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="11" r="2" stroke="currentColor" stroke-width="1.5"/></svg>图片</div>
</div>
</span>
</div>
<div class="archive-row">
<span class="archive-row__label">是否前往医院就诊</span>
<span class="archive-row__value">是
<span class="archive-row__sub">医院名称 <span class="archive-row__sub-val">长庆油田职工医院</span></span>
<span class="archive-row__sub">科室 <span class="archive-row__sub-val">心内科</span></span>
</span>
</div>
<div class="archive-row">
<span class="archive-row__label">疾病名称</span>
<span class="archive-row__value">高血压</span>
</div>
<div class="archive-row">
<span class="archive-row__label">期望帮助</span>
<span class="archive-row__value">咨询降压药物调整方案，以及日常血压管理建议。</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 咨询人3 -->
@@ -421,6 +601,18 @@
</div>
</div>
</div>
<!-- 咨询档案列表（空） -->
<div class="archive-section">
<div class="archive-section__header" onclick="toggleArchiveSection(this)">
<span class="archive-section__title">本次档案</span>
<span class="archive-section__count">共 0 条</span>
<span class="archive-section__arrow">▾</span>
</div>
<div class="archive-section__body">
<div class="archive-section__empty">暂无咨询档案</div>
</div>
</div>
</div>
</div>
</div>
@@ -436,6 +628,18 @@ function switchTab(btn, tabId) {
btn.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
function toggleArchiveSection(header) {
const arrow = header.querySelector('.archive-section__arrow');
const body = header.nextElementSibling;
arrow.classList.toggle('collapsed');
body.classList.toggle('collapsed');
}
function toggleArchiveItem(itemHeader) {
const arrow = itemHeader.querySelector('.archive-item__arrow');
const detail = itemHeader.nextElementSibling;
arrow.classList.toggle('expanded');
detail.classList.toggle('expanded');
}
</script>
</body>
</html>