diff --git a/.claude/memory/MEMORY.md b/.claude/memory/MEMORY.md
index ea2049a..30c3a99 100644
--- a/.claude/memory/MEMORY.md
+++ b/.claude/memory/MEMORY.md
@@ -1,11 +1,11 @@
-_Last synced: 2026-05-22 | Base commit: `146c1da`_
+_Last synced: 2026-05-25 | Base commit: `0e2dcff`_
 
 # 记忆索引
 
 | 文件 | 描述 | 类型 | 最后更新 |
 |------|------|------|----------|
 | project_overview.md | 项目技术栈、架构与模块结构 | project | 2026-05-14 |
-| project_progress.md | 各模块原型开发进度 | project | 2026-05-22 |
+| project_progress.md | 各模块原型开发进度 | project | 2026-05-25 |
 | decisions.md | 关键设计决策与架构约定 | project | 2026-04-21 |
-| feedback.md | 协作规范与用户纠正记录 | feedback | 2026-04-21 |
+| feedback.md | 协作规范与用户纠正记录 | feedback | 2026-05-15 |
 | user_profile.md | 用户角色与偏好 | user | 2026-04-21 |
diff --git a/.claude/memory/project_progress.md b/.claude/memory/project_progress.md
index 979c2d1..1e6d04f 100644
--- a/.claude/memory/project_progress.md
+++ b/.claude/memory/project_progress.md
@@ -1,3 +1,11 @@
+---
+name: 项目进度
+description: 各模块原型开发进度与近期里程碑
+type: project
+last_updated: 2026-05-25
+commit: 0e2dcff
+---
+
 # 项目进度
 
 ## 已完成原型的模块
@@ -49,6 +57,9 @@ Web 管理端和员工端 APP 的其余模块（系统管理、运动管理、
 - 2026-05-22：味养创新交互完善——人工创新查看详情弹窗/审核双模/AI推演弹窗重构及侧边栏修复，功能说明9.5章节同步更新
 - 2026-05-22：绿色种采模块全面重构——采供管理整页重构（采购单维度主表+子表、5种状态联动操作、配送/取消弹窗交互、详情抽屉动态信息），采收入库/供应商管理/种植监控/养殖监控多页面优化，功能说明文档9.4章节同步更新
 - 2026-05-22：营养用餐模块多页面交互优化——数据分析页新增食堂切换栏/周选择器/餐品明细弹窗重构，食材效益页新增级联分类选择器，大模型管理新增API_KEY/API_URL列及接入/编辑弹窗，小模型管理新增新增模型弹窗，终端管理筛选栏/表格列精简，餐线管理操作列移除编辑按钮
+- 2026-05-22：全模块交互增强——卫生供应8页面统一新增Drawer详情、确认收货/备货/配送弹窗及操作类型列；健康生产8页面统一Drawer详情+toast状态联动+操作类型列；绿色种采3页面详情从Modal重构为Drawer（BEM命名）
+- 2026-05-21：农场监控模块重构——种植监控改为批次记录主表（新增灌溉/健康/负责人列+巡检记录弹窗），养殖监控新增养殖方式/状态列+疫苗接种记录弹窗，新增食堂档案页 arc-canteen.html，档案模块(arc-algo/employee/unit)多字段优化
+- 2026-05-21：健康生产模块交互完善——余量处置重构（筛选栏级联+更多下拉+员工福利领取记录弹窗），上餐监控操作列合并为更多hover下拉+上餐弹窗自动回填，生产统计日期范围选择器默认当月
 - 2026-05-20：营养用餐模块交互完善——用户管理等级配置tab增加新增/查看/编辑弹窗，消费管理筛选优化（日期默认今天、金额范围双输入框、消费类型标签化、单位部门级联筛选、流水号筛选、交易明细弹窗全字段对齐），取餐管理新增总金额列和餐品金额列
 - 2026-05-19：卫生供应模块8页面交互优化（侧边栏菜单顺序统一、多页面新增弹窗表单、表格列重构、溯源码前移、菜品名称格式统一），补充营养管理功能说明文档及调整记录
 - 2026-05-14：员工端健康监测模块大量新增（穿戴设备16页、体重3页、健康筛查5页），Web管理端健康监测模块新增（穿戴8页、体重20页、环境25页、健康排查7页、档案/异常5页），健康体检检前专项配置及异常事件优化
diff --git a/CLAUDE.md b/CLAUDE.md
index 96b07c2..b36dee1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,4 +1,4 @@
-<!-- Last updated: 2026-05-22 | Commit: e50dbad -->
+<!-- Last updated: 2026-05-25 | Commit: 0e2dcff -->
 
 # 项目约束
 
