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

feat: 新增健康画像与历史咨询摘要模块，咨询结束页增加AI摘要卡片；应急大屏增加生活习惯画像

Browse Source
This commit is contained in:
liuyunqin
2026-08-12 17:30:17 +08:00
parent 55b88b2bad
commit 5761ce7399
6 changed files with 571 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/profile/health-profile.html
+314
View File
@@ -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>