feat: 新增健康画像与历史咨询摘要模块，咨询结束页增加AI摘要卡片；应急大屏增加生活习惯画像
This commit is contained in:
liuyunqin
@@ -39,6 +39,7 @@
|
||||
}
|
||||
.nav-back { font-size: 22px; color: #333; text-decoration: none; margin-right: 8px; line-height: 1; cursor: pointer; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #333; }
|
||||
.nav-right-btn { margin-left: auto; font-size: 13px; color: #1677ff; background: #e8f4ff; border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-weight: 500; }
|
||||
|
||||
/* ===== 页面内容 ===== */
|
||||
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f5f5f5; }
|
||||
@@ -116,6 +117,7 @@
|
||||
<!-- [交互] 点击返回: 根据来源页面动态返回 -->
|
||||
<a class="nav-back" id="back-btn" onclick="goBack()">‹</a>
|
||||
<span class="nav-title">咨询人档案</span>
|
||||
<button class="nav-right-btn" onclick="location.href='../../../employee-app/profile/health-profile.html'">健康画像</button>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>历史咨询摘要 | 健康CQ原型</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; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 摘要卡片 */
|
||||
.summary-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: relative; cursor: pointer; transition: box-shadow .2s; }
|
||||
.summary-card:active { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
.summary-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.summary-card__date { font-size: 12px; color: #999; }
|
||||
.summary-card__toggle { font-size: 12px; color: #1677ff; cursor: pointer; user-select: none; background: none; border: none; padding: 2px 6px; display: flex; align-items: center; gap: 2px; }
|
||||
.summary-card__toggle .arrow { display: inline-block; transition: transform .25s; font-size: 10px; }
|
||||
.summary-card__toggle.collapsed .arrow { transform: rotate(-90deg); }
|
||||
.summary-card__body { overflow: hidden; transition: max-height .3s ease, opacity .3s ease; max-height: 500px; opacity: 1; }
|
||||
.summary-card__body.collapsed { max-height: 0; opacity: 0; margin: 0; padding: 0; }
|
||||
.summary-card__disclaimer { font-size: 11px; color: #bbb; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e8e8e8; }
|
||||
.summary-card__status { font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; }
|
||||
.summary-card__status--done { background: #f6ffed; color: #52c41a; }
|
||||
.summary-card__status--timeout { background: #fff7e6; color: #fa8c16; }
|
||||
.summary-card__status--cancelled { background: #fff1f0; color: #ff4d4f; }
|
||||
.summary-card__consultant { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.summary-card__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
||||
.summary-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.summary-card__relation { font-size: 11px; color: #888; font-weight: 400; margin-left: 4px; }
|
||||
.summary-card__reason { font-size: 12px; color: #666; }
|
||||
.summary-card__ai-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
|
||||
.summary-card__ai-label span { font-size: 11px; color: #1677ff; font-weight: 600; }
|
||||
.summary-card__ai-badge { font-size: 10px; background: linear-gradient(135deg, #e6f4ff, #bae0ff); color: #1677ff; padding: 2px 6px; border-radius: 4px; }
|
||||
.summary-card__summary { font-size: 13px; color: #333; line-height: 1.7; background: #fafbfc; border-radius: 8px; padding: 10px 12px; border-left: 3px solid #1677ff; }
|
||||
.summary-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.summary-card__tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; }
|
||||
.summary-card__tag--blue { color: #1677ff; background: #e8f4ff; }
|
||||
.summary-card__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
.summary-card__tag--green { color: #389e0d; background: #f6ffed; }
|
||||
.summary-card__arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #ccc; }
|
||||
</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="history.back()">
|
||||
<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" id="summary-list">
|
||||
|
||||
<!-- 摘要卡片列表 -->
|
||||
<!-- 卡片1 -->
|
||||
<div class="summary-card" onclick="location.href='./text-chat-done.html'">
|
||||
<div class="summary-card__header">
|
||||
<span class="summary-card__date">2026-08-10 14:30</span>
|
||||
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
|
||||
</div>
|
||||
<div class="summary-card__consultant">
|
||||
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
|
||||
<div>
|
||||
<div class="summary-card__name">张小红<span class="summary-card__relation">本人</span></div>
|
||||
<div class="summary-card__reason">头痛咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__ai-label">
|
||||
<span>🤖 AI 摘要</span>
|
||||
<span class="summary-card__ai-badge">自动生成</span>
|
||||
</div>
|
||||
<div class="summary-card__summary">
|
||||
咨询者主诉反复头痛一周，以双侧太阳穴胀痛为主，下午加重，偶伴恶心。专家建议排查紧张性头痛可能，嘱其规律作息、减少屏幕用眼时间，必要时行头颅CT检查。已开具布洛芬缓释胶囊对症处理，并建议记录头痛日记以便后续复诊参考。
|
||||
</div>
|
||||
<div class="summary-card__tags">
|
||||
<span class="summary-card__tag summary-card__tag--orange">头痛</span>
|
||||
<span class="summary-card__tag summary-card__tag--blue">紧张性头痛</span>
|
||||
<span class="summary-card__tag summary-card__tag--green">用药指导</span>
|
||||
</div>
|
||||
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片2 -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__header">
|
||||
<span class="summary-card__date">2026-08-05 09:15</span>
|
||||
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
|
||||
</div>
|
||||
<div class="summary-card__consultant">
|
||||
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#e0f0ff,#b3d9ff);">👨</div>
|
||||
<div>
|
||||
<div class="summary-card__name">李明强<span class="summary-card__relation">配偶</span></div>
|
||||
<div class="summary-card__reason">腰部酸痛咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__ai-label">
|
||||
<span>🤖 AI 摘要</span>
|
||||
<span class="summary-card__ai-badge">自动生成</span>
|
||||
</div>
|
||||
<div class="summary-card__summary">
|
||||
咨询者因长期久坐办公，近两个月出现腰部酸痛不适，晨起僵硬，活动后缓解。专家初步判断为腰肌劳损，建议进行核心肌群锻炼，调整办公坐姿，避免长时间维持同一姿势。已推荐物理治疗及居家拉伸方案，嘱两周后复诊评估。
|
||||
</div>
|
||||
<div class="summary-card__tags">
|
||||
<span class="summary-card__tag summary-card__tag--orange">腰痛</span>
|
||||
<span class="summary-card__tag summary-card__tag--blue">腰肌劳损</span>
|
||||
<span class="summary-card__tag summary-card__tag--green">康复指导</span>
|
||||
</div>
|
||||
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片3 -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__header">
|
||||
<span class="summary-card__date">2026-07-22 15:20</span>
|
||||
<button class="summary-card__toggle" onclick="toggleCard(this, event)">收起 <span class="arrow">▲</span></button>
|
||||
</div>
|
||||
<div class="summary-card__consultant">
|
||||
<div class="summary-card__avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div>
|
||||
<div>
|
||||
<div class="summary-card__name">张小红<span class="summary-card__relation">本人</span></div>
|
||||
<div class="summary-card__reason">失眠调理咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__ai-label">
|
||||
<span>🤖 AI 摘要</span>
|
||||
<span class="summary-card__ai-badge">自动生成</span>
|
||||
</div>
|
||||
<div class="summary-card__summary">
|
||||
咨询者反映近一月入睡困难，每晚平均睡眠不足5小时，伴焦虑情绪。专家评估为轻度睡眠障碍，建议建立规律作息、睡前1小时远离电子设备、尝试正念冥想放松。已开具褪黑素短期辅助，建议连续记录睡眠日记两周后复诊。
|
||||
</div>
|
||||
<div class="summary-card__tags">
|
||||
<span class="summary-card__tag summary-card__tag--orange">失眠</span>
|
||||
<span class="summary-card__tag summary-card__tag--blue">睡眠障碍</span>
|
||||
<span class="summary-card__tag summary-card__tag--green">生活方式指导</span>
|
||||
<span class="summary-card__tag summary-card__tag--green">用药指导</span>
|
||||
</div>
|
||||
<div class="summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换卡片 AI 摘要的展开/收起
|
||||
* @param {HTMLElement} btn - 被点击的切换按钮
|
||||
* @param {Event} e - 点击事件
|
||||
*/
|
||||
function toggleCard(btn, e) {
|
||||
e.stopPropagation();
|
||||
var body = btn.parentElement.parentElement.querySelector('.summary-card__body');
|
||||
var collapsed = btn.classList.contains('collapsed');
|
||||
if (collapsed) {
|
||||
btn.classList.remove('collapsed');
|
||||
body.classList.remove('collapsed');
|
||||
btn.innerHTML = '收起 <span class="arrow">▲</span>';
|
||||
} else {
|
||||
btn.classList.add('collapsed');
|
||||
body.classList.add('collapsed');
|
||||
btn.innerHTML = '展开 <span class="arrow">▼</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -74,7 +74,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<button class="nav-right" onclick="openModal('modal-end-confirm')">结束咨询</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 历史咨询摘要入口 -->
|
||||
<div style="background:#fff;border-bottom:1px solid #f0f0f0;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;flex-shrink:0;" onclick="location.href='./history-summary.html'">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:16px;">📋</span>
|
||||
<span style="font-size:14px;color:#333;font-weight:500;">历史咨询摘要</span>
|
||||
</div>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="#bbb" stroke-width="2"><path d="M1 1l6 6-6 6"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
|
||||
@@ -24,6 +24,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
/* AI 摘要卡片 */
|
||||
.ai-summary-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.ai-summary-card__label { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
|
||||
.ai-summary-card__label span { font-size: 11px; color: #1677ff; font-weight: 600; }
|
||||
.ai-summary-card__badge { font-size: 10px; background: linear-gradient(135deg, #e6f4ff, #bae0ff); color: #1677ff; padding: 2px 6px; border-radius: 4px; }
|
||||
.ai-summary-card__text { font-size: 13px; color: #333; line-height: 1.7; background: #fafbfc; border-radius: 8px; padding: 10px 12px; border-left: 3px solid #1677ff; }
|
||||
.ai-summary-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.ai-summary-card__tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; }
|
||||
.ai-summary-card__tag--blue { color: #1677ff; background: #e8f4ff; }
|
||||
.ai-summary-card__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
.ai-summary-card__tag--green { color: #389e0d; background: #f6ffed; }
|
||||
.ai-summary-card__disclaimer { font-size: 11px; color: #bbb; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e8e8e8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -87,6 +99,24 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
|
||||
<!-- AI 咨询摘要 -->
|
||||
<div class="ai-summary-card">
|
||||
<div class="ai-summary-card__label">
|
||||
<span>🤖 AI 咨询摘要</span>
|
||||
<span class="ai-summary-card__badge">自动生成</span>
|
||||
</div>
|
||||
<div class="ai-summary-card__text">
|
||||
咨询者因持续两周的失眠问题发起图文咨询，主要表现为入睡困难、睡眠浅、早醒，伴有日间疲劳和注意力不集中。专家通过问诊排除器质性病变，判断为轻度睡眠障碍合并焦虑情绪。建议建立规律作息、睡前进行放松训练，短期服用褪黑素辅助入眠。咨询者反馈依从性良好，一周后睡眠质量有所改善。
|
||||
</div>
|
||||
<div class="ai-summary-card__tags">
|
||||
<span class="ai-summary-card__tag ai-summary-card__tag--orange">失眠</span>
|
||||
<span class="ai-summary-card__tag ai-summary-card__tag--blue">睡眠障碍</span>
|
||||
<span class="ai-summary-card__tag ai-summary-card__tag--green">用药指导</span>
|
||||
<span class="ai-summary-card__tag ai-summary-card__tag--green">生活方式指导</span>
|
||||
</div>
|
||||
<div class="ai-summary-card__disclaimer">⚠️ 本摘要由 AI 自动生成，仅供参考，不具备专业医学诊断效力。具体诊疗请以医生意见为准。</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 健康画像 | 健康CQ原型</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; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 20px; color: #1a1a1a; cursor: pointer; width: 32px; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; padding: 0 0 34px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 健康等级头部卡片 */
|
||||
.grade-header { margin: 16px 16px 0; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border-radius: 14px; padding: 20px 16px; position: relative; overflow: hidden; }
|
||||
.grade-header::after { content: ''; position: absolute; right: -10px; top: -10px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.3); }
|
||||
.grade-header__row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
|
||||
.grade-info { flex: 1; }
|
||||
.grade-info__name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.grade-info__meta { font-size: 12px; color: #888; margin-top: 2px; }
|
||||
.grade-info__level-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
|
||||
.grade-info__badge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; }
|
||||
.grade-info__badge--B { background: linear-gradient(135deg, #fa8c16, #ffc069); }
|
||||
.grade-info__badge--A { background: linear-gradient(135deg, #ff4d4f, #ff7875); }
|
||||
.grade-info__badge--C { background: linear-gradient(135deg, #fadb14, #fff566); color: #614700; }
|
||||
.grade-info__badge--D { background: linear-gradient(135deg, #1677ff, #69b1ff); }
|
||||
.grade-info__badge--E { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||||
.grade-info__level-text { font-size: 13px; color: #555; }
|
||||
.grade-info__level-text b { font-size: 15px; }
|
||||
.grade-info__risk { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
|
||||
/* 通用卡片 */
|
||||
.card { background: #fff; border-radius: 14px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
|
||||
.card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
|
||||
.card__title .card__icon { font-size: 16px; }
|
||||
|
||||
/* 人群标签 */
|
||||
.pop-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
|
||||
.pop-tag--major { background: #fff1f0; color: #cf1322; border: 1px solid #ffccc7; }
|
||||
.pop-tag--chronic { background: #fff7e6; color: #d46b08; border: 1px solid #ffd591; }
|
||||
.pop-tag--sub { background: #fffbe6; color: #ad8b00; border: 1px solid #ffe58f; }
|
||||
.pop-tag--healthy { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.disease-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.disease-tag { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #f5f5f5; color: #666; }
|
||||
|
||||
/* 体征网格 */
|
||||
.vital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.vital-item { background: #fafafa; border-radius: 10px; padding: 12px; text-align: center; }
|
||||
.vital-item__label { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.vital-item__value { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.vital-item__unit { font-size: 12px; color: #999; font-weight: 400; }
|
||||
.vital-item__sub { font-size: 11px; margin-top: 2px; }
|
||||
.vital-item__sub--normal { color: #52c41a; }
|
||||
.vital-item__sub--warn { color: #fa8c16; }
|
||||
.vital-item__sub--danger { color: #ff4d4f; }
|
||||
|
||||
/* 过敏史警告卡片 */
|
||||
.card--danger { border-left: 4px solid #ff4d4f; }
|
||||
.alert-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.alert-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.alert-item__icon { color: #ff4d4f; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
|
||||
.alert-item__text { flex: 1; font-size: 14px; color: #333; line-height: 1.5; }
|
||||
.alert-item__text b { color: #cf1322; }
|
||||
.alert-item__tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #fff1f0; color: #ff4d4f; margin-left: 6px; }
|
||||
|
||||
/* 病史列表 */
|
||||
.history-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.history-item { padding: 8px 0; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 8px; }
|
||||
.history-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.history-item__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #d9d9d9; }
|
||||
.history-item__dot--active { background: #fa8c16; }
|
||||
.history-item__dot--surgery { background: #1677ff; }
|
||||
.history-item__text { flex: 1; font-size: 14px; color: #333; }
|
||||
.history-item__date { font-size: 12px; color: #999; flex-shrink: 0; }
|
||||
|
||||
/* 体检指标 */
|
||||
.exam-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.exam-row:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.exam-row__name { width: 70px; font-size: 14px; color: #333; font-weight: 500; flex-shrink: 0; }
|
||||
.exam-row__value { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-right: 6px; }
|
||||
.exam-row__ref { font-size: 11px; color: #bbb; margin-right: 8px; flex-shrink: 0; }
|
||||
.exam-row__trend { font-size: 14px; flex-shrink: 0; }
|
||||
.exam-row__trend--up { color: #ff4d4f; }
|
||||
.exam-row__trend--down { color: #52c41a; }
|
||||
.exam-row__trend--flat { color: #bbb; }
|
||||
.exam-row__status { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 10px; flex-shrink: 0; }
|
||||
.exam-row__status--normal { background: #f6ffed; color: #52c41a; }
|
||||
.exam-row__status--abnormal { background: #fff1f0; color: #ff4d4f; }
|
||||
.exam-row__status--borderline { background: #fffbe6; color: #d48806; }
|
||||
|
||||
/* 可折叠区块 */
|
||||
.collapsible { border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; margin-top: 10px; }
|
||||
.collapsible__header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; background: #fafafa; transition: background .2s; }
|
||||
.collapsible__header:active { background: #f0f0f0; }
|
||||
.collapsible__title { font-size: 13px; color: #666; flex: 1; }
|
||||
.collapsible__count { font-size: 11px; padding: 1px 8px; border-radius: 8px; background: #fff1f0; color: #ff4d4f; }
|
||||
.collapsible__arrow { font-size: 12px; color: #bbb; transition: transform .2s; }
|
||||
.collapsible--open .collapsible__arrow { transform: rotate(90deg); }
|
||||
.collapsible__body { display: none; padding: 4px 12px 8px; border-top: 1px solid #f0f0f0; }
|
||||
.collapsible--open .collapsible__body { display: block; }
|
||||
|
||||
/* 穿戴告警列表 */
|
||||
.wearable-alert-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
.wearable-alert-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fafafa; border-radius: 6px; border-left: 3px solid #ff4d4f; font-size: 13px; }
|
||||
.wearable-alert-item__time { color: #999; font-size: 12px; flex-shrink: 0; }
|
||||
.wearable-alert-item__type { color: #ff4d4f; font-weight: 500; }
|
||||
|
||||
/* 生活习惯标签云 */
|
||||
.habit-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.habit-tag { padding: 6px 14px; border-radius: 20px; font-size: 13px; display: flex; align-items: center; gap: 4px; }
|
||||
.habit-tag--good { background: #f6ffed; color: #389e0d; }
|
||||
.habit-tag--warn { background: #fff7e6; color: #d46b08; }
|
||||
.habit-tag--danger { background: #fff1f0; color: #cf1322; }
|
||||
.habit-tag--neutral { background: #f5f5f5; color: #666; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<!-- [交互] 点击返回来源页面 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="history.back()">‹</span>
|
||||
<span class="nav-title">健康画像</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- ===== 1. 健康等级头部 ===== -->
|
||||
<div class="grade-header">
|
||||
<div class="grade-header__row">
|
||||
<div class="grade-info">
|
||||
<div class="grade-info__name">周丽华</div>
|
||||
<div class="grade-info__meta">宝石花医院护理部 · 员工编号 BH-2019-0521</div>
|
||||
<div class="grade-info__level-row">
|
||||
<div class="grade-info__badge grade-info__badge--B">B</div>
|
||||
<div>
|
||||
<div class="grade-info__level-text">健康等级 <b>B 级</b> · 需关注</div>
|
||||
<div class="grade-info__risk">风险等级：中风险（心脑血管）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 2. 五类人群 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">🏥</span>人群分类</div>
|
||||
<span class="pop-tag pop-tag--major">大病人群（心脑血管病）</span>
|
||||
</div>
|
||||
|
||||
<!-- ===== 3. 基本体征 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">📏</span>基本体征</div>
|
||||
<div class="vital-grid">
|
||||
<div class="vital-item">
|
||||
<div class="vital-item__label">血型</div>
|
||||
<div class="vital-item__value">B<span class="vital-item__unit"> 型</span></div>
|
||||
<div class="vital-item__sub vital-item__sub--normal">Rh(+) 阳性</div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-item__label">身高</div>
|
||||
<div class="vital-item__value">162<span class="vital-item__unit"> cm</span></div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-item__label">体重</div>
|
||||
<div class="vital-item__value">68<span class="vital-item__unit"> kg</span></div>
|
||||
</div>
|
||||
<div class="vital-item">
|
||||
<div class="vital-item__label">BMI</div>
|
||||
<div class="vital-item__value">25.9<span class="vital-item__unit"></span></div>
|
||||
<div class="vital-item__sub vital-item__sub--warn">偏胖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 4. 过敏史 ===== -->
|
||||
<div class="card card--danger">
|
||||
<div class="card__title"><span class="card__icon">⚠️</span>过敏史</div>
|
||||
<div class="alert-item">
|
||||
<span class="alert-item__icon">🛑</span>
|
||||
<div class="alert-item__text">
|
||||
过敏史：<b>青霉素（过敏性休克）</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 5. 既往史 & 手术史 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">📋</span>既往史</div>
|
||||
<div class="history-list">
|
||||
<div class="history-item">
|
||||
<span class="history-item__dot history-item__dot--active"></span>
|
||||
<span class="history-item__text"><b>冠心病</b>（2021年确诊，支架植入术后）</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="history-item__dot history-item__dot--active"></span>
|
||||
<span class="history-item__text"><b>高血压</b>病史 5年，最高 180/110</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="history-item__dot history-item__dot--active"></span>
|
||||
<span class="history-item__text"><b>2型糖尿病</b> 2年</span>
|
||||
</div>
|
||||
<div class="history-item">
|
||||
<span class="history-item__dot history-item__dot--surgery"></span>
|
||||
<span class="history-item__text"><b>手术史</b>：冠脉支架×2（2021.03）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 6. 近期体检摘要 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">🔬</span>近期体检摘要 <span style="font-size:12px;color:#999;font-weight:400;">2026-05-15 · 宝石花医院</span></div>
|
||||
<div class="exam-row">
|
||||
<span class="exam-row__name">血压</span>
|
||||
<span class="exam-row__value">148/95</span>
|
||||
<span class="exam-row__ref">mmHg</span>
|
||||
<span class="exam-row__trend exam-row__trend--up">↑</span>
|
||||
<span class="exam-row__status exam-row__status--abnormal">偏高</span>
|
||||
</div>
|
||||
<div class="exam-row">
|
||||
<span class="exam-row__name">尿酸</span>
|
||||
<span class="exam-row__value">520</span>
|
||||
<span class="exam-row__ref">μmol/L</span>
|
||||
<span class="exam-row__trend exam-row__trend--up">↑</span>
|
||||
<span class="exam-row__status exam-row__status--abnormal">偏高</span>
|
||||
</div>
|
||||
<div class="exam-row">
|
||||
<span class="exam-row__name">血脂</span>
|
||||
<span class="exam-row__value">总胆固醇 6.8</span>
|
||||
<span class="exam-row__ref">mmol/L</span>
|
||||
<span class="exam-row__trend exam-row__trend--up">↑</span>
|
||||
<span class="exam-row__status exam-row__status--abnormal">异常</span>
|
||||
</div>
|
||||
<div class="exam-row">
|
||||
<span class="exam-row__name">血糖</span>
|
||||
<span class="exam-row__value">7.2</span>
|
||||
<span class="exam-row__ref">mmol/L</span>
|
||||
<span class="exam-row__trend exam-row__trend--up">↑</span>
|
||||
<span class="exam-row__status exam-row__status--abnormal">偏高</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 7. 穿戴·近期异常告警 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">⌚</span>穿戴 · 近期异常告警 <span style="font-size:12px;color:#999;font-weight:400;">近7天</span></div>
|
||||
<div class="collapsible collapsible--open" id="wearableAlerts">
|
||||
<div class="collapsible__header" onclick="toggleCollapsible('wearableAlerts')">
|
||||
<span class="collapsible__title">共3次告警</span>
|
||||
<span class="collapsible__count">3</span>
|
||||
<span class="collapsible__arrow">▶</span>
|
||||
</div>
|
||||
<div class="collapsible__body">
|
||||
<div class="wearable-alert-list">
|
||||
<div class="wearable-alert-item">
|
||||
<span class="wearable-alert-item__time">06-23 14:32</span>
|
||||
<span class="wearable-alert-item__type">摔倒</span>
|
||||
</div>
|
||||
<div class="wearable-alert-item">
|
||||
<span class="wearable-alert-item__time">06-20 09:15</span>
|
||||
<span class="wearable-alert-item__type">心率异常 142bpm</span>
|
||||
</div>
|
||||
<div class="wearable-alert-item">
|
||||
<span class="wearable-alert-item__time">06-18 21:40</span>
|
||||
<span class="wearable-alert-item__type">血氧异常 89%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 8. 生活习惯 ===== -->
|
||||
<div class="card">
|
||||
<div class="card__title"><span class="card__icon">🌿</span>生活习惯</div>
|
||||
<div class="habit-cloud">
|
||||
<span class="habit-tag habit-tag--danger">🚬 吸烟 10支/天</span>
|
||||
<span class="habit-tag habit-tag--warn">🍺 偶尔饮酒</span>
|
||||
<span class="habit-tag habit-tag--warn">🏃 运动不足（<1次/周）</span>
|
||||
<span class="habit-tag habit-tag--warn">😴 睡眠不足（<6h）</span>
|
||||
<span class="habit-tag habit-tag--neutral">🍚 主食偏多</span>
|
||||
<span class="habit-tag habit-tag--neutral">🥬 蔬菜摄入偏少</span>
|
||||
<span class="habit-tag habit-tag--warn">🧂 口味偏咸</span>
|
||||
<span class="habit-tag habit-tag--good">💧 饮水充足</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* [交互] 可折叠区块切换 */
|
||||
function toggleCollapsible(id) {
|
||||
var el = document.getElementById(id);
|
||||
el.classList.toggle('collapsible--open');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -132,6 +132,14 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
|
||||
.wearable-alert-item__time{color:var(--text-dim);flex-shrink:0;}
|
||||
.wearable-alert-item__type{color:var(--danger);font-weight:500;}
|
||||
|
||||
/* Portrait habit tags */
|
||||
.portrait-habits{display:flex;flex-wrap:wrap;gap:5px;}
|
||||
.portrait-habit-tag{padding:3px 10px;border-radius:3px;font-size:10px;display:flex;align-items:center;gap:3px;}
|
||||
.portrait-habit-tag--danger{background:rgba(255,77,79,0.1);color:var(--danger);}
|
||||
.portrait-habit-tag--warn{background:rgba(250,173,20,0.1);color:var(--warning);}
|
||||
.portrait-habit-tag--neutral{background:rgba(255,255,255,0.04);color:var(--text-dim);}
|
||||
.portrait-habit-tag--good{background:rgba(82,196,26,0.1);color:var(--success);}
|
||||
|
||||
/* ========== Map Area ========== */
|
||||
.map-wrap{position:absolute;inset:0;overflow:hidden;
|
||||
background:radial-gradient(ellipse at 50% 45%,rgba(24,144,255,0.05) 0%,transparent 55%),var(--map-bg);}
|
||||
@@ -426,6 +434,21 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 生活习惯 -->
|
||||
<div class="portrait-section">
|
||||
<div class="portrait-section__title">生活习惯</div>
|
||||
<div class="portrait-habits">
|
||||
<span class="portrait-habit-tag portrait-habit-tag--danger">🚬 吸烟 10支/天</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--warn">🍺 偶尔饮酒</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--warn">🏃 运动不足（<1次/周）</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--warn">😴 睡眠不足（<6h）</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--neutral">🍚 主食偏多</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--neutral">🥬 蔬菜摄入偏少</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--warn">🧂 口味偏咸</span>
|
||||
<span class="portrait-habit-tag portrait-habit-tag--good">💧 饮水充足</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user