diff --git a/employee-app/health-monitor/environment/alarm-data.html b/employee-app/health-monitor/environment/alarm-data.html
new file mode 100644
index 0000000..6b1fcf6
--- /dev/null
+++ b/employee-app/health-monitor/environment/alarm-data.html
@@ -0,0 +1,209 @@
+<!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; 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; }
+.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
+.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
+
+/* 筛选区 */
+.filter-bar { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
+.filter-row { display: flex; align-items: center; gap: 8px; }
+.filter-label { font-size: 12px; color: #999; flex-shrink: 0; }
+.filter-date-input { height: 32px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 8px; font-size: 12px; color: #333; outline: none; background: #fff; flex: 1; min-width: 0; }
+.filter-date-input:focus { border-color: #1aad8d; }
+.filter-sep { font-size: 12px; color: #bbb; flex-shrink: 0; }
+.filter-select { height: 32px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 24px 0 10px; font-size: 12px; color: #333; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center; appearance: none; outline: none; cursor: pointer; flex: 1; }
+.filter-btn { height: 32px; padding: 0 16px; border-radius: 8px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
+.filter-btn--primary { background: #1aad8d; color: #fff; }
+.filter-btn--reset { background: #f5f5f5; color: #666; }
+
+/* 统计条 */
+.stat-bar { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; }
+.stat-bar__count { font-size: 12px; color: #999; }
+.stat-bar__count strong { color: #ff4d4f; font-size: 14px; }
+
+/* 列表 */
+.list-wrap { flex: 1; overflow-y: auto; padding: 0 14px 16px; }
+.list-wrap::-webkit-scrollbar { display: none; }
+.alarm-card { background: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); border-left: 3px solid #ff4d4f; }
+.alarm-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
+.alarm-card__type { font-size: 14px; font-weight: 700; color: #1a1a1a; }
+.alarm-card__time { font-size: 11px; color: #bbb; }
+.alarm-card__metrics { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
+.alarm-val { display: flex; flex-direction: column; align-items: center; background: #fff1f0; border-radius: 8px; padding: 6px 12px; }
+.alarm-val__num { font-size: 18px; font-weight: 800; color: #ff4d4f; line-height: 1; }
+.alarm-val__unit { font-size: 10px; color: #ff7875; margin-top: 2px; }
+.alarm-val__label { font-size: 10px; color: #999; margin-top: 2px; }
+.alarm-threshold { display: flex; flex-direction: column; align-items: center; background: #f5f7fa; border-radius: 8px; padding: 6px 10px; }
+.alarm-threshold__range { font-size: 14px; font-weight: 700; color: #666; line-height: 1; white-space: nowrap; }
+.alarm-threshold__unit { font-size: 10px; color: #aaa; margin-top: 2px; }
+.alarm-threshold__label { font-size: 10px; color: #999; margin-top: 2px; }
+.alarm-arrow { color: #ff4d4f; font-size: 18px; font-weight: 700; }
+.alarm-card__device { font-size: 11px; color: #999; display: flex; align-items: center; gap: 4px; }
+.empty-tip { text-align: center; color: #bbb; font-size: 13px; padding: 60px 0; }
+</style>
+</head>
+<body>
+<div class="phone-shell">
+  <div class="status-bar">
+    <span class="time">9:41</span>
+    <span class="icons">
+      <svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
+      <svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
+      <svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
+    </span>
+  </div>
+  <div class="nav-bar">
+    <div class="nav-back" onclick="history.back()">
+      <svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </div>
+    <div class="nav-title">报警数据</div>
+  </div>
+
+  <!-- 筛选区 -->
+  <div class="filter-bar">
+    <div class="filter-row">
+      <span class="filter-label">日期</span>
+      <input class="filter-date-input" type="date" id="dateFrom" value="2026-05-01">
+      <span class="filter-sep">至</span>
+      <input class="filter-date-input" type="date" id="dateTo" value="2026-05-25">
+    </div>
+    <div class="filter-row">
+      <span class="filter-label">类型</span>
+      <select class="filter-select" id="typeFilter">
+        <option value="">全部类型</option>
+      </select>
+      <button class="filter-btn filter-btn--reset" onclick="resetFilter()">重置</button>
+      <button class="filter-btn filter-btn--primary" onclick="applyFilter()">查询</button>
+    </div>
+  </div>
+
+  <!-- 统计 -->
+  <div class="stat-bar">
+    <span class="stat-bar__count">共 <strong id="totalCount">0</strong> 条报警</span>
+  </div>
+
+  <!-- 列表 -->
+  <div class="list-wrap" id="listWrap"></div>
+</div>
+
+<script>
+// 各 Tab 报警类型选项
+const TYPE_OPTIONS = {
+  outdoor: ['PM2.5','PM10','温度','湿度','风速','太阳辐射','照度'],
+  indoor:  ['PM2.5','PM10','CO₂','甲醛','温度','湿度'],
+  water:   ['PH','电导率','盐度','TDS','电阻率','温度'],
+  pollen:  ['花粉总数']
+};
+
+// 报警数据
+const ALARM_DATA = {
+  outdoor: [
+    { type:'PM2.5',    val:'156',  threshold:{min:'0',  max:'75'},   unit:'μg/m³', time:'2026-05-15 10:05', device:'空气质量监测站-A01', loc:'厂区大门东侧' },
+    { type:'PM10',     val:'218',  threshold:{min:'0',  max:'150'},  unit:'μg/m³', time:'2026-05-15 10:05', device:'空气质量监测站-A01', loc:'厂区大门东侧' },
+    { type:'风速',     val:'13.5', threshold:{min:'0',  max:'10'},   unit:'m/s',   time:'2026-05-14 15:42', device:'气象参数监测仪-D01', loc:'气象观测场' },
+    { type:'太阳辐射', val:'1180', threshold:{min:'0',  max:'1000'}, unit:'W/m²',  time:'2026-05-14 09:18', device:'空气质量监测站-A03', loc:'储油罐区南侧' },
+    { type:'温度',     val:'42.3', threshold:{min:'-10',max:'40'},   unit:'℃',     time:'2026-05-13 17:30', device:'PM10检测仪-B02',    loc:'生产区北围栏' },
+    { type:'PM2.5',    val:'195',  threshold:{min:'0',  max:'75'},   unit:'μg/m³', time:'2026-05-12 11:20', device:'VOC检测仪-E01',     loc:'化工装置区' },
+    { type:'PM10',     val:'285',  threshold:{min:'0',  max:'150'},  unit:'μg/m³', time:'2026-05-12 11:20', device:'VOC检测仪-E01',     loc:'化工装置区' },
+    { type:'照度',     val:'98500',threshold:{min:'0',  max:'95000'},unit:'lm/m²', time:'2026-05-11 13:15', device:'臭氧检测仪-C01',    loc:'办公楼楼顶' },
+  ],
+  indoor: [
+    { type:'CO₂',  val:'1250', threshold:{min:'400', max:'1000'}, unit:'ppm',   time:'2026-05-15 14:22', device:'综合空气监测仪-A05', loc:'生产车间1号' },
+    { type:'甲醛', val:'0.15', threshold:{min:'0',   max:'0.10'}, unit:'mg/m³', time:'2026-05-15 09:50', device:'甲醛检测仪-C02',    loc:'新装修办公室3层' },
+    { type:'PM2.5',val:'135',  threshold:{min:'0',   max:'75'},   unit:'μg/m³', time:'2026-05-14 16:30', device:'综合空气监测仪-A05', loc:'生产车间1号' },
+    { type:'CO₂',  val:'980',  threshold:{min:'400', max:'800'},  unit:'ppm',   time:'2026-05-14 12:05', device:'CO₂检测仪-D01',    loc:'地下车库B1层' },
+    { type:'湿度', val:'85',   threshold:{min:'30',  max:'80'},   unit:'%',     time:'2026-05-13 08:40', device:'PM2.5检测仪-B03',   loc:'办公楼2层会议室' },
+    { type:'甲醛', val:'0.12', threshold:{min:'0',   max:'0.10'}, unit:'mg/m³', time:'2026-05-12 15:18', device:'甲醛检测仪-C02',    loc:'新装修办公室3层' },
+  ],
+  water: [
+    { type:'电导率', val:'1250', threshold:{min:'50',  max:'1000'}, unit:'μS/cm', time:'2026-05-15 11:30', device:'电导率监测仪-C01',     loc:'注水站入口' },
+    { type:'PH',     val:'8.5',  threshold:{min:'6.5', max:'8.0'},  unit:'',      time:'2026-05-15 11:30', device:'电导率监测仪-C01',     loc:'注水站入口' },
+    { type:'TDS',    val:'840',  threshold:{min:'0',   max:'500'},  unit:'mg/L',  time:'2026-05-15 09:00', device:'多参数水质分析仪-A03', loc:'排污口监测点' },
+    { type:'盐度',   val:'920',  threshold:{min:'0',   max:'500'},  unit:'mg/L',  time:'2026-05-14 16:45', device:'多参数水质分析仪-A03', loc:'排污口监测点' },
+    { type:'电导率', val:'1680', threshold:{min:'50',  max:'1000'}, unit:'μS/cm', time:'2026-05-14 08:22', device:'多参数水质分析仪-A03', loc:'排污口监测点' },
+    { type:'PH',     val:'9.2',  threshold:{min:'6.5', max:'8.0'},  unit:'',      time:'2026-05-13 14:10', device:'多参数水质分析仪-A03', loc:'排污口监测点' },
+  ],
+  pollen: [
+    { type:'花粉总数', val:'1098', threshold:{min:'0', max:'800'}, unit:'粒/千mm²', time:'2026-05-15 08:20', device:'花粉采样器-A03',      loc:'杨树林防护带' },
+    { type:'花粉总数', val:'924',  threshold:{min:'0', max:'800'}, unit:'粒/千mm²', time:'2026-05-14 17:10', device:'综合气象花粉站-D01', loc:'气象观测场' },
+    { type:'花粉总数', val:'860',  threshold:{min:'0', max:'800'}, unit:'粒/千mm²', time:'2026-05-14 10:35', device:'花粉浓度监测仪-B01', loc:'厂区东侧林带' },
+  ]
+};
+
+const params = new URLSearchParams(location.search);
+const tab = params.get('tab') || 'outdoor';
+const devId = params.get('id') || '';
+
+// 初始化类型下拉
+const typeOpts = TYPE_OPTIONS[tab] || [];
+const typeSelect = document.getElementById('typeFilter');
+typeOpts.forEach(t => {
+  const o = document.createElement('option');
+  o.value = t; o.textContent = t;
+  typeSelect.appendChild(o);
+});
+
+function applyFilter() {
+  const from = document.getElementById('dateFrom').value;
+  const to   = document.getElementById('dateTo').value;
+  const type = typeSelect.value;
+  let list = ALARM_DATA[tab] || [];
+  if (from) list = list.filter(r => r.time.slice(0,10) >= from);
+  if (to)   list = list.filter(r => r.time.slice(0,10) <= to);
+  if (type) list = list.filter(r => r.type === type);
+  renderList(list);
+}
+
+function resetFilter() {
+  document.getElementById('dateFrom').value = '2026-05-01';
+  document.getElementById('dateTo').value   = '2026-05-25';
+  typeSelect.value = '';
+  applyFilter();
+}
+
+function renderList(list) {
+  document.getElementById('totalCount').textContent = list.length;
+  const wrap = document.getElementById('listWrap');
+  if (list.length === 0) {
+    wrap.innerHTML = '<div class="empty-tip">暂无报警数据</div>';
+    return;
+  }
+  wrap.innerHTML = list.map(r => `
+    <div class="alarm-card">
+      <div class="alarm-card__top">
+        <div class="alarm-card__type">${r.type} 超标报警</div>
+        <div class="alarm-card__time">${r.time}</div>
+      </div>
+      <div class="alarm-card__metrics">
+        <div class="alarm-val">
+          <div class="alarm-val__num">${r.val}</div>
+          <div class="alarm-val__unit">${r.unit}</div>
+          <div class="alarm-val__label">报警值</div>
+        </div>
+        <div class="alarm-arrow">›</div>
+        <div class="alarm-threshold">
+          <div class="alarm-threshold__range">${r.threshold.min} ~ ${r.threshold.max}</div>
+          <div class="alarm-threshold__unit">${r.unit}</div>
+          <div class="alarm-threshold__label">阈值范围</div>
+        </div>
+      </div>
+    </div>
+  `).join('');
+}
+
+// 初始渲染
+applyFilter();
+</script>
+</body>
+</html>
diff --git a/employee-app/health-monitor/environment/device-detail.html b/employee-app/health-monitor/environment/device-detail.html
new file mode 100644
index 0000000..e47f7ec
--- /dev/null
+++ b/employee-app/health-monitor/environment/device-detail.html
@@ -0,0 +1,320 @@
+<!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; }
+.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
+.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
+.scroll-content { flex: 1; overflow-y: auto; padding-bottom: 80px; }
+.scroll-content::-webkit-scrollbar { display: none; }
+.level-header { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; }
+.level-name { font-size: 26px; font-weight: 800; color: #1a1a1a; }
+.level-sub  { font-size: 12px; color: #999; margin-top: 3px; }
+.level-header__right { text-align: right; }
+.index-val, .grade-val { font-size: 13px; color: #555; font-weight: 500; line-height: 1.8; }
+.main-card { margin: 0 14px 12px; background: #fff; border-radius: 18px; padding: 14px 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
+.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.card-loc { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #1a1a1a; }
+.card-time { font-size: 11px; color: #999; }
+.card-desc { font-size: 12px; color: #666; line-height: 1.6; margin-bottom: 14px; }
+.gauge-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
+.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
+.metric-item { text-align: center; }
+.metric-item__val  { font-size: 18px; font-weight: 700; color: #1a1a1a; }
+.metric-item__unit { font-size: 10px; color: #999; font-weight: 400; }
+.metric-item__label{ font-size: 11px; color: #999; margin-top: 2px; }
+.trend-section { margin: 0 14px 16px; background: #fff; border-radius: 18px; padding: 14px 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
+.trend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.trend-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+.trend-metric-select {
+  height: 28px; border: 1px solid #1aad8d; border-radius: 8px;
+  padding: 0 22px 0 8px; font-size: 12px; color: #1aad8d; font-weight: 600;
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%231aad8d'/%3E%3C/svg%3E") no-repeat right 7px center;
+  appearance: none; outline: none; cursor: pointer;
+}
+.time-tabs { display: flex; gap: 0; background: #f0f2f5; border-radius: 20px; padding: 3px; margin-bottom: 16px; width: fit-content; }
+.time-tab { padding: 4px 14px; border-radius: 16px; font-size: 12px; color: #999; cursor: pointer; transition: all 0.2s; font-weight: 500; }
+.time-tab.active { background: #1aad8d; color: #fff; font-weight: 600; }
+.bar-chart-outer { position: relative; }
+.bar-chart { display: flex; align-items: flex-end; justify-content: space-around; height: 110px; border-bottom: 1px solid #f0f0f0; padding: 0 4px; }
+.bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
+.bar-val { font-size: 10px; color: #555; font-weight: 600; }
+.bar-body { width: 16px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #36cfc9 0%, #1aad8d 100%); }
+.bar-x-labels { display: flex; justify-content: space-around; padding: 5px 4px 0; }
+.bar-x-labels span { font-size: 9px; color: #aaa; flex: 1; text-align: center; }
+.bottom-btn-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 20px 28px; background: linear-gradient(transparent, #f5f7fa 35%); }
+.alarm-btn { width: 100%; height: 48px; background: linear-gradient(90deg, #1aad8d, #36cfc9); border: none; border-radius: 24px; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(26,173,141,0.35); }
+</style>
+</head>
+<body>
+<div class="phone-shell">
+  <div class="status-bar">
+    <span class="time">9:41</span>
+    <span class="icons">
+      <svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
+      <svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
+      <svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
+    </span>
+  </div>
+  <div class="nav-bar">
+    <div class="nav-back" onclick="history.back()">
+      <svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </div>
+    <div class="nav-title">设备详情</div>
+  </div>
+  <div class="scroll-content">
+    <div class="level-header">
+      <div>
+        <div class="level-name" id="levelName">—</div>
+        <div class="level-sub" id="levelSub">空气质量评价</div>
+      </div>
+      <div class="level-header__right">
+        <div class="index-val" id="indexVal">综合指数：—</div>
+        <div class="grade-val" id="gradeVal">空气质量级别：—</div>
+      </div>
+    </div>
+    <div class="main-card">
+      <div class="card-top">
+        <div class="card-loc">
+          <svg width="13" height="16" fill="none"><path d="M6.5 0C4 0 2 2 2 4.5c0 3.5 4.5 9 4.5 9s4.5-5.5 4.5-9C11 2 9 0 6.5 0zm0 6a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" fill="#1aad8d"/></svg>
+          <span id="cardLoc">—</span>
+        </div>
+        <div class="card-time" id="cardTime">—</div>
+      </div>
+      <div class="card-desc" id="cardDesc">—</div>
+      <div class="gauge-wrap" id="gaugeWrap"></div>
+      <div class="metrics-grid" id="metricsGrid"></div>
+    </div>
+    <div class="trend-section">
+      <div class="trend-header">
+        <div class="trend-title">变化趋势</div>
+        <select class="trend-metric-select" id="trendMetricSelect" onchange="onTrendMetricChange(this)"></select>
+      </div>
+      <div class="time-tabs">
+        <div class="time-tab active" onclick="switchTimePeriod(this,'24h')">近24小时</div>
+        <div class="time-tab" onclick="switchTimePeriod(this,'7d')">近7日</div>
+        <div class="time-tab" onclick="switchTimePeriod(this,'30d')">近30日</div>
+      </div>
+      <div id="barChartWrap"></div>
+    </div>
+  </div>
+  <div class="bottom-btn-wrap">
+    <button class="alarm-btn" onclick="location.href='alarm-data.html?tab='+tab+'&id='+id">报警数据</button>
+  </div>
+</div>
+<script>
+const ALL_DATA = {
+  outdoor: {
+    sub: '室外空气质量评价', gradeKey: 'aqi',
+    levels: ['lvl-excellent','lvl-good','lvl-light','lvl-moderate','lvl-heavy','lvl-severe'],
+    levelLabels: ['优','良','轻度污染','中度污染','重度污染','严重污染'],
+    grades: ['I级','II级','III级','IV级','V级','VI级'],
+    indexes: ['1.00','2.00','3.00','4.00','5.00','6.00'],
+    descs: [
+      '空气质量令人满意，基本无污染，对人体健康没有危害。',
+      '空气质量可接受，少数对污染物特别敏感的人群健康有较弱影响。',
+      '易感人群症状有轻度加剧，健康人群出现刺激症状，建议减少户外活动。',
+      '敏感人群症状明显加重，健康人群普遍出现刺激症状，建议避免户外活动。',
+      '心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状。',
+      '健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病，建议停止户外活动。'
+    ],
+    colors: ['#52c41a','#73d13d','#faad14','#fa541c','#ff4d4f','#722ed1'],
+    devices: [
+      { id:'OA001', name:'空气质量监测站-A01', code:'OA-2024-001', unit:'采油一厂', loc:'厂区大门东侧', time:'14:30', level:0,
+        metrics:[{k:'温度',v:'32.5',u:'℃'},{k:'湿度',v:'45',u:'%'},{k:'太阳辐射',v:'680',u:'W/m²'},{k:'PM2.5',v:'28',u:'μg/m³'},{k:'PM10',v:'52',u:'μg/m³'},{k:'照度',v:'65000',u:'lm/m²'},{k:'风速',v:'3.2',u:'m/s'}] },
+      { id:'OA002', name:'PM10检测仪-B02', code:'OA-2024-002', unit:'采油一厂', loc:'生产区北围栏', time:'14:28', level:1,
+        metrics:[{k:'温度',v:'33.1',u:'℃'},{k:'湿度',v:'42',u:'%'},{k:'太阳辐射',v:'720',u:'W/m²'},{k:'PM2.5',v:'38',u:'μg/m³'},{k:'PM10',v:'68',u:'μg/m³'},{k:'照度',v:'72000',u:'lm/m²'},{k:'风速',v:'4.1',u:'m/s'}] },
+      { id:'OA003', name:'臭氧检测仪-C01', code:'OA-2024-003', unit:'采油二厂', loc:'办公楼楼顶', time:'14:25', level:2,
+        metrics:[{k:'温度',v:'31.8',u:'℃'},{k:'湿度',v:'50',u:'%'},{k:'太阳辐射',v:'580',u:'W/m²'},{k:'PM2.5',v:'55',u:'μg/m³'},{k:'PM10',v:'92',u:'μg/m³'},{k:'照度',v:'58000',u:'lm/m²'},{k:'风速',v:'2.8',u:'m/s'}] },
+      { id:'OA004', name:'气象参数监测仪-D01', code:'OA-2024-004', unit:'采油三厂', loc:'气象观测场', time:'14:20', level:3,
+        metrics:[{k:'温度',v:'34.2',u:'℃'},{k:'湿度',v:'38',u:'%'},{k:'太阳辐射',v:'850',u:'W/m²'},{k:'PM2.5',v:'82',u:'μg/m³'},{k:'PM10',v:'135',u:'μg/m³'},{k:'照度',v:'85000',u:'lm/m²'},{k:'风速',v:'5.6',u:'m/s'}] },
+      { id:'OA005', name:'空气质量监测站-A03', code:'OA-2024-005', unit:'采油三厂', loc:'储油罐区南侧', time:'14:15', level:4,
+        metrics:[{k:'温度',v:'35.0',u:'℃'},{k:'湿度',v:'35',u:'%'},{k:'太阳辐射',v:'920',u:'W/m²'},{k:'PM2.5',v:'125',u:'μg/m³'},{k:'PM10',v:'190',u:'μg/m³'},{k:'照度',v:'92000',u:'lm/m²'},{k:'风速',v:'6.3',u:'m/s'}] },
+      { id:'OA006', name:'VOC检测仪-E01', code:'OA-2024-006', unit:'采油三厂', loc:'化工装置区', time:'14:10', level:5,
+        metrics:[{k:'温度',v:'36.2',u:'℃'},{k:'湿度',v:'30',u:'%'},{k:'太阳辐射',v:'950',u:'W/m²'},{k:'PM2.5',v:'180',u:'μg/m³'},{k:'PM10',v:'260',u:'μg/m³'},{k:'照度',v:'95000',u:'lm/m²'},{k:'风速',v:'7.1',u:'m/s'}] }
+    ]
+  },
+  indoor: {
+    sub: '室内空气质量评价', gradeKey: 'iaq',
+    levels: ['lvl-clean','lvl-good','lvl-light','lvl-moderate','lvl-heavy'],
+    levelLabels: ['清洁','未污染','轻污染','中污染','重污染'],
+    grades: ['I级','II级','III级','IV级','V级'],
+    indexes: ['1.00','2.00','3.00','4.00','5.00'],
+    descs: [
+      '空气清洁，各项指标均在安全范围内，适宜正常工作生活。',
+      '至少有一个环境污染物超标。除了敏感者外，一般不会发生慢急性中毒。',
+      '一般有2~3个环境污染物超标，人群健康明显受害，敏感者受害严重。',
+      '多项指标超标，需加强通风并检查污染源，敏感人群应离开该区域。',
+      '空气质量较差，各项指标严重超标，所有人员应立即撤离并通风处理。'
+    ],
+    colors: ['#13c2c2','#73d13d','#faad14','#fa541c','#ff4d4f'],
+    devices: [
+      { id:'IA001', name:'综合空气监测仪-A01', code:'IA-2024-001', unit:'采油一厂', loc:'办公楼1层大厅', time:'14:30', level:0,
+        metrics:[{k:'温度',v:'24.5',u:'℃'},{k:'湿度',v:'52',u:'%'},{k:'CO₂',v:'456',u:'ppm'},{k:'甲醛',v:'0.03',u:'mg/m³'},{k:'PM2.5',v:'35',u:'μg/m³'},{k:'PM10',v:'68',u:'μg/m³'}] },
+      { id:'IA002', name:'PM2.5检测仪-B03', code:'IA-2024-002', unit:'采油一厂', loc:'办公楼2层会议室', time:'14:28', level:1,
+        metrics:[{k:'温度',v:'25.1',u:'℃'},{k:'湿度',v:'58',u:'%'},{k:'CO₂',v:'512',u:'ppm'},{k:'甲醛',v:'0.05',u:'mg/m³'},{k:'PM2.5',v:'42',u:'μg/m³'},{k:'PM10',v:'76',u:'μg/m³'}] },
+      { id:'IA003', name:'甲醛检测仪-C02', code:'IA-2024-003', unit:'采油二厂', loc:'新装修办公室3层', time:'14:25', level:2,
+        metrics:[{k:'温度',v:'26.3',u:'℃'},{k:'湿度',v:'61',u:'%'},{k:'CO₂',v:'680',u:'ppm'},{k:'甲醛',v:'0.09',u:'mg/m³'},{k:'PM2.5',v:'58',u:'μg/m³'},{k:'PM10',v:'95',u:'μg/m³'}] },
+      { id:'IA004', name:'CO₂检测仪-D01', code:'IA-2024-004', unit:'采油二厂', loc:'地下车库B1层', time:'14:20', level:3,
+        metrics:[{k:'温度',v:'22.8',u:'℃'},{k:'湿度',v:'72',u:'%'},{k:'CO₂',v:'920',u:'ppm'},{k:'甲醛',v:'0.07',u:'mg/m³'},{k:'PM2.5',v:'82',u:'μg/m³'},{k:'PM10',v:'128',u:'μg/m³'}] },
+      { id:'IA005', name:'综合空气监测仪-A05', code:'IA-2024-005', unit:'采油三厂', loc:'生产车间1号', time:'14:15', level:4,
+        metrics:[{k:'温度',v:'28.6',u:'℃'},{k:'湿度',v:'78',u:'%'},{k:'CO₂',v:'1050',u:'ppm'},{k:'甲醛',v:'0.12',u:'mg/m³'},{k:'PM2.5',v:'120',u:'μg/m³'},{k:'PM10',v:'185',u:'μg/m³'}] }
+    ]
+  },
+  water: {
+    sub: '水质综合评价', gradeKey: 'wqi',
+    levels: ['lvl-pass','lvl-fail'],
+    levelLabels: ['达标','未达标'],
+    grades: ['I级','V级'],
+    indexes: ['1.00','5.00'],
+    descs: [
+      '水质各项指标符合国家标准要求，可正常使用。',
+      '水质存在超标项目，需检查处理设施并排查污染源，暂停使用。'
+    ],
+    colors: ['#52c41a','#ff4d4f'],
+    devices: [
+      { id:'WQ001', name:'多参数水质分析仪-A01', code:'WQ-2024-001', unit:'采油一厂', loc:'生活区供水站', time:'14:30', level:0,
+        metrics:[{k:'温度',v:'18.5',u:'℃'},{k:'电导率',v:'320',u:'μS/cm'},{k:'PH',v:'7.2',u:''},{k:'盐度',v:'180',u:'mg/L'},{k:'电阻率',v:'3125',u:'Ω·m'},{k:'TDS',v:'160',u:'mg/L'}] },
+      { id:'WQ002', name:'在线PH计-B02', code:'WQ-2024-002', unit:'采油一厂', loc:'污水处理站出口', time:'14:28', level:0,
+        metrics:[{k:'温度',v:'20.3',u:'℃'},{k:'电导率',v:'580',u:'μS/cm'},{k:'PH',v:'6.8',u:''},{k:'盐度',v:'320',u:'mg/L'},{k:'电阻率',v:'1724',u:'Ω·m'},{k:'TDS',v:'290',u:'mg/L'}] },
+      { id:'WQ003', name:'电导率监测仪-C01', code:'WQ-2024-003', unit:'采油二厂', loc:'注水站入口', time:'14:25', level:1,
+        metrics:[{k:'温度',v:'22.1',u:'℃'},{k:'电导率',v:'1250',u:'μS/cm'},{k:'PH',v:'8.5',u:''},{k:'盐度',v:'680',u:'mg/L'},{k:'电阻率',v:'800',u:'Ω·m'},{k:'TDS',v:'625',u:'mg/L'}] },
+      { id:'WQ004', name:'TDS检测仪-D01', code:'WQ-2024-004', unit:'采油二厂', loc:'生产区储水池', time:'14:20', level:0,
+        metrics:[{k:'温度',v:'19.8',u:'℃'},{k:'电导率',v:'450',u:'μS/cm'},{k:'PH',v:'7.0',u:''},{k:'盐度',v:'240',u:'mg/L'},{k:'电阻率',v:'2222',u:'Ω·m'},{k:'TDS',v:'225',u:'mg/L'}] },
+      { id:'WQ005', name:'多参数水质分析仪-A03', code:'WQ-2024-005', unit:'采油三厂', loc:'排污口监测点', time:'14:15', level:1,
+        metrics:[{k:'温度',v:'23.5',u:'℃'},{k:'电导率',v:'1680',u:'μS/cm'},{k:'PH',v:'9.2',u:''},{k:'盐度',v:'920',u:'mg/L'},{k:'电阻率',v:'595',u:'Ω·m'},{k:'TDS',v:'840',u:'mg/L'}] }
+    ]
+  },
+  pollen: {
+    sub: '花粉过敏风险评价', gradeKey: 'pollen',
+    levels: ['lvl-vlow','lvl-low','lvl-medium','lvl-high','lvl-vhigh'],
+    levelLabels: ['很低','低','中等','高','很高'],
+    grades: ['I级','II级','III级','IV级','V级'],
+    indexes: ['1.00','2.00','3.00','4.00','5.00'],
+    descs: [
+      '花粉浓度极低，对过敏人群基本无影响，可正常户外活动。',
+      '花粉浓度较低，轻度过敏人群注意防护，可适当减少户外时间。',
+      '花粉浓度中等，过敏人群需佩戴口罩，减少户外活动时间。',
+      '花粉浓度较高，过敏人群应减少户外活动，外出需做好防护措施。',
+      '花粉浓度极高，过敏人群应尽量避免外出，必要时服用抗过敏药物。'
+    ],
+    colors: ['#52c41a','#73d13d','#faad14','#ff4d4f','#722ed1'],
+    devices: [
+      { id:'PL001', name:'花粉采样器-A01', code:'PL-2024-001', unit:'采油一厂', loc:'办公区绿化带', time:'14:30', level:0,
+        metrics:[{k:'榆属',v:'12',u:'粒/千mm²'},{k:'松属',v:'8',u:'粒/千mm²'},{k:'杨属',v:'15',u:'粒/千mm²'},{k:'柏科',v:'6',u:'粒/千mm²'},{k:'柳属',v:'10',u:'粒/千mm²'},{k:'蒿属',v:'5',u:'粒/千mm²'},{k:'藜科',v:'3',u:'粒/千mm²'},{k:'苋科',v:'2',u:'粒/千mm²'},{k:'花粉总数',v:'61',u:'粒/千mm²'}] },
+      { id:'PL002', name:'花粉浓度监测仪-B01', code:'PL-2024-002', unit:'采油一厂', loc:'厂区东侧林带', time:'14:28', level:1,
+        metrics:[{k:'榆属',v:'35',u:'粒/千mm²'},{k:'松属',v:'22',u:'粒/千mm²'},{k:'杨属',v:'48',u:'粒/千mm²'},{k:'柏科',v:'18',u:'粒/千mm²'},{k:'柳属',v:'28',u:'粒/千mm²'},{k:'蒿属',v:'15',u:'粒/千mm²'},{k:'藜科',v:'8',u:'粒/千mm²'},{k:'苋科',v:'6',u:'粒/千mm²'},{k:'花粉总数',v:'180',u:'粒/千mm²'}] },
+      { id:'PL003', name:'花粉自动计数仪-C01', code:'PL-2024-003', unit:'采油二厂', loc:'生活区花园', time:'14:25', level:2,
+        metrics:[{k:'榆属',v:'68',u:'粒/千mm²'},{k:'松属',v:'45',u:'粒/千mm²'},{k:'杨属',v:'82',u:'粒/千mm²'},{k:'柏科',v:'35',u:'粒/千mm²'},{k:'柳属',v:'52',u:'粒/千mm²'},{k:'蒿属',v:'30',u:'粒/千mm²'},{k:'藜科',v:'18',u:'粒/千mm²'},{k:'苋科',v:'12',u:'粒/千mm²'},{k:'花粉总数',v:'342',u:'粒/千mm²'}] },
+      { id:'PL004', name:'综合气象花粉站-D01', code:'PL-2024-004', unit:'采油二厂', loc:'气象观测场', time:'14:20', level:3,
+        metrics:[{k:'榆属',v:'120',u:'粒/千mm²'},{k:'松属',v:'85',u:'粒/千mm²'},{k:'杨属',v:'150',u:'粒/千mm²'},{k:'柏科',v:'65',u:'粒/千mm²'},{k:'柳属',v:'95',u:'粒/千mm²'},{k:'蒿属',v:'55',u:'粒/千mm²'},{k:'藜科',v:'32',u:'粒/千mm²'},{k:'苋科',v:'22',u:'粒/千mm²'},{k:'花粉总数',v:'624',u:'粒/千mm²'}] },
+      { id:'PL005', name:'花粉采样器-A03', code:'PL-2024-005', unit:'采油三厂', loc:'杨树林防护带', time:'14:15', level:4,
+        metrics:[{k:'榆属',v:'210',u:'粒/千mm²'},{k:'松属',v:'145',u:'粒/千mm²'},{k:'杨属',v:'280',u:'粒/千mm²'},{k:'柏科',v:'110',u:'粒/千mm²'},{k:'柳属',v:'168',u:'粒/千mm²'},{k:'蒿属',v:'92',u:'粒/千mm²'},{k:'藜科',v:'55',u:'粒/千mm²'},{k:'苋科',v:'38',u:'粒/千mm²'},{k:'花粉总数',v:'1098',u:'粒/千mm²'}] }
+    ]
+  }
+};
+
+// 趋势模拟数据生成
+function genTrend(base, period) {
+  const labels24 = ['00:00','04:00','08:00','12:00','16:00','20:00','24:00'];
+  const labels7  = ['周一','周二','周三','周四','周五','周六','周日'];
+  const labels30 = ['第1周','第2周','第3周','第4周'];
+  const labels = period==='24h' ? labels24 : period==='7d' ? labels7 : labels30;
+  const vals = labels.map(() => Math.round(base * (0.6 + Math.random() * 0.8)));
+  return { labels, vals };
+}
+
+const params = new URLSearchParams(location.search);
+const tab = params.get('tab') || 'outdoor';
+const id  = params.get('id')  || '';
+const tabData = ALL_DATA[tab];
+const dev = tabData.devices.find(d => d.id === id) || tabData.devices[0];
+const li = dev.level;
+
+let trendMetricIdx = 0;
+let trendPeriod = '24h';
+
+function buildGauge(levelIdx, total, color) {
+  const cx = 100, cy = 100, r = 72, sw = 14;
+  const zoneAngle = 180 / total;
+  // background arc
+  let paths = `<path d="M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}" fill="none" stroke="#f0f0f0" stroke-width="${sw}" stroke-linecap="round"/>`;
+  // colored zones
+  const zoneColors = total === 6
+    ? ['#52c41a','#73d13d','#faad14','#fa541c','#ff4d4f','#722ed1']
+    : total === 5
+    ? ['#52c41a','#73d13d','#faad14','#ff4d4f','#722ed1']
+    : total === 2
+    ? ['#52c41a','#ff4d4f']
+    : tabData.colors;
+  for (let i = 0; i < total; i++) {
+    const a1 = (180 - i * zoneAngle) * Math.PI / 180;
+    const a2 = (180 - (i+1) * zoneAngle) * Math.PI / 180;
+    const x1 = cx + r * Math.cos(a1), y1 = cy - r * Math.sin(a1);
+    const x2 = cx + r * Math.cos(a2), y2 = cy - r * Math.sin(a2);
+    paths += `<path d="M ${x1.toFixed(1)} ${y1.toFixed(1)} A ${r} ${r} 0 0 1 ${x2.toFixed(1)} ${y2.toFixed(1)}" fill="none" stroke="${zoneColors[i]}" stroke-width="${sw}"/>`;
+  }
+  // needle
+  const needleAngle = (180 - (levelIdx + 0.5) * zoneAngle) * Math.PI / 180;
+  const nx = cx + 58 * Math.cos(needleAngle), ny = cy - 58 * Math.sin(needleAngle);
+  paths += `<line x1="${cx}" y1="${cy}" x2="${nx.toFixed(1)}" y2="${ny.toFixed(1)}" stroke="#555" stroke-width="2.5" stroke-linecap="round"/>`;
+  paths += `<circle cx="${cx}" cy="${cy}" r="5" fill="#555"/>`;
+  return `<svg viewBox="0 0 200 110" width="200" height="110">${paths}</svg>`;
+}
+
+function renderBarChart(metricIdx, period) {
+  const baseVal = parseFloat(dev.metrics[metricIdx].v) || 50;
+  const { labels, vals } = genTrend(baseVal, period);
+  const maxVal = Math.max(...vals);
+  const maxH = 80;
+  const cols = vals.map((v, i) => {
+    const h = Math.max(6, Math.round((v / maxVal) * maxH));
+    return `<div class="bar-col"><div class="bar-val">${v}</div><div class="bar-body" style="height:${h}px"></div></div>`;
+  }).join('');
+  const xlabels = labels.map(l => `<span>${l}</span>`).join('');
+  return `<div class="bar-chart">${cols}</div><div class="bar-x-labels">${xlabels}</div>`;
+}
+
+function render() {
+  document.getElementById('levelName').textContent = tabData.levelLabels[li];
+  document.getElementById('levelSub').textContent = tabData.sub;
+  document.getElementById('indexVal').textContent = '综合指数：' + tabData.indexes[li];
+  document.getElementById('gradeVal').textContent = '空气质量级别：' + tabData.grades[li];
+  document.getElementById('cardLoc').textContent = dev.unit + ' · ' + dev.loc;
+  document.getElementById('cardTime').textContent = '更新于今天 ' + dev.time;
+  document.getElementById('cardDesc').textContent = tabData.descs[li];
+  document.getElementById('gaugeWrap').innerHTML = buildGauge(li, tabData.levels.length, tabData.colors[li]);
+  document.getElementById('metricsGrid').innerHTML = dev.metrics.map(m =>
+    `<div class="metric-item"><div class="metric-item__val">${m.v}<span class="metric-item__unit">${m.u}</span></div><div class="metric-item__label">${m.k}</div></div>`
+  ).join('');
+  const sel = document.getElementById('trendMetricSelect');
+  sel.innerHTML = dev.metrics.map((m, i) => `<option value="${i}">${m.k}</option>`).join('');
+  sel.value = trendMetricIdx;
+  document.getElementById('barChartWrap').innerHTML = renderBarChart(trendMetricIdx, trendPeriod);
+}
+
+function onTrendMetricChange(sel) {
+  trendMetricIdx = parseInt(sel.value);
+  document.getElementById('barChartWrap').innerHTML = renderBarChart(trendMetricIdx, trendPeriod);
+}
+
+function switchTimePeriod(el, period) {
+  trendPeriod = period;
+  document.querySelectorAll('.time-tab').forEach(t => t.classList.remove('active'));
+  el.classList.add('active');
+  document.getElementById('barChartWrap').innerHTML = renderBarChart(trendMetricIdx, trendPeriod);
+}
+
+render();
+</script>
+</body>
+</html>
diff --git a/employee-app/health-monitor/environment/index.html b/employee-app/health-monitor/environment/index.html
new file mode 100644
index 0000000..797bb43
--- /dev/null
+++ b/employee-app/health-monitor/environment/index.html
@@ -0,0 +1,612 @@
+<!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; }
+
+/* 导航栏 */
+.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
+.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
+
+/* Tab 栏 */
+.tab-bar { background: #fff; display: flex; padding: 0 8px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
+.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; cursor: pointer; position: relative; transition: color 0.2s; }
+.tab-item .tab-icon { font-size: 20px; line-height: 1; }
+.tab-item .tab-label { font-size: 11px; color: #999; font-weight: 500; }
+.tab-item.active .tab-label { color: #1aad8d; font-weight: 600; }
+.tab-item::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px; border-radius: 1px; background: transparent; transition: background 0.2s; }
+.tab-item.active::after { background: #1aad8d; }
+
+/* 主内容区 */
+.main-content { flex: 1; position: relative; overflow: hidden; }
+
+/* ===== 地图视图 ===== */
+.map-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
+.map-view.hidden { display: none; }
+
+/* 模拟地图背景 */
+.map-bg {
+  flex: 1;
+  position: relative;
+  background: #e8f0e8;
+  overflow: hidden;
+}
+
+/* 地图道路 */
+.map-bg::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, transparent 48%, #d4c89a 48%, #d4c89a 52%, transparent 52%),
+    linear-gradient(0deg, transparent 38%, #d4c89a 38%, #d4c89a 42%, transparent 42%),
+    linear-gradient(30deg, transparent 60%, #cfc282 60%, #cfc282 63%, transparent 63%),
+    linear-gradient(120deg, transparent 30%, #cfc282 30%, #cfc282 33%, transparent 33%);
+}
+.map-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 80px 50px at 30% 65%, #b8d4a8 0%, transparent 100%),
+    radial-gradient(ellipse 60px 40px at 70% 30%, #c0dab0 0%, transparent 100%),
+    radial-gradient(ellipse 100px 60px at 55% 75%, #aed09e 0%, transparent 100%),
+    radial-gradient(ellipse 40px 40px at 20% 35%, #b8d4a8 0%, transparent 100%);
+}
+
+/* 地图定位按钮 */
+.map-locate-btn {
+  position: absolute;
+  right: 12px;
+  bottom: 80px;
+  width: 36px; height: 36px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+}
+
+/* 图例 */
+.map-legend {
+  position: absolute;
+  top: 12px; left: 12px;
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(4px);
+  border-radius: 10px;
+  padding: 8px 10px;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+}
+.legend-item {
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 4px;
+  font-size: 11px; color: #333;
+}
+.legend-item:last-child { margin-bottom: 0; }
+.legend-dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+}
+
+/* 搜索框 */
+.map-search {
+  position: absolute;
+  top: 12px; left: 80px; right: 12px;
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(4px);
+  border-radius: 20px;
+  height: 36px;
+  display: flex; align-items: center; gap: 8px;
+  padding: 0 12px;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  font-size: 13px; color: #999;
+}
+
+/* 设备标记 */
+.device-marker {
+  position: absolute;
+  display: flex; align-items: center; gap: 5px;
+  padding: 5px 10px 5px 6px;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  cursor: pointer;
+  font-size: 12px; font-weight: 600;
+  color: #fff;
+  z-index: 5;
+  transition: transform 0.15s;
+  white-space: nowrap;
+}
+.device-marker:active { transform: scale(0.95); }
+.marker-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; }
+
+/* 等级颜色 */
+.lvl-excellent, .marker-icon.lvl-excellent { background: #52c41a; }
+.lvl-good,      .marker-icon.lvl-good      { background: #73d13d; }
+.lvl-light,     .marker-icon.lvl-light     { background: #faad14; }
+.lvl-moderate,  .marker-icon.lvl-moderate  { background: #fa541c; }
+.lvl-heavy,     .marker-icon.lvl-heavy     { background: #ff4d4f; }
+.lvl-severe,    .marker-icon.lvl-severe    { background: #722ed1; }
+.lvl-clean,     .marker-icon.lvl-clean     { background: #13c2c2; }
+.lvl-pass,      .marker-icon.lvl-pass      { background: #52c41a; }
+.lvl-fail,      .marker-icon.lvl-fail      { background: #ff4d4f; }
+.lvl-vlow,      .marker-icon.lvl-vlow      { background: #52c41a; }
+.lvl-low,       .marker-icon.lvl-low       { background: #73d13d; }
+.lvl-medium,    .marker-icon.lvl-medium    { background: #faad14; }
+.lvl-high,      .marker-icon.lvl-high      { background: #ff4d4f; }
+.lvl-vhigh,     .marker-icon.lvl-vhigh     { background: #722ed1; }
+
+.device-marker .marker-label { color: #333; }
+
+/* 列表切换按钮 */
+.list-toggle-btn {
+  position: absolute;
+  bottom: 20px; left: 50%;
+  transform: translateX(-50%);
+  background: #1aad8d;
+  color: #fff;
+  border: none;
+  border-radius: 24px;
+  height: 44px;
+  padding: 0 28px;
+  font-size: 15px; font-weight: 600;
+  display: flex; align-items: center; gap: 8px;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(26,173,141,0.4);
+  z-index: 10;
+  white-space: nowrap;
+}
+
+/* ===== 列表视图 ===== */
+.list-view { position: absolute; inset: 0; overflow-y: auto; background: #f5f7fa; padding: 12px 14px; display: none; }
+.list-view::-webkit-scrollbar { display: none; }
+.list-view.active { display: block; }
+.list-view-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 10px;
+}
+.list-filter-select {
+  height: 32px; border: 1px solid #e8e8e8; border-radius: 8px;
+  padding: 0 24px 0 10px; font-size: 12px; color: #333;
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;
+  appearance: none; cursor: pointer; outline: none;
+  flex-shrink: 0;
+}
+.list-search-input {
+  flex: 1; height: 32px; border: 1px solid #e8e8e8; border-radius: 8px;
+  padding: 0 10px; font-size: 12px; color: #333; outline: none;
+  background: #fff; min-width: 0;
+}
+.list-search-input:focus { border-color: #1aad8d; }
+.map-toggle-btn {
+  background: #1aad8d; color: #fff; border: none;
+  border-radius: 16px; height: 32px; padding: 0 12px;
+  font-size: 12px; font-weight: 600; cursor: pointer;
+  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
+}
+
+/* 设备列表卡片 */
+.device-card {
+  background: #fff; border-radius: 14px; padding: 13px 14px;
+  margin-bottom: 10px; cursor: pointer;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+  transition: transform 0.15s;
+}
+.device-card:active { transform: scale(0.99); }
+.device-card__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
+.device-card__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
+.device-card__loc { font-size: 11px; color: #999; margin-top: 2px; }
+.device-card__badge {
+  display: inline-flex; align-items: center;
+  font-size: 11px; font-weight: 700;
+  padding: 3px 10px; border-radius: 12px; color: #fff; white-space: nowrap;
+}
+.device-card__metrics { display: flex; flex-wrap: wrap; gap: 8px; }
+.metric-chip { font-size: 11px; color: #666; background: #f5f7fa; border-radius: 8px; padding: 3px 8px; }
+.metric-chip strong { color: #333; }
+
+/* ===== 底部弹窗 ===== */
+.bottom-sheet-mask {
+  position: absolute; inset: 0; background: rgba(0,0,0,0.3);
+  z-index: 20; display: none; align-items: flex-end;
+}
+.bottom-sheet-mask.active { display: flex; }
+.bottom-sheet {
+  width: 100%; background: #fff;
+  border-radius: 20px 20px 0 0;
+  padding: 0 0 24px;
+  max-height: 65%;
+  overflow-y: auto;
+  animation: slideUp 0.25s ease;
+}
+.bottom-sheet::-webkit-scrollbar { display: none; }
+@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.sheet-handle { width: 36px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 10px auto 14px; }
+.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 16px 12px; border-bottom: 1px solid #f5f5f5; }
+.sheet-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+.sheet-subtitle { font-size: 11px; color: #999; margin-top: 2px; }
+.sheet-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #bbb; font-size: 18px; }
+.sheet-body { padding: 14px 16px 0; }
+.sheet-level-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+.sheet-level-badge { font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 14px; color: #fff; }
+.sheet-level-desc { font-size: 12px; color: #666; }
+.sheet-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #f0f0f0; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
+.sheet-info-cell { background: #fff; padding: 10px 12px; }
+.sheet-info-cell__label { font-size: 11px; color: #999; margin-bottom: 3px; }
+.sheet-info-cell__value { font-size: 14px; font-weight: 700; color: #1a1a1a; }
+.sheet-info-cell__unit { font-size: 10px; color: #aaa; font-weight: 400; }
+.sheet-device-info { background: #f8f9fb; border-radius: 10px; padding: 10px 12px; }
+.sheet-device-info__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; }
+.sheet-device-info__label { color: #999; }
+.sheet-device-info__val { color: #333; font-weight: 500; }
+</style>
+</head>
+<body>
+<div class="phone-shell">
+  <!-- 状态栏 -->
+  <div class="status-bar">
+    <span class="time">9:41</span>
+    <span class="icons">
+      <svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
+      <svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
+      <svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
+    </span>
+  </div>
+
+  <!-- 导航栏 -->
+  <div class="nav-bar">
+    <div class="nav-back" onclick="location.href='../index.html'">
+      <svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </div>
+    <div class="nav-title">环境监测</div>
+  </div>
+
+  <!-- Tab 栏 -->
+  <div class="tab-bar">
+    <div class="tab-item active" data-tab="outdoor" onclick="switchTab('outdoor')">
+      <span class="tab-icon">🏔️</span>
+      <span class="tab-label">室外空气</span>
+    </div>
+    <div class="tab-item" data-tab="indoor" onclick="switchTab('indoor')">
+      <span class="tab-icon">🏠</span>
+      <span class="tab-label">室内空气</span>
+    </div>
+    <div class="tab-item" data-tab="water" onclick="switchTab('water')">
+      <span class="tab-icon">💧</span>
+      <span class="tab-label">水质监测</span>
+    </div>
+    <div class="tab-item" data-tab="pollen" onclick="switchTab('pollen')">
+      <span class="tab-icon">🌸</span>
+      <span class="tab-label">花粉监测</span>
+    </div>
+  </div>
+
+  <!-- 主内容 -->
+  <div class="main-content">
+
+    <!-- 地图视图 -->
+    <div class="map-view" id="mapView">
+      <div class="map-bg" id="mapBg">
+
+        <!-- 搜索框 -->
+        <div class="map-search">
+          <svg width="14" height="14" fill="none"><circle cx="6" cy="6" r="5" stroke="#999" stroke-width="1.5"/><path d="M10 10l3 3" stroke="#999" stroke-width="1.5" stroke-linecap="round"/></svg>
+          <span>搜索地址</span>
+        </div>
+
+        <!-- 图例 -->
+        <div class="map-legend" id="mapLegend"></div>
+
+        <!-- 设备标记容器 -->
+        <div id="markerContainer"></div>
+
+        <!-- 定位按钮 -->
+        <div class="map-locate-btn">
+          <svg width="18" height="18" fill="none"><circle cx="9" cy="9" r="3" fill="#1aad8d"/><path d="M9 1v3M9 15v3M1 9h3M15 9h3" stroke="#1aad8d" stroke-width="1.5" stroke-linecap="round"/></svg>
+        </div>
+      </div>
+
+      <!-- 列表切换按钮 -->
+      <button class="list-toggle-btn" onclick="showListView()">
+        <svg width="16" height="14" fill="none"><rect x="0" y="0" width="16" height="2.5" rx="1.25" fill="#fff"/><rect x="0" y="5.5" width="16" height="2.5" rx="1.25" fill="#fff"/><rect x="0" y="11" width="16" height="2.5" rx="1.25" fill="#fff"/></svg>
+        列表
+      </button>
+    </div>
+
+    <!-- 列表视图 -->
+    <div class="list-view" id="listView">
+      <div class="list-view-header">
+        <select class="list-filter-select" id="levelFilter" onchange="applyListFilter()">
+          <option value="">全部等级</option>
+        </select>
+        <input class="list-search-input" id="nameSearch" placeholder="搜索设备名称" oninput="applyListFilter()">
+        <button class="map-toggle-btn" onclick="showMapView()">
+          <svg width="14" height="14" fill="none"><path d="M1 5l4-3 4 3 4-3v9l-4 3-4-3-4 3V5z" stroke="#fff" stroke-width="1.3" stroke-linejoin="round"/></svg>
+          地图
+        </button>
+      </div>
+      <div id="listContainer"></div>
+    </div>
+
+  </div><!-- /main-content -->
+
+  <!-- 底部弹窗 -->
+  <div class="bottom-sheet-mask" id="sheetMask" onclick="closeSheet(event)">
+    <div class="bottom-sheet" id="bottomSheet">
+      <div class="sheet-handle"></div>
+      <div class="sheet-header">
+        <div>
+          <div class="sheet-title" id="sheetTitle">设备名称</div>
+          <div class="sheet-subtitle" id="sheetSubtitle">设备位置</div>
+        </div>
+        <div class="sheet-close" onclick="closeSheetDirect()">×</div>
+      </div>
+      <div class="sheet-body" id="sheetBody"></div>
+    </div>
+  </div>
+
+</div><!-- /phone-shell -->
+
+<script>
+// ===== 数据定义 =====
+const DATA = {
+  outdoor: {
+    title: '室外空气监测点',
+    legend: [
+      { cls: 'lvl-excellent', label: '优' },
+      { cls: 'lvl-good',      label: '良' },
+      { cls: 'lvl-light',     label: '轻度污染' },
+      { cls: 'lvl-moderate',  label: '中度污染' },
+      { cls: 'lvl-heavy',     label: '重度污染' },
+      { cls: 'lvl-severe',    label: '严重污染' },
+    ],
+    levelDesc: {
+      'lvl-excellent': '空气质量令人满意，基本无污染',
+      'lvl-good':      '空气质量可接受，少数敏感人群注意',
+      'lvl-light':     '易感人群症状有轻度加剧，健康人群无明显影响',
+      'lvl-moderate':  '敏感人群症状明显加重，健康人群普遍出现刺激症状',
+      'lvl-heavy':     '心脏病和肺病患者症状显著加剧，运动耐受力降低',
+      'lvl-severe':    '健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病',
+    },
+    devices: [
+      { id:'OA001', name:'空气质量监测站-A01', code:'OA-2024-001', unit:'采油一厂', loc:'厂区大门东侧', time:'14:30', level:'lvl-excellent', levelLabel:'优', x:200, y:100, metrics:[{k:'温度',v:'32.5',u:'℃'},{k:'湿度',v:'45',u:'%'},{k:'太阳辐射',v:'680',u:'W/m²'},{k:'PM2.5',v:'28',u:'μg/m³'},{k:'PM10',v:'52',u:'μg/m³'},{k:'照度',v:'65000',u:'lm/m²'},{k:'风速',v:'3.2',u:'m/s'}] },
+      { id:'OA002', name:'PM10检测仪-B02',    code:'OA-2024-002', unit:'采油一厂', loc:'生产区北围栏', time:'14:28', level:'lvl-good',      levelLabel:'良', x:120, y:180, metrics:[{k:'温度',v:'33.1',u:'℃'},{k:'湿度',v:'42',u:'%'},{k:'太阳辐射',v:'720',u:'W/m²'},{k:'PM2.5',v:'38',u:'μg/m³'},{k:'PM10',v:'68',u:'μg/m³'},{k:'照度',v:'72000',u:'lm/m²'},{k:'风速',v:'4.1',u:'m/s'}] },
+      { id:'OA003', name:'臭氧检测仪-C01',    code:'OA-2024-003', unit:'采油二厂', loc:'办公楼楼顶',   time:'14:25', level:'lvl-light',    levelLabel:'轻度污染', x:260, y:210, metrics:[{k:'温度',v:'31.8',u:'℃'},{k:'湿度',v:'50',u:'%'},{k:'太阳辐射',v:'580',u:'W/m²'},{k:'PM2.5',v:'55',u:'μg/m³'},{k:'PM10',v:'92',u:'μg/m³'},{k:'照度',v:'58000',u:'lm/m²'},{k:'风速',v:'2.8',u:'m/s'}] },
+      { id:'OA004', name:'气象参数监测仪-D01', code:'OA-2024-004', unit:'采油三厂', loc:'气象观测场',   time:'14:20', level:'lvl-moderate', levelLabel:'中度污染', x:80,  y:300, metrics:[{k:'温度',v:'34.2',u:'℃'},{k:'湿度',v:'38',u:'%'},{k:'太阳辐射',v:'850',u:'W/m²'},{k:'PM2.5',v:'82',u:'μg/m³'},{k:'PM10',v:'135',u:'μg/m³'},{k:'照度',v:'85000',u:'lm/m²'},{k:'风速',v:'5.6',u:'m/s'}] },
+      { id:'OA005', name:'空气质量监测站-A03', code:'OA-2024-005', unit:'采油三厂', loc:'储油罐区南侧', time:'14:15', level:'lvl-heavy',    levelLabel:'重度污染', x:210, y:340, metrics:[{k:'温度',v:'35.0',u:'℃'},{k:'湿度',v:'35',u:'%'},{k:'太阳辐射',v:'920',u:'W/m²'},{k:'PM2.5',v:'125',u:'μg/m³'},{k:'PM10',v:'190',u:'μg/m³'},{k:'照度',v:'92000',u:'lm/m²'},{k:'风速',v:'6.3',u:'m/s'}] },
+      { id:'OA006', name:'VOC检测仪-E01',      code:'OA-2024-006', unit:'采油三厂', loc:'化工装置区',   time:'14:10', level:'lvl-severe',   levelLabel:'严重污染', x:310, y:280, metrics:[{k:'温度',v:'36.2',u:'℃'},{k:'湿度',v:'30',u:'%'},{k:'太阳辐射',v:'950',u:'W/m²'},{k:'PM2.5',v:'180',u:'μg/m³'},{k:'PM10',v:'260',u:'μg/m³'},{k:'照度',v:'95000',u:'lm/m²'},{k:'风速',v:'7.1',u:'m/s'}] },
+    ]
+  },
+  indoor: {
+    title: '室内空气监测点',
+    legend: [
+      { cls: 'lvl-clean',    label: '清洁' },
+      { cls: 'lvl-good',     label: '未污染' },
+      { cls: 'lvl-light',    label: '轻污染' },
+      { cls: 'lvl-moderate', label: '中污染' },
+      { cls: 'lvl-heavy',    label: '重污染' },
+    ],
+    levelDesc: {
+      'lvl-clean':    '空气清洁，各项指标均在安全范围内',
+      'lvl-good':     '空气质量良好，适宜正常工作',
+      'lvl-light':    '部分指标轻微超标，建议适当通风',
+      'lvl-moderate': '多项指标超标，需加强通风并检查原因',
+      'lvl-heavy':    '空气质量较差，敏感人群应离开该区域',
+    },
+    devices: [
+      { id:'IA001', name:'综合空气监测仪-A01', code:'IA-2024-001', unit:'采油一厂', loc:'办公楼1层大厅',   time:'14:30', level:'lvl-clean',    levelLabel:'清洁',  x:200, y:100, metrics:[{k:'温度',v:'24.5',u:'℃'},{k:'湿度',v:'52',u:'%'},{k:'CO₂',v:'456',u:'ppm'},{k:'甲醛',v:'0.03',u:'mg/m³'},{k:'PM2.5',v:'35',u:'μg/m³'},{k:'PM10',v:'68',u:'μg/m³'}] },
+      { id:'IA002', name:'PM2.5检测仪-B03',    code:'IA-2024-002', unit:'采油一厂', loc:'办公楼2层会议室', time:'14:28', level:'lvl-good',     levelLabel:'未污染', x:130, y:185, metrics:[{k:'温度',v:'25.1',u:'℃'},{k:'湿度',v:'58',u:'%'},{k:'CO₂',v:'512',u:'ppm'},{k:'甲醛',v:'0.05',u:'mg/m³'},{k:'PM2.5',v:'42',u:'μg/m³'},{k:'PM10',v:'76',u:'μg/m³'}] },
+      { id:'IA003', name:'甲醛检测仪-C02',     code:'IA-2024-003', unit:'采油二厂', loc:'新装修办公室3层', time:'14:25', level:'lvl-light',    levelLabel:'轻污染', x:270, y:220, metrics:[{k:'温度',v:'26.3',u:'℃'},{k:'湿度',v:'61',u:'%'},{k:'CO₂',v:'680',u:'ppm'},{k:'甲醛',v:'0.09',u:'mg/m³'},{k:'PM2.5',v:'58',u:'μg/m³'},{k:'PM10',v:'95',u:'μg/m³'}] },
+      { id:'IA004', name:'CO₂检测仪-D01',      code:'IA-2024-004', unit:'采油二厂', loc:'地下车库B1层',   time:'14:20', level:'lvl-moderate', levelLabel:'中污染', x:90,  y:305, metrics:[{k:'温度',v:'22.8',u:'℃'},{k:'湿度',v:'72',u:'%'},{k:'CO₂',v:'920',u:'ppm'},{k:'甲醛',v:'0.07',u:'mg/m³'},{k:'PM2.5',v:'82',u:'μg/m³'},{k:'PM10',v:'128',u:'μg/m³'}] },
+      { id:'IA005', name:'综合空气监测仪-A05', code:'IA-2024-005', unit:'采油三厂', loc:'生产车间1号',    time:'14:15', level:'lvl-heavy',    levelLabel:'重污染', x:210, y:340, metrics:[{k:'温度',v:'28.6',u:'℃'},{k:'湿度',v:'78',u:'%'},{k:'CO₂',v:'1050',u:'ppm'},{k:'甲醛',v:'0.12',u:'mg/m³'},{k:'PM2.5',v:'120',u:'μg/m³'},{k:'PM10',v:'185',u:'μg/m³'}] },
+    ]
+  },
+  water: {
+    title: '水质监测点',
+    legend: [
+      { cls: 'lvl-pass', label: '达标' },
+      { cls: 'lvl-fail', label: '未达标' },
+    ],
+    levelDesc: {
+      'lvl-pass': '水质各项指标符合标准要求',
+      'lvl-fail': '水质存在超标项目，需检查处理',
+    },
+    devices: [
+      { id:'WQ001', name:'多参数水质分析仪-A01', code:'WQ-2024-001', unit:'采油一厂', loc:'生活区供水站',   time:'14:30', level:'lvl-pass', levelLabel:'达标',  x:180, y:110, metrics:[{k:'温度',v:'18.5',u:'℃'},{k:'电导率',v:'320',u:'μS/cm'},{k:'PH',v:'7.2',u:''},{k:'盐度',v:'180',u:'mg/L'},{k:'电阻率',v:'3125',u:'Ω·m'},{k:'TDS',v:'160',u:'mg/L'}] },
+      { id:'WQ002', name:'在线PH计-B02',          code:'WQ-2024-002', unit:'采油一厂', loc:'污水处理站出口', time:'14:28', level:'lvl-pass', levelLabel:'达标',  x:110, y:200, metrics:[{k:'温度',v:'20.3',u:'℃'},{k:'电导率',v:'580',u:'μS/cm'},{k:'PH',v:'6.8',u:''},{k:'盐度',v:'320',u:'mg/L'},{k:'电阻率',v:'1724',u:'Ω·m'},{k:'TDS',v:'290',u:'mg/L'}] },
+      { id:'WQ003', name:'电导率监测仪-C01',       code:'WQ-2024-003', unit:'采油二厂', loc:'注水站入口',    time:'14:25', level:'lvl-fail', levelLabel:'未达标', x:260, y:215, metrics:[{k:'温度',v:'22.1',u:'℃'},{k:'电导率',v:'1250',u:'μS/cm'},{k:'PH',v:'8.5',u:''},{k:'盐度',v:'680',u:'mg/L'},{k:'电阻率',v:'800',u:'Ω·m'},{k:'TDS',v:'625',u:'mg/L'}] },
+      { id:'WQ004', name:'TDS检测仪-D01',          code:'WQ-2024-004', unit:'采油二厂', loc:'生产区储水池',  time:'14:20', level:'lvl-pass', levelLabel:'达标',  x:80,  y:310, metrics:[{k:'温度',v:'19.8',u:'℃'},{k:'电导率',v:'450',u:'μS/cm'},{k:'PH',v:'7.0',u:''},{k:'盐度',v:'240',u:'mg/L'},{k:'电阻率',v:'2222',u:'Ω·m'},{k:'TDS',v:'225',u:'mg/L'}] },
+      { id:'WQ005', name:'多参数水质分析仪-A03',   code:'WQ-2024-005', unit:'采油三厂', loc:'排污口监测点',  time:'14:15', level:'lvl-fail', levelLabel:'未达标', x:220, y:345, metrics:[{k:'温度',v:'23.5',u:'℃'},{k:'电导率',v:'1680',u:'μS/cm'},{k:'PH',v:'9.2',u:''},{k:'盐度',v:'920',u:'mg/L'},{k:'电阻率',v:'595',u:'Ω·m'},{k:'TDS',v:'840',u:'mg/L'}] },
+    ]
+  },
+  pollen: {
+    title: '花粉监测点',
+    legend: [
+      { cls: 'lvl-vlow',   label: '很低' },
+      { cls: 'lvl-low',    label: '低' },
+      { cls: 'lvl-medium', label: '中等' },
+      { cls: 'lvl-high',   label: '高' },
+      { cls: 'lvl-vhigh',  label: '很高' },
+    ],
+    levelDesc: {
+      'lvl-vlow':   '花粉浓度极低，对过敏人群基本无影响',
+      'lvl-low':    '花粉浓度较低，轻度过敏人群注意防护',
+      'lvl-medium': '花粉浓度中等，过敏人群需佩戴口罩',
+      'lvl-high':   '花粉浓度较高，过敏人群减少户外活动',
+      'lvl-vhigh':  '花粉浓度极高，过敏人群应尽量避免外出',
+    },
+    devices: [
+      { id:'PL001', name:'花粉采样器-A01',      code:'PL-2024-001', unit:'采油一厂', loc:'办公区绿化带',   time:'14:30', level:'lvl-vlow',   levelLabel:'很低', x:190, y:105, metrics:[{k:'榆属',v:'12',u:'粒/千mm²'},{k:'松属',v:'8',u:'粒/千mm²'},{k:'杨属',v:'15',u:'粒/千mm²'},{k:'柏科',v:'6',u:'粒/千mm²'},{k:'柳属',v:'10',u:'粒/千mm²'},{k:'蒿属',v:'5',u:'粒/千mm²'},{k:'藜科',v:'3',u:'粒/千mm²'},{k:'苋科',v:'2',u:'粒/千mm²'},{k:'花粉总数',v:'61',u:'粒/千mm²'}] },
+      { id:'PL002', name:'花粉浓度监测仪-B01',  code:'PL-2024-002', unit:'采油一厂', loc:'厂区东侧林带',   time:'14:28', level:'lvl-low',    levelLabel:'低',   x:120, y:195, metrics:[{k:'榆属',v:'35',u:'粒/千mm²'},{k:'松属',v:'22',u:'粒/千mm²'},{k:'杨属',v:'48',u:'粒/千mm²'},{k:'柏科',v:'18',u:'粒/千mm²'},{k:'柳属',v:'28',u:'粒/千mm²'},{k:'蒿属',v:'15',u:'粒/千mm²'},{k:'藜科',v:'8',u:'粒/千mm²'},{k:'苋科',v:'6',u:'粒/千mm²'},{k:'花粉总数',v:'180',u:'粒/千mm²'}] },
+      { id:'PL003', name:'花粉自动计数仪-C01',  code:'PL-2024-003', unit:'采油二厂', loc:'生活区花园',     time:'14:25', level:'lvl-medium', levelLabel:'中等', x:265, y:220, metrics:[{k:'榆属',v:'68',u:'粒/千mm²'},{k:'松属',v:'45',u:'粒/千mm²'},{k:'杨属',v:'82',u:'粒/千mm²'},{k:'柏科',v:'35',u:'粒/千mm²'},{k:'柳属',v:'52',u:'粒/千mm²'},{k:'蒿属',v:'30',u:'粒/千mm²'},{k:'藜科',v:'18',u:'粒/千mm²'},{k:'苋科',v:'12',u:'粒/千mm²'},{k:'花粉总数',v:'342',u:'粒/千mm²'}] },
+      { id:'PL004', name:'综合气象花粉站-D01',  code:'PL-2024-004', unit:'采油二厂', loc:'气象观测场',     time:'14:20', level:'lvl-high',   levelLabel:'高',   x:80,  y:305, metrics:[{k:'榆属',v:'120',u:'粒/千mm²'},{k:'松属',v:'85',u:'粒/千mm²'},{k:'杨属',v:'150',u:'粒/千mm²'},{k:'柏科',v:'65',u:'粒/千mm²'},{k:'柳属',v:'95',u:'粒/千mm²'},{k:'蒿属',v:'55',u:'粒/千mm²'},{k:'藜科',v:'32',u:'粒/千mm²'},{k:'苋科',v:'22',u:'粒/千mm²'},{k:'花粉总数',v:'624',u:'粒/千mm²'}] },
+      { id:'PL005', name:'花粉采样器-A03',      code:'PL-2024-005', unit:'采油三厂', loc:'杨树林防护带',   time:'14:15', level:'lvl-vhigh',  levelLabel:'很高', x:215, y:345, metrics:[{k:'榆属',v:'210',u:'粒/千mm²'},{k:'松属',v:'145',u:'粒/千mm²'},{k:'杨属',v:'280',u:'粒/千mm²'},{k:'柏科',v:'110',u:'粒/千mm²'},{k:'柳属',v:'168',u:'粒/千mm²'},{k:'蒿属',v:'92',u:'粒/千mm²'},{k:'藜科',v:'55',u:'粒/千mm²'},{k:'苋科',v:'38',u:'粒/千mm²'},{k:'花粉总数',v:'1098',u:'粒/千mm²'}] },
+    ]
+  }
+};
+
+let currentTab = 'outdoor';
+
+// 等级颜色映射
+const LVL_COLOR = {
+  'lvl-excellent':'#52c41a','lvl-good':'#73d13d','lvl-light':'#faad14',
+  'lvl-moderate':'#fa541c','lvl-heavy':'#ff4d4f','lvl-severe':'#722ed1',
+  'lvl-clean':'#13c2c2','lvl-pass':'#52c41a','lvl-fail':'#ff4d4f',
+  'lvl-vlow':'#52c41a','lvl-low':'#73d13d','lvl-medium':'#faad14',
+  'lvl-high':'#ff4d4f','lvl-vhigh':'#722ed1'
+};
+
+function switchTab(tab) {
+  currentTab = tab;
+  document.querySelectorAll('.tab-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.tab === tab);
+  });
+  renderLegend();
+  renderMarkers();
+  renderList();
+  closeSheetDirect();
+}
+
+function renderLegend() {
+  const d = DATA[currentTab];
+  const el = document.getElementById('mapLegend');
+  el.innerHTML = d.legend.map(l =>
+    `<div class="legend-item">
+      <span class="legend-dot" style="background:${LVL_COLOR[l.cls]}"></span>
+      <span>${l.label}</span>
+    </div>`
+  ).join('');
+}
+
+function renderMarkers() {
+  const d = DATA[currentTab];
+  const c = document.getElementById('markerContainer');
+  const mapH = document.getElementById('mapBg').offsetHeight || 400;
+  c.innerHTML = d.devices.map(dev => {
+    const color = LVL_COLOR[dev.level];
+    // y坐标根据实际地图高度适配（数据定义基于400px高度）
+    const yAdj = Math.round(dev.y * mapH / 400);
+    return `<div class="device-marker" style="left:${dev.x}px;top:${yAdj}px" onclick="showSheet('${dev.id}')">
+      <span class="marker-icon" style="background:${color}">
+        <svg width="10" height="10" fill="none"><path d="M5 1l1.5 3h3l-2.5 2 1 3L5 7.5 2 9l1-3L.5 4h3z" fill="#fff"/></svg>
+      </span>
+      <span class="marker-label" style="color:${color}">${dev.levelLabel}</span>
+    </div>`;
+  }).join('');
+}
+
+function renderList() {
+  const d = DATA[currentTab];
+  // 重置筛选
+  const sel = document.getElementById('levelFilter');
+  sel.innerHTML = '<option value="">全部等级</option>' +
+    d.legend.map(l => `<option value="${l.cls}">${l.label}</option>`).join('');
+  document.getElementById('nameSearch').value = '';
+  renderListCards();
+}
+
+function applyListFilter() {
+  renderListCards();
+}
+
+function renderListCards() {
+  const d = DATA[currentTab];
+  const levelVal = document.getElementById('levelFilter').value;
+  const nameVal  = document.getElementById('nameSearch').value.trim().toLowerCase();
+  const filtered = d.devices.filter(dev => {
+    if (levelVal && dev.level !== levelVal) return false;
+    if (nameVal  && !dev.name.toLowerCase().includes(nameVal)) return false;
+    return true;
+  });
+  const c = document.getElementById('listContainer');
+  if (filtered.length === 0) {
+    c.innerHTML = '<div style="text-align:center;color:#bbb;font-size:13px;padding:40px 0;">暂无匹配设备</div>';
+    return;
+  }
+  c.innerHTML = filtered.map(dev => {
+    const color = LVL_COLOR[dev.level];
+    return `<div class="device-card" onclick="goDetail('${dev.id}')">
+      <div class="device-card__header">
+        <div>
+          <div class="device-card__name">${dev.name}</div>
+          <div class="device-card__loc">${dev.unit} · ${dev.loc}</div>
+        </div>
+        <span class="device-card__badge" style="background:${color}">${dev.levelLabel}</span>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+function showSheet(id) {
+  const d = DATA[currentTab];
+  const dev = d.devices.find(x => x.id === id);
+  if (!dev) return;
+  const color = LVL_COLOR[dev.level];
+  const desc = d.levelDesc[dev.level] || '';
+
+  document.getElementById('sheetTitle').textContent = dev.name;
+  document.getElementById('sheetSubtitle').textContent = `${dev.time} 更新`;
+
+  const metricsHtml = dev.metrics.map(m =>
+    `<div class="sheet-info-cell">
+      <div class="sheet-info-cell__label">${m.k}</div>
+      <div class="sheet-info-cell__value">${m.v}<span class="sheet-info-cell__unit">${m.u}</span></div>
+    </div>`
+  ).join('');
+
+  document.getElementById('sheetBody').innerHTML = `
+    <div class="sheet-level-row">
+      <span class="sheet-level-badge" style="background:${color}">${dev.levelLabel}</span>
+      <span class="sheet-level-desc">${desc}</span>
+    </div>
+    <div class="sheet-info-grid">${metricsHtml}</div>
+    <div class="sheet-device-info">
+      <div class="sheet-device-info__row"><span class="sheet-device-info__label">设备编码</span><span class="sheet-device-info__val">${dev.code}</span></div>
+      <div class="sheet-device-info__row"><span class="sheet-device-info__label">所属单位</span><span class="sheet-device-info__val">${dev.unit}</span></div>
+      <div class="sheet-device-info__row"><span class="sheet-device-info__label">设备位置</span><span class="sheet-device-info__val">${dev.loc}</span></div>
+    </div>
+    <button onclick="goDetail('${id}')" style="margin-top:14px;width:100%;height:40px;background:linear-gradient(90deg,#1aad8d,#36cfc9);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;">查看详情</button>`;
+
+  document.getElementById('sheetMask').classList.add('active');
+}
+
+function goDetail(id) {
+  location.href = 'device-detail.html?tab=' + currentTab + '&id=' + id;
+}
+
+function closeSheet(e) {
+  if (e.target === document.getElementById('sheetMask')) closeSheetDirect();
+}
+function closeSheetDirect() {
+  document.getElementById('sheetMask').classList.remove('active');
+}
+
+function showListView() {
+  document.getElementById('mapView').classList.add('hidden');
+  document.getElementById('listView').classList.add('active');
+}
+function showMapView() {
+  document.getElementById('listView').classList.remove('active');
+  document.getElementById('mapView').classList.remove('hidden');
+}
+
+// 初始化
+renderLegend();
+renderMarkers();
+renderList();
+</script>
+</body>
+</html>
diff --git a/employee-app/health-monitor/index.html b/employee-app/health-monitor/index.html
index 75444ed..4b7b5d9 100644
--- a/employee-app/health-monitor/index.html
+++ b/employee-app/health-monitor/index.html
@@ -14,27 +14,66 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
 .nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
 .nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
 .nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
-.scroll-content { flex: 1; overflow-y: auto; padding: 20px 16px; }
+.scroll-content { flex: 1; overflow-y: auto; padding: 16px 16px 8px; }
 .scroll-content::-webkit-scrollbar { display: none; }
-/* 入口卡片 */
-.entry-grid { display: flex; flex-direction: column; gap: 12px; }
-.entry-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; }
+
+/* 分组标签 */
+.section-label { font-size: 11px; font-weight: 600; color: #aaa; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; padding-left: 2px; }
+
+/* ===== 核心板块大卡片 ===== */
+.core-card { background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 12px; cursor: pointer; text-decoration: none; display: block; transition: transform 0.15s, box-shadow 0.15s; }
+.core-card:active { transform: scale(0.985); }
+.core-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.09); }
+
+.core-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+.core-card__title-wrap { display: flex; align-items: center; gap: 10px; }
+.core-card__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
+.icon--wearable { background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%); }
+.icon--weight   { background: linear-gradient(135deg, #f0f5ff 0%, #d6e4ff 100%); }
+.core-card__name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
+.core-card__time { font-size: 11px; color: #bbb; margin-top: 1px; }
+.core-card__arrow { width: 16px; height: 16px; display: flex; align-items: center; }
+
+/* 指标网格（穿戴：2×2） */
+.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.metric-cell { background: #f8f9fb; border-radius: 12px; padding: 10px 12px; }
+.metric-cell__label { font-size: 11px; color: #999; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
+.metric-cell__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.dot--steps  { background: #13c2c2; }
+.dot--heart  { background: #ff4d4f; }
+.dot--oxygen { background: #1890ff; }
+.dot--temp   { background: #fa8c16; }
+.dot--weight { background: #597ef7; }
+.dot--bmi    { background: #36cfc9; }
+.dot--fat    { background: #ff85c2; }
+.metric-cell__value { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1; }
+.metric-cell__unit  { font-size: 11px; color: #aaa; margin-top: 2px; }
+
+/* 指标行（体重：3列） */
+.metrics-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+
+/* 状态徽章 */
+.badge { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
+.badge--good   { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
+.badge--normal { color: #1890ff; background: #e6f7ff; border: 1px solid #91d5ff; }
+
+/* ===== 次级入口卡片 ===== */
+.section-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
+.entry-card { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; }
 .entry-card:active { transform: scale(0.98); }
 .entry-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
-.entry-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
-.entry-icon--wearable { background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%); }
-.entry-icon--weight { background: linear-gradient(135deg, #f0f5ff 0%, #d6e4ff 100%); }
+.entry-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
 .entry-icon--environment { background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%); }
-.entry-icon--screening { background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%); }
+.entry-icon--screening   { background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%); }
 .entry-info { flex: 1; min-width: 0; }
-.entry-name { font-size: 15px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; justify-content: space-between; }
-.entry-time { font-size: 11px; color: #bbb; font-weight: 400; }
-.entry-data { display: flex; gap: 12px; align-items: baseline; margin-top: 4px; }
-.entry-data__value { font-size: 13px; color: #666; }
-.entry-data__value strong { font-size: 18px; font-weight: 700; color: #1a1a1a; }
-.entry-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
-.entry-status--good { color: #52c41a; background: #f6ffed; }
+.entry-name { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 5px; }
+.entry-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
+.entry-metric { font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; }
+.entry-metric strong { color: #1a1a1a; font-weight: 700; }
+.entry-metric .badge { font-size: 10px; padding: 1px 6px; }
 .entry-arrow { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.entry-time-tag { font-size: 10px; color: #bbb; margin-top: 3px; }
+
 /* 底部安全区 */
 .bottom-safe { height: 20px; flex-shrink: 0; }
 </style>
@@ -55,57 +94,113 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
     </div>
     <div class="nav-title">健康监测</div>
   </div>
+
   <div class="scroll-content">
-    <div class="entry-grid">
-      <!-- 穿戴监测 -->
-      <a class="entry-card" href="wearable/index.html">
-        <div class="entry-icon entry-icon--wearable">⌚</div>
-        <div class="entry-info">
-          <div class="entry-name">穿戴监测<span class="entry-time">05-12 09:38</span></div>
-          <div class="entry-data">
-            <span class="entry-data__value">步数 <strong>6,832</strong></span>
-            <span class="entry-data__value">心率 <strong>72</strong>bpm</span>
+
+
+    <!-- 穿戴监测 大卡片 -->
+    <a class="core-card" href="wearable/index.html">
+      <div class="core-card__header">
+        <div class="core-card__title-wrap">
+          <div class="core-card__icon icon--wearable">⌚</div>
+          <div>
+            <div class="core-card__name">穿戴监测</div>
+            <div class="core-card__time">05-25 09:38 同步</div>
           </div>
         </div>
-        <div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
-      </a>
-      <!-- 体重监测 -->
-      <a class="entry-card" href="weight/index.html">
-        <div class="entry-icon entry-icon--weight">⚖️</div>
-        <div class="entry-info">
-          <div class="entry-name">体重监测<span class="entry-time">05-11 07:15</span></div>
-          <div class="entry-data">
-            <span class="entry-data__value"><strong>68.5</strong>kg</span>
-            <span class="entry-data__value">BMI <strong>22.3</strong></span>
+        <div class="core-card__arrow">
+          <svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+      <div class="metrics-grid">
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--steps"></span>步数</div>
+          <div class="metric-cell__value">6,832</div>
+          <div class="metric-cell__unit">步 &nbsp;</div>
+        </div>
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--heart"></span>心率</div>
+          <div class="metric-cell__value">72</div>
+          <div class="metric-cell__unit">bpm &nbsp;<span class="badge badge--good">正常</span></div>
+        </div>
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--oxygen"></span>血氧</div>
+          <div class="metric-cell__value">98</div>
+          <div class="metric-cell__unit">% &nbsp;<span class="badge badge--good">正常</span></div>
+        </div>
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--temp"></span>体温</div>
+          <div class="metric-cell__value">36.5</div>
+          <div class="metric-cell__unit">°C &nbsp;<span class="badge badge--good">正常</span></div>
+        </div>
+      </div>
+    </a>
+
+    <!-- 体重监测 大卡片 -->
+    <a class="core-card" href="weight/index.html">
+      <div class="core-card__header">
+        <div class="core-card__title-wrap">
+          <div class="core-card__icon icon--weight">⚖️</div>
+          <div>
+            <div class="core-card__name">体重监测</div>
+            <div class="core-card__time">05-24 07:15 测量</div>
           </div>
         </div>
-        <div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
-      </a>
+        <div class="core-card__arrow">
+          <svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+      <div class="metrics-row">
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--weight"></span>体重</div>
+          <div class="metric-cell__value">68.5</div>
+          <div class="metric-cell__unit">kg</div>
+        </div>
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--bmi"></span>BMI</div>
+          <div class="metric-cell__value">22.3</div>
+          <div class="metric-cell__unit"><span class="badge badge--good">正常</span></div>
+        </div>
+        <div class="metric-cell">
+          <div class="metric-cell__label"><span class="metric-cell__dot dot--fat"></span>体脂率</div>
+          <div class="metric-cell__value">18.2</div>
+          <div class="metric-cell__unit">% &nbsp;<span class="badge badge--good">正常</span></div>
+        </div>
+      </div>
+    </a>
+
+
+    <div class="section-cards">
+
       <!-- 环境监测 -->
       <a class="entry-card" href="environment/index.html">
         <div class="entry-icon entry-icon--environment">🌿</div>
         <div class="entry-info">
-          <div class="entry-name">环境监测<span class="entry-time">05-12 09:30</span></div>
-          <div class="entry-data">
-            <span class="entry-data__value">AQI <strong>45</strong></span>
-            <span class="entry-status entry-status--good">优</span>
-            <span class="entry-data__value"><strong>24</strong>°C</span>
+          <div class="entry-name">环境监测</div>
+          <div class="entry-metrics">
+            <span class="entry-metric">空气质量 <strong>AQI 45</strong> <span class="badge badge--good">优</span></span>
+            <span class="entry-metric">水质 <span class="badge badge--good">达标</span></span>
+            <span class="entry-metric">过敏 <span class="badge badge--normal">低风险</span></span>
           </div>
+          <div class="entry-time-tag">05-25 09:30 更新</div>
         </div>
         <div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
       </a>
+
       <!-- 健康排查 -->
       <a class="entry-card" href="health-screening/index.html">
         <div class="entry-icon entry-icon--screening">🔍</div>
         <div class="entry-info">
-          <div class="entry-name">健康排查<span class="entry-time">05-12 08:00</span></div>
-          <div class="entry-data">
-            <span class="entry-data__value">积分 <strong>1,280</strong></span>
-            <span class="entry-data__value">连续签到 <strong>7</strong>天</span>
+          <div class="entry-name">健康排查</div>
+          <div class="entry-metrics">
+            <span class="entry-metric">积分 <strong>1,280</strong></span>
+            <span class="entry-metric">连续签到 <strong>7</strong> 天</span>
           </div>
+          <div class="entry-time-tag">05-25 08:00 更新</div>
         </div>
         <div class="entry-arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
       </a>
+
     </div>
   </div>
   <div class="bottom-safe"></div>