feat: 新增员工端应用主页与个人中心，优化应急三端页面
- 新增 employee-app/home/index.html 应用主页（功能按钮收起展开、体重管理、健康数据、智能监测24h曲线、膳食摄入） - 新增 employee-app/profile/ 个人中心模块（16页：个人资料、头像、密码、手机号、紧急联系人、设置等） - 修复 health-consult/index.html 返回导航逻辑 - 优化应急三端（驻场/操作/专业人员端）页面交互与截图 - 新增操作人员端、专业人员端 PRD 文档 - 更新 SITE_MAP 导航页 - 新增截图工具脚本（gen_screenshots.py、screenshot.js） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,419 @@
|
||||
<!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: #f5f7fa; 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; flex-shrink: 0; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 功能按钮区 */
|
||||
.func-area { background: #fff; padding: 16px 12px 12px; }
|
||||
.func-grid { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 16px; }
|
||||
.func-grid.collapsed .func-item:nth-child(n+6) { display: none; }
|
||||
.func-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
|
||||
.func-item__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.func-item__icon svg { width: 24px; height: 24px; }
|
||||
.func-item__name { font-size: 11px; color: #333; text-align: center; }
|
||||
.func-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: #999; margin-top: 8px; cursor: pointer; user-select: none; }
|
||||
.func-toggle svg { width: 12px; height: 12px; }
|
||||
/* 模块通用 */
|
||||
.module { margin: 10px 12px 0; background: #fff; border-radius: 12px; padding: 16px; }
|
||||
.module__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.module__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.module__more { font-size: 12px; color: #999; cursor: pointer; }
|
||||
/* 体重管理 */
|
||||
.weight-stats { display: flex; justify-content: space-around; text-align: center; margin-bottom: 16px; }
|
||||
.weight-stats__item span { display: block; }
|
||||
.weight-stats__val { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.weight-stats__label { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.weight-ball-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
|
||||
.weight-side { width: 74px; text-align: center; flex-shrink: 0; }
|
||||
.weight-side__label { font-size: 12px; color: #666; margin-bottom: 6px; }
|
||||
.weight-side__val { font-size: 32px; line-height: 1; font-weight: 700; color: #1a1a1a; }
|
||||
.weight-side__unit { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.weight-ball { width: 140px; height: 140px; margin: 0; border-radius: 50%; background: linear-gradient(180deg, #e6f7ff 0%, #1890ff 100%); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(24,144,255,0.3); }
|
||||
.weight-ball__inner { width: 110px; height: 110px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.weight-ball__val { font-size: 28px; font-weight: 800; color: #1890ff; }
|
||||
.weight-ball__unit { font-size: 12px; color: #999; }
|
||||
.weight-ball__wave { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; border-radius: 0 0 70px 70px; background: linear-gradient(180deg, rgba(24,144,255,0.15), rgba(24,144,255,0.4)); overflow: hidden; }
|
||||
.daily-date { font-size: 14px; color: #666; text-align: center; margin-bottom: 10px; }
|
||||
.daily-checkin { display: flex; justify-content: space-around; margin-bottom: 14px; }
|
||||
.checkin-item { text-align: center; flex: 1; }
|
||||
.checkin-item__icon { font-size: 24px; margin-bottom: 4px; }
|
||||
.checkin-item__label { font-size: 11px; color: #999; }
|
||||
.checkin-item__val { font-size: 13px; font-weight: 600; color: #333; margin-top: 2px; }
|
||||
.checkin-item__sub { font-size: 11px; color: #999; margin-top: 2px; line-height: 1.4; }
|
||||
.bmi-box { background: #f5f7fa; border-radius: 8px; padding: 12px; text-align: center; }
|
||||
.bmi-box__formula { font-size: 13px; color: #666; }
|
||||
.bmi-box__result { font-size: 20px; font-weight: 700; color: #52c41a; margin-top: 4px; }
|
||||
.bmi-box__tag { display: inline-block; font-size: 11px; color: #52c41a; background: #f6ffed; border-radius: 4px; padding: 2px 8px; margin-top: 4px; }
|
||||
/* 健康数据 */
|
||||
.health-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
|
||||
.health-scroll::-webkit-scrollbar { display: none; }
|
||||
.health-card { min-width: 130px; background: #f5f7fa; border-radius: 10px; padding: 14px 12px; flex-shrink: 0; }
|
||||
.health-card__title { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.health-card__val { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.health-card__unit { font-size: 11px; color: #999; font-weight: 400; }
|
||||
.health-card__status { font-size: 11px; margin-top: 4px; padding: 2px 6px; border-radius: 4px; display: inline-block; }
|
||||
.health-card__status--normal { color: #52c41a; background: #f6ffed; }
|
||||
.health-card__status--warn { color: #faad14; background: #fffbe6; }
|
||||
/* 智能监测 */
|
||||
.monitor-tabs { display: flex; gap: 0; margin-bottom: 12px; background: #f5f7fa; border-radius: 8px; overflow: hidden; }
|
||||
.monitor-tab { flex: 1; text-align: center; padding: 8px 0; font-size: 12px; color: #666; cursor: pointer; transition: all .2s; }
|
||||
.monitor-tab.active { background: #1890ff; color: #fff; border-radius: 8px; }
|
||||
.monitor-chart { background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid #e6f4ff; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
|
||||
.monitor-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.monitor-chart__title { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.monitor-chart__time { font-size: 11px; color: #999; }
|
||||
.monitor-chart__svg { width: 100%; height: 132px; display: block; }
|
||||
.monitor-chart__axis { display: flex; justify-content: space-between; font-size: 10px; color: #bbb; margin-top: 4px; }
|
||||
.monitor-data { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
|
||||
.monitor-data__item { flex: 1; background: #f5f7fa; border-radius: 10px; padding: 10px 6px; }
|
||||
.monitor-data__item span { display: block; }
|
||||
.monitor-data__val { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.1; }
|
||||
.monitor-data__unit { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.monitor-data__label { font-size: 11px; color: #666; margin-top: 6px; }
|
||||
.monitor-data__time { font-size: 10px; color: #999; margin-top: 2px; }
|
||||
/* 膳食摄入 */
|
||||
.diet-module { padding: 0; overflow: hidden; background: linear-gradient(180deg, #efeaff 0%, #ffffff 26%); }
|
||||
.diet-module .module__hd { padding: 16px 16px 12px; margin-bottom: 0; }
|
||||
.diet-module .module__more { color: #8f8f8f; font-weight: 600; }
|
||||
.diet-panel { background: #fff; border-radius: 18px 18px 0 0; padding-bottom: 16px; }
|
||||
.diet-month-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #f2f2f2; }
|
||||
.diet-month-arrow { width: 24px; height: 24px; border-radius: 50%; background: #f7f7f7; color: #999; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
|
||||
.diet-month-title { font-size: 17px; font-weight: 700; color: #1f1f1f; }
|
||||
.diet-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 12px; padding: 18px 16px 10px; margin-bottom: 6px; }
|
||||
.diet-day { text-align: center; background: transparent; padding: 0; border-radius: 0; cursor: pointer; }
|
||||
.diet-day__week { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
|
||||
.diet-day__num { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; }
|
||||
.diet-day.active .diet-day__num { border: 2px solid #8b6cff; color: #8b6cff; background: #fff; }
|
||||
.diet-day--today .diet-day__week { color: #8b6cff; }
|
||||
.diet-day--today .diet-day__num { background: #8b6cff; color: #fff; }
|
||||
.diet-orbs { display: flex; gap: 16px; padding: 10px 16px 18px; }
|
||||
.diet-orb { flex: 1; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f5fff7 42%, #dafbe2 72%, #c0f2cf 100%); box-shadow: inset 0 0 0 10px rgba(115, 221, 137, 0.18), 0 4px 18px rgba(115, 221, 137, 0.18); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
|
||||
.diet-orb::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -4%; height: 32%; background: #3fd266; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
|
||||
.diet-orb__content { position: relative; z-index: 1; padding: 0 10px; }
|
||||
.diet-orb__top { font-size: 12px; line-height: 1.45; color: #36a454; margin-bottom: 10px; }
|
||||
.diet-orb__value { font-size: 28px; line-height: 1; font-weight: 800; color: #1f1f1f; }
|
||||
.diet-orb__unit { font-size: 13px; color: #36a454; margin-left: 4px; }
|
||||
.diet-orb__bottom { margin-top: 12px; font-size: 12px; color: rgba(0,0,0,0.28); }
|
||||
.diet-summary { display: flex; gap: 12px; padding: 0 16px; }
|
||||
.diet-summary__card { flex: 1; background: #f7f7f7; border-radius: 14px; padding: 14px 10px 12px; text-align: center; }
|
||||
.diet-summary__value { font-size: 18px; font-weight: 800; color: #1f1f1f; line-height: 1.2; }
|
||||
.diet-summary__meta { font-size: 12px; color: #58c96d; margin-top: 6px; min-height: 18px; }
|
||||
.diet-summary__label { font-size: 12px; color: #808080; margin-top: 8px; }
|
||||
/* 底部 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; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 功能按钮区 -->
|
||||
<div class="func-area">
|
||||
<div class="func-grid collapsed" id="funcGrid">
|
||||
<!-- JS 渲染 -->
|
||||
</div>
|
||||
<div class="func-toggle" id="funcToggle">
|
||||
<span>展开</span>
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 4.5l4 4 4-4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体重管理模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">体重管理</span><span class="module__more">查看详情 ›</span></div>
|
||||
<div class="weight-stats">
|
||||
<div class="weight-stats__item"><span class="weight-stats__val">28</span><span class="weight-stats__label">活动天数</span></div>
|
||||
<div class="weight-stats__item"><span class="weight-stats__val">156</span><span class="weight-stats__label">排名</span></div>
|
||||
</div>
|
||||
<div class="weight-ball-row">
|
||||
<div class="weight-side">
|
||||
<div class="weight-side__label">初始体重</div>
|
||||
<div class="weight-side__val">75.0</div>
|
||||
<div class="weight-side__unit">BMI:30</div>
|
||||
</div>
|
||||
<div class="weight-ball">
|
||||
<div class="weight-ball__wave"></div>
|
||||
<div class="weight-ball__inner">
|
||||
<span class="weight-ball__val">70.5</span>
|
||||
<span class="weight-ball__unit">当前体重(kg)</span>
|
||||
<span class="weight-ball__unit">BMI:28</span>
|
||||
<span class="weight-ball__unit">体脂率:26</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weight-side">
|
||||
<div class="weight-side__label">目标体重</div>
|
||||
<div class="weight-side__val">65.0</div>
|
||||
<div class="weight-side__unit">BMI:25</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bmi-box">
|
||||
<div class="bmi-box__formula">BMI = 体重(kg) ÷ 身高(m)² = 70.5 ÷ 1.75² </div>
|
||||
<div class="bmi-box__formula">BMI<18.5消瘦 BMI<24正常 BMI<28超重 BMI>32肥胖</div>
|
||||
<span class="bmi-box__tag">中心型肥胖：男性腰围≥90cm 女性腰围≥85cm</span>
|
||||
</div>
|
||||
<div class="daily-date">📅 2026年4月29日 星期三</div>
|
||||
<div class="daily-checkin">
|
||||
<div class="checkin-item"><div class="checkin-item__icon">🍽️</div><div class="checkin-item__label">吃</div><div class="checkin-item__val">1680 kcal</div><div class="checkin-item__sub">推荐 1900 kcal</div><div class="checkin-item__sub">累计行动 52 天</div></div>
|
||||
<div class="checkin-item"><div class="checkin-item__icon">🏃</div><div class="checkin-item__label">动</div><div class="checkin-item__val">320 kcal</div><div class="checkin-item__sub">推荐 300 kcal</div><div class="checkin-item__sub">累计行动 36 天</div></div>
|
||||
<div class="checkin-item"><div class="checkin-item__icon">⚖️</div><div class="checkin-item__label">体重</div><div class="checkin-item__val">70.5 kg</div><div class="checkin-item__sub">推荐 68.0 kg</div><div class="checkin-item__sub">累计行动 28 天</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康数据模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">健康数据</span><span class="module__more">全部 ›</span></div>
|
||||
<div class="health-scroll">
|
||||
<div class="health-card"><div class="health-card__title">血压</div><div class="health-card__val">120<span class="health-card__unit">/80 mmHg</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">体重</div><div class="health-card__val">70.5<span class="health-card__unit"> kg</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">血脂</div><div class="health-card__val">4.8<span class="health-card__unit"> mmol/L</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
<div class="health-card"><div class="health-card__title">血糖</div><div class="health-card__val">5.6<span class="health-card__unit"> mmol/L</span></div><span class="health-card__status health-card__status--warn">偏高</span></div>
|
||||
<div class="health-card"><div class="health-card__title">尿酸</div><div class="health-card__val">380<span class="health-card__unit"> μmol/L</span></div><span class="health-card__status health-card__status--normal">正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 智能监测模块 -->
|
||||
<div class="module">
|
||||
<div class="module__hd"><span class="module__title">智能监测</span><span class="module__more">查看设备 ›</span></div>
|
||||
<div class="monitor-tabs" id="monitorTabs">
|
||||
<div class="monitor-tab active" data-type="heart">心率</div>
|
||||
<div class="monitor-tab" data-type="oxygen">血氧</div>
|
||||
<div class="monitor-tab" data-type="stress">压力</div>
|
||||
<div class="monitor-tab" data-type="temp">体温</div>
|
||||
<div class="monitor-tab" data-type="sleep">睡眠</div>
|
||||
</div>
|
||||
<div class="monitor-chart">
|
||||
<div class="monitor-chart__head">
|
||||
<span class="monitor-chart__title" id="monitorChartTitle">最近24小时心率波动</span>
|
||||
<span class="monitor-chart__time">2026-03-24 13:02</span>
|
||||
</div>
|
||||
<svg class="monitor-chart__svg" id="monitorChart" viewBox="0 0 320 132" preserveAspectRatio="none"></svg>
|
||||
<div class="monitor-chart__axis"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div>
|
||||
</div>
|
||||
<div class="monitor-data" id="monitorData">
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">126</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">最高</span><span class="monitor-data__time">14:20</span></div>
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">68</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">最低</span><span class="monitor-data__time">03:40</span></div>
|
||||
<div class="monitor-data__item"><span class="monitor-data__val">82</span><span class="monitor-data__unit">次/分</span><span class="monitor-data__label">平均</span><span class="monitor-data__time">24h均值</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 膳食摄入模块 -->
|
||||
<div class="module diet-module">
|
||||
<div class="module__hd"><span class="module__title">膳食摄入</span><span class="module__more">更多 ›</span></div>
|
||||
<div class="diet-panel">
|
||||
<div class="diet-month-bar">
|
||||
<div class="diet-month-arrow" id="prevWeek">‹</div>
|
||||
<div class="diet-month-title" id="weekText">2026年03月</div>
|
||||
<div class="diet-month-arrow" id="nextWeek">›</div>
|
||||
</div>
|
||||
<div class="diet-days" id="dietDays">
|
||||
<div class="diet-day"><div class="diet-day__week">一</div><div class="diet-day__num">10</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">二</div><div class="diet-day__num">11</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">三</div><div class="diet-day__num">12</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">四</div><div class="diet-day__num">13</div></div>
|
||||
<div class="diet-day diet-day--today active"><div class="diet-day__week">五</div><div class="diet-day__num">今</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">六</div><div class="diet-day__num">15</div></div>
|
||||
<div class="diet-day"><div class="diet-day__week">日</div><div class="diet-day__num">16</div></div>
|
||||
</div>
|
||||
<div class="diet-orbs">
|
||||
<div class="diet-orb">
|
||||
<div class="diet-orb__content">
|
||||
<div class="diet-orb__top">早餐可摄入<br>580千卡</div>
|
||||
<div><span class="diet-orb__value">586</span><span class="diet-orb__unit">千卡</span></div>
|
||||
<div class="diet-orb__bottom">早餐已摄入</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diet-orb">
|
||||
<div class="diet-orb__content">
|
||||
<div class="diet-orb__top">全天可摄入<br>2536千卡</div>
|
||||
<div><span class="diet-orb__value">586</span><span class="diet-orb__unit">千卡</span></div>
|
||||
<div class="diet-orb__bottom">全天已摄入</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diet-summary" id="dietDetail">
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">586</div>
|
||||
<div class="diet-summary__meta">70%(适量)</div>
|
||||
<div class="diet-summary__label">早餐(kcal)</div>
|
||||
</div>
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">--</div>
|
||||
<div class="diet-summary__meta">--</div>
|
||||
<div class="diet-summary__label">午餐(kcal)</div>
|
||||
</div>
|
||||
<div class="diet-summary__card">
|
||||
<div class="diet-summary__value">--</div>
|
||||
<div class="diet-summary__meta">--</div>
|
||||
<div class="diet-summary__label">晚餐(kcal)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active"><span class="tab-icon">🏠</span><span class="tab-label">应用</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">📁</span><span class="tab-label">档案</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item"><span class="tab-icon">📚</span><span class="tab-label">知识</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>
|
||||
var funcItems = [
|
||||
{ name: '健康咨询', color: '#1890FF', icon: '💬', href: '../health-consult/index.html' },
|
||||
{ name: '应急就医', color: '#FF4D4F', icon: '🚑', href: '../emergency-medical/index.html' },
|
||||
{ name: '一线医疗', color: '#52C41A', icon: '🏥', href: '../frontline-medical/index.html' },
|
||||
{ name: '健康体检', color: '#FAAD14', icon: '📋', href: '../health-checkup/index.html' },
|
||||
{ name: '体重管理', color: '#722ED1', icon: '⚖️', href: '../weight-management/index.html' },
|
||||
{ name: '营养管理', color: '#52C41A', icon: '🥗', href: '../nutrition/index.html' },
|
||||
{ name: '运动管理', color: '#FA8C16', icon: '🏃', href: '../exercise/index.html' },
|
||||
{ name: '健康监测', color: '#13C2C2', icon: '💓', href: '../health-monitor/index.html' },
|
||||
{ name: '健康评估', color: '#2F54EB', icon: '📊', href: '../health-assessment/index.html' },
|
||||
{ name: '健康档案', color: '#1890FF', icon: '📁', href: '../health-record/index.html' },
|
||||
{ name: '心脑血管', color: '#F5222D', icon: '❤️', href: '../cardiovascular/index.html' },
|
||||
{ name: '糖尿病', color: '#722ED1', icon: '💉', href: '../diabetes/index.html' },
|
||||
{ name: '癌症预防', color: '#EB2F96', icon: '🛡️', href: '../cancer/index.html' },
|
||||
{ name: '知识普及', color: '#1890FF', icon: '📖', href: '../knowledge/index.html' }
|
||||
];
|
||||
var monitorMap = {
|
||||
heart: {
|
||||
title: '最近24小时心率波动',
|
||||
unit: '次/分',
|
||||
max: '126',
|
||||
maxTime: '14:20',
|
||||
min: '68',
|
||||
minTime: '03:40',
|
||||
avg: '82',
|
||||
avgTime: '24h均值',
|
||||
color: '#ff7a8a',
|
||||
points: [84,82,80,78,76,74,72,70,68,75,79,83,88,96,102,126,108,94,90,87,85,84,83,82]
|
||||
},
|
||||
oxygen: {
|
||||
title: '最近24小时血氧波动',
|
||||
unit: '%',
|
||||
max: '99',
|
||||
maxTime: '10:10',
|
||||
min: '95',
|
||||
minTime: '02:50',
|
||||
avg: '97',
|
||||
avgTime: '24h均值',
|
||||
color: '#52c41a',
|
||||
points: [97,97,96,96,95,96,96,97,98,98,97,97,98,99,98,97,97,96,97,98,98,97,97,97]
|
||||
},
|
||||
stress: {
|
||||
title: '最近24小时压力波动',
|
||||
unit: '',
|
||||
max: '82',
|
||||
maxTime: '16:30',
|
||||
min: '18',
|
||||
minTime: '05:10',
|
||||
avg: '46',
|
||||
avgTime: '24h均值',
|
||||
color: '#faad14',
|
||||
points: [35,32,30,28,24,18,22,26,34,40,52,60,68,74,82,78,66,58,49,45,41,38,36,34]
|
||||
},
|
||||
temp: {
|
||||
title: '最近24小时体温波动',
|
||||
unit: '°C',
|
||||
max: '37.1',
|
||||
maxTime: '13:00',
|
||||
min: '36.2',
|
||||
minTime: '04:20',
|
||||
avg: '36.6',
|
||||
avgTime: '24h均值',
|
||||
color: '#722ed1',
|
||||
points: [36.5,36.4,36.4,36.3,36.2,36.2,36.3,36.4,36.5,36.5,36.6,36.7,36.8,37.1,36.9,36.8,36.7,36.6,36.6,36.5,36.5,36.4,36.4,36.5]
|
||||
},
|
||||
sleep: {
|
||||
title: '最近24小时睡眠深度波动',
|
||||
unit: 'h',
|
||||
max: '8.1',
|
||||
maxTime: '07:00',
|
||||
min: '5.3',
|
||||
minTime: '01:30',
|
||||
avg: '6.8',
|
||||
avgTime: '24h均值',
|
||||
color: '#1890ff',
|
||||
points: [5.6,5.3,5.5,5.9,6.2,6.8,7.1,8.1,7.8,7.4,7.0,6.8,6.6,6.4,6.2,6.1,6.3,6.5,6.7,6.8,6.9,6.8,6.7,6.8]
|
||||
}
|
||||
};
|
||||
function renderMonitorChart(type) {
|
||||
var cfg = monitorMap[type];
|
||||
var svg = document.getElementById('monitorChart');
|
||||
var title = document.getElementById('monitorChartTitle');
|
||||
title.textContent = cfg.title;
|
||||
var points = cfg.points;
|
||||
var max = Math.max.apply(null, points);
|
||||
var min = Math.min.apply(null, points);
|
||||
var width = 320;
|
||||
var height = 132;
|
||||
var step = width / (points.length - 1);
|
||||
var line = points.map(function(v, i) {
|
||||
var x = i * step;
|
||||
var y = height - ((v - min) / (max - min || 1)) * 92 - 20;
|
||||
return x.toFixed(1) + ',' + y.toFixed(1);
|
||||
}).join(' ');
|
||||
var area = '0,' + height + ' ' + line + ' ' + width + ',' + height;
|
||||
svg.innerHTML = '<defs><linearGradient id="monitorGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="' + cfg.color + '" stop-opacity="0.35"/><stop offset="100%" stop-color="' + cfg.color + '" stop-opacity="0.02"/></linearGradient></defs>' +
|
||||
'<polyline points="' + line + '" fill="none" stroke="' + cfg.color + '" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>' +
|
||||
'<polygon points="' + area + '" fill="url(#monitorGradient)"/>';
|
||||
document.getElementById('monitorData').innerHTML =
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.max + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">最高</span><span class="monitor-data__time">' + cfg.maxTime + '</span></div>' +
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.min + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">最低</span><span class="monitor-data__time">' + cfg.minTime + '</span></div>' +
|
||||
'<div class="monitor-data__item"><span class="monitor-data__val">' + cfg.avg + '</span><span class="monitor-data__unit">' + cfg.unit + '</span><span class="monitor-data__label">平均</span><span class="monitor-data__time">' + cfg.avgTime + '</span></div>';
|
||||
}
|
||||
function renderFuncGrid() {
|
||||
var grid = document.getElementById('funcGrid');
|
||||
var toggle = document.getElementById('funcToggle');
|
||||
var html = '';
|
||||
funcItems.forEach(function(item) {
|
||||
html += '<a class="func-item" href="' + item.href + '"><div class="func-item__icon" style="background:' + item.color + '"><span style="font-size:22px">' + item.icon + '</span></div><div class="func-item__name">' + item.name + '</div></a>';
|
||||
});
|
||||
html += '<div class="func-item"><div class="func-item__icon" style="background:#52c41a"><span style="font-size:22px">▦</span></div><div class="func-item__name">更多</div></div>';
|
||||
grid.innerHTML = html;
|
||||
toggle.onclick = function() {
|
||||
var collapsed = grid.classList.toggle('collapsed');
|
||||
toggle.innerHTML = collapsed
|
||||
? '<span>展开</span><svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 4.5l4 4 4-4"/></svg>'
|
||||
: '<span>收起</span><svg viewBox="0 0 12 12" fill="none" stroke="#999" stroke-width="1.5"><path d="M2 7.5l4-4 4 4"/></svg>';
|
||||
};
|
||||
}
|
||||
renderFuncGrid();
|
||||
document.querySelectorAll('.monitor-tab').forEach(function(tab) {
|
||||
tab.onclick = function() {
|
||||
document.querySelectorAll('.monitor-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
renderMonitorChart(tab.dataset.type);
|
||||
};
|
||||
});
|
||||
renderMonitorChart('heart');
|
||||
document.querySelectorAll('.diet-day').forEach(function(day) {
|
||||
day.onclick = function() {
|
||||
document.querySelectorAll('.diet-day').forEach(function(d) {
|
||||
if (!d.classList.contains('diet-day--today')) d.classList.remove('active');
|
||||
else if (d !== day) d.classList.remove('active');
|
||||
});
|
||||
day.classList.add('active');
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user