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
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>