fix: 更新健康检查、健康监测及体重管理页面，新增胃肠镜报告页面
This commit is contained in:
liuyunqin
@@ -162,6 +162,8 @@
|
||||
.consult-table thead th:nth-child(2) { width: 22%; }
|
||||
.consult-table thead th:nth-child(3) { width: 20%; }
|
||||
.consult-table thead th:nth-child(4) { width: 24%; }
|
||||
.consult-table--gastro thead th:first-child { width: 30%; }
|
||||
.consult-table--gastro thead th:nth-child(2) { width: 70%; }
|
||||
.is-abnormal { color: var(--danger); font-weight: 600; }
|
||||
.consult-table tbody td:nth-child(2) { color: var(--danger); font-weight: 600; }
|
||||
</style>
|
||||
@@ -310,6 +312,44 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 肠胃镜检查 -->
|
||||
<div class="category">
|
||||
<div class="category__title">肠胃镜检查</div>
|
||||
|
||||
<!-- 胃镜 -->
|
||||
<div class="sub-section">
|
||||
<div class="sub-section__header">
|
||||
<div class="sub-section__name"><span class="sub-section__bar"></span>胃镜</div>
|
||||
<a class="sub-section__link">专家库一键咨询></a>
|
||||
</div>
|
||||
<table class="consult-table consult-table--gastro">
|
||||
<thead><tr><th>名称</th><th>结果</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>食管</td><td class="is-abnormal">黏膜光滑，未见异常</td></tr>
|
||||
<tr><td>胃</td><td class="is-abnormal">胃窦黏膜轻度充血水肿</td></tr>
|
||||
<tr><td>十二指肠</td><td class="is-abnormal">黏膜光滑，未见异常</td></tr>
|
||||
<tr><td>诊断结果</td><td class="is-abnormal">慢性非萎缩性胃炎（胃窦）</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 肠镜 -->
|
||||
<div class="sub-section">
|
||||
<div class="sub-section__header">
|
||||
<div class="sub-section__name"><span class="sub-section__bar"></span>肠镜</div>
|
||||
<a class="sub-section__link">专家库一键咨询></a>
|
||||
</div>
|
||||
<table class="consult-table consult-table--gastro">
|
||||
<thead><tr><th>名称</th><th>结果</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>结肠</td><td class="is-abnormal">全结肠黏膜光滑，未见异常</td></tr>
|
||||
<tr><td>诊断结果</td><td class="is-abnormal">全结肠黏膜未见明显异常</td></tr>
|
||||
<tr><td>病理诊断</td><td class="is-abnormal">黏膜慢性炎</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,477 @@
|
||||
<!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; }
|
||||
:root {
|
||||
--primary: #20c7c7;
|
||||
--primary-dark: #119b9b;
|
||||
--primary-light: #e8fbfb;
|
||||
--border: #cfeeee;
|
||||
--line: #dff3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f6fbfb;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666;
|
||||
--text-muted: #8c8c8c;
|
||||
--success: #52c41a;
|
||||
--paper-shadow: 0 8px 24px rgba(17, 155, 155, 0.08);
|
||||
}
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
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;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: var(--bg-content);
|
||||
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;
|
||||
}
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-back {
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #ecfbfb 0%, #f7fbfb 160px, #f7fbfb 100%);
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 14px; }
|
||||
|
||||
/* 报告卡片 */
|
||||
.report-paper {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--paper-shadow);
|
||||
border: 1px solid rgba(32, 199, 199, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.report-header {
|
||||
padding: 18px 16px 14px;
|
||||
background: linear-gradient(180deg, #fbffff 0%, #f4ffff 100%);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.report-header__top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.report-header__title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #0f7d7d;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.report-header__sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.report-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 62px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
background: #f6ffed;
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.report-tag--gastro {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 62px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
background: #e6fffb;
|
||||
color: #08979c;
|
||||
border: 1px solid #87e8de;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 章节 */
|
||||
.report-section {
|
||||
padding: 14px 16px 0;
|
||||
}
|
||||
.report-section__title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin: 0 -16px 12px;
|
||||
background: linear-gradient(90deg, #78e3e3 0%, #a4eded 100%);
|
||||
color: #0c7070;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.report-section__title--gastric {
|
||||
background: linear-gradient(90deg, #ffd591 0%, #ffe7ba 100%);
|
||||
color: #ad6800;
|
||||
}
|
||||
.report-section__title--colon {
|
||||
background: linear-gradient(90deg, #b5f5ec 0%, #d9f9f4 100%);
|
||||
color: #006d75;
|
||||
}
|
||||
|
||||
/* 检查字段 */
|
||||
.field-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.field-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.field-item__label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.field-item__value-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.field-item__value {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
background: #f9fffe;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
min-height: 40px;
|
||||
max-height: 76px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
.field-item.is-expanded .field-item__value {
|
||||
max-height: 600px;
|
||||
}
|
||||
.field-item__fade {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
height: 32px;
|
||||
background: linear-gradient(180deg, rgba(249,255,254,0) 0%, rgba(249,255,254,0.96) 60%);
|
||||
pointer-events: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
.field-item.is-expanded .field-item__fade {
|
||||
display: none;
|
||||
}
|
||||
.field-item__toggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 8px;
|
||||
border: none;
|
||||
background: #f9fffe;
|
||||
color: var(--primary-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
.field-item__toggle.is-visible {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* 报告图片 */
|
||||
.image-section {
|
||||
padding: 14px 16px 4px;
|
||||
}
|
||||
.image-section__label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.image-view-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: #f9fffe;
|
||||
color: var(--primary-dark);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-bottom: 14px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
.image-view-link:hover { border-color: var(--primary); background: var(--primary-light); }
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--line);
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn-wrap {
|
||||
padding: 10px 16px 18px;
|
||||
}
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: none;
|
||||
border-radius: 23px;
|
||||
background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.22);
|
||||
}
|
||||
.bottom-spacer { height: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 返回按钮：返回体检报告列表 -->
|
||||
<span class="nav-back" onclick="location.href='reports.html'">‹</span>
|
||||
<span class="nav-title">胃肠镜报告</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<div class="report-paper">
|
||||
<!-- 报告头部 -->
|
||||
<div class="report-header">
|
||||
<div class="report-header__top">
|
||||
<div>
|
||||
<div class="report-header__title">2025年体检报告</div>
|
||||
<div class="report-header__sub">姓名：张旭
|
||||
<br>性别：男
|
||||
<br>年龄：32
|
||||
<br>身份证号：430626198503250024
|
||||
<br>体检日期：2025-03-21
|
||||
<br>体检医院：CQ星龙园医院
|
||||
</div>
|
||||
</div>
|
||||
<span class="report-tag--gastro">胃肠镜体检</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========== 胃镜检查 ========== -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title report-section__title--gastric">胃镜检查</div>
|
||||
<div class="field-list">
|
||||
<div class="field-item" id="field-esophagus">
|
||||
<div class="field-item__label">食管</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">食管黏膜光滑，色泽正常，血管纹理清晰，未见静脉曲张及占位性病变。贲门开闭良好。</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-item" id="field-stomach">
|
||||
<div class="field-item__label">胃</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">胃底、胃体黏膜光滑，色泽橘红，黏液湖清亮。胃角切迹光滑，胃窦黏膜轻度充血水肿，未见糜烂及溃疡。幽门口圆，开闭良好。</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-item" id="field-duodenum">
|
||||
<div class="field-item__label">十二指肠</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">十二指肠球部及降部黏膜光滑，未见溃疡、糜烂及占位性病变。乳头形态正常。</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-item" id="field-gastro-diagnosis">
|
||||
<div class="field-item__label">诊断结果</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">慢性非萎缩性胃炎（胃窦）</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 胃镜报告图片 -->
|
||||
<div class="image-section">
|
||||
<div class="image-section__label">胃镜报告图片</div>
|
||||
<div class="image-view-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
查看
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 肠镜检查 ========== -->
|
||||
<div class="report-section">
|
||||
<div class="report-section__title report-section__title--colon">肠镜检查</div>
|
||||
<div class="field-list">
|
||||
<div class="field-item" id="field-colon">
|
||||
<div class="field-item__label">结肠</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">全结肠黏膜光滑，血管纹理清晰，未见充血、水肿、糜烂、溃疡及占位性病变。回盲瓣呈唇形，阑尾开口形态正常。结肠袋形态规整，蠕动良好。</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-item" id="field-colon-diagnosis">
|
||||
<div class="field-item__label">诊断结果</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">全结肠黏膜未见明显异常</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-item" id="field-pathology">
|
||||
<div class="field-item__label">病理诊断</div>
|
||||
<div class="field-item__value-wrap">
|
||||
<div class="field-item__value">（降结肠活检）送检肠黏膜组织，腺体排列整齐，间质少量淋巴细胞浸润，未见异型增生及癌细胞。病理诊断：黏膜慢性炎。</div>
|
||||
<div class="field-item__fade"></div>
|
||||
<button class="field-item__toggle" type="button" onclick="toggleField(this)">展开</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 肠镜报告图片 -->
|
||||
<div class="image-section">
|
||||
<div class="image-section__label">肠镜报告图片</div>
|
||||
<div class="image-view-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
查看
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 货件报告图片 -->
|
||||
<div class="image-section">
|
||||
<div class="image-section__label">货件报告图片</div>
|
||||
<div class="image-view-link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
查看
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-btn-wrap">
|
||||
<!-- [交互] 返回报告列表按钮 -->
|
||||
<button class="back-btn" onclick="location.href='reports.html'">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
||||
返回报告列表
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// [交互] 展开/收起字段内容
|
||||
function toggleField(btn) {
|
||||
var item = btn.closest('.field-item');
|
||||
var fade = item.querySelector('.field-item__fade');
|
||||
var isExpanded = item.classList.toggle('is-expanded');
|
||||
btn.innerHTML = isExpanded
|
||||
? '收起 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>'
|
||||
: '展开 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
|
||||
if (fade) fade.style.display = isExpanded ? 'none' : '';
|
||||
}
|
||||
|
||||
// 页面加载后，检测哪些字段内容超过3行，仅对超出的显示展开按钮
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var items = document.querySelectorAll('.field-item');
|
||||
items.forEach(function(item) {
|
||||
var value = item.querySelector('.field-item__value');
|
||||
var btn = item.querySelector('.field-item__toggle');
|
||||
if (!value || !btn) return;
|
||||
// scrollHeight 为完整内容高度，clientHeight 为可见高度
|
||||
if (value.scrollHeight > value.clientHeight + 2) {
|
||||
btn.classList.add('is-visible');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -144,6 +144,21 @@
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.report-tag--regular {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 62px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
background: #e6f7ff;
|
||||
color: #096dd9;
|
||||
border: 1px solid #91d5ff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -404,7 +419,7 @@
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 返回按钮：返回体检报告列表 -->
|
||||
<span class="nav-back" onclick="location.href='reports.html'">‹</span>
|
||||
<span class="nav-title">报告查询</span>
|
||||
<span class="nav-title">常规体检报告</span>
|
||||
<a class="nav-action" href="javascript:void(0)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
下载
|
||||
@@ -425,7 +440,7 @@
|
||||
<br>体检医院：宁夏宝石花医院健康管理中心
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-status">已出报告</div>
|
||||
<span class="report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<!-- <div class="summary-strip">-->
|
||||
<!-- <div class="summary-strip__item">-->
|
||||
|
||||
@@ -69,6 +69,14 @@
|
||||
.report-item__content { flex: 1; min-width: 0; }
|
||||
.report-item__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.report-item__meta { font-size: 12px; color: #8c8c8c; }
|
||||
.report-item__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
||||
/* 标签 */
|
||||
.report-tag {
|
||||
display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
|
||||
border-radius: 11px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
.report-tag--gastro { background: #e6fffb; color: #08979c; border: 1px solid #87e8de; }
|
||||
.report-tag--regular { background: #e6f7ff; color: #096dd9; border: 1px solid #91d5ff; }
|
||||
.report-item__arrow { font-size: 18px; color: #c6c6c6; flex-shrink: 0; }
|
||||
.bottom-spacer { height: 28px; }
|
||||
</style>
|
||||
@@ -104,46 +112,58 @@
|
||||
<!-- 报告列表 -->
|
||||
<div class="section-title">我的历年报告</div>
|
||||
<div class="report-list">
|
||||
<!-- [交互] 点击跳转至: report-query.html -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
<!-- [交互] 点击跳转至: report-gastro.html（胃肠镜报告） -->
|
||||
<div class="report-item" onclick="location.href='report-gastro.html'">
|
||||
<div class="report-item__icon" style="background:#e6fffb;color:#08979c;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</div>
|
||||
<div class="report-item__content">
|
||||
<div class="report-item__title">2025年度胃肠镜体检报告</div>
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2025年度体检报告</span>
|
||||
<span class="report-tag report-tag--gastro">胃肠镜体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: report-query.html -->
|
||||
<!-- [交互] 点击跳转至: report-query.html（常规体检） -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon">
|
||||
<div class="report-item__icon" style="background:#e6f7ff;color:#096dd9;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="report-item__content">
|
||||
<div class="report-item__title">2025年度常规体检报告</div>
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2025年度体检报告</span>
|
||||
<span class="report-tag report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: report-query.html -->
|
||||
<!-- [交互] 点击跳转至: report-query.html（常规体检） -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon">
|
||||
<div class="report-item__icon" style="background:#e6f7ff;color:#096dd9;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="report-item__content">
|
||||
<div class="report-item__title">2024年度常规体检报告</div>
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2024年度体检报告</span>
|
||||
<span class="report-tag report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: report-query.html -->
|
||||
<!-- [交互] 点击跳转至: report-query.html（常规体检） -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon">
|
||||
<div class="report-item__icon" style="background:#e6f7ff;color:#096dd9;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="report-item__content">
|
||||
<div class="report-item__title">2023年度常规体检报告</div>
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2023年度体检报告</span>
|
||||
<span class="report-tag report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
|
||||
@@ -240,9 +240,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
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; }
|
||||
.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; }
|
||||
.device-card__distance { text-align: right; font-size: 11px; color: #999; margin-top: 8px; }
|
||||
|
||||
/* ===== 底部弹窗 ===== */
|
||||
.bottom-sheet-mask {
|
||||
@@ -420,12 +421,12 @@ const DATA = {
|
||||
'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'}] },
|
||||
{ id:'OA001', name:'空气质量监测站-A01', code:'OA-2024-001', unit:'采油一厂', loc:'厂区大门东侧', time:'14:30', level:'lvl-excellent', levelLabel:'优', dist:0.8, 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:'良', dist:1.2, 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:'轻度污染', dist:2.5, 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:'中度污染', dist:3.1, 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:'重度污染', dist:4.0, 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:'严重污染', dist:5.2, 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: {
|
||||
@@ -445,11 +446,11 @@ const DATA = {
|
||||
'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³'}] },
|
||||
{ id:'IA001', name:'综合空气监测仪-A01', code:'IA-2024-001', unit:'采油一厂', loc:'办公楼1层大厅', time:'14:30', level:'lvl-clean', levelLabel:'清洁', dist:0.5, 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:'未污染', dist:0.7, 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:'轻污染', dist:1.8, 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:'中污染', dist:2.2, 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:'重污染', dist:3.5, 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: {
|
||||
@@ -463,11 +464,11 @@ const DATA = {
|
||||
'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'}] },
|
||||
{ id:'WQ001', name:'多参数水质分析仪-A01', code:'WQ-2024-001', unit:'采油一厂', loc:'生活区供水站', time:'14:30', level:'lvl-pass', levelLabel:'达标', dist:0.6, 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:'达标', dist:1.1, 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:'未达标', dist:2.0, 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:'达标', dist:2.8, 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:'未达标', dist:3.6, 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: {
|
||||
@@ -487,11 +488,11 @@ const DATA = {
|
||||
'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²'}] },
|
||||
{ id:'PL001', name:'花粉采样器-A01', code:'PL-2024-001', unit:'采油一厂', loc:'办公区绿化带', time:'14:30', level:'lvl-vlow', levelLabel:'很低', dist:0.4, 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:'低', dist:0.9, 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:'中等', dist:1.6, 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:'高', dist:2.4, 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:'很高', dist:3.3, 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²'}] },
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -584,6 +585,7 @@ function renderListCards() {
|
||||
</div>
|
||||
<span class="device-card__badge" style="background:${color}">${dev.levelLabel}</span>
|
||||
</div>
|
||||
<div class="device-card__distance">距离${dev.dist}km</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
@@ -27,14 +27,33 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.gauge-badge { position: absolute; top: 10px; right: -10px; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; }
|
||||
.gauge-badge--A { background: #ff4d4f; }
|
||||
|
||||
/* 人群标签 */
|
||||
.crowd-tag { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 20px; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
|
||||
.crowd-tag--A { color: #ff4d4f; background: #fff1f0; border: 1px solid #ffccc7; }
|
||||
.crowd-tag--B { color: #fa8c16; background: #fff7e6; border: 1px solid #ffd591; }
|
||||
.crowd-tag--C { color: #faad14; background: #fffbe6; border: 1px solid #ffe58f; }
|
||||
.crowd-tag--D { color: #1890ff; background: #e6f7ff; border: 1px solid #91d5ff; }
|
||||
.crowd-tag--E { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.update-time { font-size: 12px; color: #999; }
|
||||
/* 人群标签 */
|
||||
.crowd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.crowd-tag { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 20px; font-size: 15px; font-weight: 700; }
|
||||
.crowd-tag--A { color: #ff4d4f; background: #fff1f0; border: 1px solid #ffccc7; }
|
||||
.crowd-tag--B { color: #fa8c16; background: #fff7e6; border: 1px solid #ffd591; }
|
||||
.crowd-tag--C { color: #faad14; background: #fffbe6; border: 1px solid #ffe58f; }
|
||||
.crowd-tag--D { color: #1890ff; background: #e6f7ff; border: 1px solid #91d5ff; }
|
||||
.crowd-tag--E { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.crowd-help-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d9d9d9; background: #fff; color: #999; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
|
||||
.update-time { font-size: 12px; color: #999; }
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.popup-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 30; display: none; align-items: center; justify-content: center; }
|
||||
.popup-mask.active { display: flex; }
|
||||
.popup-dialog { width: 300px; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); animation: popIn 0.2s ease; }
|
||||
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
.popup-dialog__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; text-align: center; }
|
||||
.popup-dialog__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
|
||||
.popup-dialog__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333; }
|
||||
.popup-dialog__letter { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.popup-dialog__letter--A { background: #ff4d4f; }
|
||||
.popup-dialog__letter--B { background: #fa8c16; }
|
||||
.popup-dialog__letter--C { background: #faad14; }
|
||||
.popup-dialog__letter--D { background: #1890ff; }
|
||||
.popup-dialog__letter--E { background: #52c41a; }
|
||||
.popup-dialog__desc { flex: 1; line-height: 1.5; }
|
||||
.popup-dialog__close { width: 100%; height: 40px; border: none; border-radius: 20px; background: #f5f5f5; color: #666; font-size: 14px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 说明区 */
|
||||
.note-section { padding: 16px; }
|
||||
@@ -102,15 +121,34 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
<div class="gauge-badge gauge-badge--A">A</div>
|
||||
</div>
|
||||
<div class="crowd-tag crowd-tag--A">A类人群</div>
|
||||
<div class="crowd-row">
|
||||
<div class="crowd-tag crowd-tag--A">A类人群</div>
|
||||
<button class="crowd-help-btn" onclick="showCrowdPopup()">?</button>
|
||||
</div>
|
||||
<div class="update-time">更新时间：2026-03-26 14:36</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明 -->
|
||||
<div class="note-section">
|
||||
<div class="note-card">
|
||||
<div class="note-card__title">💬 说明</div>
|
||||
<div class="note-card__text">现状评估的人群分类按A、B、C、D、E五个分类进行分类。<br>E类：健康人群 | D类：风险人群 | C类：异常人群 | B类：慢病人群 | A类：大病人群</div>
|
||||
<!-- 分类信息 -->
|
||||
<div class="info-section">
|
||||
<div class="info-section__title">分类信息（大病信息）</div>
|
||||
<div class="info-card">
|
||||
<div class="category-header"><span class="category-header__bar"></span>肺癌</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">确诊年份</span>
|
||||
<span class="info-row__value">2022年</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">确诊医院</span>
|
||||
<span class="info-row__value">宁夏宝石花医院</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">大病状态</span>
|
||||
<span class="info-row__value">可控</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">治疗情况</span>
|
||||
<span class="info-row__value">目前属于血糖偏高，可控阶段，按时服药，定期复诊。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -141,32 +179,49 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类信息 -->
|
||||
<div class="info-section">
|
||||
<div class="info-section__title">分类信息（大病信息）</div>
|
||||
<div class="info-card">
|
||||
<div class="category-header"><span class="category-header__bar"></span>肺癌</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">确诊年份</span>
|
||||
<span class="info-row__value">2022年</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">确诊医院</span>
|
||||
<span class="info-row__value">宁夏宝石花医院</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">大病状态</span>
|
||||
<span class="info-row__value">可控</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">治疗情况</span>
|
||||
<span class="info-row__value">目前属于血糖偏高，可控阶段，按时服药，定期复诊。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bottom-safe"></div>
|
||||
|
||||
<!-- 人群说明弹窗 -->
|
||||
<div class="popup-mask" id="crowdPopup" onclick="closeCrowdPopup(event)">
|
||||
<div class="popup-dialog">
|
||||
<div class="popup-dialog__title">人群分类说明</div>
|
||||
<div class="popup-dialog__list">
|
||||
<div class="popup-dialog__item">
|
||||
<span class="popup-dialog__letter popup-dialog__letter--A">A</span>
|
||||
<span class="popup-dialog__desc">大病人群</span>
|
||||
</div>
|
||||
<div class="popup-dialog__item">
|
||||
<span class="popup-dialog__letter popup-dialog__letter--B">B</span>
|
||||
<span class="popup-dialog__desc">慢病人群</span>
|
||||
</div>
|
||||
<div class="popup-dialog__item">
|
||||
<span class="popup-dialog__letter popup-dialog__letter--C">C</span>
|
||||
<span class="popup-dialog__desc">异常人群</span>
|
||||
</div>
|
||||
<div class="popup-dialog__item">
|
||||
<span class="popup-dialog__letter popup-dialog__letter--D">D</span>
|
||||
<span class="popup-dialog__desc">风险人群</span>
|
||||
</div>
|
||||
<div class="popup-dialog__item">
|
||||
<span class="popup-dialog__letter popup-dialog__letter--E">E</span>
|
||||
<span class="popup-dialog__desc">健康人群</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="popup-dialog__close" onclick="document.getElementById('crowdPopup').classList.remove('active')">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function showCrowdPopup() {
|
||||
document.getElementById('crowdPopup').classList.add('active');
|
||||
}
|
||||
function closeCrowdPopup(e) {
|
||||
if (e.target === e.currentTarget) {
|
||||
document.getElementById('crowdPopup').classList.remove('active');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -71,8 +71,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.type-card__kcal { font-size: 11px; color: #666; }
|
||||
.type-card__kcal em { font-style: normal; font-weight: 700; color: #1a1a1a; }
|
||||
.type-card__empty { font-size: 11px; color: #bbb; }
|
||||
.type-card__arrow { color: #ccc; flex-shrink: 0; margin-left: 4px; }
|
||||
.type-card__arrow svg { width: 16px; height: 16px; }
|
||||
.type-card__arrow { display: none; }
|
||||
|
||||
/* ===== 自记餐品选择区 ===== */
|
||||
.self-record { margin: 0 12px 12px; }
|
||||
|
||||
@@ -289,7 +289,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="day-card" data-day="tue" onclick="selectDay('tue')">
|
||||
<div class="day-card__name">周二</div>
|
||||
<div class="day-card__date">08-11</div>
|
||||
<div class="day-card__steps">10200<span class="day-card__steps-unit">步</span></div>
|
||||
<div class="day-card__steps">523<span class="day-card__steps-unit">千卡</span></div>
|
||||
<div class="day-card__recommend">推荐<em>12000</em>步</div>
|
||||
<span class="day-card__badge day-card__badge--wearable">穿戴</span>
|
||||
</div>
|
||||
@@ -359,7 +359,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
<div class="type-card__info">
|
||||
<div class="type-card__label">穿戴设备</div>
|
||||
<div class="type-card__empty">尚未自动记录</div>
|
||||
<div class="type-card__empty">尚未记录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -115,6 +115,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.source-badge--manual { background: #fff7e6; color: #fa8c16; }
|
||||
.source-badge--mixed { background: #f9f0ff; color: #722ed1; }
|
||||
|
||||
.record-section-title { font-size: 13px; font-weight: 700; color: #1a1a1a; padding: 4px 4px 0; display: flex; align-items: center; gap: 6px; }
|
||||
.record-section-title::before { content: ''; width: 3px; height: 14px; background: #ff8a3d; border-radius: 2px; flex-shrink: 0; }
|
||||
.record-section-title--steps::before { background: #1890ff; }
|
||||
|
||||
.record-empty { text-align: center; padding: 40px 20px; color: #ccc; font-size: 14px; }
|
||||
|
||||
.bottom-safe { height: 20px; flex-shrink: 0; }
|
||||
@@ -468,6 +472,10 @@ function getTabDateRange() {
|
||||
}
|
||||
|
||||
/* ===== 渲染记录列表 ===== */
|
||||
function isStepRecord(r) {
|
||||
return r.name === '快走' || r.name === '散步' || r.name === '徒步';
|
||||
}
|
||||
|
||||
function renderRecordList() {
|
||||
var filtered;
|
||||
if (selectedDate) {
|
||||
@@ -486,6 +494,56 @@ function renderRecordList() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 选中具体日期时，分组展示：当日步数 + 运动记录
|
||||
if (selectedDate) {
|
||||
var stepRecords = filtered.filter(function(r) { return isStepRecord(r); });
|
||||
var exerciseRecords = filtered.filter(function(r) { return !isStepRecord(r); });
|
||||
|
||||
var html = '';
|
||||
|
||||
// 当日步数（最多一条）
|
||||
if (stepRecords.length > 0) {
|
||||
html += '<div class="record-section-title record-section-title--steps">当日步数</div>';
|
||||
var sr = stepRecords[0];
|
||||
var src = SOURCE_TYPES[sr.source];
|
||||
html += '<div class="record-item">';
|
||||
html += '<div class="record-item__header">';
|
||||
html += '<span class="record-item__title">' + sr.name + '</span>';
|
||||
html += '<span class="record-item__time">' + sr.date + ' ' + sr.time + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="record-item__body">';
|
||||
html += '<div class="record-item__metric"><div class="record-item__metric-label">消耗热量</div><div class="record-item__metric-val">' + sr.kcal + '<span class="record-item__metric-unit">千卡</span></div></div>';
|
||||
html += '<div class="record-item__metric"><div class="record-item__metric-label">运动时长</div><div class="record-item__metric-val">' + sr.duration + '<span class="record-item__metric-unit">分钟</span></div></div>';
|
||||
html += '<div class="record-item__source"><span class="source-badge ' + src.badge + '">' + src.label + '</span></div>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// 运动记录
|
||||
if (exerciseRecords.length > 0) {
|
||||
html += '<div class="record-section-title" style="margin-top:' + (stepRecords.length > 0 ? '12px' : '0') + ';">运动记录</div>';
|
||||
for (var i = 0; i < exerciseRecords.length; i++) {
|
||||
var r = exerciseRecords[i];
|
||||
var src2 = SOURCE_TYPES[r.source];
|
||||
html += '<div class="record-item">';
|
||||
html += '<div class="record-item__header">';
|
||||
html += '<span class="record-item__title">' + r.name + '</span>';
|
||||
html += '<span class="record-item__time">' + r.date + ' ' + r.time + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="record-item__body">';
|
||||
html += '<div class="record-item__metric"><div class="record-item__metric-label">消耗热量</div><div class="record-item__metric-val">' + r.kcal + '<span class="record-item__metric-unit">千卡</span></div></div>';
|
||||
html += '<div class="record-item__metric"><div class="record-item__metric-label">运动时长</div><div class="record-item__metric-val">' + r.duration + '<span class="record-item__metric-unit">分钟</span></div></div>';
|
||||
html += '<div class="record-item__source"><span class="source-badge ' + src2.badge + '">' + src2.label + '</span></div>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
return;
|
||||
}
|
||||
|
||||
// Tab 模式：扁平列表
|
||||
var html = '';
|
||||
for (var i = 0; i < filtered.length; i++) {
|
||||
var r = filtered[i];
|
||||
|
||||
@@ -232,38 +232,38 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 一周日期卡片（2行：4+3） -->
|
||||
<div class="day-grid" id="dayGrid">
|
||||
<!-- 周一 - 已记录（蓝牙称） -->
|
||||
<!-- [交互] 点击选中该日，下方显示记录详情（非当日仅查看） -->
|
||||
<!-- [状态] 已记录 - 蓝牙称 -->
|
||||
<div class="day-card" data-day="mon" onclick="selectDay('mon')">
|
||||
<div class="day-card__name">周一</div>
|
||||
<div class="day-card__date">08-10</div>
|
||||
<div class="day-card__weight">62.8<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">推荐<em>56-68</em>kg</div>
|
||||
<span class="day-card__badge day-card__badge--bluetooth">蓝牙</span>
|
||||
</div>
|
||||
<!-- 周一 - 已记录（蓝牙称） -->
|
||||
<!-- [交互] 点击选中该日，下方显示记录详情（非当日仅查看） -->
|
||||
<!-- [状态] 已记录 - 蓝牙称 -->
|
||||
<div class="day-card" data-day="mon" onclick="selectDay('mon')">
|
||||
<div class="day-card__name">周一</div>
|
||||
<div class="day-card__date">08-10</div>
|
||||
<div class="day-card__weight">62.8<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">体脂率 <em>--</em>%</div>
|
||||
<span class="day-card__badge day-card__badge--bluetooth">蓝牙</span>
|
||||
</div>
|
||||
|
||||
<!-- 周二 - 已记录（体脂仪） -->
|
||||
<!-- [交互] 点击选中该日，下方显示记录详情（非当日仅查看） -->
|
||||
<!-- [状态] 已记录 - 体脂仪 -->
|
||||
<div class="day-card" data-day="tue" onclick="selectDay('tue')">
|
||||
<div class="day-card__name">周二</div>
|
||||
<div class="day-card__date">08-11</div>
|
||||
<div class="day-card__weight">62.7<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">推荐<em>56-68</em>kg</div>
|
||||
<span class="day-card__badge day-card__badge--fat">体脂仪</span>
|
||||
</div>
|
||||
<!-- 周二 - 已记录（体脂仪） -->
|
||||
<!-- [交互] 点击选中该日，下方显示记录详情（非当日仅查看） -->
|
||||
<!-- [状态] 已记录 - 体脂仪 -->
|
||||
<div class="day-card" data-day="tue" onclick="selectDay('tue')">
|
||||
<div class="day-card__name">周二</div>
|
||||
<div class="day-card__date">08-11</div>
|
||||
<div class="day-card__weight">62.7<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">体脂率 <em>20.2</em>%</div>
|
||||
<span class="day-card__badge day-card__badge--fat">体脂仪</span>
|
||||
</div>
|
||||
|
||||
<!-- 周三（今天）- 已记录（身高秤） -->
|
||||
<!-- [交互] 默认选中当天，下方显示记录详情 -->
|
||||
<!-- [状态] 已记录 - 身高秤 -->
|
||||
<div class="day-card day-card--today" data-day="wed" onclick="selectDay('wed')">
|
||||
<div class="day-card__name">周三</div>
|
||||
<div class="day-card__date">今天</div>
|
||||
<div class="day-card__weight">62.6<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">推荐<em>56-68</em>kg</div>
|
||||
<span class="day-card__badge day-card__badge--height">身高秤</span>
|
||||
</div>
|
||||
<!-- 周三（今天）- 已记录（身高秤） -->
|
||||
<!-- [交互] 默认选中当天，下方显示记录详情 -->
|
||||
<!-- [状态] 已记录 - 身高秤 -->
|
||||
<div class="day-card day-card--today" data-day="wed" onclick="selectDay('wed')">
|
||||
<div class="day-card__name">周三</div>
|
||||
<div class="day-card__date">今天</div>
|
||||
<div class="day-card__weight">62.6<span class="day-card__weight-unit">kg</span></div>
|
||||
<div class="day-card__recommend">体脂率 <em>20.0</em>%</div>
|
||||
<span class="day-card__badge day-card__badge--height">身高秤</span>
|
||||
</div>
|
||||
|
||||
<!-- 周四 - 未记录 -->
|
||||
<!-- [交互] 不可点击，灰色显示 -->
|
||||
@@ -800,53 +800,74 @@ function confirmSubmit() {
|
||||
showToast('记录成功！');
|
||||
}
|
||||
|
||||
/* 更新日期卡片显示 */
|
||||
function updateDayCard(day) {
|
||||
var card = document.querySelector('.day-card[data-day="' + day + '"]');
|
||||
if (!card) return;
|
||||
/* 更新日期卡片显示 */
|
||||
function updateDayCard(day) {
|
||||
var card = document.querySelector('.day-card[data-day="' + day + '"]');
|
||||
if (!card) return;
|
||||
|
||||
var rec = dayRecords[day] || {};
|
||||
var weightData = rec.weight;
|
||||
var rec = dayRecords[day] || {};
|
||||
var weightData = rec.weight;
|
||||
|
||||
card.classList.remove('day-card--empty');
|
||||
card.classList.remove('day-card--empty');
|
||||
|
||||
// 更新体重显示
|
||||
var weightEl = card.querySelector('.day-card__weight');
|
||||
if (!weightEl) {
|
||||
weightEl = document.createElement('div');
|
||||
weightEl.className = 'day-card__weight';
|
||||
var recEl = card.querySelector('.day-card__recommend, .day-card__empty-rec');
|
||||
if (recEl) {
|
||||
card.insertBefore(weightEl, recEl);
|
||||
} else {
|
||||
card.appendChild(weightEl);
|
||||
}
|
||||
}
|
||||
if (weightData) {
|
||||
weightEl.innerHTML = weightData.val + '<span class="day-card__weight-unit">kg</span>';
|
||||
} else {
|
||||
weightEl.innerHTML = '--<span class="day-card__weight-unit">kg</span>';
|
||||
}
|
||||
// 更新体重显示
|
||||
var weightEl = card.querySelector('.day-card__weight');
|
||||
if (!weightEl) {
|
||||
weightEl = document.createElement('div');
|
||||
weightEl.className = 'day-card__weight';
|
||||
var recEl = card.querySelector('.day-card__recommend, .day-card__empty-rec');
|
||||
if (recEl) {
|
||||
card.insertBefore(weightEl, recEl);
|
||||
} else {
|
||||
card.appendChild(weightEl);
|
||||
}
|
||||
}
|
||||
if (weightData) {
|
||||
weightEl.innerHTML = weightData.val + '<span class="day-card__weight-unit">kg</span>';
|
||||
} else {
|
||||
weightEl.innerHTML = '--<span class="day-card__weight-unit">kg</span>';
|
||||
}
|
||||
|
||||
// 移除空状态提示
|
||||
var emptyHint = card.querySelector('.day-card__empty-hint');
|
||||
if (emptyHint) emptyHint.remove();
|
||||
// 更新体脂率显示（替换推荐体重）
|
||||
var fatEl = card.querySelector('.day-card__recommend');
|
||||
var emptyRecEl = card.querySelector('.day-card__empty-rec');
|
||||
if (weightData) {
|
||||
// 有体重数据：显示体脂率
|
||||
if (!fatEl) {
|
||||
fatEl = document.createElement('div');
|
||||
fatEl.className = 'day-card__recommend';
|
||||
// 插入到 weight 和 badge 之间
|
||||
var badgeEl = card.querySelector('.day-card__badge');
|
||||
if (badgeEl) {
|
||||
card.insertBefore(fatEl, badgeEl);
|
||||
} else {
|
||||
card.appendChild(fatEl);
|
||||
}
|
||||
}
|
||||
if (emptyRecEl) emptyRecEl.remove();
|
||||
var fatVal = (rec.fatVal !== undefined) ? rec.fatVal.toFixed(1) : '--';
|
||||
fatEl.innerHTML = '体脂率 <em>' + fatVal + '</em>%';
|
||||
}
|
||||
|
||||
// 更新标签
|
||||
var oldBadge = card.querySelector('.day-card__badge');
|
||||
if (oldBadge) oldBadge.remove();
|
||||
// 移除空状态提示
|
||||
var emptyHint = card.querySelector('.day-card__empty-hint');
|
||||
if (emptyHint) emptyHint.remove();
|
||||
|
||||
if (weightData) {
|
||||
var badge = document.createElement('span');
|
||||
var typeMap = { height: 'day-card__badge--height', bluetooth: 'day-card__badge--bluetooth', fat: 'day-card__badge--fat', manual: 'day-card__badge--manual' };
|
||||
var labelMap = { height: '身高秤', bluetooth: '蓝牙', fat: '体脂仪', manual: '自记' };
|
||||
badge.className = 'day-card__badge ' + (typeMap[weightData.type] || 'day-card__badge--manual');
|
||||
badge.textContent = labelMap[weightData.type] || '自记';
|
||||
card.appendChild(badge);
|
||||
}
|
||||
// 更新标签
|
||||
var oldBadge = card.querySelector('.day-card__badge');
|
||||
if (oldBadge) oldBadge.remove();
|
||||
|
||||
updateSummaryBar();
|
||||
}
|
||||
if (weightData) {
|
||||
var badge = document.createElement('span');
|
||||
var typeMap = { height: 'day-card__badge--height', bluetooth: 'day-card__badge--bluetooth', fat: 'day-card__badge--fat', manual: 'day-card__badge--manual' };
|
||||
var labelMap = { height: '身高秤', bluetooth: '蓝牙', fat: '体脂仪', manual: '自记' };
|
||||
badge.className = 'day-card__badge ' + (typeMap[weightData.type] || 'day-card__badge--manual');
|
||||
badge.textContent = labelMap[weightData.type] || '自记';
|
||||
card.appendChild(badge);
|
||||
}
|
||||
|
||||
updateSummaryBar();
|
||||
}
|
||||
|
||||
/* 更新摘要栏 */
|
||||
function updateSummaryBar() {
|
||||
|
||||
Reference in New Issue
Block a user