diff --git a/employee-app/health-checkup/booking-date-selected.html b/employee-app/health-checkup/booking-date-selected.html
index fec606b..5e339ef 100644
--- a/employee-app/health-checkup/booking-date-selected.html
+++ b/employee-app/health-checkup/booking-date-selected.html
@@ -187,8 +187,8 @@
     <div class="bottom-actions">
       <!-- [交互] 取消预约 -->
       <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='booking-date.html'">取消预约</button>
-      <!-- [交互] 查看预约详情，跳转至 my-appointments-detail.html -->
-      <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-detail.html?done=0&total=9'">查看预约详情</button>
+      <!-- [交互] 查看预约详情，跳转至 my-appointments-all.html（常规·待体检） -->
+      <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-all.html?type=routine&status=pending'">查看预约详情</button>
     </div>
     <div class="toast" id="stepToast">当前已预约体检，无法重新选择，请先取消预约</div>
   </div>
diff --git a/employee-app/health-checkup/booking-hospital.html b/employee-app/health-checkup/booking-hospital.html
index b4dd382..3f26d09 100644
--- a/employee-app/health-checkup/booking-hospital.html
+++ b/employee-app/health-checkup/booking-hospital.html
@@ -110,26 +110,6 @@
     .stepper__item--done:hover .stepper__label { text-decoration: underline; text-underline-offset: 3px; }
     .stepper__line { width: 44px; height: 3px; background: #e8e8e8; margin: 0 8px; margin-bottom: 22px; border-radius: 2px; }
     .stepper__line--done { background: var(--primary); }
-    .fee-card {
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      border-radius: 18px;
-      padding: 16px 18px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-    }
-    .fee-card__label {
-      font-size: 13px;
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .fee-card__amount {
-      font-size: 26px;
-      font-weight: 800;
-      color: var(--primary-dark);
-    }
     .section-title {
       font-size: 16px;
       font-weight: 700;
@@ -179,6 +159,12 @@
       font-size: 12px;
       color: var(--text-muted);
     }
+    /* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
+    .hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+    .htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
+    .htag--routine { background: #e6f7ff; color: #1890ff; }
+    .htag--gastro { background: #f6ffed; color: #52c41a; }
+    .htag--occupation { background: #fff7e6; color: #fa8c16; }
     .radio-dot {
       width: 22px;
       height: 22px;
@@ -297,15 +283,16 @@
     .modal-field:last-of-type { border-bottom: none; }
     .modal-field__label { font-size: 14px; color: var(--text-muted); }
     .modal-field__value { font-size: 14px; color: var(--text-primary); font-weight: 600; }
-    .marriage-toggle {
+    /* 体检类型切换（已婚体检 / 未婚体检） */
+    .checkup-type-toggle {
       display: inline-flex; background: #f5f5f5; border-radius: 20px; overflow: hidden;
     }
-    .marriage-toggle__btn {
+    .checkup-type-toggle__btn {
       padding: 6px 16px; font-size: 13px; font-weight: 600; border: none;
       background: transparent; color: var(--text-muted); cursor: pointer;
       border-radius: 20px; transition: all 0.2s ease;
     }
-    .marriage-toggle__btn.active {
+    .checkup-type-toggle__btn.active {
       background: var(--primary); color: #fff;
     }
     .modal-confirm-btn {
@@ -348,32 +335,46 @@
           <div class="stepper__item stepper__item--future"><div class="stepper__dot">3</div><div class="stepper__label">预约日期</div></div>
         </div>
 
-        <!-- 费用展示 -->
-        <div class="fee-card">
-          <div class="fee-card__label">您本年度的体检费用(元)</div>
-          <div class="fee-card__amount">1500.00</div>
-        </div>
-
         <!-- 医院列表 -->
         <div class="section-title">选择医院</div>
         <div class="hospital-card active" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">宁夏宝石花医院</div><div class="hospital-card__addr">宁夏银川市</div></div>
+            <div>
+              <div class="hospital-card__name">宁夏宝石花医院</div>
+              <div class="hospital-card__addr">宁夏银川市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--routine">常规体检</span>
+                <span class="htag htag--occupation">职业体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
         <div class="hospital-card" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">CQ星龙园医院</div><div class="hospital-card__addr">陕西西安市</div></div>
+            <div>
+              <div class="hospital-card__name">CQ星龙园医院</div>
+              <div class="hospital-card__addr">陕西西安市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+                <span class="htag htag--occupation">职业体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
         <div class="hospital-card" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">西安CQ医院</div><div class="hospital-card__addr">陕西西安市</div></div>
+            <div>
+              <div class="hospital-card__name">西安CQ医院</div>
+              <div class="hospital-card__addr">陕西西安市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--routine">常规体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
@@ -407,10 +408,14 @@
           <span class="modal-field__value">女</span>
         </div>
         <div class="modal-field">
-          <span class="modal-field__label">婚姻状况</span>
-          <div class="marriage-toggle">
-            <button class="marriage-toggle__btn active" onclick="toggleMarriage(this)">已婚</button>
-            <button class="marriage-toggle__btn" onclick="toggleMarriage(this)">未婚</button>
+          <span class="modal-field__label">年龄</span>
+          <span class="modal-field__value">32</span>
+        </div>
+        <div class="modal-field">
+          <span class="modal-field__label">体检类型</span>
+          <div class="checkup-type-toggle">
+            <button class="checkup-type-toggle__btn active" onclick="toggleCheckupType(this)">已婚体检</button>
+            <button class="checkup-type-toggle__btn" onclick="toggleCheckupType(this)">未婚体检</button>
           </div>
         </div>
         <button class="modal-confirm-btn" onclick="closeModal()">确认</button>
@@ -433,8 +438,9 @@
     function closeModal() {
       document.getElementById('personModal').classList.add('hidden');
     }
-    function toggleMarriage(btn) {
-      document.querySelectorAll('.marriage-toggle__btn').forEach(b => b.classList.remove('active'));
+    // [交互] 切换体检类型（已婚体检 / 未婚体检）
+    function toggleCheckupType(btn) {
+      document.querySelectorAll('.checkup-type-toggle__btn').forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
     }
   </script>
diff --git a/employee-app/health-checkup/booking-project.html b/employee-app/health-checkup/booking-project.html
index 0697039..92ea057 100644
--- a/employee-app/health-checkup/booking-project.html
+++ b/employee-app/health-checkup/booking-project.html
@@ -149,6 +149,13 @@
     .project-card__badge--key {
       background: #fff1f0; color: #ff4d4f;
     }
+    .project-card__meta {
+      display: flex; align-items: center; gap: 6px;
+    }
+    .project-card__badge--ai {
+      background: linear-gradient(135deg, #7c5cfc 0%, #4f8ef7 100%);
+      color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(124, 92, 252, 0.3);
+    }
     .project-card__arrow {
       flex-shrink: 0; color: #d0d0d0; font-size: 16px; cursor: pointer;
       transition: color 0.2s;
@@ -213,6 +220,12 @@
     .confirm-modal__row:last-child { margin-bottom: 0; }
     .confirm-modal__value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
     .confirm-modal__value--highlight { color: var(--primary-dark); }
+    .confirm-modal__fee-group { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+    .confirm-modal__quota { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
+    /* 弱化行：选检/必检项目费用，金额后追加「≤ 单位额度」 */
+    .confirm-modal__row--weak { font-size: 13px; color: var(--text-muted); }
+    .confirm-modal__value--weak { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
+    .confirm-modal__cap { font-size: 11px; font-weight: 500; color: #bfbfbf; white-space: nowrap; }
     .confirm-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
     .confirm-modal__btn {
       height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
@@ -221,6 +234,16 @@
     .confirm-modal__btn--primary {
       background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%); color: #fff;
     }
+    /* AI 推荐理由弹窗 */
+    .ai-modal { padding: 24px 20px 18px; }
+    .ai-modal__project {
+      font-size: 15px; font-weight: 700; color: #7c5cfc; text-align: center; margin-bottom: 12px;
+    }
+    .ai-modal__reason {
+      background: #f7f9fb; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
+      font-size: 13px; color: var(--text-secondary); line-height: 1.7; text-align: left;
+    }
+    .ai-modal__close { width: 100%; }
   </style>
 </head>
 <body>
@@ -299,7 +322,24 @@
           </div>
           <div class="confirm-modal__row">
             <span>总体检费用</span>
-            <span class="confirm-modal__value confirm-modal__value--highlight" id="confirmFee">¥0.00</span>
+            <span class="confirm-modal__fee-group">
+              <span class="confirm-modal__value confirm-modal__value--highlight" id="confirmFee">¥0.00</span>
+              <span class="confirm-modal__quota" id="confirmQuota">体检额度 ¥0.00</span>
+            </span>
+          </div>
+          <div class="confirm-modal__row confirm-modal__row--weak">
+            <span>选检项目费用</span>
+            <span class="confirm-modal__fee-group">
+              <span class="confirm-modal__value confirm-modal__value--weak" id="confirmOptionalFee">¥0.00</span>
+              <span class="confirm-modal__cap" id="confirmOptionalCap">可用额度 ≤ ¥0.00</span>
+            </span>
+          </div>
+          <div class="confirm-modal__row confirm-modal__row--weak">
+            <span>必检项目费用</span>
+            <span class="confirm-modal__fee-group">
+              <span class="confirm-modal__value confirm-modal__value--weak" id="confirmRequiredFee">¥0.00</span>
+              <span class="confirm-modal__cap" id="confirmRequiredCap">可用额度 ≤ ¥0.00</span>
+            </span>
           </div>
         </div>
         <div class="confirm-modal__actions">
@@ -308,9 +348,21 @@
         </div>
       </div>
     </div>
+
+    <!-- [交互] 轻触 AI 推荐标签弹出推荐理由，点「知道了」关闭 -->
+    <div class="modal-overlay hidden" id="aiModal">
+      <div class="confirm-modal ai-modal">
+        <div class="confirm-modal__title">✨ 智能推荐</div>
+        <div class="ai-modal__project" id="aiModalProject"></div>
+        <div class="ai-modal__reason" id="aiModalReason"></div>
+        <button class="confirm-modal__btn confirm-modal__btn--primary ai-modal__close" onclick="closeAiReason()">知道了</button>
+      </div>
+    </div>
   </div>
   <script>
     const annualLimit = 1500;
+    // 单位设定的分项额度（原型模拟数据，用于「≤ 额度」展示）
+    const unitLimits = { required: 900, optional: 600 };
     const projects = [
       { id: 'general', name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
       { id: 'blood', name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
@@ -321,9 +373,9 @@
       { id: 'glucose', name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
       { id: 'ecg', name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
       { id: 'xray', name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
-      { id: 'ultrasound', name: '腹部B超', desc: '肝胆脾胰肾超声检查', price: 180, type: 'optional', level: 'key' },
-      { id: 'thyroid', name: '甲状腺彩超', desc: '甲状腺结构与结节筛查', price: 160, type: 'optional', level: 'key' },
-      { id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key' }
+      { id: 'ultrasound', name: '腹部B超', desc: '肝胆脾胰肾超声检查', price: 180, type: 'optional', level: 'key', aiRecommend: true, aiReason: '健康画像显示 BMI 26.8（超重），且近年血脂偏高，建议加做腹部超声，重点筛查脂肪肝与胆囊病变。预计费用 ¥180，在本年度体检额度内。' },
+      { id: 'thyroid', name: '甲状腺彩超', desc: '甲状腺结构与结节筛查', price: 160, type: 'optional', level: 'key', aiRecommend: true, aiReason: '既往史显示 2024 年体检发现甲状腺结节（TI-RADS 2 类），建议每年做一次超声随访复查，观察结节变化。预计费用 ¥160，在本年度体检额度内。' },
+      { id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key', aiRecommend: true, aiReason: '家族史提示直系亲属有肿瘤病史，结合您所处年龄段（45 岁以上），建议今年纳入基础肿瘤标志物筛查，做到早发现早干预。预计费用 ¥220，在本年度体检额度内。' }
     ];
 
     let activeTab = 'optional';
@@ -345,7 +397,9 @@
     }
 
     function getOptionalProjects() {
-      return projects.filter(project => project.type === 'optional');
+      // [交互] AI 推荐项目排在列表前面
+      const optional = projects.filter(project => project.type === 'optional');
+      return [...optional.filter(project => project.aiRecommend), ...optional.filter(project => !project.aiRecommend)];
     }
 
     function getRequiredFee() {
@@ -390,7 +444,10 @@
           <div class="project-card__side">
             <div class="project-card__tags">
               <span class="project-card__price">${formatPrice(project.price)}</span>
-              <span class="project-card__badge${project.level === 'key' ? ' project-card__badge--key' : ''}">${projectLevelText}</span>
+              <div class="project-card__meta">
+                <span class="project-card__badge${project.level === 'key' ? ' project-card__badge--key' : ''}">${projectLevelText}</span>
+                ${project.aiRecommend ? '<span class="project-card__badge project-card__badge--ai">✨ 推荐</span>' : ''}
+              </div>
             </div>
             <span class="project-card__arrow" data-detail="${project.id}">&#8250;</span>
           </div>
@@ -402,6 +459,15 @@
           window.location.href = `project-detail.html?id=${project.id}`;
         });
 
+        // [交互] 轻触 AI 推荐标签查看推荐理由（不触发卡片勾选）
+        const aiTag = card.querySelector('.project-card__badge--ai');
+        if (aiTag) {
+          aiTag.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openAiReason(project);
+          });
+        }
+
         if (!isReadonly) {
           card.addEventListener('click', () => {
             if (selectedOptionalIds.has(project.id)) {
@@ -434,9 +500,15 @@
       const requiredCount = getRequiredProjects().length;
       const optionalCount = selectedOptionalIds.size;
       const totalCount = requiredCount + optionalCount;
-      const totalFee = getRequiredFee() + getOptionalFee();
+      const requiredFee = getRequiredFee();
+      const optionalFee = getOptionalFee();
       document.getElementById('confirmCount').textContent = totalCount + ' 项';
-      document.getElementById('confirmFee').textContent = formatPrice(totalFee);
+      document.getElementById('confirmFee').textContent = formatPrice(requiredFee + optionalFee);
+      document.getElementById('confirmQuota').textContent = '体检额度 ' + formatPrice(annualLimit);
+      document.getElementById('confirmOptionalFee').textContent = formatPrice(optionalFee);
+      document.getElementById('confirmOptionalCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.optional);
+      document.getElementById('confirmRequiredFee').textContent = formatPrice(requiredFee);
+      document.getElementById('confirmRequiredCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.required);
       document.getElementById('submitModal').classList.remove('hidden');
     }
     function closeSubmitConfirm() {
@@ -445,6 +517,14 @@
     function goPrevStep() {
       window.location.href = 'booking-hospital.html';
     }
+    function openAiReason(project) {
+      document.getElementById('aiModalProject').textContent = project.name;
+      document.getElementById('aiModalReason').textContent = project.aiReason;
+      document.getElementById('aiModal').classList.remove('hidden');
+    }
+    function closeAiReason() {
+      document.getElementById('aiModal').classList.add('hidden');
+    }
     function confirmSubmit() {
       window.location.href = 'booking-project-selected.html';
     }
diff --git a/employee-app/health-checkup/booking-type.html b/employee-app/health-checkup/booking-type.html
index 5bb836b..6cb1c94 100644
--- a/employee-app/health-checkup/booking-type.html
+++ b/employee-app/health-checkup/booking-type.html
@@ -98,7 +98,7 @@
     .type-card {
       background: #fff;
       border-radius: 20px;
-      padding: 20px 18px;
+      padding: 18px 16px;
       margin-bottom: 14px;
       border: 2px solid transparent;
       box-shadow: var(--shadow);
@@ -111,9 +111,8 @@
     }
     .type-card__header {
       display: flex;
-      align-items: center;
-      gap: 14px;
-      margin-bottom: 10px;
+      align-items: flex-start;
+      gap: 12px;
     }
     .type-card__icon {
       width: 48px;
@@ -131,23 +130,68 @@
     .type-card__icon--gastro {
       background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
     }
+    .type-card__main { flex: 1; min-width: 0; }
     .type-card__name {
       font-size: 16px;
       font-weight: 700;
       color: var(--text-primary);
     }
-    .type-card__desc {
+    .type-card__badges {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 6px;
+      flex-wrap: wrap;
+    }
+    /* 状态徽标：体检状态三态 + 预约状态两态，演示卡片统一取「进行中 + 已开启预约」 */
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 20px;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 18px;
+    }
+    .status-badge--not-started { background: #f5f5f5; color: #8c8c8c; border: 1px solid #e0e0e0; }
+    .status-badge--ongoing { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
+    .status-badge--ended { background: #fff1f0; color: #f5222d; border: 1px solid #ffa39e; }
+    .status-badge--appt-open { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #87e8de; }
+    .status-badge--appt-pending { background: #f5f5f5; color: #8c8c8c; border: 1px solid #e0e0e0; }
+    .type-card__info {
+      margin-top: 12px;
+      border-top: 1px dashed #d9eded;
+      padding-top: 4px;
+    }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 0;
       font-size: 13px;
-      color: var(--text-secondary);
-      line-height: 1.7;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
     }
-    .type-card__radio {
-      position: absolute;
-      right: 18px;
-      top: 50%;
-      transform: translateY(-50%);
+    .info-row:last-child { border-bottom: none; }
+    .info-row__label { color: var(--text-muted); flex-shrink: 0; }
+    .info-row__value {
+      color: var(--text-primary);
+      font-weight: 600;
+      text-align: right;
+    }
+    /* 当年体检额度行：仅常规体检卡片展示，高亮强调 */
+    .info-row--quota {
+      background: linear-gradient(90deg, rgba(19, 194, 194, 0.12), rgba(19, 194, 194, 0));
+      border-radius: 10px;
+      padding: 8px 10px;
+      margin: 6px 0 2px;
+      border-bottom: none;
+    }
+    .info-row--quota .info-row__value {
+      color: var(--primary-dark);
+      font-size: 16px;
+      font-weight: 700;
     }
-    .type-card__header { position: relative; }
     .radio-dot {
       width: 22px;
       height: 22px;
@@ -158,7 +202,7 @@
       justify-content: center;
       transition: all 0.25s ease;
       flex-shrink: 0;
-      margin-left: auto;
+      align-self: center;
     }
     .type-card.active .radio-dot {
       border-color: var(--primary);
@@ -214,25 +258,83 @@
     <div class="scroll-content">
       <div class="page-body">
         <div class="section-title">选择体检类型</div>
-        <div class="section-desc">请根据需求选择适合的体检项目</div>
+        <div class="section-desc">以下为您所属单位本年度组织的体检计划，请确认后预约</div>
 
-        <!-- [交互] 点击切换选中态，单选 -->
+        <!-- [交互] 点击切换选中态，单选；卡片信息来自后台体检计划与人群划分规则 -->
         <div class="type-card active" onclick="selectType(this, 'routine')">
           <div class="type-card__header">
             <div class="type-card__icon type-card__icon--routine">🩺</div>
-            <div class="type-card__name">常规体检</div>
+            <div class="type-card__main">
+              <div class="type-card__name">常规体检</div>
+              <div class="type-card__badges">
+                <span class="status-badge status-badge--ongoing">进行中</span>
+                <span class="status-badge status-badge--appt-open">已开启预约</span>
+              </div>
+            </div>
             <div class="radio-dot"></div>
           </div>
-          <div class="type-card__desc">基础健康综合筛查，覆盖核心指标</div>
+          <div class="type-card__info">
+            <div class="info-row">
+              <span class="info-row__label">组织单位</span>
+              <span class="info-row__value">CQ能源第一采油厂</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">体检年度</span>
+              <span class="info-row__value">2026</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">体检时间</span>
+              <span class="info-row__value">2026-06-23 至 2026-08-31</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">预约时间</span>
+              <span class="info-row__value">2026-06-01 至 2026-08-20</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">所属人群</span>
+              <span class="info-row__value">35岁及以下-女</span>
+            </div>
+            <div class="info-row info-row--quota">
+              <span class="info-row__label">当年体检额度</span>
+              <span class="info-row__value">¥2,500.00</span>
+            </div>
+          </div>
         </div>
 
         <div class="type-card" onclick="selectType(this, 'gastro')">
           <div class="type-card__header">
             <div class="type-card__icon type-card__icon--gastro">🔬</div>
-            <div class="type-card__name">胃肠镜体检</div>
+            <div class="type-card__main">
+              <div class="type-card__name">胃肠镜体检</div>
+              <div class="type-card__badges">
+                <span class="status-badge status-badge--ongoing">进行中</span>
+                <span class="status-badge status-badge--appt-open">已开启预约</span>
+              </div>
+            </div>
             <div class="radio-dot"></div>
           </div>
-          <div class="type-card__desc">胃肠内镜专项检查，直观诊断消化道病变</div>
+          <div class="type-card__info">
+            <div class="info-row">
+              <span class="info-row__label">组织单位</span>
+              <span class="info-row__value">CQ能源第一采油厂</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">体检年度</span>
+              <span class="info-row__value">2026</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">体检时间</span>
+              <span class="info-row__value">2026-06-23 至 2026-08-31</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">预约时间</span>
+              <span class="info-row__value">2026-06-01 至 2026-08-20</span>
+            </div>
+            <div class="info-row">
+              <span class="info-row__label">所属人群</span>
+              <span class="info-row__value">35岁及以下-女</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/employee-app/health-checkup/gastro-hospital.html b/employee-app/health-checkup/gastro-hospital.html
index cd0b465..100c711 100644
--- a/employee-app/health-checkup/gastro-hospital.html
+++ b/employee-app/health-checkup/gastro-hospital.html
@@ -89,6 +89,12 @@
     }
     .hospital-card__name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
     .hospital-card__addr { font-size: 12px; color: var(--text-muted); }
+    /* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
+    .hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+    .htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
+    .htag--routine { background: #e6f7ff; color: #1890ff; }
+    .htag--gastro { background: #f6ffed; color: #52c41a; }
+    .htag--occupation { background: #fff7e6; color: #fa8c16; }
     .radio-dot {
       width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d9d9d9;
       display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0;
@@ -114,12 +120,6 @@
     .modal-field:last-of-type { border-bottom: none; }
     .modal-field__label { font-size: 14px; color: var(--text-muted); }
     .modal-field__value { font-size: 14px; color: var(--text-primary); font-weight: 600; }
-    .marriage-toggle { display: inline-flex; background: #f5f5f5; border-radius: 20px; overflow: hidden; }
-    .marriage-toggle__btn {
-      padding: 6px 16px; font-size: 13px; font-weight: 600; border: none;
-      background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 20px; transition: all 0.2s ease;
-    }
-    .marriage-toggle__btn.active { background: var(--primary); color: #fff; }
     .modal-confirm-btn {
       margin-top: 20px; width: 100%; height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600;
       border: none; cursor: pointer; background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
@@ -160,21 +160,41 @@
         <div class="hospital-card active" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">宁夏宝石花医院</div><div class="hospital-card__addr">宁夏银川市</div></div>
+            <div>
+              <div class="hospital-card__name">宁夏宝石花医院</div>
+              <div class="hospital-card__addr">宁夏银川市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--routine">常规体检</span>
+                <span class="htag htag--occupation">职业体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
         <div class="hospital-card" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">CQ星龙园医院</div><div class="hospital-card__addr">陕西西安市</div></div>
+            <div>
+              <div class="hospital-card__name">CQ星龙园医院</div>
+              <div class="hospital-card__addr">陕西西安市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+                <span class="htag htag--occupation">职业体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
         <div class="hospital-card" onclick="selectHospital(this)">
           <div class="hospital-card__info">
             <div class="hospital-card__icon">🏥</div>
-            <div><div class="hospital-card__name">西安CQ医院</div><div class="hospital-card__addr">陕西西安市</div></div>
+            <div>
+              <div class="hospital-card__name">西安CQ医院</div>
+              <div class="hospital-card__addr">陕西西安市</div>
+              <div class="hospital-card__tags">
+                <span class="htag htag--routine">常规体检</span>
+              </div>
+            </div>
           </div>
           <div class="radio-dot"></div>
         </div>
@@ -193,13 +213,7 @@
         <div class="modal-field"><span class="modal-field__label">单位</span><span class="modal-field__value">CQ能源第一采油厂</span></div>
         <div class="modal-field"><span class="modal-field__label">身份证号</span><span class="modal-field__value">6101021994********</span></div>
         <div class="modal-field"><span class="modal-field__label">性别</span><span class="modal-field__value">女</span></div>
-        <div class="modal-field">
-          <span class="modal-field__label">婚姻状况</span>
-          <div class="marriage-toggle">
-            <button class="marriage-toggle__btn active" onclick="toggleMarriage(this)">已婚</button>
-            <button class="marriage-toggle__btn" onclick="toggleMarriage(this)">未婚</button>
-          </div>
-        </div>
+        <div class="modal-field"><span class="modal-field__label">年龄</span><span class="modal-field__value">32</span></div>
         <button class="modal-confirm-btn" onclick="closeModal()">确认</button>
       </div>
     </div>
@@ -215,10 +229,6 @@
     }
     function openModal() { document.getElementById('personModal').classList.remove('hidden'); }
     function closeModal() { document.getElementById('personModal').classList.add('hidden'); }
-    function toggleMarriage(btn) {
-      document.querySelectorAll('.marriage-toggle__btn').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-    }
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/hospital-checkin.html b/employee-app/health-checkup/hospital-checkin.html
index fa4ef56..697050a 100644
--- a/employee-app/health-checkup/hospital-checkin.html
+++ b/employee-app/health-checkup/hospital-checkin.html
@@ -203,8 +203,8 @@
     </div>
 
     <div class="nav-bar">
-      <!-- [交互] 点击返回至: my-appointments.html -->
-      <a class="nav-back" href="my-appointments.html">‹</a>
+      <!-- [交互] 点击返回至: my-appointments-all.html -->
+      <a class="nav-back" href="my-appointments-all.html">‹</a>
       <span class="nav-title">到院体检</span>
     </div>
 
@@ -245,8 +245,8 @@
     </div>
 
     <div class="bottom-action">
-      <!-- [交互] 点击跳转至: my-appointments.html -->
-      <button class="bottom-action__btn" onclick="window.location.href='my-appointments.html'">返回我的预约</button>
+      <!-- [交互] 点击跳转至: my-appointments-all.html -->
+      <button class="bottom-action__btn" onclick="window.location.href='my-appointments-all.html'">返回我的预约</button>
     </div>
   </div>
 </body>
diff --git a/employee-app/health-checkup/index-inactive.html b/employee-app/health-checkup/index-inactive.html
index 1db5060..f27b76d 100644
--- a/employee-app/health-checkup/index-inactive.html
+++ b/employee-app/health-checkup/index-inactive.html
@@ -224,8 +224,8 @@
             <span class="feature-card__arrow">›</span>
           </div>
 
-          <!-- [交互] 点击跳转至: my-appointments.html -->
-          <div class="feature-card" onclick="location.href='my-appointments.html'">
+          <!-- [交互] 点击跳转至: my-appointments-all.html -->
+          <div class="feature-card" onclick="location.href='my-appointments-all.html'">
             <div class="feature-card__icon" style="background:#f6ffed; color:#52c41a;">
               <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
             </div>
diff --git a/employee-app/health-checkup/index.html b/employee-app/health-checkup/index.html
index 072d1f9..e18c328 100644
--- a/employee-app/health-checkup/index.html
+++ b/employee-app/health-checkup/index.html
@@ -64,6 +64,35 @@
       font-weight: 600;
       color: #1a1a1a;
     }
+    .nav-bell {
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 34px;
+      height: 34px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1a1a1a;
+      text-decoration: none;
+    }
+    .nav-bell__badge {
+      position: absolute;
+      top: 3px;
+      right: 0;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
+      border-radius: 8px;
+      background: #ff4d4f;
+      border: 2px solid #fff;
+      color: #fff;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 12px;
+      text-align: center;
+    }
     .scroll-content {
       flex: 1;
       overflow-y: auto;
@@ -71,62 +100,120 @@
     }
     .scroll-content::-webkit-scrollbar { display: none; }
     .page-body { padding: 16px; }
-    .hero-card {
-      background: linear-gradient(135deg, #ffffff 0%, #f3fffe 100%);
-      border: 1px solid #e3f6f4;
+    /* 年度体检计划 Banner 轮播：常规体检 / 胃肠镜体检 / 未开启计划占位，共三张滑动切换 */
+    .banner {
+      position: relative;
       border-radius: 20px;
-      padding: 18px 16px;
-      box-shadow: 0 6px 18px rgba(20, 180, 176, 0.08);
+      overflow: hidden;
+      box-shadow: 0 10px 24px rgba(19, 194, 194, 0.12);
     }
-    .hero-card__badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: 28px;
-      padding: 0 10px;
-      border-radius: 14px;
-      background: rgba(255, 170, 0, 0.12);
-      color: #d48806;
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 12px;
+    .banner__track {
+      display: flex;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
     }
-    .hero-card__title {
-      font-size: 22px;
-      line-height: 1.2;
-      font-weight: 700;
-      color: #1a1a1a;
-      margin-bottom: 10px;
-    }
-    .hero-card__desc {
-      font-size: 14px;
-      line-height: 1.7;
-      color: #666;
-    }
-    .fee-card {
-      margin-top: 14px;
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      border-radius: 18px;
+    .banner__track::-webkit-scrollbar { display: none; }
+    .banner-slide {
+      flex: 0 0 100%;
+      scroll-snap-align: center;
+      position: relative;
       padding: 16px;
       color: #fff;
-      box-shadow: 0 10px 24px rgba(19, 194, 194, 0.22);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
     }
-    .fee-card__label {
-      font-size: 13px;
-      opacity: 0.9;
-      margin-bottom: 8px;
-    }
-    .fee-card__value {
-      font-size: 30px;
-      font-weight: 800;
+    .banner-slide--routine { background: linear-gradient(135deg, #0eb5b0 0%, #35d6c5 100%); }
+    .banner-slide--gastro { background: linear-gradient(135deg, #12a5c4 0%, #3cc3dc 100%); }
+    .banner-slide--waiting { background: linear-gradient(135deg, #93a1b3 0%, #c3ccd8 100%); }
+    /* 右侧大号水印图标 + 圆环装饰，营造 banner 图氛围 */
+    .banner-slide__deco {
+      position: absolute;
+      right: -14px;
+      bottom: -24px;
+      font-size: 104px;
       line-height: 1;
-      letter-spacing: 0.5px;
+      opacity: 0.16;
+      transform: rotate(-8deg);
+      pointer-events: none;
     }
-    .fee-card__meta {
+    .banner-slide__ring {
+      position: absolute;
+      top: -52px;
+      right: 40px;
+      width: 128px;
+      height: 128px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.1);
+      pointer-events: none;
+    }
+    .banner-slide__title {
+      font-size: 16px;
+      font-weight: 800;
+      line-height: 1.4;
+      position: relative;
+      z-index: 1;
+    }
+    /* 圆圈进度：固定右下角，按状态推进（已选项目20%→已预约60%→体检中80%→已体检100%） */
+    .banner-progress {
+      position: absolute;
+      right: 14px;
+      bottom: 14px;
+      width: 52px;
+      height: 52px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .banner-progress svg { position: absolute; top: 0; left: 0; }
+    .banner-progress__text { position: relative; }
+    .banner-progress__text { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.15; text-align: center; }
+    .banner-slide__date {
       margin-top: 10px;
       font-size: 12px;
-      opacity: 0.86;
+      opacity: 0.92;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      position: relative;
+      z-index: 1;
     }
+    .banner-slide__fee { margin-top: 12px; position: relative; z-index: 1; }
+    .banner-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      height: 28px;
+      padding: 0 12px;
+      border-radius: 14px;
+      background: rgba(255, 255, 255, 0.2);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .banner-chip b { font-size: 15px; font-weight: 800; }
+    /* 第三张：未开启计划占位图，内容居中 */
+    .banner-slide--waiting { align-items: center; justify-content: center; text-align: center; }
+    .banner-waiting__icon { font-size: 36px; margin-bottom: 12px; opacity: 0.92; }
+    .banner-waiting__title { font-size: 15px; font-weight: 700; }
+    .banner-waiting__desc { margin-top: 6px; font-size: 12px; opacity: 0.85; line-height: 1.6; }
+    .banner__dots {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      margin-top: 10px;
+    }
+    .banner__dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 3px;
+      background: #d4dbe2;
+      cursor: pointer;
+      transition: all 0.25s ease;
+    }
+    .banner__dot.is-active { width: 18px; background: #13c2c2; }
     .section-title {
       font-size: 16px;
       font-weight: 700;
@@ -293,24 +380,67 @@
     <div class="nav-bar">
       <span class="nav-back" onclick="location.href='../home/index.html'">‹</span>
       <span class="nav-title">健康体检</span>
+      <!-- [交互] 点击铃铛跳转至: messages.html，红色角标为当前未读消息数 -->
+      <a class="nav-bell" href="messages.html">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+        <span class="nav-bell__badge">4</span>
+      </a>
     </div>
 
     <div class="scroll-content">
       <div class="page-body">
-        <div class="hero-card">
-          <div class="hero-card__badge">
-            <span>📋</span>
-            <span>年度体检计划</span>
-          </div>
-<!--          <div class="hero-card__title">健康体检</div>-->
-          <div class="hero-card__desc">本单位已开展体检计划，请尽快进行体检预约并合理安排时间前往医院进行体检。</div>
+        <!-- [交互] 左右滑动切换三张计划 Banner，点击圆点跳转到对应张 -->
+        <div class="banner">
+          <div class="banner__track" id="bannerTrack">
+            <!-- 第一张：常规体检 | [交互] 点击进入: reports.html（已体检，查看报告） -->
+            <div class="banner-slide banner-slide--routine" onclick="location.href='reports.html'">
+              <span class="banner-slide__ring"></span>
+              <span class="banner-slide__deco">🩺</span>
+              <div class="banner-slide__title">单位已制定2026年度常规体检计划</div>
+              <div class="banner-slide__date">🗓 体检日期：2026-09-01 至 2026-12-31</div>
+              <div class="banner-slide__fee">
+                <span class="banner-chip">💰 体检费用额度 <b>¥1500.00</b></span>
+              </div>
+              <!-- 圆圈进度（右下角）：已体检 = 满环 -->
+              <div class="banner-progress">
+                <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+                  <circle cx="26" cy="26" r="21" stroke="rgba(255,255,255,0.35)" stroke-width="4"/>
+                  <circle cx="26" cy="26" r="21" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-dasharray="131.9" stroke-dashoffset="0" transform="rotate(-90 26 26)"/>
+                </svg>
+                <span class="banner-progress__text">已体检</span>
+              </div>
+            </div>
 
-          <div class="fee-card">
-            <div class="fee-card__label">本年度体检费用(元)</div>
-            <div class="fee-card__value">1500.00</div>
-<!--            <div class="fee-card__meta">费用由单位统一配置，预约时自动关联体检项目。</div>-->
+            <!-- 第二张：胃肠镜体检 | [交互] 点击进入: my-appointments-all.html?type=gastro（已预约，查看预约） -->
+            <div class="banner-slide banner-slide--gastro" onclick="location.href='my-appointments-all.html?type=gastro'">
+              <span class="banner-slide__ring"></span>
+              <span class="banner-slide__deco">🔬</span>
+              <div class="banner-slide__title">单位已拟定2026年度胃肠镜体检计划</div>
+              <div class="banner-slide__date">🗓 体检日期：2026-10-08 至 2026-12-20</div>
+              <!-- 圆圈进度（右下角）：已预约 = 60%（已选项目20%→已预约60%→体检中80%→已体检100%），dashoffset = 131.9 × 40% ≈ 52.8 -->
+              <div class="banner-progress">
+                <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+                  <circle cx="26" cy="26" r="21" stroke="rgba(255,255,255,0.35)" stroke-width="4"/>
+                  <circle cx="26" cy="26" r="21" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-dasharray="131.9" stroke-dashoffset="52.8" transform="rotate(-90 26 26)"/>
+                </svg>
+                <span class="banner-progress__text">已预约</span>
+              </div>
+            </div>
+
+            <!-- 第三张：未开启年度体检计划占位图 -->
+            <div class="banner-slide banner-slide--waiting">
+              <span class="banner-slide__deco">🌱</span>
+              <div class="banner-waiting__icon">🌱</div>
+              <div class="banner-waiting__title">单位暂未开启下一年度体检计划</div>
+              <div class="banner-waiting__desc">2027 年度体检计划筹备中，开启后将第一时间通知您</div>
+            </div>
           </div>
         </div>
+        <div class="banner__dots" id="bannerDots">
+          <span class="banner__dot is-active"></span>
+          <span class="banner__dot"></span>
+          <span class="banner__dot"></span>
+        </div>
 
         <div class="section-title">体检服务</div>
         <div class="feature-list">
@@ -327,8 +457,8 @@
             <span class="feature-card__arrow">›</span>
           </div>
 
-          <!-- [交互] 点击跳转至: my-appointments.html -->
-          <div class="feature-card" onclick="location.href='my-appointments.html'">
+          <!-- [交互] 点击跳转至: my-appointments-all.html -->
+          <div class="feature-card" onclick="location.href='my-appointments-all.html'">
             <div class="feature-card__icon" style="background:#f6ffed; color:#52c41a;">
               <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
             </div>
@@ -354,7 +484,7 @@
           </div>
         </div>
 
-        <div class="section-title">辅助入口</div>
+        <div class="section-title">其他服务</div>
         <div class="quick-grid">
           <!-- [交互] 点击跳转至: process-guide.html -->
           <div class="quick-card" onclick="location.href='process-guide.html'">
@@ -388,5 +518,25 @@
       </div>
     </div>
   </div>
+
+  <script>
+    (function () {
+      var track = document.getElementById('bannerTrack');
+      var dots = document.querySelectorAll('#bannerDots .banner__dot');
+      // 滚动时按滚动位置判定当前展示张数，同步高亮圆点
+      track.addEventListener('scroll', function () {
+        var index = Math.round(track.scrollLeft / track.clientWidth);
+        dots.forEach(function (dot, i) {
+          dot.classList.toggle('is-active', i === index);
+        });
+      });
+      // 点击圆点平滑滚动到对应张
+      dots.forEach(function (dot, i) {
+        dot.addEventListener('click', function () {
+          track.scrollTo({ left: track.clientWidth * i, behavior: 'smooth' });
+        });
+      });
+    })();
+  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/employee-app/health-checkup/indicator-compare-detail.html b/employee-app/health-checkup/indicator-compare-detail.html
new file mode 100644
index 0000000..39f17f6
--- /dev/null
+++ b/employee-app/health-checkup/indicator-compare-detail.html
@@ -0,0 +1,540 @@
+<!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;
+      --danger: #ff4d4f;
+      --danger-light: #fff1f0;
+      --warning: #fa8c16;
+      --warning-light: #fff7e6;
+      --success: #52c41a;
+      --success-light: #f6ffed;
+      --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);
+    }
+    .nav-action {
+      margin-left: auto;
+      font-size: 12px;
+      color: var(--primary-dark);
+      font-weight: 600;
+      cursor: pointer;
+      text-decoration: none;
+    }
+    .scroll-content {
+      flex: 1;
+      overflow-y: auto;
+      background: linear-gradient(180deg, #ecfbfb 0%, #f7fbfb 220px, #f7fbfb 100%);
+    }
+    .scroll-content::-webkit-scrollbar { display: none; }
+    .page-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+
+    .card {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      box-shadow: var(--paper-shadow);
+      padding: 13px 14px;
+    }
+    .card__label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #0d7878;
+      margin-bottom: 10px;
+    }
+    .ai-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px 7px;
+      border-radius: 9px;
+      background: linear-gradient(135deg, #13c2c2, #36cfc9);
+      color: #fff;
+      font-size: 9px;
+      font-weight: 700;
+    }
+
+    /* 头卡 */
+    .hero__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    .hero__name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
+    .hero__cat {
+      font-size: 10px;
+      color: var(--primary-dark);
+      background: var(--primary-light);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 2px 7px;
+    }
+    .hero__badge { margin-left: auto; }
+    .hero__value-row { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 6px; }
+    .hero__value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--text-primary); }
+    .hero__value.is-abn { color: var(--danger); }
+    .hero__unit { font-size: 11px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
+    .hero__yoy { font-size: 11px; color: var(--text-secondary); padding-bottom: 3px; }
+    .hero__yoy b { font-size: 13px; }
+    .hero__ref { font-size: 11px; color: var(--text-muted); }
+    .hero__result { font-size: 14px; font-weight: 700; line-height: 1.6; }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 9px;
+      font-size: 10px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+    .badge--worse { background: var(--danger-light); color: var(--danger); }
+    .badge--new { background: var(--danger-light); color: var(--danger); }
+    .badge--keep { background: var(--warning-light); color: var(--warning); }
+    .badge--better { background: var(--success-light); color: var(--success); }
+    .badge--stable { background: #f5f5f5; color: var(--text-muted); }
+    .badge--ok { background: var(--success-light); color: var(--success); }
+    .badge--abn { background: var(--danger-light); color: var(--danger); }
+
+    /* 图表卡 */
+    .chart-box svg { display: block; width: 100%; height: auto; }
+    .chart-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-muted); margin-top: 4px; }
+    .chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
+
+    /* AI 解读 */
+    .ai-text { font-size: 12px; line-height: 1.85; color: #4d4d4d; }
+    .ai-note { font-size: 10px; color: #b5b5b5; margin-top: 8px; }
+
+    /* 历年明细表 */
+    .hist-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+    .hist-table th, .hist-table td {
+      border: 1px solid var(--border);
+      padding: 7px 5px;
+      font-size: 11px;
+      text-align: center;
+      line-height: 1.45;
+    }
+    .hist-table th { background: #f2ffff; color: #0e7f7f; font-weight: 700; }
+    .hist-table td.is-abn { color: var(--danger); font-weight: 700; }
+
+    /* 时间轴（文本模式） */
+    .tl { position: relative; padding-left: 16px; }
+    .tl::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #78e3e3, #d6f5f5); border-radius: 1px; }
+    .tl-item { position: relative; padding-bottom: 12px; }
+    .tl-item:last-child { padding-bottom: 0; }
+    .tl-item::before {
+      content: '';
+      position: absolute;
+      left: -16px;
+      top: 5px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #fff;
+      border: 3px solid var(--primary);
+    }
+    .tl-item.is-abn::before { border-color: var(--danger); }
+    .tl-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+    .tl-item__year { font-size: 14px; font-weight: 800; color: var(--text-primary); }
+    .tl-item__date { font-size: 10px; color: var(--text-muted); }
+    .tl-item__tag { margin-left: auto; }
+    /* 结论默认两行折叠，展开看全文 */
+    .tl-item__text {
+      font-size: 12px;
+      color: #4d4d4d;
+      line-height: 1.6;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .tl-item__text.is-abn { color: var(--danger); font-weight: 600; }
+    .tl-item.is-expanded .tl-item__text {
+      display: block;
+      -webkit-line-clamp: unset;
+      overflow: visible;
+    }
+    .tl-item__toggle {
+      border: none;
+      background: transparent;
+      padding: 0;
+      margin-top: 3px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--primary-dark);
+      cursor: pointer;
+    }
+    .tl-item__toggle[hidden] { display: none; }
+
+    /* 指标切换 chips */
+    .switch-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
+    .switch-row::-webkit-scrollbar { display: none; }
+    .switch-chip {
+      flex-shrink: 0;
+      padding: 6px 12px;
+      border-radius: 14px;
+      border: 1px solid var(--border);
+      background: #fff;
+      font-size: 11px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .switch-chip.is-active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; font-weight: 700; }
+
+    .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: 8px; }
+  </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='indicator-compare.html'">‹</span>
+      <span class="nav-title">指标分析</span>
+      <!-- [交互] 点击返回体检报告页 -->
+      <a class="nav-action" href="report-query.html">报告</a>
+    </div>
+    <div class="scroll-content">
+      <div class="page-body" id="pageBody"></div>
+    </div>
+  </div>
+
+  <script>
+    // ===== Mock 数据：与总览页/体检报告页口径一致（2021-2025 连续五年）=====
+    var YEARS = ['2021', '2022', '2023', '2024', '2025'];
+    var DATES = ['2021-03-18', '2022-03-25', '2023-03-16', '2024-03-20', '2025-03-21'];
+    var CATS = [
+      { name: '体格指标', keys: ['bmi', 'sbp', 'dbp'] },
+      { name: '血脂', keys: ['tc', 'tg', 'hdl', 'ldl'] },
+      { name: '血糖', keys: ['glu', 'hba1c'] },
+      { name: '肾功能', keys: ['ua', 'crea', 'urea'] },
+      { name: '肝功能', keys: ['alt', 'ast'] },
+      { name: '血常规', keys: ['hgb', 'wbc', 'plt'] }
+    ];
+    var NUM = {
+      bmi:  { name: 'BMI', unit: 'kg/m²', ref: [18.5, 23.9], v: [23.1, 23.8, 24.5, 25.2, 25.8], badge: ['恶化趋势', 'worse'],
+        ai: 'BMI 五年间从 23.1 持续攀升至 25.8，自 2023 年起越过正常上限进入超重区间，升幅逐年稳定累积，与血脂三项及尿酸的变化高度同步。体重是本轮代谢指标恶化的核心可控因素，建议设定 6 个月减重 5%-8% 的目标并每月自测跟踪。' },
+      sbp:  { name: '收缩压', unit: 'mmHg', ref: [90, 139], v: [112, 115, 118, 116, 120], badge: ['平稳', 'stable'],
+        ai: '收缩压五年均处于正常范围（112-120 mmHg），未见上行趋势，血管弹性指标良好。保持低盐饮食与规律有氧运动即可，继续年度监测。' },
+      dbp:  { name: '舒张压', unit: 'mmHg', ref: [60, 89], v: [72, 74, 73, 76, 78], badge: ['平稳', 'stable'],
+        ai: '舒张压五年稳定在正常区间，近年有轻微波动但幅度很小，无临床关注必要。' },
+      tc:   { name: '总胆固醇 TC', unit: 'mmol/L', ref: [3.1, 5.7], v: [4.62, 4.95, 5.36, 5.78, 6.10], badge: ['恶化趋势', 'worse'],
+        ai: '总胆固醇连续三年上升（4.62 → 6.10 mmol/L），近两年连续超过参考上限且年度增幅未见收敛，属明确的恶化趋势。建议严格限制高胆固醇饮食并于 3 个月后复查；若持续上行，请医生评估是否需要药物干预。' },
+      tg:   { name: '甘油三酯 TG', unit: 'mmol/L', ref: [0.4, 1.7], v: [1.20, 1.35, 1.55, 1.72, 2.08], badge: ['恶化趋势', 'worse'],
+        ai: '甘油三酯四年连升并连续两年越限，今年达 2.08 mmol/L。该指标对饮食与酒精最敏感，也最能反映近期生活方式，是代谢谱恶化的先行信号。控制主食精制糖与油脂摄入后通常 4-8 周即可见回落，建议 3 个月复查验证。' },
+      hdl:  { name: '高密度脂蛋白 HDL-C', unit: 'mmol/L', ref: [1.04, 1.55], v: [1.35, 1.30, 1.26, 1.22, 1.18], badge: ['平稳', 'stable'],
+        ai: 'HDL-C（俗称"好胆固醇"）五年间从 1.35 缓慢降至 1.18，仍在正常范围内但方向不理想。它与坏胆固醇同步恶化会放大心血管风险，增加每周 150 分钟以上中等强度有氧运动是提升 HDL 最有效的非药物手段。' },
+      ldl:  { name: '低密度脂蛋白 LDL-C', unit: 'mmol/L', ref: [0, 3.4], v: [2.80, 3.00, 3.10, 3.35, 3.92], badge: ['新增异常', 'new'],
+        ai: 'LDL-C 前四年处于正常偏高区间，今年首次越限（3.35 → 3.92，同比 +0.57），升幅为五年内最大。作为动脉粥样硬化的头号致病因子，它是本次体检最重要的新增风险信号，需与总胆固醇变化合并解读，建议纳入 3 个月复查项目。' },
+      glu:  { name: '空腹血糖 GLU', unit: 'mmol/L', ref: [3.9, 6.1], v: [5.0, 5.1, 4.9, 5.3, 5.2], badge: ['平稳', 'stable'],
+        ai: '空腹血糖五年均稳定在正常范围，暂无糖代谢异常信号。但结合 BMI 与血脂的恶化趋势，血糖仍是未来 3-5 年需要重点跟踪的保护性指标。' },
+      hba1c:{ name: '糖化血红蛋白 HbA1c', unit: '%', ref: [4.0, 6.0], v: [5.2, 5.3, 5.1, 5.4, 5.6], badge: ['平稳', 'stable'],
+        ai: '糖化血红蛋白五年正常（5.1-5.6%），反映近 2-3 个月平均血糖水平良好，但逐年小幅抬升，建议每年度关注其走势是否逼近 6.0% 上限。' },
+      ua:   { name: '尿酸 UA', unit: 'μmol/L', ref: [155, 357], v: [330, 362, 371, 380, 389], badge: ['连续异常', 'keep'],
+        ai: '尿酸已连续四年高于参考上限（362 → 389 μmol/L），缓慢爬升。高嘌呤饮食、果糖饮料与饮水不足是主要诱因，持续偏高会带来痛风发作与肾脏负担双重风险。建议每日饮水 2000mL 以上，少吃内脏海鲜浓汤，复查时同肾功一并检测。' },
+      crea: { name: '肌酐 CREA', unit: 'μmol/L', ref: [41, 73], v: [66, 68, 69, 70, 71], badge: ['平稳', 'stable'],
+        ai: '肌酐五年均正常，但逐年缓升且已接近上限（71/73）。目前无肾功能损害证据，建议连同尿酸一起动态观察，控制蛋白类补剂与高尿酸负荷。' },
+      urea: { name: '尿素 UREA', unit: 'mmol/L', ref: [2.8, 7.2], v: [4.5, 5.0, 4.6, 5.2, 4.8], badge: ['平稳', 'stable'],
+        ai: '尿素五年稳定在正常范围内波动，无趋势性异常，与肌酐共同提示肾排泄功能良好。' },
+      alt:  { name: '丙氨酸氨基转移酶 ALT', unit: 'U/L', ref: [7, 40], v: [28, 31, 35, 42, 24.6], badge: ['转好', 'better'],
+        ai: 'ALT 去年轻度超出上限（42 U/L）后，今年回落至 24.6 U/L 回归正常，降幅明显。既往波动可能与脂肪肝活动或体检前熬夜、饮酒等短期因素相关，本次转好属积极信号，建议保持当前生活方式并年度复查。' },
+      ast:  { name: '天门冬氨酸氨基转移酶 AST', unit: 'U/L', ref: [13, 35], v: [24, 26, 28, 38, 22.4], badge: ['转好', 'better'],
+        ai: 'AST 去年越限（38 U/L）后今年恢复正常（22.4），与 ALT 的改善同步，进一步支持肝细胞处于修复状态。轻度脂肪肝仍存在，肝功能与彩超建议继续同年度跟踪。' },
+      hgb:  { name: '血红蛋白 HGB', unit: 'g/L', ref: [115, 150], v: [140, 138, 141, 139, 136], badge: ['平稳', 'stable'],
+        ai: '血红蛋白五年稳定在正常区间，虽处于正常中位偏下但无任何贫血倾向，铁营养状况良好。' },
+      wbc:  { name: '白细胞计数 WBC', unit: '10^9/L', ref: [3.5, 9.5], v: [6.2, 6.5, 6.1, 6.9, 6.8], badge: ['平稳', 'stable'],
+        ai: '白细胞计数五年正常，无慢性感染或免疫功能低下的迹象。' },
+      plt:  { name: '血小板计数 PLT', unit: '10^9/L', ref: [125, 350], v: [220, 235, 240, 252, 248], badge: ['平稳', 'stable'],
+        ai: '血小板五年正常范围内轻微波动，凝血基础状态稳定，无异常信号。' }
+    };
+    // 定性/描述型项目：按年存结果文本 + 状态（n 正常 / a 异常）
+    var QUAL = {
+      'us-abdomen': { name: '肝胆脾胰双肾彩超', txt: ['肝胆脾胰双肾未见明显异常', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减，肝内血管纹理显示欠清，胆囊脾胰双肾未见明显异常，建议控制体重并定期复查', '肝脏体积稍增大，肝实质回声近场增强、远场轻度衰减，肝内血管纹理显示欠清，未见明显占位性病变，肝内外胆管未见扩张，提示轻度脂肪肝'], st: ['n', 'a', 'a', 'a', 'a'],
+        ai: '轻度脂肪肝自 2022 年首次检出后已连续四年存在，但程度始终维持在轻度、未见向中重度进展。该表现与 BMI 五年持续上行同步，减重仍是唯一被证实有效的逆转手段。建议每年彩超随访，若合并转氨酶反复升高需消化科就诊。' },
+      'ct-cervical': { name: '颈椎 CT', txt: ['颈椎序列整齐，生理曲度存在，未见骨质异常', '颈椎曲度自然，椎体及附件未见骨质异常', '颈椎生理曲度存在，椎体边缘未见明显骨质增生', '颈椎生理曲度变直，C3-C6 椎体边缘轻度骨质增生，椎间隙未见明显狭窄，项韧带未见钙化，建议减少低头时间，定期复查颈椎正侧位片', '颈椎生理曲度变直，部分椎体前缘轻度唇样增生，C4/5 椎间盘未见明显突出，椎间孔无狭窄，建议每日颈肩拉伸训练，半年后复查'], st: ['n', 'n', 'n', 'a', 'a'],
+        ai: '颈椎生理曲度变直于去年首次出现并持续两年，属不可逆的结构性改变早期信号，与长期伏案、低头用机姿势直接相关。目前未见骨质增生与椎间病变，重点在于控制进展：建议每日颈肩拉伸、屏幕垫高、每 45 分钟起身活动。' },
+      ecg: { name: '心电图', txt: ['窦性心律，心率 76 次/分，各导联 ST-T 未见异常', '窦性心律，心率 74 次/分，未见明显异常', '窦性心律，偶发室性期前收缩（约 2 次/分），各导联未见 ST-T 动态演变，建议必要时行动态心电图进一步复查，日常注意减少咖啡因摄入', '窦性心律，未见早搏，各导联未见明显异常', '窦性心律，心率 76 次/分，未见明显异常'], st: ['n', 'n', 'a', 'n', 'n'],
+        ai: '五年心电图四年正常，2023 年曾提示偶发早搏，其后连续两年复查均未见复发，属一过性改变（多与熬夜、咖啡因、检测前状态相关），无特异性处理必要。若出现心悸、胸闷等症状可随时复查。' },
+      'us-thyroid': { name: '甲状腺彩超', txt: ['甲状腺双叶大小形态正常，回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见结节，CDFI 未见异常血流', '甲状腺双叶回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见异常'], st: ['n', 'n', 'n', 'n', 'n'],
+        ai: '甲状腺彩超五年未见异常回声与结节，结合甲状腺功能五项持续正常，甲状腺健康状况良好，维持常规体检频率即可。' },
+      'dr-chest': { name: '胸部 DR', txt: ['胸廓对称，两肺纹理清晰，心影大小正常', '两肺纹理清晰，肺内未见实质性病变，心膈未见异常', '心肺膈未见明显异常', '心肺膈未见明显异常', '胸廓对称，两肺纹理清晰、走行自然，肺内未见明显实质性病变，心影大小形态正常，双侧膈面光滑，肋膈角锐利，建议每年常规复查'], st: ['n', 'n', 'n', 'n', 'n'],
+        ai: '胸部影像五年均未见明显异常，心肺形态与横膈无异常征象。' },
+      urine: { name: '尿常规', txt: ['尿蛋白、尿糖、潜血均阴性，尿比重正常', '各主要项目均为阴性，未见异常', '尿蛋白阴性、尿糖阴性，酸碱度及比重在正常范围', '各项指标均阴性，镜检未见异常', '尿蛋白、尿糖、酮体、潜血、白细胞均阴性，尿比重及酸碱度在正常范围，镜检未见红细胞、白细胞及管型，理化与镜检均未见异常'], st: ['n', 'n', 'n', 'n', 'n'],
+        ai: '尿常规五年主要指标均为阴性，无蛋白尿、血尿、糖尿等肾损伤与代谢异常信号。尿酸虽偏高但尚未影响尿液指标，继续年度监测即可。' }
+    };
+
+    function dec(v) { return v >= 100 ? 0 : (v >= 10 ? 1 : 2); }
+    function fmtV(v) { return v >= 100 ? String(Math.round(v)) : String(v); }
+    function statusOf(it, i) {
+      var v = it.v[i];
+      if (v < it.ref[0]) return { t: '偏低 ↓', abn: true };
+      if (v > it.ref[1]) return { t: '偏高 ↑', abn: true };
+      return { t: '正常', abn: false };
+    }
+    // 逐年关系标签：基线 / 新增异常 / 持续异常 / 转好 / 平稳
+    function relTag(curAbn, prevAbn) {
+      if (prevAbn === null) return ['基线年', 'stable'];
+      if (curAbn && prevAbn) return ['持续异常', 'keep'];
+      if (curAbn) return ['新增异常', 'new'];
+      if (prevAbn) return ['转好恢复', 'better'];
+      return ['平稳', 'stable'];
+    }
+
+    // ===== 五年趋势折线图（纯内联 SVG，含参考范围色带）=====
+    function chartSvg(it) {
+      var W = 352, H = 216, L = 38, R = 8, T = 16, B = 28;
+      var lo = it.ref[0], hi = it.ref[1];
+      var min = Math.min.apply(null, it.v.concat([lo]));
+      var max = Math.max.apply(null, it.v.concat([hi]));
+      var span = (max - min) || 1;
+      min -= span * 0.10; max += span * 0.14; span = max - min;
+      var pw = W - L - R, ph = H - T - B, d = dec(max);
+      function X(i) { return L + i * pw / 4; }
+      function Y(v) { return T + (max - v) / span * ph; }
+      var s = '<svg viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg">';
+      // 参考范围色带 + 虚线边界
+      var bandTop = Math.max(Y(hi), T), bandBot = Math.min(Y(lo), T + ph);
+      if (bandBot > bandTop) {
+        s += '<rect x="' + L + '" y="' + bandTop.toFixed(1) + '" width="' + pw + '" height="' + (bandBot - bandTop).toFixed(1) + '" fill="rgba(82,196,26,0.10)"/>';
+        if (Y(hi) >= T && Y(hi) <= T + ph) s += '<line x1="' + L + '" y1="' + Y(hi).toFixed(1) + '" x2="' + (W - R) + '" y2="' + Y(hi).toFixed(1) + '" stroke="#52c41a" stroke-width="1" stroke-dasharray="4 3" opacity="0.55"/>';
+        if (Y(lo) >= T && Y(lo) <= T + ph) s += '<line x1="' + L + '" y1="' + Y(lo).toFixed(1) + '" x2="' + (W - R) + '" y2="' + Y(lo).toFixed(1) + '" stroke="#52c41a" stroke-width="1" stroke-dasharray="4 3" opacity="0.55"/>';
+        s += '<text x="' + (L + 4) + '" y="' + (bandTop + 11).toFixed(1) + '" font-size="9" fill="#52c41a" opacity="0.85">正常参考范围 ' + it.ref[0] + '-' + it.ref[1] + '</text>';
+      }
+      // Y 轴刻度与网格
+      for (var g = 0; g <= 4; g++) {
+        var gv = min + span * g / 4, gy = Y(gv);
+        s += '<line x1="' + L + '" y1="' + gy.toFixed(1) + '" x2="' + (W - R) + '" y2="' + gy.toFixed(1) + '" stroke="#eef6f6" stroke-width="1"/>';
+        s += '<text x="' + (L - 4) + '" y="' + (gy + 3).toFixed(1) + '" font-size="9" fill="#999" text-anchor="end">' + gv.toFixed(d) + '</text>';
+      }
+      // 数据系列
+      var dotColor = function (v) { return (v < lo || v > hi) ? '#ff4d4f' : '#13c2c2'; };
+      var pts = it.v.map(function (v, i) { return X(i).toFixed(1) + ',' + Y(v).toFixed(1); }).join(' ');
+      s += '<polyline points="' + pts + '" fill="none" stroke="#13c2c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
+      it.v.forEach(function (v, i) {
+        s += '<circle cx="' + X(i).toFixed(1) + '" cy="' + Y(v).toFixed(1) + '" r="4.5" fill="' + dotColor(v) + '" stroke="#fff" stroke-width="1.6"/>';
+        s += '<text x="' + X(i).toFixed(1) + '" y="' + (Y(v) - 9).toFixed(1) + '" font-size="9.5" font-weight="700" fill="' + dotColor(v) + '" text-anchor="middle">' + fmtV(v) + '</text>';
+      });
+      // X 轴年份
+      YEARS.forEach(function (y, i) {
+        s += '<text x="' + X(i).toFixed(1) + '" y="' + (H - 8) + '" font-size="10" fill="' + (i === 4 ? '#0e7f7f' : '#8c8c8c') + '" font-weight="' + (i === 4 ? '700' : '400') + '" text-anchor="middle">' + y + '</text>';
+      });
+      s += '</svg>';
+      return s;
+    }
+
+    // ===== 页面渲染 =====
+    var item = new URLSearchParams(location.search).get('item') || 'bmi';
+    var isNum = !!NUM[item];
+    if (!isNum && !QUAL[item]) item = 'bmi';
+
+    function render() {
+      document.getElementById('pageBody').innerHTML = isNum ? renderNum() : renderText();
+      if (!isNum) initClamp();
+    }
+    // [交互] 展开/收起历年结论全文
+    function toggleTl(btn) {
+      var item = btn.parentNode;
+      var expanded = item.classList.toggle('is-expanded');
+      btn.textContent = expanded ? '收起' : '展开';
+    }
+    // 结论超过两行才显示展开按钮
+    function initClamp() {
+      document.querySelectorAll('.tl-item').forEach(function (it) {
+        var txt = it.querySelector('.tl-item__text');
+        if (txt.scrollHeight > txt.clientHeight + 1) it.querySelector('.tl-item__toggle').hidden = false;
+      });
+    }
+    // [交互] 底部 chips 切换同类目指标（同页改参数重渲染）
+    function switchTo(key) { location.href = 'indicator-compare-detail.html?item=' + encodeURIComponent(key); }
+
+    function heroCommon(title, badgeHtml, catName) {
+      return '<div class="card"><div class="hero__top"><span class="hero__name">' + title + '</span>'
+        + '<span class="hero__cat">' + catName + '</span>'
+        + '<span class="hero__badge">' + badgeHtml + '</span></div>';
+    }
+
+    function chipsHtml(keys) {
+      return '<div class="card"><div class="card__label">切换查看同类目指标</div><div class="switch-row">'
+        + keys.map(function (k) {
+            var name = (NUM[k] || QUAL[k]).name;
+            return '<button class="switch-chip' + (k === item ? ' is-active' : '') + '" type="button" onclick="switchTo(\'' + k + '\')">' + name + '</button>';
+          }).join('')
+        + '</div></div>';
+    }
+
+    function renderNum() {
+      var it = NUM[item];
+      var cur = statusOf(it, 4);
+      var badge = '<span class="badge badge--' + it.badge[1] + '">' + it.badge[0] + '</span>';
+      var delta = it.v[4] - it.v[3];
+      var dd = dec(Math.max(Math.abs(delta), it.v[4]));
+      var deltaStr = (delta > 0 ? '+' : '') + delta.toFixed(dd);
+      var html = heroCommon(it.name, badge, catNameOf(item))
+        + '<div class="hero__value-row"><div class="hero__value' + (cur.abn ? ' is-abn' : '') + '">' + fmtV(it.v[4]) + (cur.abn ? (it.v[4] > it.ref[1] ? ' ↑' : ' ↓') : '') + '<span class="hero__unit">' + it.unit + '</span></div>'
+        + '<div class="hero__yoy">较2024 <b style="color:' + (Math.abs(delta) < 0.01 ? '#8c8c8c' : (delta > 0 ? '#fa8c16' : '#52c41a')) + '">' + deltaStr + '</b></div></div>'
+        + '<div class="hero__ref">参考范围 ' + it.ref[0] + ' - ' + it.ref[1] + ' ' + it.unit + ' · ' + YEARS[4] + '年度体检</div></div>';
+
+      html += '<div class="card"><div class="card__label">五年趋势图</div>'
+        + '<div class="chart-box">' + chartSvg(it) + '</div>'
+        + '<div class="chart-legend"><span><i style="background:rgba(82,196,26,0.25)"></i>正常参考范围</span>'
+        + '<span><i style="background:#13c2c2"></i>正常值</span><span><i style="background:#ff4d4f"></i>异常值</span></div></div>';
+
+      html += '<div class="card"><div class="card__label"><span class="ai-badge">AI 趋势解读</span></div>'
+        + '<div class="ai-text">' + it.ai + '</div>'
+        + '<div class="ai-note">内容由 AI 生成，仅供参考，不构成诊断依据</div></div>';
+
+      var rows = '';
+      for (var i = 4; i >= 0; i--) {
+        var st = statusOf(it, i);
+        var tag = relTag(st.abn, i === 0 ? null : statusOf(it, i - 1).abn);
+        rows += '<tr><td>' + YEARS[i] + '</td>'
+          + '<td class="' + (st.abn ? 'is-abn' : '') + '">' + fmtV(it.v[i]) + '</td><td>' + it.unit + '</td>'
+          + '<td>' + it.ref[0] + '-' + it.ref[1] + '</td>'
+          + '<td><span class="badge badge--' + (st.abn ? 'abn' : 'ok') + '">' + st.t + '</span></td>'
+          + '<td><span class="badge badge--' + tag[1] + '">' + tag[0] + '</span></td></tr>';
+      }
+      html += '<div class="card"><div class="card__label">历年明细</div>'
+        + '<table class="hist-table"><thead><tr><th>年份</th><th>结果</th><th>单位</th><th>参考</th><th>状态</th><th>对比</th></tr></thead><tbody>' + rows + '</tbody></table></div>';
+
+      var cat = CATS.filter(function (c) { return c.keys.indexOf(item) >= 0; })[0];
+      html += chipsHtml(cat ? cat.keys : Object.keys(NUM));
+      html += backBtn();
+      return html;
+    }
+
+    function renderText() {
+      var q = QUAL[item];
+      var curAbn = q.st[4] === 'a';
+      var badge = '<span class="badge badge--' + (curAbn ? 'abn' : 'ok') + '">' + (curAbn ? '存在异常' : '正常') + '</span>';
+      var html = heroCommon(q.name, badge, '检查项目')
+        + '<div class="hero__result" style="' + (curAbn ? 'color:var(--danger)' : '') + '">' + q.txt[4] + '</div>'
+        + '<div class="hero__ref">' + YEARS[4] + '年度体检</div></div>';
+
+      html += '<div class="card"><div class="card__label">历年结果对比</div><div class="tl">';
+      for (var i = 4; i >= 0; i--) {
+        var abn = q.st[i] === 'a';
+        html += '<div class="tl-item' + (abn ? ' is-abn' : '') + '">'
+          + '<div class="tl-item__head"><span class="tl-item__year">' + YEARS[i] + '</span>'
+          + '<span class="tl-item__date">' + DATES[i] + '</span>'
+          + '<span class="tl-item__tag badge badge--' + (abn ? 'abn' : 'ok') + '">' + (abn ? '存在异常' : '正常') + '</span></div>'
+          + '<div class="tl-item__text' + (abn ? ' is-abn' : '') + '">' + q.txt[i] + '</div>'
+          + '<button class="tl-item__toggle" type="button" hidden onclick="toggleTl(this)">展开</button></div>';
+      }
+      html += '</div></div>';
+
+      html += '<div class="card"><div class="card__label"><span class="ai-badge">AI 解读</span></div>'
+        + '<div class="ai-text">' + q.ai + '</div>'
+        + '<div class="ai-note">内容由 AI 生成，仅供参考，不构成诊断依据</div></div>';
+
+      html += chipsHtml(Object.keys(QUAL));
+      html += backBtn();
+      return html;
+    }
+
+    function catNameOf(key) {
+      var cat = CATS.filter(function (c) { return c.keys.indexOf(key) >= 0; })[0];
+      return cat ? cat.name : '';
+    }
+    function backBtn() {
+      return '<div><button class="back-btn" type="button" onclick="location.href=\'report-query.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 class="bottom-spacer"></div>';
+    }
+
+    render();
+  </script>
+</body>
+</html>
diff --git a/employee-app/health-checkup/indicator-compare.html b/employee-app/health-checkup/indicator-compare.html
new file mode 100644
index 0000000..b1f1298
--- /dev/null
+++ b/employee-app/health-checkup/indicator-compare.html
@@ -0,0 +1,509 @@
+<!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;
+      --danger: #ff4d4f;
+      --danger-light: #fff1f0;
+      --warning: #fa8c16;
+      --warning-light: #fff7e6;
+      --success: #52c41a;
+      --success-light: #f6ffed;
+      --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 200px, #f7fbfb 100%);
+    }
+    .scroll-content::-webkit-scrollbar { display: none; }
+    .page-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+
+    /* AI 纵向总结卡 */
+    .hero-card {
+      border-radius: 18px;
+      border: 1px solid var(--border);
+      background: linear-gradient(180deg, #fdffff 0%, #f4fdfd 100%);
+      box-shadow: var(--paper-shadow);
+      overflow: hidden;
+    }
+    .hero-card__head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 14px 0;
+    }
+    .hero-card__ai-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 8px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #13c2c2, #36cfc9);
+      color: #fff;
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .hero-card__title { font-size: 14px; font-weight: 700; color: #0d7878; }
+    .hero-card__range { margin-left: auto; font-size: 10px; color: var(--text-muted); }
+    .hero-stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+      padding: 10px 14px 2px;
+    }
+    .hero-stat {
+      background: var(--primary-light);
+      border-radius: 12px;
+      padding: 8px 4px;
+      text-align: center;
+    }
+    .hero-stat__value { font-size: 17px; font-weight: 800; color: var(--primary-dark); line-height: 1.2; }
+    .hero-stat__label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
+    .hero-stat--danger .hero-stat__value { color: var(--danger); }
+    .hero-stat--warn .hero-stat__value { color: var(--warning); }
+    .hero-stat--success .hero-stat__value { color: var(--success); }
+    .hero-card__text {
+      padding: 10px 14px 12px;
+      font-size: 12px;
+      line-height: 1.8;
+      color: #4d4d4d;
+    }
+    .hero-card__ai-note { padding: 0 14px 10px; font-size: 10px; color: #b5b5b5; }
+
+    /* 筛选 chips */
+    .filter-row {
+      display: flex;
+      gap: 8px;
+      overflow-x: auto;
+    }
+    .filter-row::-webkit-scrollbar { display: none; }
+    .filter-chip {
+      flex-shrink: 0;
+      padding: 6px 14px;
+      border-radius: 15px;
+      border: 1px solid var(--border);
+      background: #fff;
+      color: var(--text-secondary);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .filter-chip.is-active {
+      background: linear-gradient(135deg, #13c2c2, #36cfc9);
+      border-color: transparent;
+      color: #fff;
+    }
+
+    /* 大类分组（可折叠卡片） */
+    #metricGroups { display: flex; flex-direction: column; gap: 10px; }
+    .cat-group {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
+      overflow: hidden;
+    }
+    .cat-group__head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 12px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #0d7878;
+      cursor: pointer;
+    }
+    .cat-group__head::before {
+      content: '';
+      width: 3px;
+      height: 12px;
+      border-radius: 2px;
+      background: var(--primary);
+      flex-shrink: 0;
+    }
+    .cat-group__head small { font-weight: 400; color: var(--text-muted); font-size: 10px; }
+    .cat-group__abn {
+      padding: 1px 7px;
+      border-radius: 8px;
+      background: var(--danger-light);
+      color: var(--danger);
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .cat-group__arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
+    .cat-group.is-collapsed .cat-group__arrow { transform: rotate(-90deg); }
+    .cat-group.is-collapsed .cat-group__body { display: none; }
+    .cat-group__body {
+      border-top: 1px solid var(--line);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 10px 12px;
+    }
+    .metric-card {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 11px 12px;
+      box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
+      cursor: pointer;
+    }
+    .metric-card__top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 4px;
+    }
+    .metric-card__name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
+    .metric-card__bottom {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 10px;
+    }
+    .metric-card__value { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
+    .metric-card__value.is-abn { color: var(--danger); }
+    .metric-card__unit { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-left: 3px; }
+    .metric-card__ref { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
+    .metric-card__spark { width: 96px; flex-shrink: 0; }
+    .metric-card__spark svg { display: block; }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 9px;
+      font-size: 10px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+    .badge--worse { background: var(--danger-light); color: var(--danger); }
+    .badge--new { background: var(--danger-light); color: var(--danger); }
+    .badge--keep { background: var(--warning-light); color: var(--warning); }
+    .badge--better { background: var(--success-light); color: var(--success); }
+    .badge--stable { background: #f5f5f5; color: var(--text-muted); }
+
+    /* 定性项目区（可折叠） */
+    .qual-section {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
+      overflow: hidden;
+    }
+    .qual-section__head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 12px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #0d7878;
+      cursor: pointer;
+    }
+    .qual-section__head small { font-weight: 400; color: var(--text-muted); font-size: 10px; }
+    .qual-section__arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
+    .qual-section.is-collapsed .qual-section__arrow { transform: rotate(-90deg); }
+    .qual-section.is-collapsed .qual-section__body { display: none; }
+    .qual-section__body { border-top: 1px solid var(--line); }
+    .qual-card {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      cursor: pointer;
+      border-bottom: 1px solid var(--line);
+    }
+    .qual-card:last-child { border-bottom: none; }
+    .qual-card__main { flex: 1; min-width: 0; }
+    .qual-card__name { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
+    .qual-card__desc { font-size: 10px; color: var(--text-secondary); }
+    .qual-card__desc.is-warn { color: var(--danger); font-weight: 600; }
+    .qual-dots { display: flex; gap: 4px; flex-shrink: 0; }
+    .qual-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; }
+    .qual-dots i.is-n { background: var(--success); }
+    .qual-dots i.is-a { background: var(--danger); }
+    .qual-years { font-size: 9px; color: #b5b5b5; flex-shrink: 0; }
+    .back-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">
+        <!-- ① AI 纵向总结卡 -->
+        <div class="hero-card">
+          <div class="hero-card__head">
+            <span class="hero-card__ai-badge">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9z"/></svg>
+              AI
+            </span>
+            <span class="hero-card__title">五年纵向对比总结</span>
+            <span class="hero-card__range">2021 - 2025</span>
+          </div>
+          <div class="hero-stats">
+            <div class="hero-stat hero-stat--danger">
+              <div class="hero-stat__value">5</div>
+              <div class="hero-stat__label">今年异常</div>
+            </div>
+            <div class="hero-stat hero-stat--warn">
+              <div class="hero-stat__value">3</div>
+              <div class="hero-stat__label">恶化趋势</div>
+            </div>
+            <div class="hero-stat hero-stat--danger">
+              <div class="hero-stat__value">1</div>
+              <div class="hero-stat__label">新增异常</div>
+            </div>
+            <div class="hero-stat hero-stat--success">
+              <div class="hero-stat__value">2</div>
+              <div class="hero-stat__label">转好恢复</div>
+            </div>
+          </div>
+          <div class="hero-card__text">
+            近五年您的心脑血管代谢相关指标呈持续上行趋势：总胆固醇、甘油三酯、BMI 连续三年上升，低密度脂蛋白今年首次越限，尿酸已连续四年高于正常范围；颈部影像提示生理曲度变直已持续两年。好消息是去年轻度偏高的转氨酶（ALT/AST）今年均回归正常。建议将血脂与体重管理列为本年度健康干预的第一优先级。
+          </div>
+          <div class="hero-card__ai-note">内容由 AI 基于历年体检数据生成，仅供参考，不构成诊断依据</div>
+        </div>
+
+        <!-- ② 筛选 chips -->
+        <!-- [交互] 点击筛选 chips 切换数值指标卡显隐 -->
+        <div class="filter-row">
+          <button class="filter-chip is-active" data-f="all" type="button" onclick="applyFilter(this)">全部</button>
+          <button class="filter-chip" data-f="abn" type="button" onclick="applyFilter(this)">异常</button>
+          <button class="filter-chip" data-f="worse" type="button" onclick="applyFilter(this)">恶化趋势</button>
+          <button class="filter-chip" data-f="normal" type="button" onclick="applyFilter(this)">正常</button>
+        </div>
+
+        <!-- ③ 数值指标区（按体检项目大类分组合并，默认折叠，JS 渲染） -->
+        <!-- [交互] 点击大类头展开/收起该类指标卡；切换筛选时自动展开有匹配项的大类 -->
+        <div id="metricGroups"></div>
+
+        <!-- ④ 其他检查项目（定性结果，JS 渲染） -->
+        <!-- [交互] 点击分组头展开/收起定性项目列表 -->
+        <div class="qual-section" id="qualSection">
+          <div class="qual-section__head" onclick="document.getElementById('qualSection').classList.toggle('is-collapsed')">
+            其他检查项目<small>定性结论 · 历年对比</small>
+            <span class="qual-section__arrow">▾</span>
+          </div>
+          <div class="qual-section__body" id="qualBody"></div>
+        </div>
+        <div class="back-spacer"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // ===== Mock 数据：2021-2025 五年数值指标（与体检报告页/详情页口径一致）=====
+    var YEARS = ['2021', '2022', '2023', '2024', '2025'];
+    var CATS = [
+      { name: '体格指标', keys: ['bmi', 'sbp', 'dbp'] },
+      { name: '血脂', keys: ['tc', 'tg', 'hdl', 'ldl'] },
+      { name: '血糖', keys: ['glu', 'hba1c'] },
+      { name: '肾功能', keys: ['ua', 'crea', 'urea'] },
+      { name: '肝功能', keys: ['alt', 'ast'] },
+      { name: '血常规', keys: ['hgb', 'wbc', 'plt'] }
+    ];
+    var NUM = {
+      bmi:  { name: 'BMI', unit: 'kg/m²', ref: [18.5, 23.9], v: [23.1, 23.8, 24.5, 25.2, 25.8], badge: ['恶化趋势', 'worse'] },
+      sbp:  { name: '收缩压', unit: 'mmHg', ref: [90, 139], v: [112, 115, 118, 116, 120], badge: ['平稳', 'stable'] },
+      dbp:  { name: '舒张压', unit: 'mmHg', ref: [60, 89], v: [72, 74, 73, 76, 78], badge: ['平稳', 'stable'] },
+      tc:   { name: '总胆固醇 TC', unit: 'mmol/L', ref: [3.1, 5.7], v: [4.62, 4.95, 5.36, 5.78, 6.10], badge: ['恶化趋势', 'worse'] },
+      tg:   { name: '甘油三酯 TG', unit: 'mmol/L', ref: [0.4, 1.7], v: [1.20, 1.35, 1.55, 1.72, 2.08], badge: ['恶化趋势', 'worse'] },
+      hdl:  { name: '高密度脂蛋白 HDL-C', unit: 'mmol/L', ref: [1.04, 1.55], v: [1.35, 1.30, 1.26, 1.22, 1.18], badge: ['平稳', 'stable'] },
+      ldl:  { name: '低密度脂蛋白 LDL-C', unit: 'mmol/L', ref: [0, 3.4], v: [2.80, 3.00, 3.10, 3.35, 3.92], badge: ['新增异常', 'new'] },
+      glu:  { name: '空腹血糖 GLU', unit: 'mmol/L', ref: [3.9, 6.1], v: [5.0, 5.1, 4.9, 5.3, 5.2], badge: ['平稳', 'stable'] },
+      hba1c:{ name: '糖化血红蛋白 HbA1c', unit: '%', ref: [4.0, 6.0], v: [5.2, 5.3, 5.1, 5.4, 5.6], badge: ['平稳', 'stable'] },
+      ua:   { name: '尿酸 UA', unit: 'μmol/L', ref: [155, 357], v: [330, 362, 371, 380, 389], badge: ['连续异常', 'keep'] },
+      crea: { name: '肌酐 CREA', unit: 'μmol/L', ref: [41, 73], v: [66, 68, 69, 70, 71], badge: ['平稳', 'stable'] },
+      urea: { name: '尿素 UREA', unit: 'mmol/L', ref: [2.8, 7.2], v: [4.5, 5.0, 4.6, 5.2, 4.8], badge: ['平稳', 'stable'] },
+      alt:  { name: '丙氨酸氨基转移酶 ALT', unit: 'U/L', ref: [7, 40], v: [28, 31, 35, 42, 24.6], badge: ['转好', 'better'] },
+      ast:  { name: '天门冬氨酸氨基转移酶 AST', unit: 'U/L', ref: [13, 35], v: [24, 26, 28, 38, 22.4], badge: ['转好', 'better'] },
+      hgb:  { name: '血红蛋白 HGB', unit: 'g/L', ref: [115, 150], v: [140, 138, 141, 139, 136], badge: ['平稳', 'stable'] },
+      wbc:  { name: '白细胞计数 WBC', unit: '10^9/L', ref: [3.5, 9.5], v: [6.2, 6.5, 6.1, 6.9, 6.8], badge: ['平稳', 'stable'] },
+      plt:  { name: '血小板计数 PLT', unit: '10^9/L', ref: [125, 350], v: [220, 235, 240, 252, 248], badge: ['平稳', 'stable'] }
+    };
+    // 定性项目：statuses 五年逐项状态（n 正常 / a 异常 / m 未检）
+    var QUAL = [
+      { key: 'us-abdomen',  name: '肝胆脾胰双肾彩超', st: ['n', 'a', 'a', 'a', 'a'], desc: '轻度脂肪肝持续 4 年', warn: true },
+      { key: 'ct-cervical', name: '颈椎 CT', st: ['n', 'n', 'n', 'a', 'a'], desc: '生理曲度变直持续 2 年', warn: true },
+      { key: 'ecg', name: '心电图', st: ['n', 'n', 'a', 'n', 'n'], desc: '2023 年偶发早搏，后续恢复正常', warn: false },
+      { key: 'us-thyroid',  name: '甲状腺彩超', st: ['n', 'n', 'n', 'n', 'n'], desc: '五年未见异常', warn: false },
+      { key: 'dr-chest', name: '胸部 DR', st: ['n', 'n', 'n', 'n', 'n'], desc: '五年未见明显异常', warn: false },
+      { key: 'urine', name: '尿常规', st: ['n', 'n', 'n', 'n', 'n'], desc: '主要指标均为阴性', warn: false }
+    ];
+
+    function isAbn(item, vi) { return item.v[vi] < item.ref[0] || item.v[vi] > item.ref[1]; }
+    // 组内排序权重：异常在前，恶化 > 新增 > 连续异常 > 转好 > 平稳
+    function weight(key) {
+      var it = NUM[key], b = it.badge[1];
+      var abn = isAbn(it, 4) ? 0 : 1;
+      var order = { worse: 0, new: 1, keep: 2, better: 3, stable: 4 }[b];
+      return abn * 10 + order;
+    }
+    // 缩略趋势线（纯内联 SVG，异常点标红）
+    function sparkline(item) {
+      var w = 96, h = 34, pad = 5;
+      var min = Math.min.apply(null, item.v), max = Math.max.apply(null, item.v);
+      if (max === min) max = min + 1;
+      var step = (w - pad * 2) / 4;
+      var pts = item.v.map(function (v, i) {
+        return (pad + i * step).toFixed(1) + ',' + (h - pad - (v - min) / (max - min) * (h - pad * 2)).toFixed(1);
+      });
+      var dots = item.v.map(function (v, i) {
+        var cx = pad + i * step, cy = h - pad - (v - min) / (max - min) * (h - pad * 2);
+        return '<circle cx="' + cx.toFixed(1) + '" cy="' + cy.toFixed(1) + '" r="2.6" fill="' + ((v < item.ref[0] || v > item.ref[1]) ? '#ff4d4f' : '#13c2c2') + '"/>';
+      }).join('');
+      return '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '"><polyline points="' + pts.join(' ') + '" fill="none" stroke="#13c2c2" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' + dots + '</svg>';
+    }
+    function fmtV(v) { return v >= 100 ? String(Math.round(v)) : String(v); }
+
+    // ===== 渲染数值指标分组（大类折叠卡，默认收起；筛选时自动展开有匹配项的大类）=====
+    var filter = 'all';
+    function renderGroups() {
+      var html = '';
+      CATS.forEach(function (cat) {
+        var keys = cat.keys.slice().sort(function (a, b) { return weight(a) - weight(b); });
+        var abnCount = cat.keys.filter(function (k) { return isAbn(NUM[k], 4); }).length;
+        var cards = '';
+        keys.forEach(function (key) {
+          var it = NUM[key];
+          var abn = isAbn(it, 4);
+          var show = filter === 'all' || (filter === 'abn' && abn) || (filter === 'worse' && it.badge[1] === 'worse') || (filter === 'normal' && !abn);
+          if (!show) return;
+          var arrow = abn ? (it.v[4] > it.ref[1] ? ' ↑' : ' ↓') : '';
+          cards += '<div class="metric-card" data-key="' + key + '" onclick="goDetail(\'' + key + '\')">'
+            + '<div class="metric-card__top"><span class="metric-card__name">' + it.name + '</span>'
+            + '<span class="badge badge--' + it.badge[1] + '">' + it.badge[0] + '</span></div>'
+            + '<div class="metric-card__bottom"><div>'
+            + '<div class="metric-card__value' + (abn ? ' is-abn' : '') + '">' + fmtV(it.v[4]) + arrow + '<span class="metric-card__unit">' + it.unit + '</span></div>'
+            + '<div class="metric-card__ref">参考 ' + it.ref[0] + '-' + it.ref[1] + '</div></div>'
+            + '<div class="metric-card__spark">' + sparkline(it) + '</div>'
+            + '</div></div>';
+        });
+        if (!cards) return;
+        var collapsed = filter === 'all' ? ' is-collapsed' : '';
+        html += '<div class="cat-group' + collapsed + '">'
+          + '<div class="cat-group__head" onclick="toggleCat(this)">' + cat.name
+          + '<small>' + cat.keys.length + ' 项</small>'
+          + (abnCount ? '<span class="cat-group__abn">异常 ' + abnCount + '</span>' : '')
+          + '<span class="cat-group__arrow">▾</span></div>'
+          + '<div class="cat-group__body">' + cards + '</div></div>';
+      });
+      document.getElementById('metricGroups').innerHTML = html || '<div class="metric-card__ref" style="text-align:center;padding:16px 0">该筛选条件下暂无指标</div>';
+    }
+    // [交互] 点击大类头展开/收起该类指标卡
+    function toggleCat(head) { head.parentElement.classList.toggle('is-collapsed'); }
+    // [交互] 筛选 chips 切换
+    function applyFilter(btn) {
+      document.querySelectorAll('.filter-chip').forEach(function (c) { c.classList.remove('is-active'); });
+      btn.classList.add('is-active');
+      filter = btn.getAttribute('data-f');
+      renderGroups();
+    }
+    // [交互] 点击指标卡进入详情页（与报告页行级入口同一目标页）
+    function goDetail(item) { location.href = 'indicator-compare-detail.html?item=' + encodeURIComponent(item); }
+
+    // ===== 渲染定性项目区 =====
+    function renderQual() {
+      var html = '';
+      QUAL.forEach(function (q) {
+        var dots = q.st.map(function (s) { return '<i class="is-' + s + '"></i>'; }).join('');
+        html += '<div class="qual-card" onclick="goDetail(\'' + q.key + '\')">'
+          + '<div class="qual-card__main"><div class="qual-card__name">' + q.name + '</div>'
+          + '<div class="qual-card__desc' + (q.warn ? ' is-warn' : '') + '">' + q.desc + '</div></div>'
+          + '<div class="qual-dots">' + dots + '</div>'
+          + '<div class="qual-years">21-25</div></div>';
+      });
+      document.getElementById('qualBody').innerHTML = html;
+    }
+    renderGroups();
+    renderQual();
+  </script>
+</body>
+</html>
diff --git a/employee-app/health-checkup/message-detail.html b/employee-app/health-checkup/message-detail.html
new file mode 100644
index 0000000..2574406
--- /dev/null
+++ b/employee-app/health-checkup/message-detail.html
@@ -0,0 +1,334 @@
+<!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: #13c2c2;
+      --text-primary: #1a1a1a;
+      --text-secondary: #666666;
+      --text-muted: #8c8c8c;
+    }
+    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;
+      min-height: 844px;
+      background: #f7f9fb;
+      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, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%);
+    }
+    .scroll-content::-webkit-scrollbar { display: none; }
+    .page-body { padding: 16px; }
+    .detail-card {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid #f0f0f0;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
+      padding: 18px 16px;
+    }
+    .detail-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+    /* 消息类型徽标：与列表页一致，本模块统一为「健康体检」 */
+    .detail-card__cat {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: 9px;
+      color: #13c2c2;
+      background: #e6fffb;
+      flex-shrink: 0;
+    }
+    .detail-card__time { margin-left: auto; font-size: 11px; color: #bfbfbf; }
+    .detail-card__title {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-primary);
+      line-height: 1.45;
+      margin-bottom: 12px;
+    }
+    .detail-card__body p {
+      font-size: 14px;
+      line-height: 1.8;
+      color: var(--text-secondary);
+      margin-bottom: 10px;
+    }
+    .detail-card__body p:last-child { margin-bottom: 0; }
+    .detail-card__body .kv { color: var(--text-primary); font-weight: 600; }
+    /* AI 预警免责提示：出现在含 AI 分析结果的详情底部 */
+    .ai-notice {
+      margin-top: 16px;
+      background: #fffbe6;
+      border: 1px solid #ffe58f;
+      border-radius: 10px;
+      padding: 10px 12px;
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+    }
+    .ai-notice__icon { flex-shrink: 0; margin-top: 1px; color: #d48806; }
+    .ai-notice__text { font-size: 11.5px; line-height: 1.7; color: #8c6e1a; }
+    /* 隐秘入口：小号文字链置于免责提示下方右对齐，避免强引导 */
+    .ai-links {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 14px;
+      margin-top: 10px;
+      padding-right: 2px;
+    }
+    .ai-links a {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-decoration: none;
+    }
+    .ai-links a:active { color: var(--primary); }
+    /* 通用隐秘入口：非 AI 消息（如报告生成）的文字链跳转，带虚线分隔 */
+    .quiet-links {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 14px;
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px dashed #f0f0f0;
+      padding-right: 2px;
+    }
+    .quiet-links a {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-decoration: none;
+    }
+    .quiet-links a:active { color: var(--primary); }
+    /* 明确动作行：报告/预约类详情的跳转入口 */
+    .action-row {
+      margin-top: 16px;
+      background: #fafbfc;
+      border: 1px solid #f0f0f0;
+      border-radius: 12px;
+      padding: 13px 14px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      text-decoration: none;
+    }
+    .action-row:active { background: #f0fbfb; }
+    .action-row__icon { color: var(--primary); margin-right: 8px; display: flex; }
+    .action-row__label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+    .action-row__arrow { margin-left: auto; color: #bfbfbf; font-size: 16px; }
+    .detail-empty {
+      text-align: center;
+      padding: 80px 20px;
+      color: var(--text-muted);
+      font-size: 14px;
+    }
+    .detail-empty a { color: var(--primary); text-decoration: none; }
+    .bottom-spacer { height: 28px; }
+  </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">
+      <!-- [交互] 点击返回: messages.html 消息列表 -->
+      <a class="nav-back" href="messages.html">&#8249;</a>
+      <span class="nav-title">消息详情</span>
+    </div>
+
+    <div class="scroll-content">
+      <div class="page-body">
+        <div id="detailRoot"></div>
+        <div class="bottom-spacer"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    /* AI 分析结果详情的统一免责提示 */
+    var AI_NOTICE = '以上内容基于您的体检数据，由平台 AI 健康模型自动生成，仅供健康管理参考，不构成医学诊断结论或诊疗建议。如有身体不适或疑问，请及时前往正规医疗机构专科门诊就诊。';
+
+    /* 消息详情数据：id 与列表页一致，ai=true 表示正文含 AI 分析结果 */
+    var MESSAGES = {
+      'report-2026': {
+        time: '今天 10:30',
+        title: '2026年度常规体检报告已生成',
+        paras: [
+          '您本单位的年度常规体检已完成，报告已在线发布。本次体检于 2026-08-27 在市中心医院健康管理中心进行，涵盖内科、外科、检验、超声等 38 个项目。',
+          '报告显示异常指标 6 项：空腹血糖偏高、低密度脂蛋白胆固醇偏高、尿酸偏高、轻度脂肪肝、高密度脂蛋白胆固醇偏低、慢性咽炎。AI 已完成智能解读与近三年趋势对比。',
+          '纸质报告可凭工牌至健康管理中心前台领取，电子报告与纸质版具有同等效力。'
+        ],
+        ai: false,
+        links: [{ label: '查看报告详情', url: 'report-query.html?msg=report-2026' }]
+      },
+      'warn-indicator': {
+        time: '今天 10:31',
+        title: 'AI 智能预警：3 项指标较近三年持续上行',
+        paras: [
+          '结合您 2024—2026 年三次体检数据对比，AI 模型识别出以下 3 项代谢指标连续上行，已超或逼近参考上限，慢性病进展风险上升：',
+          '<span class="kv">空腹血糖</span>：5.8 → 6.3 → 6.7 mmol/L（参考 &lt;6.1），已超参考上限，处于糖尿病前期阶段；',
+          '<span class="kv">低密度脂蛋白胆固醇</span>：3.6 → 3.9 → 4.1 mmol/L（参考 &lt;3.4），持续偏高，为动脉粥样硬化独立危险因素；',
+          '<span class="kv">尿酸</span>：487 → 502 → 512 μmol/L（参考 &lt;420），持续超标，与痛风发作及代谢综合征相关。',
+          '建议：3 个月内至专科门诊复查上述三项；日常控制高糖、高脂、高嘌呤饮食，每周中等强度有氧运动合计 150 分钟，并关注体重与腰围变化。'
+        ],
+        ai: true,
+        consultName: '高脂血症'
+      },
+      'warn-risk': {
+        time: '今天 10:33',
+        title: '心脑血管疾病 10 年风险：中度偏高',
+        paras: [
+          '基于 pooled cohort equations 风险模型，结合您本年度体检指标与健康档案问卷，AI 评估您未来 10 年发生心脑血管事件的概率为 <span class="kv">12.6%</span>（低危 &lt;5%／中危 5%—10%／高危 ≥10%），属中度偏高风险区间。',
+          '主要贡献因素：血脂谱异常（低密度脂蛋白胆固醇 4.1 mmol/L）、吸烟史 5 年、高血压家族史（父母双方）。',
+          '建议：尽早至心血管内科门诊评估是否需药物干预；戒烟限酒；家庭自测血压每日 1 次；建议加做颈动脉超声与运动负荷心电图检查。'
+        ],
+        ai: true,
+        consultName: '冠心病'
+      },
+      'warn-predict': {
+        time: '今天 10:34',
+        title: '未来 6 个月痛风发作风险约 68%',
+        paras: [
+          '结合您近三年尿酸变化趋势（487 → 502 → 512 μmol/L）、饮食习惯问卷（高嘌呤饮食频次 &gt;4 次/周）及 BMI 26.4，AI 模型预测您未来 6 个月痛风急性发作概率约 <span class="kv">68%</span>。',
+          '风险升高触发因素：尿酸持续>540 μmol/L、短期内大量摄入高嘌呤食物或酒精、受凉与剧烈运动。',
+          '建议：每月复查一次尿酸，若复测值 ≥540 μmol/L 请至风湿免疫科评估降尿酸治疗；限制动物内脏、海鲜、啤酒摄入；每日饮水 2000 ml 以上。'
+        ],
+        ai: true,
+        consultName: '痛风'
+      },
+      'notice-visit': {
+        time: '08-26 18:00',
+        title: '明日体检到院提醒',
+        paras: [
+          '您预约的体检时间为明日（2026-08-27），请于 7:30—10:30 空腹前往体检中心，采血、腹部超声、碳13 呼气试验为空腹项目。',
+          '注意事项：今晚 20:00 后禁食禁饮，避免熬夜与饮酒；高血压患者可用少量清水照常服药；着宽松无金属扣衣物；携带本人身份证与体检通知单。'
+        ],
+        ai: false,
+        action: { label: '查看预约详情', url: 'my-appointments-all.html' }
+      },
+      'report-2025': {
+        time: '2025-09-15',
+        title: '2025年度体检报告已生成',
+        paras: [
+          '您的 2025 年度体检报告已生成，报告包含 32 个项目，其中 3 项指标异常。可查看完整报告及历年指标对比。'
+        ],
+        ai: false,
+        links: [{ label: '查看报告详情', url: 'report-query.html?msg=report-2025' }]
+      }
+    };
+
+    (function () {
+      var id = new URLSearchParams(location.search).get('id');
+      var msg = MESSAGES[id];
+      var root = document.getElementById('detailRoot');
+      if (!msg) {
+        root.innerHTML = '<div class="detail-empty">消息不存在或已删除<br><br><a href="messages.html">返回消息列表</a></div>';
+        return;
+      }
+      /* 进入详情即标记已读（与列表页共用 sessionStorage 键，标签页会话内有效） */
+      var READ_KEY = 'hc_msg_read_v1';
+      try {
+        var s = JSON.parse(sessionStorage.getItem(READ_KEY)) || [];
+        if (s.indexOf(id) < 0) { s.push(id); sessionStorage.setItem(READ_KEY, JSON.stringify(s)); }
+      } catch (e) {}
+
+      document.title = msg.title;
+      var html = '<div class="detail-card">';
+      html += '<div class="detail-card__top"><span class="detail-card__cat">健康体检</span><span class="detail-card__time">' + msg.time + '</span></div>';
+      html += '<div class="detail-card__title">' + msg.title + '</div>';
+      html += '<div class="detail-card__body">';
+      msg.paras.forEach(function (p) { html += '<p>' + p + '</p>'; });
+      html += '</div>';
+
+      if (msg.ai) {
+        /* [交互] 查看报告详情/快速咨询跳转，携带 msg 参数：目标页返回时回到本消息详情 */
+        var consultUrl = '../health-consult/expert-list.html?type=disease&name=' + encodeURIComponent(msg.consultName || '') + '&msg=' + id;
+        html += '<div class="ai-notice">'
+             + '<span class="ai-notice__icon"><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="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>'
+             + '<span class="ai-notice__text">' + AI_NOTICE + '</span></div>';
+        html += '<div class="ai-links">'
+             + '<a href="report-query.html?msg=' + id + '">查看报告详情 ›</a>'
+             + '<a href="' + consultUrl + '">快速咨询 ›</a>'
+             + '</div>';
+      }
+      if (msg.links) {
+        /* [交互] 隐秘文字链入口：携带 msg 参数，目标页返回时回到本消息详情 */
+        html += '<div class="quiet-links">'
+             + msg.links.map(function (l) { return '<a href="' + l.url + '">' + l.label + ' ›</a>'; }).join('')
+             + '</div>';
+      }
+      if (msg.action) {
+        /* [交互] 明确动作跳转: {msg.action.url} */
+        html += '<a class="action-row" href="' + msg.action.url + '">'
+             + '<span class="action-row__icon"><svg width="18" height="18" 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></span>'
+             + '<span class="action-row__label">' + msg.action.label + '</span>'
+             + '<span class="action-row__arrow">›</span></a>';
+      }
+      html += '</div>';
+      root.innerHTML = html;
+    })();
+  </script>
+</body>
+</html>
diff --git a/employee-app/health-checkup/messages.html b/employee-app/health-checkup/messages.html
new file mode 100644
index 0000000..0f33a67
--- /dev/null
+++ b/employee-app/health-checkup/messages.html
@@ -0,0 +1,286 @@
+<!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: #13c2c2;
+      --text-primary: #1a1a1a;
+      --text-secondary: #666666;
+      --text-muted: #8c8c8c;
+    }
+    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;
+      min-height: 844px;
+      background: #f7f9fb;
+      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, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%);
+    }
+    .scroll-content::-webkit-scrollbar { display: none; }
+    .page-body { padding: 16px; }
+    .msg-list { display: flex; flex-direction: column; gap: 12px; }
+    .msg {
+      background: #fff;
+      border-radius: 16px;
+      padding: 14px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      position: relative;
+      border: 1px solid #f0f0f0;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
+      cursor: pointer;
+      transition: transform 0.15s ease;
+    }
+    .msg:active { transform: scale(0.985); }
+    .msg__icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: #e6fffb;
+      color: var(--primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+    }
+    /* 未读红点：叠在类型图标右上角 */
+    .msg--unread .msg__icon::after {
+      content: '';
+      position: absolute;
+      top: -3px;
+      right: -3px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #ff4d4f;
+      border: 2px solid #fff;
+    }
+    .msg__body { flex: 1; min-width: 0; }
+    .msg__top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
+    /* 消息类型徽标：本模块统一为「健康体检」，其他模块可能出现其他类型 */
+    .msg__cat {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: 9px;
+      flex-shrink: 0;
+      color: #13c2c2;
+      background: #e6fffb;
+    }
+    .msg__time { margin-left: auto; font-size: 11px; color: #bfbfbf; flex-shrink: 0; }
+    .msg__title {
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-primary);
+      line-height: 1.4;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    /* 已读样式：无红点、卡片淡化、文字转灰 */
+    .msg--read { background: #fafbfc; box-shadow: none; }
+    .msg--read .msg__title { color: var(--text-muted); font-weight: 500; }
+    .msg--read .msg__icon { opacity: 0.55; }
+    .bottom-spacer { height: 28px; }
+  </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">
+      <!-- [交互] 点击返回: index.html -->
+      <a class="nav-back" href="index.html">&#8249;</a>
+      <span class="nav-title">消息</span>
+    </div>
+
+    <div class="scroll-content">
+      <div class="page-body">
+        <div class="msg-list">
+          <!-- 未读 | [交互] 点击跳转至: message-detail.html?id=report-2026，同时自动标记为已读 -->
+          <div class="msg msg--unread" data-id="report-2026" onclick="openMsg('report-2026')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">今天 10:30</span>
+              </div>
+              <div class="msg__title">2026年度常规体检报告已生成</div>
+            </div>
+          </div>
+
+          <!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-indicator -->
+          <div class="msg msg--unread" data-id="warn-indicator" onclick="openMsg('warn-indicator')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">今天 10:31</span>
+              </div>
+              <div class="msg__title">体检指标异常预警</div>
+            </div>
+          </div>
+
+          <!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-risk -->
+          <div class="msg msg--unread" data-id="warn-risk" onclick="openMsg('warn-risk')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">今天 10:33</span>
+              </div>
+              <div class="msg__title">心脑血管疾病风险预警</div>
+            </div>
+          </div>
+
+          <!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-predict -->
+          <div class="msg msg--unread" data-id="warn-predict" onclick="openMsg('warn-predict')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">今天 10:34</span>
+              </div>
+              <div class="msg__title">防范痛风发作风险预警</div>
+            </div>
+          </div>
+
+          <!-- 已读 | [交互] 点击跳转至: message-detail.html?id=notice-visit -->
+          <div class="msg msg--read" data-id="notice-visit" onclick="openMsg('notice-visit')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">08-26 18:00</span>
+              </div>
+              <div class="msg__title">明日体检到院提醒</div>
+            </div>
+          </div>
+
+          <!-- 已读 | [交互] 点击跳转至: message-detail.html?id=report-2025 -->
+          <div class="msg msg--read" data-id="report-2025" onclick="openMsg('report-2025')">
+            <div class="msg__icon">
+              <svg width="20" height="20" 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="msg__body">
+              <div class="msg__top">
+                <span class="msg__cat">健康体检</span>
+                <span class="msg__time">2025-09-15</span>
+              </div>
+              <div class="msg__title">2025年度体检报告已生成</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="bottom-spacer"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    /* 已读状态用 sessionStorage：同一标签页内「点击→返回红点消失」联动保留；
+       新标签页重新打开则恢复全部未读（原型演示友好，不留永久痕迹） */
+    var READ_KEY = 'hc_msg_read_v1';
+    function getReadSet() {
+      try { return JSON.parse(sessionStorage.getItem(READ_KEY)) || []; }
+      catch (e) { return []; }
+    }
+    function openMsg(id) {
+      var s = getReadSet();
+      if (s.indexOf(id) < 0) {
+        s.push(id);
+        sessionStorage.setItem(READ_KEY, JSON.stringify(s));
+      }
+      /* [交互] 跳转至: message-detail.html?id={消息ID} */
+      location.href = 'message-detail.html?id=' + id;
+    }
+    /* 页面加载时同步已读态（从详情页返回后红点即时消失） */
+    (function () {
+      var s = getReadSet();
+      document.querySelectorAll('.msg[data-id]').forEach(function (el) {
+        if (s.indexOf(el.getAttribute('data-id')) >= 0) {
+          el.classList.remove('msg--unread');
+          el.classList.add('msg--read');
+        }
+      });
+    })();
+  </script>
+</body>
+</html>
diff --git a/employee-app/health-checkup/my-appointments-all.html b/employee-app/health-checkup/my-appointments-all.html
index 6be79f6..8ce6bd5 100644
--- a/employee-app/health-checkup/my-appointments-all.html
+++ b/employee-app/health-checkup/my-appointments-all.html
@@ -10,19 +10,17 @@
       --primary: #13c2c2;
       --primary-dark: #0f9b9b;
       --primary-light: #e6fffb;
-      --success-bg: #f6ffed;
+      --success-light: #f6ffed;
       --success-text: #52c41a;
-      --warning-bg: #fff7e6;
       --warning-text: #fa8c16;
-      --danger-bg: #fff1f0;
-      --danger-text: #ff4d4f;
+      --danger: #ff4d4f;
+      --danger-light: #fff1f0;
       --text-primary: #1a1a1a;
       --text-secondary: #666666;
       --text-muted: #8c8c8c;
       --bg-page: #f0f2f5;
       --bg-content: #f7f9fb;
-      --border: #e8f3f3;
-      --shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
+      --shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
     }
     body {
       background: var(--bg-page);
@@ -35,80 +33,352 @@
       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;
+      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;
+      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;
+      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); }
+    .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);
+    }
+    /* 右上角圆形演示下拉 */
+    .demo-select {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 50;
+    }
+    .demo-select__trigger {
+      height: 28px;
+      padding: 0 12px;
+      border-radius: 999px;
+      border: 1px solid rgba(19, 194, 194, 0.35);
+      background: var(--primary-light);
+      color: var(--primary-dark);
+      font-size: 12px;
+      font-weight: 700;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .demo-select__menu {
+      position: absolute;
+      right: 0;
+      top: 34px;
+      width: 128px;
+      background: #fff;
+      border-radius: 14px;
+      box-shadow: 0 12px 32px rgba(0,0,0,0.14);
+      padding: 6px;
+    }
+    .demo-select__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      height: 34px;
+      padding: 0 10px;
+      border-radius: 10px;
+      font-size: 13px;
+      color: var(--text-primary);
+      cursor: pointer;
+    }
+    .demo-select__item:hover { background: #f5f7fa; }
+    .demo-select__item--active { color: var(--primary-dark); font-weight: 700; background: var(--primary-light); }
+    .demo-select__item .check { visibility: hidden; font-size: 12px; }
+    .demo-select__item--active .check { visibility: visible; }
     .scroll-content {
-      flex: 1; overflow-y: auto;
-      background: linear-gradient(180deg, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
-      padding: 14px 16px 20px;
+      flex: 1;
+      overflow-y: auto;
+      background: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
+      padding: 14px 16px 24px;
     }
     .scroll-content::-webkit-scrollbar { display: none; }
-    .tabs {
-      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
-      background: rgba(255,255,255,0.92); border-radius: 18px;
+    /* 顶部体检类型 Tab */
+    .type-tabs {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      padding: 5px;
+      background: rgba(255,255,255,0.92);
+      border-radius: 16px;
       box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
-      position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
+      margin-bottom: 14px;
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      backdrop-filter: blur(10px);
     }
-    .tabs__item {
-      height: 36px; border: none; border-radius: 14px; background: transparent;
+    .type-tabs__btn {
+      height: 38px;
+      border: none;
+      border-radius: 12px;
+      background: transparent;
+      color: var(--text-secondary);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .type-tabs__btn--active {
+      background: var(--primary-light);
+      color: var(--primary-dark);
+      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
+    }
+    .summary-card, .info-card {
+      background: #fff;
+      border-radius: 20px;
+      padding: 18px 16px;
+      margin-top: 14px;
+      box-shadow: var(--shadow);
+      border: 1px solid rgba(19, 194, 194, 0.06);
+    }
+    .section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
+    .summary-list, .info-list { display: flex; flex-direction: column; gap: 14px; }
+    .summary-item, .info-item {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: flex-start;
+    }
+    .summary-item__label, .info-item__label { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
+    .summary-item__value, .info-item__value {
+      font-size: 14px;
+      color: var(--text-primary);
+      font-weight: 600;
+      text-align: right;
+      line-height: 1.6;
+    }
+    /* 签到码卡片 */
+    .person-card {
+      margin-top: 14px;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
+      border-radius: 20px;
+      padding: 16px;
+      border: 1px solid #e4f7f5;
+      box-shadow: var(--shadow);
+    }
+    .person-card__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .code-switch {
+      width: 28px; height: 28px;
+      border-radius: 8px;
+      border: 1px solid #e4f7f5;
+      background: #f2fbfa;
+      color: var(--primary-dark);
+      display: inline-flex; align-items: center; justify-content: center;
+      cursor: pointer;
+    }
+    .code-switch:active { background: var(--primary-light); }
+    .qrcode-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+    .code-img {
+      background: #fff;
+      border-radius: 12px;
+      border: 1px solid #eef5f5;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    .code-img:hover { transform: scale(1.04); }
+    .code-img--qr { width: 160px; height: 160px; }
+    .code-img--bar { width: 224px; height: 132px; }
+    .qrcode-wrap__hint { font-size: 12px; color: var(--text-muted); }
+    /* 条形码/二维码互斥显隐 */
+    .person-card .code-only--bar { display: flex; }
+    .person-card .code-only--qr { display: none; }
+    .person-card--qr .code-only--bar { display: none; }
+    .person-card--qr .code-only--qr { display: flex; }
+    /* 放大遮罩 */
+    .qr-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.6);
+      z-index: 100;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    .qr-overlay--visible { display: flex; }
+    .qr-overlay__img--qr { width: 260px; height: 260px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); background:#fff; }
+    .qr-overlay__img--bar { width: 300px; height: 176px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); background:#fff; }
+    /* 体检须知 */
+    .tips-card {
+      margin-top: 14px;
+      background: #fff;
+      border-radius: 20px;
+      padding: 16px;
+      border: 1px solid #eef5f5;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
+    }
+    .tips-card__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
+    .tips-card__item {
+      display: flex;
+      gap: 8px;
+      font-size: 13px;
+      line-height: 1.7;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+    }
+    .tips-card__item:last-child { margin-bottom: 0; }
+    .tips-card__dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--primary); margin-top: 8px; flex-shrink: 0;
+    }
+    /* 体检进度 */
+    .progress-card {
+      margin-top: 14px;
+      background: #fff;
+      border-radius: 20px;
+      padding: 18px 16px;
+      box-shadow: var(--shadow);
+      border: 1px solid rgba(19, 194, 194, 0.06);
+    }
+    .progress-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+    .progress-card__title { font-size: 16px; font-weight: 700; }
+    .progress-card__ratio { font-size: 13px; color: var(--primary-dark); font-weight: 600; }
+    .progress-bar-lg {
+      height: 10px; border-radius: 999px; background: #eef3f3;
+      overflow: hidden; margin-bottom: 16px;
+    }
+    .progress-bar-lg__fill {
+      height: 100%; border-radius: 999px;
+      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
+    }
+    .project-tabs {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
+    }
+    .project-tabs__btn {
+      height: 34px; border: none; border-radius: 12px; background: #f5f7fa;
       color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
-      text-decoration: none; display: flex; align-items: center; justify-content: center;
+      transition: all 0.2s;
     }
-    .tabs__item--active {
+    .project-tabs__btn--active {
       background: var(--primary-light); color: var(--primary-dark);
       box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
     }
-    .summary-bar {
-      margin: 14px 0 12px; padding: 16px; border-radius: 20px;
+    .project-list { display: flex; flex-direction: column; gap: 8px; }
+    .project-item {
+      display: flex; align-items: center; gap: 10px; padding: 10px 12px;
+      border-radius: 14px; background: #f9fbfb; border: 1px solid #f0f5f5;
+    }
+    .project-item__icon {
+      width: 28px; height: 28px; border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; font-size: 14px;
+    }
+    .project-item__icon--done { background: var(--success-light); color: var(--success-text); }
+    .project-item__icon--pending { background: #fff7e6; color: var(--warning-text); }
+    .project-item__name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
+    .project-item__status { font-size: 12px; font-weight: 600; }
+    .project-item__status--done { color: var(--success-text); }
+    .project-item__status--pending { color: var(--warning-text); }
+    /* 已选体检项目（取消详情） */
+    .project-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+    .project-section__count { font-size: 13px; color: var(--text-muted); }
+    .project-section__count em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
+    .fee-tabs {
+      display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
+      padding: 5px; background: #f5f7f7; border-radius: 14px; margin-bottom: 14px;
+    }
+    .fee-tab {
+      height: 34px; border: none; border-radius: 10px; background: transparent;
+      color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
+    }
+    .fee-tab--active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+    .project-list-panel { max-height: 280px; overflow-y: auto; padding-right: 2px; }
+    .project-list-panel::-webkit-scrollbar { display: none; }
+    .picked-item {
+      display: flex; align-items: center; gap: 12px; padding: 12px 14px;
+      background: #f9fbfb; border-radius: 14px; border: 1px solid #eef5f5;
+    }
+    .picked-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
+    .picked-item__info { flex: 1; }
+    .picked-item__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
+    .picked-item__desc { font-size: 12px; color: var(--text-muted); }
+    .picked-item__price { font-size: 13px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; }
+    .picked-item__badge {
+      display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
+      border-radius: 10px; font-size: 10px; font-weight: 600; flex-shrink: 0;
+    }
+    .picked-item__badge--normal { background: #f5f5f5; color: var(--text-muted); }
+    .picked-item__badge--key { background: #fff1f0; color: #ff4d4f; }
+    /* 底部操作按钮（重新预约/立即预约） */
+    .rebook-btn {
+      display: block;
+      width: 100%;
+      height: 48px;
+      margin-top: 16px;
+      border: none;
+      border-radius: 24px;
+      font-size: 15px;
+      font-weight: 600;
+      color: #fff;
       background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
+      box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
+      cursor: pointer;
     }
-    .summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
-    .summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
-    .appointment-list { display: flex; flex-direction: column; gap: 12px; }
-    .appointment-card {
-      background: #fff; border-radius: 20px; padding: 16px;
-      border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow);
+    /* 无预约信息空态 */
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: 64px 24px 40px;
     }
-    .appointment-card[data-status="done"],
-    .appointment-card[data-status="cancelled"] { opacity: 0.94; }
-    .appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
-    .appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
-    .appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
-    .appointment-card__status--pending { background: var(--warning-bg); color: var(--warning-text); }
-    .appointment-card__status--done { background: var(--success-bg); color: var(--success-text); }
-    .appointment-card__status--cancelled { background: var(--danger-bg); color: var(--danger-text); }
-    .appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
-    .meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
-    .meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
-    .meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
-    .appointment-card__progress { margin-bottom: 14px; }
-    .progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
-    .progress-bar { height: 8px; border-radius: 999px; background: #eef3f3; overflow: hidden; }
-    .progress-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%); }
-    .appointment-card__actions { display: flex; gap: 10px; }
-    .appointment-card__btn {
-      flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
-    }
-    .appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
-    .appointment-card__btn--primary {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff; box-shadow: 0 8px 20px rgba(19, 194, 194, 0.18);
+    .empty__icon {
+      width: 88px; height: 88px; border-radius: 50%;
+      background: #fff; box-shadow: var(--shadow);
+      display: flex; align-items: center; justify-content: center;
+      margin-bottom: 18px;
     }
+    .empty__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
+    .empty__desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; max-width: 260px; }
+    .hidden { display: none !important; }
   </style>
 </head>
 <body>
@@ -120,81 +390,493 @@
         <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">
-      <a class="nav-back" href="index.html">&#8249;</a>
+      <!-- [交互] 点击返回至: index.html -->
+      <a class="nav-back" href="index.html">‹</a>
       <span class="nav-title">我的预约</span>
+      <!-- [交互] 演示专用：点击展开状态下拉，切换查看各状态详情 -->
+      <div class="demo-select">
+        <button class="demo-select__trigger" type="button" id="demoTrigger" onclick="toggleDemoMenu(event)">
+          演示
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="demo-select__menu hidden" id="demoMenu">
+          <div class="demo-select__item demo-select__item--active" data-status="pending" onclick="setDemoStatus('pending')">待体检<span class="check">✓</span></div>
+          <div class="demo-select__item" data-status="cancelled" onclick="setDemoStatus('cancelled')">已取消<span class="check">✓</span></div>
+          <div class="demo-select__item" data-status="done" onclick="setDemoStatus('done')">已完成<span class="check">✓</span></div>
+          <div class="demo-select__item" data-status="none" onclick="setDemoStatus('none')">无预约信息<span class="check">✓</span></div>
+        </div>
+      </div>
     </div>
+
     <div class="scroll-content">
-      <div class="tabs">
-        <a class="tabs__item tabs__item--active" href="my-appointments-all.html">全部</a>
-        <a class="tabs__item" href="my-appointments.html">待体检</a>
-        <a class="tabs__item" href="my-appointments-done.html">已体检</a>
-        <a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
+      <!-- [交互] 点击切换 常规体检/胃肠镜体检 详情 -->
+      <div class="type-tabs">
+        <button class="type-tabs__btn type-tabs__btn--active" type="button" id="tabRoutine" onclick="setType('routine')">常规体检</button>
+        <button class="type-tabs__btn" type="button" id="tabGastro" onclick="setType('gastro')">胃肠镜体检</button>
       </div>
 
-      <div class="appointment-list">
-        <!-- 待体检 -->
-        <div class="appointment-card" data-status="pending">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--pending">待体检</div>
+      <!-- ======================= 常规体检 · 待体检 ======================= -->
+      <div class="panel" data-type="routine" data-status="pending">
+        <div class="person-card" id="codeRoutine">
+          <div class="person-card__header">
+            <div class="section-title" style="margin-bottom:0">体检签到码</div>
+            <!-- [交互] 点击右上角小图标切换条形码/二维码 -->
+            <button class="code-switch" type="button" title="切换条形码/二维码" onclick="toggleCodeMode('codeRoutine')">
+              <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="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+            </button>
           </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
+          <div class="qrcode-wrap code-only--bar">
+            <!-- [交互] 点击条码放大展示 -->
+            <svg class="code-img code-img--bar" onclick="openCodeOverlay('codeRoutine')" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
+              <rect width="200" height="110" fill="#fff"/>
+              <rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
+              <text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">TJ2026032300871</text>
+            </svg>
+            <span class="qrcode-wrap__hint">点击条码可放大查看</span>
           </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head"><span>体检进度</span><span>5/26</span></div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 19.2%;"></div></div>
+          <div class="qrcode-wrap code-only--qr">
+            <!-- [交互] 点击二维码放大展示 -->
+            <svg class="code-img code-img--qr" onclick="openCodeOverlay('codeRoutine')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
+              <rect width="160" height="160" fill="#fff"/>
+              <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
+            </svg>
+            <span class="qrcode-wrap__hint">点击二维码可放大查看</span>
           </div>
-
         </div>
-        <!-- 已体检 -->
-        <div class="appointment-card" data-status="done">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--done">已体检</div>
+        <div class="summary-card">
+          <div class="section-title">常规体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
+            <div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#fa8c16;">待体检</div></div>
           </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head"><span>体检进度</span><span>26/26</span></div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
-          </div>
-
         </div>
-        <!-- 已取消 -->
-        <div class="appointment-card" data-status="cancelled">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">胃肠镜体检</div>
-            <div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
+        <div class="progress-card">
+          <div class="progress-card__header">
+            <div class="progress-card__title">体检进度</div>
+            <div class="progress-card__ratio" id="rProgRatio">5 / 26 项</div>
           </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-10</div></div>
+          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="rProgFill" style="width: 19.2%;"></div></div>
+          <!-- [交互] 点击切换已检/未检 Tab -->
+          <div class="project-tabs">
+            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="rTabDone" onclick="switchProg('r',0)">已检项目 (5)</button>
+            <button class="project-tabs__btn" type="button" id="rTabPending" onclick="switchProg('r',1)">未检项目 (21)</button>
           </div>
-
+          <div class="project-list" id="rProgDoneList"></div>
+          <div class="project-list hidden" id="rProgPendingList"></div>
         </div>
-        <!-- 待体检 -->
-        <div class="appointment-card" data-status="pending">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--pending">待体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head"><span>体检进度</span><span>0/26</span></div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
-          </div>
+      </div>
 
+      <!-- ======================= 常规体检 · 已完成 ======================= -->
+      <div class="panel hidden" data-type="routine" data-status="done">
+        <div class="summary-card">
+          <div class="section-title">常规体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
+            <div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#52c41a;">已体检</div></div>
+          </div>
+        </div>
+        <div class="progress-card">
+          <div class="progress-card__header">
+            <div class="progress-card__title">体检进度</div>
+            <div class="progress-card__ratio">26 / 26 项</div>
+          </div>
+          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 100%;"></div></div>
+          <!-- [交互] 点击切换已检/未检 Tab -->
+          <div class="project-tabs">
+            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="rdTabDone" onclick="switchProg('rd',0)">已检项目 (26)</button>
+            <button class="project-tabs__btn" type="button" id="rdTabPending" onclick="switchProg('rd',1)">未检项目 (0)</button>
+          </div>
+          <div class="project-list" id="rdProgDoneList"></div>
+          <div class="project-list hidden" id="rdProgPendingList"></div>
+        </div>
+      </div>
+
+      <!-- ======================= 常规体检 · 已取消 ======================= -->
+      <div class="panel hidden" data-type="routine" data-status="cancelled">
+        <div class="summary-card">
+          <div class="section-title">常规体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
+            <div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
+          </div>
+        </div>
+        <div class="summary-card">
+          <div class="project-section__header">
+            <div class="section-title" style="margin-bottom:0">已选体检项目</div>
+            <span class="project-section__count">共 <em>14</em> 项</span>
+          </div>
+          <!-- [交互] 点击切换自选项目/必检项目 -->
+          <div class="fee-tabs">
+            <button class="fee-tab fee-tab--active" type="button" id="rcTabOptional" onclick="switchPicked('optional')">自选项目(6)</button>
+            <button class="fee-tab" type="button" id="rcTabRequired" onclick="switchPicked('required')">必检项目(8)</button>
+          </div>
+          <div class="project-list-panel">
+            <div class="project-list" id="rcPickedList"></div>
+          </div>
+        </div>
+        <!-- [交互] 点击跳转至: booking-type.html（重新走常规体检预约流程） -->
+        <button class="rebook-btn" type="button" onclick="location.href='booking-type.html'">重新预约</button>
+      </div>
+
+      <!-- ======================= 常规体检 · 无预约信息 ======================= -->
+      <div class="panel hidden" data-type="routine" data-status="none">
+        <div class="empty">
+          <div class="empty__icon">
+            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.6"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18"/><path d="M8 2v4M16 2v4"/><path d="M9 15l2.2 2.2L15 13.5"/></svg>
+          </div>
+          <div class="empty__title">暂无常规体检预约</div>
+          <div class="empty__desc">您还没有预约本年度常规体检，预约成功后可在此查看预约详情、体检进度与签到码。</div>
+          <!-- [交互] 点击跳转至: booking-type.html（进入常规体检预约流程） -->
+          <button class="rebook-btn" style="width:auto;padding:0 40px;" type="button" onclick="location.href='booking-type.html'">立即预约</button>
+        </div>
+      </div>
+
+      <!-- ======================= 胃肠镜体检 · 待体检 ======================= -->
+      <div class="panel hidden" data-type="gastro" data-status="pending">
+        <div class="person-card" id="codeGastro">
+          <div class="person-card__header">
+            <div class="section-title" style="margin-bottom:0">体检签到码</div>
+            <!-- [交互] 点击右上角小图标切换条形码/二维码 -->
+            <button class="code-switch" type="button" title="切换条形码/二维码" onclick="toggleCodeMode('codeGastro')">
+              <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="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+            </button>
+          </div>
+          <div class="qrcode-wrap code-only--bar">
+            <!-- [交互] 点击条码放大展示 -->
+            <svg class="code-img code-img--bar" onclick="openCodeOverlay('codeGastro')" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
+              <rect width="200" height="110" fill="#fff"/>
+              <rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
+              <text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">WC2026032300642</text>
+            </svg>
+            <span class="qrcode-wrap__hint">点击条码可放大查看</span>
+          </div>
+          <div class="qrcode-wrap code-only--qr">
+            <!-- [交互] 点击二维码放大展示 -->
+            <svg class="code-img code-img--qr" onclick="openCodeOverlay('codeGastro')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
+              <rect width="160" height="160" fill="#fff"/>
+              <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
+              <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
+              <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
+            </svg>
+            <span class="qrcode-wrap__hint">点击二维码可放大查看</span>
+          </div>
+        </div>
+        <div class="summary-card">
+          <div class="section-title">胃肠镜体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#fa8c16;">待体检</div></div>
+          </div>
+        </div>
+        <div class="tips-card">
+          <div class="tips-card__title">体检须知</div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前3天请清淡饮食，避免高纤维、高脂肪食物。</span></div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前一天晚上需服用肠道清洁剂，具体用法请遵医嘱。</span></div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查当天需空腹，禁食禁水至少8小时。</span></div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>请携带本人身份证件按时前往医院。</span></div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>若选择无痛胃肠镜，检查后24小时内请勿驾车。</span></div>
+          <div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
+        </div>
+        <div class="progress-card">
+          <div class="progress-card__header">
+            <div class="progress-card__title">体检进度</div>
+            <div class="progress-card__ratio">0 / 2 项</div>
+          </div>
+          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 0%;"></div></div>
+          <!-- [交互] 点击切换已检/未检 Tab -->
+          <div class="project-tabs">
+            <button class="project-tabs__btn" type="button" id="gTabDone" onclick="switchProg('g',0)">已检项目 (0)</button>
+            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="gTabPending" onclick="switchProg('g',1)">未检项目 (2)</button>
+          </div>
+          <div class="project-list hidden" id="gProgDoneList"></div>
+          <div class="project-list" id="gProgPendingList"></div>
+        </div>
+      </div>
+
+      <!-- ======================= 胃肠镜体检 · 已完成 ======================= -->
+      <div class="panel hidden" data-type="gastro" data-status="done">
+        <div class="summary-card">
+          <div class="section-title">胃肠镜体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#52c41a;">已体检</div></div>
+          </div>
+        </div>
+        <div class="progress-card">
+          <div class="progress-card__header">
+            <div class="progress-card__title">体检进度</div>
+            <div class="progress-card__ratio">2 / 2 项</div>
+          </div>
+          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 100%;"></div></div>
+          <!-- [交互] 点击切换已检/未检 Tab -->
+          <div class="project-tabs">
+            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="gdTabDone" onclick="switchProg('gd',0)">已检项目 (2)</button>
+            <button class="project-tabs__btn" type="button" id="gdTabPending" onclick="switchProg('gd',1)">未检项目 (0)</button>
+          </div>
+          <div class="project-list" id="gdProgDoneList"></div>
+          <div class="project-list hidden" id="gdProgPendingList"></div>
+        </div>
+      </div>
+
+      <!-- ======================= 胃肠镜体检 · 已取消 ======================= -->
+      <div class="panel hidden" data-type="gastro" data-status="cancelled">
+        <div class="summary-card">
+          <div class="section-title">胃肠镜体检</div>
+          <div class="summary-list">
+            <div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
+            <div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
+            <div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
+          </div>
+        </div>
+        <!-- [交互] 点击跳转至: gastro-hospital.html（重新走胃肠镜预约流程） -->
+        <button class="rebook-btn" type="button" onclick="location.href='gastro-hospital.html'">重新预约</button>
+      </div>
+
+      <!-- ======================= 胃肠镜体检 · 无预约信息 ======================= -->
+      <div class="panel hidden" data-type="gastro" data-status="none">
+        <div class="empty">
+          <div class="empty__icon">
+            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.6"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18"/><path d="M8 2v4M16 2v4"/><path d="M9 15l2.2 2.2L15 13.5"/></svg>
+          </div>
+          <div class="empty__title">暂无胃肠镜体检预约</div>
+          <div class="empty__desc">您还没有预约胃肠镜体检，预约成功后可在此查看预约详情、体检须知与签到码。</div>
+          <!-- [交互] 点击跳转至: gastro-hospital.html（进入胃肠镜预约流程） -->
+          <button class="rebook-btn" style="width:auto;padding:0 40px;" type="button" onclick="location.href='gastro-hospital.html'">立即预约</button>
         </div>
       </div>
     </div>
   </div>
+
+  <!-- 签到码放大遮罩 -->
+  <div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
+    <div onclick="event.stopPropagation()">
+      <svg class="qr-overlay__img--bar" id="ovlBarcode" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg" style="display:none;">
+        <rect width="200" height="110" fill="#fff"/>
+        <rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
+        <text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">签到码编号</text>
+      </svg>
+      <svg class="qr-overlay__img--qr" id="ovlQr" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" style="display:none;">
+        <rect width="160" height="160" fill="#fff"/>
+        <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+        <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
+        <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
+        <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
+        <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
+      </svg>
+    </div>
+  </div>
+
+  <script>
+    // ===== 视图状态：体检类型 × 预约状态 =====
+    var currentType = 'routine';
+    var currentStatus = 'pending';
+
+    function applyView() {
+      var panels = document.querySelectorAll('.panel');
+      for (var i = 0; i < panels.length; i++) {
+        var p = panels[i];
+        var show = p.dataset.type === currentType && p.dataset.status === currentStatus;
+        p.classList.toggle('hidden', !show);
+      }
+    }
+
+    // [交互] Tab 切换体检类型
+    function setType(type) {
+      currentType = type;
+      document.getElementById('tabRoutine').classList.toggle('type-tabs__btn--active', type === 'routine');
+      document.getElementById('tabGastro').classList.toggle('type-tabs__btn--active', type === 'gastro');
+      applyView();
+    }
+
+    // [交互] 演示下拉：切换预约状态
+    function toggleDemoMenu(e) {
+      e.stopPropagation();
+      document.getElementById('demoMenu').classList.toggle('hidden');
+    }
+    function setDemoStatus(status) {
+      currentStatus = status;
+      var items = document.querySelectorAll('.demo-select__item');
+      for (var i = 0; i < items.length; i++) {
+        items[i].classList.toggle('demo-select__item--active', items[i].dataset.status === status);
+      }
+      document.getElementById('demoMenu').classList.add('hidden');
+      applyView();
+    }
+    document.addEventListener('click', function(e) {
+      var menu = document.getElementById('demoMenu');
+      if (!menu.classList.contains('hidden') && !e.target.closest('.demo-select')) {
+        menu.classList.add('hidden');
+      }
+    });
+
+    // ===== 签到码：条形码 ↔ 二维码切换 =====
+    // [交互] 点击右上角小图标切换条形码/二维码，默认条形码
+    function toggleCodeMode(cardId) {
+      document.getElementById(cardId).classList.toggle('person-card--qr');
+    }
+    // [交互] 点击签到码放大查看（遮罩跟随当前类型）
+    function openCodeOverlay(cardId) {
+      var isQr = document.getElementById(cardId).classList.contains('person-card--qr');
+      document.getElementById('ovlQr').style.display = isQr ? 'block' : 'none';
+      document.getElementById('ovlBarcode').style.display = isQr ? 'none' : 'block';
+      document.getElementById('qrOverlay').classList.add('qr-overlay--visible');
+    }
+
+    // ===== 体检进度（已检/未检 Tab） =====
+    var ROUTINE_PROJECTS = [
+      '一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
+      '血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
+      '甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
+      '甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
+      '骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
+    ];
+    var GASTRO_PROJECTS = ['胃镜检查', '肠镜检查'];
+
+    function renderItem(name, isDone) {
+      return '<div class="project-item">' +
+        '<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
+        (isDone ? '&#10003;' : '&#9679;') + '</div>' +
+        '<div class="project-item__name">' + name + '</div>' +
+        '<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
+        (isDone ? '已体检' : '未检') + '</div></div>';
+    }
+
+    // 按前缀填充某面板的已检/未检列表
+    function fillProgress(prefix, projects, doneCount) {
+      var doneList = projects.slice(0, doneCount);
+      var pendingList = projects.slice(doneCount);
+      document.getElementById(prefix + 'ProgDoneList').innerHTML =
+        doneList.length ? doneList.map(function(n) { return renderItem(n, true); }).join('')
+        : '<div class="project-item"><div class="project-item__icon project-item__icon--pending">&#9679;</div><div class="project-item__name">暂无已检项目</div></div>';
+      document.getElementById(prefix + 'ProgPendingList').innerHTML =
+        pendingList.length ? pendingList.map(function(n) { return renderItem(n, false); }).join('')
+        : '<div class="project-item"><div class="project-item__icon project-item__icon--done">&#10003;</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
+      document.getElementById(prefix + 'TabDone').textContent = '已检项目 (' + doneCount + ')';
+      document.getElementById(prefix + 'TabPending').textContent = '未检项目 (' + pendingList.length + ')';
+    }
+
+    function switchProg(prefix, idx) {
+      var done = document.getElementById(prefix + 'TabDone');
+      var pending = document.getElementById(prefix + 'TabPending');
+      done.classList.toggle('project-tabs__btn--active', idx === 0);
+      pending.classList.toggle('project-tabs__btn--active', idx === 1);
+      document.getElementById(prefix + 'ProgDoneList').classList.toggle('hidden', idx !== 0);
+      document.getElementById(prefix + 'ProgPendingList').classList.toggle('hidden', idx !== 1);
+    }
+
+    // ===== 已取消详情：已选体检项目（自选/必检） =====
+    var PICKED_PROJECTS = [
+      { name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
+      { name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
+      { name: '尿常规', desc: '尿蛋白、尿糖、尿潜血等', price: 45, type: 'required', level: 'normal' },
+      { name: '肝功能', desc: 'ALT、AST、总胆红素等', price: 160, type: 'required', level: 'key' },
+      { name: '肾功能', desc: '肌酐、尿素氮、尿酸等', price: 110, type: 'required', level: 'key' },
+      { name: '血脂四项', desc: '总胆固醇、甘油三酯、HDL、LDL', price: 90, type: 'required', level: 'normal' },
+      { name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
+      { name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
+      { name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
+      { name: '腹部彩超', desc: '肝胆脾胰肾彩色超声', price: 180, type: 'optional', level: 'key' },
+      { name: '甲状腺彩超', desc: '甲状腺彩色多普勒超声', price: 150, type: 'optional', level: 'key' },
+      { name: '肿瘤标志物', desc: 'AFP、CEA、CA199等', price: 280, type: 'optional', level: 'key' },
+      { name: '幽门螺杆菌', desc: 'C14呼气试验', price: 120, type: 'optional', level: 'normal' },
+      { name: '骨密度检测', desc: '超声骨密度检测', price: 100, type: 'optional', level: 'normal' }
+    ];
+
+    function renderPicked(activeTab) {
+      var list = PICKED_PROJECTS.filter(function(item) { return item.type === activeTab; });
+      document.getElementById('rcPickedList').innerHTML = list.map(function(item) {
+        var badgeText = item.level === 'key' ? '重点' : '一般';
+        var badgeClass = item.level === 'key' ? 'picked-item__badge--key' : 'picked-item__badge--normal';
+        return '<div class="picked-item">' +
+          '<div class="picked-item__dot"></div>' +
+          '<div class="picked-item__info"><div class="picked-item__name">' + item.name + '</div>' +
+          '<div class="picked-item__desc">' + item.desc + '</div></div>' +
+          '<div class="picked-item__price">¥' + item.price + '</div>' +
+          '<div class="picked-item__badge ' + badgeClass + '">' + badgeText + '</div></div>';
+      }).join('');
+    }
+
+    // [交互] 切换自选项目/必检项目列表
+    function switchPicked(tab) {
+      document.getElementById('rcTabOptional').classList.toggle('fee-tab--active', tab === 'optional');
+      document.getElementById('rcTabRequired').classList.toggle('fee-tab--active', tab === 'required');
+      renderPicked(tab);
+    }
+
+    // ===== 初始化 =====
+    fillProgress('r', ROUTINE_PROJECTS, 5);   // 常规·待体检 5/26
+    fillProgress('rd', ROUTINE_PROJECTS, 26); // 常规·已完成 26/26
+    fillProgress('g', GASTRO_PROJECTS, 0);    // 胃肠镜·待体检 0/2
+    fillProgress('gd', GASTRO_PROJECTS, 2);   // 胃肠镜·已完成 2/2
+    renderPicked('optional');
+
+    // [交互] URL 参数直达：?type=routine|gastro&status=pending|cancelled|done|none
+    (function initFromUrl() {
+      if (!window.URLSearchParams) { return; }
+      var params = new URLSearchParams(window.location.search);
+      var pType = params.get('type');
+      var pStatus = params.get('status');
+      if (pType === 'routine' || pType === 'gastro') { setType(pType); }
+      if (pStatus === 'pending' || pStatus === 'cancelled' || pStatus === 'done' || pStatus === 'none') {
+        setDemoStatus(pStatus);
+      }
+    })();
+    applyView();
+  </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/my-appointments-cancelled.html b/employee-app/health-checkup/my-appointments-cancelled.html
deleted file mode 100644
index 0881caf..0000000
--- a/employee-app/health-checkup/my-appointments-cancelled.html
+++ /dev/null
@@ -1,150 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-bg: #f6ffed;
-      --success-text: #52c41a;
-      --warning-bg: #fff7e6;
-      --warning-text: #fa8c16;
-      --danger-bg: #fff1f0;
-      --danger-text: #ff4d4f;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --border: #e8f3f3;
-      --shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
-    }
-    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, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
-      padding: 14px 16px 20px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .tabs {
-      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
-      background: rgba(255,255,255,0.92); border-radius: 18px;
-      box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
-      position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
-    }
-    .tabs__item {
-      height: 36px; border: none; border-radius: 14px; background: transparent;
-      color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
-      text-decoration: none; display: flex; align-items: center; justify-content: center;
-    }
-    .tabs__item--active {
-      background: var(--primary-light); color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .summary-bar {
-      margin: 14px 0 12px; padding: 16px; border-radius: 20px;
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
-    }
-    .summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
-    .summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
-    .appointment-list { display: flex; flex-direction: column; gap: 12px; }
-    .appointment-card {
-      background: #fff; border-radius: 20px; padding: 16px;
-      border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow); opacity: 0.94;
-    }
-    .appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
-    .appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
-    .appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
-    .appointment-card__status--cancelled { background: var(--danger-bg); color: var(--danger-text); }
-    .appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
-    .meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
-    .meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
-    .meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
-    .appointment-card__actions { display: flex; gap: 10px; }
-    .appointment-card__btn {
-      flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
-    }
-    .appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
-  </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">
-      <a class="nav-back" href="index.html">&#8249;</a>
-      <span class="nav-title">我的预约</span>
-    </div>
-    <div class="scroll-content">
-      <div class="tabs">
-        <a class="tabs__item" href="my-appointments-all.html">全部</a>
-        <a class="tabs__item" href="my-appointments.html">待体检</a>
-        <a class="tabs__item" href="my-appointments-done.html">已体检</a>
-        <a class="tabs__item tabs__item--active" href="my-appointments-cancelled.html">已取消</a>
-      </div>
-
-      <div class="appointment-list">
-        <a class="appointment-card" href="my-appointments-detail-cancelled.html" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">胃肠镜体检</div>
-            <div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-10</div></div>
-          </div>
-
-        </a>
-        <a class="appointment-card" href="my-appointments-detail-cancelled.html" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-01-15</div></div>
-          </div>
-
-        </a>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
diff --git a/employee-app/health-checkup/my-appointments-detail-cancelled.html b/employee-app/health-checkup/my-appointments-detail-cancelled.html
deleted file mode 100644
index e96ee3c..0000000
--- a/employee-app/health-checkup/my-appointments-detail-cancelled.html
+++ /dev/null
@@ -1,439 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-light: #f6ffed;
-      --success-text: #52c41a;
-      --danger: #ff4d4f;
-      --danger-light: #fff1f0;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --border: #e8f3f3;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --shadow: 0 10px 30px rgba(19, 194, 194, 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, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
-      padding-bottom: 120px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .page-body { padding: 16px; }
-    /* 预约状态栏 */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 16px;
-      margin-bottom: 14px;
-    }
-    .status-bar__left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .status-bar__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #fa8c16;
-    }
-    .status-bar__text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #fa8c16;
-    }
-    .status-card {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      border-radius: 24px;
-      padding: 22px 18px;
-      color: #fff;
-      box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
-    }
-    .status-card__badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: 999px;
-      background: rgba(255,255,255,0.18);
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 14px;
-    }
-    .status-card__title {
-      font-size: 24px;
-      font-weight: 700;
-      line-height: 1.25;
-      margin-bottom: 8px;
-    }
-    .status-card__desc {
-      font-size: 13px;
-      line-height: 1.7;
-      opacity: 0.92;
-    }
-    .summary-card,
-    .info-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      margin-top: 14px;
-      margin-top: 14px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 14px;
-    }
-    .summary-list,
-    .info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .summary-item,
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      align-items: flex-start;
-    }
-    .summary-item__label,
-    .info-item__label {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex-shrink: 0;
-    }
-    .summary-item__value,
-    .info-item__value {
-      font-size: 14px;
-      color: var(--text-primary);
-      font-weight: 600;
-      text-align: right;
-      line-height: 1.6;
-    }
-    .summary-item--fee {
-      margin-top: 2px;
-      padding: 14px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      align-items: center;
-    }
-    .summary-item--fee .summary-item__label {
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .summary-item--fee .summary-item__value {
-      color: var(--primary-dark);
-      font-size: 24px;
-      font-weight: 800;
-    }
-    .person-card {
-      margin-top: 14px;
-      background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #e4f7f5;
-      box-shadow: var(--shadow);
-    }
-    .person-card__header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 14px;
-    }
-    .person-card__avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
-      background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      font-weight: 700;
-      flex-shrink: 0;
-    }
-    .person-card__name {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: 4px;
-    }
-    .person-card__meta {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .tips-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #eef5f5;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
-    }
-    .tips-card__title {
-      font-size: 15px;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-    .tips-card__item {
-      display: flex;
-      gap: 8px;
-      font-size: 13px;
-      line-height: 1.7;
-      color: var(--text-secondary);
-      margin-bottom: 8px;
-    }
-    .tips-card__item:last-child { margin-bottom: 0; }
-    .tips-card__dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--primary);
-      margin-top: 8px;
-      flex-shrink: 0;
-    }
-    /* 已选体检项目 */
-    .project-section {
-      background: #fff; border-radius: 20px; padding: 18px 16px;
-      box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06); margin-top: 14px;
-    }
-    .project-section__header {
-      display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
-    }
-    .project-section__count { font-size: 13px; color: var(--text-muted); }
-    .project-section__count em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
-    .project-tabs {
-      display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
-      padding: 5px; background: #f5f7f7; border-radius: 14px; margin-bottom: 14px;
-    }
-    .project-tab {
-      height: 34px; border: none; border-radius: 10px; background: transparent;
-      color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
-    }
-    .project-tab--active {
-      background: #fff; color: var(--primary-dark);
-      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-    }
-    .project-list-panel {
-      max-height: 280px; overflow-y: auto; padding-right: 2px;
-    }
-    .project-list-panel::-webkit-scrollbar { display: none; }
-    .project-list { display: flex; flex-direction: column; gap: 10px; }
-    .project-item {
-      display: flex; align-items: center; gap: 12px; padding: 12px 14px;
-      background: #f9fbfb; border-radius: 14px; border: 1px solid #eef5f5;
-    }
-    .project-item__dot {
-      width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0;
-    }
-    .project-item__info { flex: 1; }
-    .project-item__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
-    .project-item__desc { font-size: 12px; color: var(--text-muted); }
-    .project-item__price { font-size: 13px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; }
-    .project-item__badge {
-      display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
-      border-radius: 10px; font-size: 10px; font-weight: 600; flex-shrink: 0;
-    }
-    .project-item__badge--normal { background: #f5f5f5; color: var(--text-muted); }
-    .project-item__badge--key { background: #fff1f0; color: #ff4d4f; }
-  </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">
-      <!-- [交互] 点击返回至: my-appointments-cancelled.html -->
-      <a class="nav-back" href="my-appointments-cancelled.html">‹</a>
-      <span class="nav-title">体检预约详情</span>
-    </div>
-
-    <div class="scroll-content">
-
-        <!-- 预约状态栏 -->
-        <div class="status-bar">
-          <div class="status-bar__left">
-            <div class="status-bar__dot" style="background:#ff4d4f;"></div>
-            <div class="status-bar__text" style="color:#ff4d4f;">已取消</div>
-          </div>
-        </div>
-
-        <div class="summary-card">
-          <div class="section-title">常规体检</div>
-          <div class="summary-list">
-                        <div class="summary-item">
-              <div class="summary-item__label">体检医院</div>
-              <div class="summary-item__value">宁夏宝石花医院</div>
-            </div>
-                        <div class="summary-item">
-              <div class="summary-item__label">预约日期</div>
-              <div class="summary-item__value">2026-03-23</div>
-            </div>
-                                    <div class="summary-item">
-              <div class="summary-item__label">体检员工</div>
-              <div class="summary-item__value">张旭</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">单位部门</div>
-              <div class="summary-item__value">采油一厂·xx作业区</div>
-            </div>
-
-          </div>
-        </div>
-
-        <!-- 已选体检项目 -->
-        <div class="project-section">
-          <div class="project-section__header">
-            <div class="section-title" style="margin-bottom:0">已选体检项目</div>
-            <span class="project-section__count">共 <em id="totalCount">14</em> 项</span>
-          </div>
-          <!-- [交互] 点击切换自选项目/必检项目 -->
-          <div class="project-tabs">
-            <button class="project-tab project-tab--active" type="button" data-tab="optional">自选项目(6)</button>
-            <button class="project-tab" type="button" data-tab="required">必检项目(8)</button>
-          </div>
-          <div class="project-list-panel">
-            <div class="project-list" id="projectList"></div>
-          </div>
-        </div>
-
-
-      </div>
-    </div>
-
-  <script>
-    const projects = [
-      { name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
-      { name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
-      { name: '尿常规', desc: '尿蛋白、尿糖、尿潜血等', price: 45, type: 'required', level: 'normal' },
-      { name: '肝功能', desc: 'ALT、AST、总胆红素等', price: 160, type: 'required', level: 'key' },
-      { name: '肾功能', desc: '肌酐、尿素氮、尿酸等', price: 110, type: 'required', level: 'key' },
-      { name: '血脂四项', desc: '总胆固醇、甘油三酯、HDL、LDL', price: 90, type: 'required', level: 'normal' },
-      { name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
-      { name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
-      { name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
-      { name: '腹部彩超', desc: '肝胆脾胰肾彩色超声', price: 180, type: 'optional', level: 'key' },
-      { name: '甲状腺彩超', desc: '甲状腺彩色多普勒超声', price: 150, type: 'optional', level: 'key' },
-      { name: '肿瘤标志物', desc: 'AFP、CEA、CA199等', price: 280, type: 'optional', level: 'key' },
-      { name: '幽门螺杆菌', desc: 'C14呼气试验', price: 120, type: 'optional', level: 'normal' },
-      { name: '骨密度检测', desc: '超声骨密度检测', price: 100, type: 'optional', level: 'normal' }
-    ];
-
-    let activeTab = 'optional';
-    const listEl = document.getElementById('projectList');
-    const tabButtons = document.querySelectorAll('.project-tab');
-
-    function renderProjects() {
-      const filtered = projects.filter(item => item.type === activeTab);
-      listEl.innerHTML = filtered.map(item => {
-        const badgeText = item.level === 'key' ? '重点' : '一般';
-        const badgeClass = item.level === 'key' ? 'project-item__badge--key' : 'project-item__badge--normal';
-        return `
-          <div class="project-item">
-            <div class="project-item__dot"></div>
-            <div class="project-item__info">
-              <div class="project-item__name">${item.name}</div>
-              <div class="project-item__desc">${item.desc}</div>
-            </div>
-            <div class="project-item__price">¥${item.price}</div>
-            <div class="project-item__badge ${badgeClass}">${badgeText}</div>
-          </div>
-        `;
-      }).join('');
-    }
-
-    tabButtons.forEach(btn => {
-      btn.addEventListener('click', () => {
-        tabButtons.forEach(item => item.classList.remove('project-tab--active'));
-        btn.classList.add('project-tab--active');
-        activeTab = btn.dataset.tab;
-        renderProjects();
-      });
-    });
-
-    renderProjects();
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/employee-app/health-checkup/my-appointments-detail-done.html b/employee-app/health-checkup/my-appointments-detail-done.html
deleted file mode 100644
index f12c705..0000000
--- a/employee-app/health-checkup/my-appointments-detail-done.html
+++ /dev/null
@@ -1,668 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-light: #f6ffed;
-      --success-text: #52c41a;
-      --danger: #ff4d4f;
-      --danger-light: #fff1f0;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --border: #e8f3f3;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --shadow: 0 10px 30px rgba(19, 194, 194, 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, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
-      padding-bottom: 120px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .page-body { padding: 16px; }
-    /* 预约状态栏 */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 16px;
-      margin-bottom: 14px;
-    }
-    .status-bar__left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .status-bar__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #fa8c16;
-    }
-    .status-bar__text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #fa8c16;
-    }
-    .status-bar__btn {
-      padding: 6px 14px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-      border: 1px solid rgba(255, 77, 79, 0.3);
-      background: var(--danger-light);
-      color: var(--danger);
-      cursor: pointer;
-    }
-    .status-bar__btn--disabled {
-      border: 1px solid #d9d9d9;
-      background: #f5f5f5;
-      color: #bfbfbf;
-      cursor: not-allowed;
-    }
-    /* 确认弹窗 */
-    .confirm-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 200;
-      justify-content: center;
-      align-items: center;
-    }
-    .confirm-overlay--visible { display: flex; }
-    .confirm-dialog {
-      width: 300px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 24px 20px 18px;
-      text-align: center;
-    }
-    .confirm-dialog__title {
-      font-size: 17px;
-      font-weight: 700;
-      margin-bottom: 14px;
-      color: var(--text-primary);
-    }
-    .confirm-dialog__info {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-bottom: 20px;
-      padding: 12px;
-      background: #f9fbfb;
-      border-radius: 12px;
-      border: 1px solid #f0f5f5;
-    }
-    .confirm-dialog__row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 13px;
-    }
-    .confirm-dialog__label { color: var(--text-muted); }
-    .confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
-    .confirm-dialog__actions {
-      display: flex;
-      gap: 10px;
-    }
-    .confirm-dialog__btn {
-      flex: 1;
-      height: 42px;
-      border-radius: 21px;
-      font-size: 14px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .confirm-dialog__btn--cancel {
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      border: 1px solid #ebeff2;
-    }
-    .confirm-dialog__btn--confirm {
-      background: var(--danger);
-      color: #fff;
-    }
-    .toast {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background: rgba(0,0,0,0.76);
-      color: #fff;
-      padding: 14px 24px;
-      border-radius: 12px;
-      font-size: 14px;
-      z-index: 200;
-      text-align: center;
-      max-width: 280px;
-      line-height: 1.6;
-      display: none;
-    }
-    .toast--visible { display: block; }
-    .status-card {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      border-radius: 24px;
-      padding: 22px 18px;
-      color: #fff;
-      box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
-    }
-    .status-card__badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: 999px;
-      background: rgba(255,255,255,0.18);
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 14px;
-    }
-    .status-card__title {
-      font-size: 24px;
-      font-weight: 700;
-      line-height: 1.25;
-      margin-bottom: 8px;
-    }
-    .status-card__desc {
-      font-size: 13px;
-      line-height: 1.7;
-      opacity: 0.92;
-    }
-    .summary-card,
-    .info-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      margin-top: 14px;
-      margin-top: 14px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 14px;
-    }
-    .summary-list,
-    .info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .summary-item,
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      align-items: flex-start;
-    }
-    .summary-item__label,
-    .info-item__label {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex-shrink: 0;
-    }
-    .summary-item__value,
-    .info-item__value {
-      font-size: 14px;
-      color: var(--text-primary);
-      font-weight: 600;
-      text-align: right;
-      line-height: 1.6;
-    }
-    .summary-item--fee {
-      margin-top: 2px;
-      padding: 14px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      align-items: center;
-    }
-    .summary-item--fee .summary-item__label {
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .summary-item--fee .summary-item__value {
-      color: var(--primary-dark);
-      font-size: 24px;
-      font-weight: 800;
-    }
-    .person-card {
-      margin-top: 14px;
-      background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #e4f7f5;
-      box-shadow: var(--shadow);
-    }
-    .person-card__header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 14px;
-    }
-    .person-card__avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
-      background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      font-weight: 700;
-      flex-shrink: 0;
-    }
-    .person-card__name {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: 4px;
-    }
-    .person-card__meta {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .tips-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #eef5f5;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
-    }
-    .tips-card__title {
-      font-size: 15px;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-    .tips-card__item {
-      display: flex;
-      gap: 8px;
-      font-size: 13px;
-      line-height: 1.7;
-      color: var(--text-secondary);
-      margin-bottom: 8px;
-    }
-    .tips-card__item:last-child { margin-bottom: 0; }
-    .tips-card__dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--primary);
-      margin-top: 8px;
-      flex-shrink: 0;
-    }
-    .qrcode-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-    }
-    .qrcode-wrap__img {
-      width: 160px;
-      height: 160px;
-      border-radius: 12px;
-      border: 1px solid #eef5f5;
-      cursor: pointer;
-      transition: transform 0.2s;
-    }
-    .qrcode-wrap__img:hover { transform: scale(1.04); }
-    .qrcode-wrap__hint {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    /* 二维码放大遮罩 */
-    .qr-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.6);
-      z-index: 100;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-    }
-    .qr-overlay--visible { display: flex; }
-    .qr-overlay__img {
-      width: 260px;
-      height: 260px;
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-    /* 体检进度 */
-    .progress-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .progress-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 14px;
-    }
-    .progress-card__title {
-      font-size: 16px;
-      font-weight: 700;
-    }
-    .progress-card__ratio {
-      font-size: 13px;
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .progress-bar-lg {
-      height: 10px;
-      border-radius: 999px;
-      background: #eef3f3;
-      overflow: hidden;
-      margin-bottom: 16px;
-    }
-    .progress-bar-lg__fill {
-      height: 100%;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
-    }
-    .project-tabs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 8px;
-      margin-bottom: 14px;
-    }
-    .project-tabs__btn {
-      height: 34px;
-      border: none;
-      border-radius: 12px;
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .project-tabs__btn--active {
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .project-list { display: flex; flex-direction: column; gap: 8px; }
-    .project-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 12px;
-      border-radius: 14px;
-      background: #f9fbfb;
-      border: 1px solid #f0f5f5;
-    }
-    .project-item__icon {
-      width: 28px;
-      height: 28px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      font-size: 14px;
-    }
-    .project-item__icon--done {
-      background: var(--success-light);
-      color: var(--success-text);
-    }
-    .project-item__icon--pending {
-      background: #fff7e6;
-      color: #fa8c16;
-    }
-    .project-item__name {
-      flex: 1;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .project-item__status {
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .project-item__status--done { color: var(--success-text); }
-    .project-item__status--pending { color: #fa8c16; }
-    .hidden { display: none !important; }
-    .bottom-actions {
-      position: absolute;
-      left: 16px;
-      right: 16px;
-      bottom: 18px;
-      display: flex;
-      gap: 12px;
-      padding-bottom: 16px;
-    }
-    .bottom-actions__btn {
-      flex: 1;
-      height: 48px;
-      border-radius: 24px;
-      font-size: 15px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .bottom-actions__btn--ghost {
-      background: var(--danger-light);
-      color: var(--danger);
-      border: 1px solid rgba(255, 77, 79, 0.2);
-    }
-    .bottom-actions__btn--primary {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff;
-      box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
-    }
-  </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">
-      <!-- [交互] 点击返回至: my-appointments-done.html -->
-      <a class="nav-back" href="my-appointments-done.html">‹</a>
-      <span class="nav-title">体检预约详情</span>
-    </div>
-
-    <div class="scroll-content">
-
-        <!-- 预约状态栏 -->
-        <div class="status-bar">
-          <div class="status-bar__left">
-            <div class="status-bar__dot" style="background:#52c41a;"></div>
-            <div class="status-bar__text" style="color:#52c41a;">已体检</div>
-          </div>
-        </div>
-
-        <div class="summary-card">
-          <div class="section-title">常规体检</div>
-          <div class="summary-list">
-                        <div class="summary-item">
-              <div class="summary-item__label">体检医院</div>
-              <div class="summary-item__value">宁夏宝石花医院</div>
-            </div>
-                        <div class="summary-item">
-              <div class="summary-item__label">预约日期</div>
-              <div class="summary-item__value">2026-03-23</div>
-            </div>
-                                    <div class="summary-item">
-              <div class="summary-item__label">体检员工</div>
-              <div class="summary-item__value">张旭</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">单位部门</div>
-              <div class="summary-item__value">采油一厂·xx作业区</div>
-            </div>
-
-          </div>
-        </div>
-
-        <!-- 体检进度 -->
-        <div class="progress-card">
-          <div class="progress-card__header">
-            <div class="progress-card__title">体检进度</div>
-            <div class="progress-card__ratio" id="progressRatio">26 / 26 项</div>
-          </div>
-          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 100%;"></div></div>
-
-          <!-- [交互] 点击切换已检/未检 Tab -->
-          <div class="project-tabs" id="projectTabs">
-            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
-            <button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
-          </div>
-
-          <!-- 已检项目列表（JS动态生成） -->
-          <div class="project-list" id="doneList"></div>
-
-          <!-- 未检项目列表（默认隐藏，JS动态生成） -->
-          <div class="project-list hidden" id="pendingList"></div>
-        </div>
-
-
-      </div>
-    </div>
-
-<!--    <div class="bottom-actions">-->
-<!--      &lt;!&ndash; [交互] 点击跳转至: my-appointments.html &ndash;&gt;-->
-<!--      <button class="bottom-actions__btn bottom-actions__btn&#45;&#45;ghost" onclick="window.location.href='my-appointments.html'">取消预约</button>-->
-<!--      &lt;!&ndash; [交互] 点击跳转至: hospital-checkin.html &ndash;&gt;-->
-<!--      <button class="bottom-actions__btn bottom-actions__btn&#45;&#45;primary" onclick="window.location.href='hospital-checkin.html'">到院体检</button>-->
-<!--    </div>-->
-<!--  </div>-->
-  <!-- 二维码放大遮罩 -->
-  <div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
-    <svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
-      <rect width="160" height="160" fill="#fff"/>
-      <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
-    </svg>
-  </div>
-  <script>
-    function switchTab(idx) {
-      var btns = document.querySelectorAll('.project-tabs__btn');
-      btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
-      btns[idx].classList.add('project-tabs__btn--active');
-      document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
-      document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
-    }
-
-    var totalCount = 26;
-    var doneCount = 26;
-    var allProjects = [
-      '一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
-      '血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
-      '甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
-      '甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
-      '骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
-    ];
-
-    function renderItem(name) {
-      return '<div class="project-item">' +
-        '<div class="project-item__icon project-item__icon--done">&#10003;</div>' +
-        '<div class="project-item__name">' + name + '</div>' +
-        '<div class="project-item__status project-item__status--done">已体检</div></div>';
-    }
-
-    document.getElementById('doneList').innerHTML = allProjects.map(function(n) { return renderItem(n); }).join('');
-    document.getElementById('pendingList').innerHTML = '<div class="project-item"><div class="project-item__icon project-item__icon--done">&#10003;</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
-    document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
-    document.getElementById('tabPending').textContent = '未检项目 (0)';
-    document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
-    document.getElementById('progressFill').style.width = '100%';
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/employee-app/health-checkup/my-appointments-detail-gastro-done.html b/employee-app/health-checkup/my-appointments-detail-gastro-done.html
deleted file mode 100644
index fb962e0..0000000
--- a/employee-app/health-checkup/my-appointments-detail-gastro-done.html
+++ /dev/null
@@ -1,395 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-light: #f6ffed;
-      --success-text: #52c41a;
-      --danger: #ff4d4f;
-      --danger-light: #fff1f0;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --border: #e8f3f3;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --shadow: 0 10px 30px rgba(19, 194, 194, 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, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
-      padding-bottom: 120px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .page-body { padding: 16px; }
-    /* 预约状态栏 */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 16px;
-      margin-bottom: 14px;
-    }
-    .status-bar__left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .status-bar__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #fa8c16;
-    }
-    .status-bar__text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #fa8c16;
-    }
-    .status-bar__btn {
-      padding: 6px 14px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-      border: 1px solid rgba(255, 77, 79, 0.3);
-      background: var(--danger-light);
-      color: var(--danger);
-      cursor: pointer;
-    }
-    .status-bar__btn--disabled {
-      border: 1px solid #d9d9d9;
-      background: #f5f5f5;
-      color: #bfbfbf;
-      cursor: not-allowed;
-    }
-    .summary-card,
-    .info-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      margin-top: 14px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 14px;
-    }
-    .summary-list,
-    .info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .summary-item,
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      align-items: flex-start;
-    }
-    .summary-item__label,
-    .info-item__label {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex-shrink: 0;
-    }
-    .summary-item__value,
-    .info-item__value {
-      font-size: 14px;
-      color: var(--text-primary);
-      font-weight: 600;
-      text-align: right;
-      line-height: 1.6;
-    }
-    .summary-item--fee {
-      margin-top: 2px;
-      padding: 14px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      align-items: center;
-    }
-    .summary-item--fee .summary-item__label {
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .summary-item--fee .summary-item__value {
-      color: var(--primary-dark);
-      font-size: 24px;
-      font-weight: 800;
-    }
-    /* 体检进度 */
-    .progress-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .progress-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 14px;
-    }
-    .progress-card__title {
-      font-size: 16px;
-      font-weight: 700;
-    }
-    .progress-card__ratio {
-      font-size: 13px;
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .progress-bar-lg {
-      height: 10px;
-      border-radius: 999px;
-      background: #eef3f3;
-      overflow: hidden;
-      margin-bottom: 16px;
-    }
-    .progress-bar-lg__fill {
-      height: 100%;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
-    }
-    .project-tabs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 8px;
-      margin-bottom: 14px;
-    }
-    .project-tabs__btn {
-      height: 34px;
-      border: none;
-      border-radius: 12px;
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .project-tabs__btn--active {
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .project-list { display: flex; flex-direction: column; gap: 8px; }
-    .project-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 12px;
-      border-radius: 14px;
-      background: #f9fbfb;
-      border: 1px solid #f0f5f5;
-    }
-    .project-item__icon {
-      width: 28px;
-      height: 28px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      font-size: 14px;
-    }
-    .project-item__icon--done {
-      background: var(--success-light);
-      color: var(--success-text);
-    }
-    .project-item__icon--pending {
-      background: #fff7e6;
-      color: #fa8c16;
-    }
-    .project-item__name {
-      flex: 1;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .project-item__status {
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .project-item__status--done { color: var(--success-text); }
-    .project-item__status--pending { color: #fa8c16; }
-    .hidden { display: none !important; }
-  </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">
-      <!-- [交互] 点击返回至: my-appointments-done.html -->
-      <a class="nav-back" href="my-appointments-done.html">‹</a>
-      <span class="nav-title">体检预约详情</span>
-    </div>
-
-    <div class="scroll-content">
-
-        <!-- 预约状态栏 -->
-        <div class="status-bar">
-          <div class="status-bar__left">
-            <div class="status-bar__dot" style="background:#52c41a;"></div>
-            <div class="status-bar__text" style="color:#52c41a;">已体检</div>
-          </div>
-        </div>
-
-        <div class="summary-card">
-          <div class="section-title">胃肠镜体检</div>
-          <div class="summary-list">
-            <div class="summary-item">
-              <div class="summary-item__label">体检医院</div>
-              <div class="summary-item__value">宁夏宝石花医院</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检员工</div>
-              <div class="summary-item__value">刘韵琴</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检地址</div>
-              <div class="summary-item__value">银川市西夏区怀远路148号</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检日期</div>
-              <div class="summary-item__value">2026年3月23日</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检项目</div>
-              <div class="summary-item__value">胃肠镜体检</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 体检进度 -->
-        <div class="progress-card">
-          <div class="progress-card__header">
-            <div class="progress-card__title">体检进度</div>
-            <div class="progress-card__ratio" id="progressRatio">2 / 2 项</div>
-          </div>
-          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 100%;"></div></div>
-
-          <!-- [交互] 点击切换已检/未检 Tab -->
-          <div class="project-tabs" id="projectTabs">
-            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
-            <button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
-          </div>
-
-          <!-- 已检项目列表（JS动态生成） -->
-          <div class="project-list" id="doneList"></div>
-
-          <!-- 未检项目列表（默认隐藏，JS动态生成） -->
-          <div class="project-list hidden" id="pendingList"></div>
-        </div>
-
-      </div>
-    </div>
-
-  <script>
-    function switchTab(idx) {
-      var btns = document.querySelectorAll('.project-tabs__btn');
-      btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
-      btns[idx].classList.add('project-tabs__btn--active');
-      document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
-      document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
-    }
-
-    var totalCount = 2;
-    var doneCount = 2;
-    var allProjects = ['胃镜检查', '肠镜检查'];
-
-    function renderItem(name) {
-      return '<div class="project-item">' +
-        '<div class="project-item__icon project-item__icon--done">&#10003;</div>' +
-        '<div class="project-item__name">' + name + '</div>' +
-        '<div class="project-item__status project-item__status--done">已体检</div></div>';
-    }
-
-    document.getElementById('doneList').innerHTML = allProjects.map(function(n) { return renderItem(n); }).join('');
-    document.getElementById('pendingList').innerHTML = '<div class="project-item"><div class="project-item__icon project-item__icon--done">&#10003;</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
-    document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
-    document.getElementById('tabPending').textContent = '未检项目 (0)';
-    document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
-    document.getElementById('progressFill').style.width = '100%';
-  </script>
-</body>
-</html>
diff --git a/employee-app/health-checkup/my-appointments-detail-gastro.html b/employee-app/health-checkup/my-appointments-detail-gastro.html
deleted file mode 100644
index e20fce1..0000000
--- a/employee-app/health-checkup/my-appointments-detail-gastro.html
+++ /dev/null
@@ -1,765 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-light: #f6ffed;
-      --success-text: #52c41a;
-      --danger: #ff4d4f;
-      --danger-light: #fff1f0;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --border: #e8f3f3;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --shadow: 0 10px 30px rgba(19, 194, 194, 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, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
-      padding-bottom: 120px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .page-body { padding: 16px; }
-    /* 预约状态栏 */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 16px;
-      margin-bottom: 14px;
-    }
-    .status-bar__left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .status-bar__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #fa8c16;
-    }
-    .status-bar__text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #fa8c16;
-    }
-    .status-bar__btn {
-      padding: 6px 14px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-      border: 1px solid rgba(255, 77, 79, 0.3);
-      background: var(--danger-light);
-      color: var(--danger);
-      cursor: pointer;
-    }
-    .status-bar__btn--disabled {
-      border: 1px solid #d9d9d9;
-      background: #f5f5f5;
-      color: #bfbfbf;
-      cursor: not-allowed;
-    }
-    /* 确认弹窗 */
-    .confirm-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 200;
-      justify-content: center;
-      align-items: center;
-    }
-    .confirm-overlay--visible { display: flex; }
-    .confirm-dialog {
-      width: 300px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 24px 20px 18px;
-      text-align: center;
-    }
-    .confirm-dialog__title {
-      font-size: 17px;
-      font-weight: 700;
-      margin-bottom: 14px;
-      color: var(--text-primary);
-    }
-    .confirm-dialog__info {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-bottom: 20px;
-      padding: 12px;
-      background: #f9fbfb;
-      border-radius: 12px;
-      border: 1px solid #f0f5f5;
-    }
-    .confirm-dialog__row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 13px;
-    }
-    .confirm-dialog__label { color: var(--text-muted); }
-    .confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
-    .confirm-dialog__actions {
-      display: flex;
-      gap: 10px;
-    }
-    .confirm-dialog__btn {
-      flex: 1;
-      height: 42px;
-      border-radius: 21px;
-      font-size: 14px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .confirm-dialog__btn--cancel {
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      border: 1px solid #ebeff2;
-    }
-    .confirm-dialog__btn--confirm {
-      background: var(--danger);
-      color: #fff;
-    }
-    .toast {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background: rgba(0,0,0,0.76);
-      color: #fff;
-      padding: 14px 24px;
-      border-radius: 12px;
-      font-size: 14px;
-      z-index: 200;
-      text-align: center;
-      max-width: 280px;
-      line-height: 1.6;
-      display: none;
-    }
-    .toast--visible { display: block; }
-    .status-card {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      border-radius: 24px;
-      padding: 22px 18px;
-      color: #fff;
-      box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
-    }
-    .status-card__badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: 999px;
-      background: rgba(255,255,255,0.18);
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 14px;
-    }
-    .status-card__title {
-      font-size: 24px;
-      font-weight: 700;
-      line-height: 1.25;
-      margin-bottom: 8px;
-    }
-    .status-card__desc {
-      font-size: 13px;
-      line-height: 1.7;
-      opacity: 0.92;
-    }
-    .summary-card,
-    .info-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      margin-top: 14px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 14px;
-    }
-    .summary-list,
-    .info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .summary-item,
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      align-items: flex-start;
-    }
-    .summary-item__label,
-    .info-item__label {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex-shrink: 0;
-    }
-    .summary-item__value,
-    .info-item__value {
-      font-size: 14px;
-      color: var(--text-primary);
-      font-weight: 600;
-      text-align: right;
-      line-height: 1.6;
-    }
-    .summary-item--fee {
-      margin-top: 2px;
-      padding: 14px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      align-items: center;
-    }
-    .summary-item--fee .summary-item__label {
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .summary-item--fee .summary-item__value {
-      color: var(--primary-dark);
-      font-size: 24px;
-      font-weight: 800;
-    }
-    .person-card {
-      margin-top: 14px;
-      background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #e4f7f5;
-      box-shadow: var(--shadow);
-    }
-    .person-card__header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 14px;
-    }
-    .person-card__avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
-      background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      font-weight: 700;
-      flex-shrink: 0;
-    }
-    .person-card__name {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: 4px;
-    }
-    .person-card__meta {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .tips-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #eef5f5;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
-    }
-    .tips-card__title {
-      font-size: 15px;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-    .tips-card__item {
-      display: flex;
-      gap: 8px;
-      font-size: 13px;
-      line-height: 1.7;
-      color: var(--text-secondary);
-      margin-bottom: 8px;
-    }
-    .tips-card__item:last-child { margin-bottom: 0; }
-    .tips-card__dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--primary);
-      margin-top: 8px;
-      flex-shrink: 0;
-    }
-    .qrcode-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-    }
-    .qrcode-wrap__img {
-      width: 160px;
-      height: 160px;
-      border-radius: 12px;
-      border: 1px solid #eef5f5;
-      cursor: pointer;
-      transition: transform 0.2s;
-    }
-    .qrcode-wrap__img:hover { transform: scale(1.04); }
-    .qrcode-wrap__hint {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    /* 二维码放大遮罩 */
-    .qr-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.6);
-      z-index: 100;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-    }
-    .qr-overlay--visible { display: flex; }
-    .qr-overlay__img {
-      width: 260px;
-      height: 260px;
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-    /* 体检进度 */
-    .progress-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .progress-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 14px;
-    }
-    .progress-card__title {
-      font-size: 16px;
-      font-weight: 700;
-    }
-    .progress-card__ratio {
-      font-size: 13px;
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .progress-bar-lg {
-      height: 10px;
-      border-radius: 999px;
-      background: #eef3f3;
-      overflow: hidden;
-      margin-bottom: 16px;
-    }
-    .progress-bar-lg__fill {
-      height: 100%;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
-    }
-    .project-tabs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 8px;
-      margin-bottom: 14px;
-    }
-    .project-tabs__btn {
-      height: 34px;
-      border: none;
-      border-radius: 12px;
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .project-tabs__btn--active {
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .project-list { display: flex; flex-direction: column; gap: 8px; }
-    .project-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 12px;
-      border-radius: 14px;
-      background: #f9fbfb;
-      border: 1px solid #f0f5f5;
-    }
-    .project-item__icon {
-      width: 28px;
-      height: 28px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      font-size: 14px;
-    }
-    .project-item__icon--done {
-      background: var(--success-light);
-      color: var(--success-text);
-    }
-    .project-item__icon--pending {
-      background: #fff7e6;
-      color: #fa8c16;
-    }
-    .project-item__name {
-      flex: 1;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .project-item__status {
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .project-item__status--done { color: var(--success-text); }
-    .project-item__status--pending { color: #fa8c16; }
-    .hidden { display: none !important; }
-    .bottom-actions {
-      position: absolute;
-      left: 16px;
-      right: 16px;
-      bottom: 18px;
-      display: flex;
-      gap: 12px;
-      padding-bottom: 16px;
-    }
-    .bottom-actions__btn {
-      flex: 1;
-      height: 48px;
-      border-radius: 24px;
-      font-size: 15px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .bottom-actions__btn--ghost {
-      background: var(--danger-light);
-      color: var(--danger);
-      border: 1px solid rgba(255, 77, 79, 0.2);
-    }
-    .bottom-actions__btn--primary {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff;
-      box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
-    }
-  </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">
-      <!-- [交互] 点击返回至: my-appointments.html -->
-      <a class="nav-back" href="my-appointments.html">‹</a>
-      <span class="nav-title">体检预约详情</span>
-    </div>
-
-    <div class="scroll-content">
-
-        <!-- 预约状态栏 -->
-        <div class="status-bar">
-          <div class="status-bar__left">
-            <div class="status-bar__dot"></div>
-            <div class="status-bar__text">待体检</div>
-          </div>
-          <button class="status-bar__btn" id="cancelBtn">取消预约</button>
-        </div>
-
-        <div class="summary-card">
-          <div class="section-title">胃肠镜体检</div>
-          <div class="summary-list">
-            <div class="summary-item">
-              <div class="summary-item__label">体检医院</div>
-              <div class="summary-item__value">宁夏宝石花医院</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检员工</div>
-              <div class="summary-item__value">刘韵琴</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检地址</div>
-              <div class="summary-item__value">银川市西夏区怀远路148号</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检日期</div>
-              <div class="summary-item__value">2026年3月23日</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">体检项目</div>
-              <div class="summary-item__value">胃肠镜体检</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 体检须知 -->
-        <div class="tips-card">
-          <div class="tips-card__title">体检须知</div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前3天请清淡饮食，避免高纤维、高脂肪食物。</span></div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前一天晚上需服用肠道清洁剂，具体用法请遵医嘱。</span></div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>检查当天需空腹，禁食禁水至少8小时。</span></div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>请携带本人身份证件按时前往医院。</span></div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>若选择无痛胃肠镜，检查后24小时内请勿驾车。</span></div>
-          <div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
-        </div>
-
-        <div class="person-card">
-          <div class="section-title">体检签到码</div>
-          <div class="qrcode-wrap">
-            <!-- [交互] 点击二维码放大展示 -->
-            <svg class="qrcode-wrap__img" onclick="document.getElementById('qrOverlay').classList.add('qr-overlay--visible')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
-              <rect width="160" height="160" fill="#fff"/>
-              <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
-            </svg>
-            <span class="qrcode-wrap__hint">点击二维码可放大查看</span>
-          </div>
-        </div>
-
-        <!-- 体检进度 -->
-        <div class="progress-card">
-          <div class="progress-card__header">
-            <div class="progress-card__title">体检进度</div>
-            <div class="progress-card__ratio" id="progressRatio">0 / 2 项</div>
-          </div>
-          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 0%;"></div></div>
-
-          <!-- [交互] 点击切换已检/未检 Tab -->
-          <div class="project-tabs" id="projectTabs">
-            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
-            <button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
-          </div>
-
-          <!-- 已检项目列表（JS动态生成） -->
-          <div class="project-list" id="doneList"></div>
-
-          <!-- 未检项目列表（默认隐藏，JS动态生成） -->
-          <div class="project-list hidden" id="pendingList"></div>
-        </div>
-
-      </div>
-    </div>
-
-  <!-- 二维码放大遮罩 -->
-  <div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
-    <svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
-      <rect width="160" height="160" fill="#fff"/>
-      <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
-    </svg>
-  </div>
-  <script>
-    function switchTab(idx) {
-      var btns = document.querySelectorAll('.project-tabs__btn');
-      btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
-      btns[idx].classList.add('project-tabs__btn--active');
-      document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
-      document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
-    }
-    function showToast(msg) {
-      var t = document.getElementById('cancelToast');
-      t.textContent = msg;
-      t.classList.add('toast--visible');
-      setTimeout(function() { t.classList.remove('toast--visible'); }, 2000);
-    }
-
-    // 读取 URL 参数
-    var params = new URLSearchParams(window.location.search);
-    var doneCount = parseInt(params.get('done') || '0', 10);
-    var totalCount = parseInt(params.get('total') || '2', 10);
-    var hospital = params.get('hospital') || '宁夏宝石花医院';
-    var date = params.get('date') || '2026-03-23';
-
-    // 动态更新体检进度
-    var pct = totalCount > 0 ? Math.round(doneCount / totalCount * 1000) / 10 : 0;
-    document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
-    document.getElementById('progressFill').style.width = pct + '%';
-
-    // 胃肠镜体检项目池
-    var allProjects = ['胃镜检查', '肠镜检查'];
-    var projects = allProjects.slice(0, totalCount);
-    var doneProjects = projects.slice(0, doneCount);
-    var pendingProjects = projects.slice(doneCount);
-
-    function renderItem(name, isDone) {
-      return '<div class="project-item">' +
-        '<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
-        (isDone ? '&#10003;' : '&#9679;') + '</div>' +
-        '<div class="project-item__name">' + name + '</div>' +
-        '<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
-        (isDone ? '已体检' : '未检') + '</div></div>';
-    }
-
-    document.getElementById('doneList').innerHTML = doneProjects.map(function(n) { return renderItem(n, true); }).join('');
-    document.getElementById('pendingList').innerHTML = pendingProjects.map(function(n) { return renderItem(n, false); }).join('');
-    document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
-    document.getElementById('tabPending').textContent = '未检项目 (' + pendingProjects.length + ')';
-
-    // done=0 时默认显示未检 Tab
-    if (doneCount === 0) {
-      switchTab(1);
-    }
-
-    // 根据进度控制取消按钮状态
-    var cancelBtn = document.getElementById('cancelBtn');
-    if (doneCount > 0) {
-      // 已有体检进度 → 按钮禁用，点击弹 toast
-      cancelBtn.classList.add('status-bar__btn--disabled');
-      cancelBtn.disabled = false;
-      cancelBtn.onclick = function() {
-        showToast('您当前已体检了部分项目，无法取消预约');
-      };
-    } else {
-      // 无体检进度 → 按钮可点击，弹二次确认
-      cancelBtn.classList.remove('status-bar__btn--disabled');
-      cancelBtn.disabled = false;
-      cancelBtn.onclick = function() {
-        document.getElementById('confirmHospital').textContent = hospital;
-        document.getElementById('confirmDate').textContent = date;
-        document.getElementById('confirmOverlay').classList.add('confirm-overlay--visible');
-      };
-    }
-  </script>
-  <div class="toast" id="cancelToast"></div>
-  <!-- 取消预约二次确认弹窗 -->
-  <div class="confirm-overlay" id="confirmOverlay">
-    <div class="confirm-dialog">
-      <div class="confirm-dialog__title">是否确认取消预约</div>
-      <div class="confirm-dialog__info">
-        <div class="confirm-dialog__row">
-          <span class="confirm-dialog__label">体检医院</span>
-          <span class="confirm-dialog__value" id="confirmHospital">宁夏宝石花医院</span>
-        </div>
-        <div class="confirm-dialog__row">
-          <span class="confirm-dialog__label">预约日期</span>
-          <span class="confirm-dialog__value" id="confirmDate">2026-03-23</span>
-        </div>
-      </div>
-      <div class="confirm-dialog__actions">
-        <button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="document.getElementById('confirmOverlay').classList.remove('confirm-overlay--visible')">再想想</button>
-        <button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="window.location.href='my-appointments.html'">确认取消</button>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
diff --git a/employee-app/health-checkup/my-appointments-detail.html b/employee-app/health-checkup/my-appointments-detail.html
deleted file mode 100644
index 69b9c0c..0000000
--- a/employee-app/health-checkup/my-appointments-detail.html
+++ /dev/null
@@ -1,771 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-light: #f6ffed;
-      --success-text: #52c41a;
-      --danger: #ff4d4f;
-      --danger-light: #fff1f0;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --border: #e8f3f3;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --shadow: 0 10px 30px rgba(19, 194, 194, 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, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
-      padding-bottom: 120px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .page-body { padding: 16px; }
-    /* 预约状态栏 */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 16px;
-      margin-bottom: 14px;
-    }
-    .status-bar__left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .status-bar__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #fa8c16;
-    }
-    .status-bar__text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #fa8c16;
-    }
-    .status-bar__btn {
-      padding: 6px 14px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-      border: 1px solid rgba(255, 77, 79, 0.3);
-      background: var(--danger-light);
-      color: var(--danger);
-      cursor: pointer;
-    }
-    .status-bar__btn--disabled {
-      border: 1px solid #d9d9d9;
-      background: #f5f5f5;
-      color: #bfbfbf;
-      cursor: not-allowed;
-    }
-    /* 确认弹窗 */
-    .confirm-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 200;
-      justify-content: center;
-      align-items: center;
-    }
-    .confirm-overlay--visible { display: flex; }
-    .confirm-dialog {
-      width: 300px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 24px 20px 18px;
-      text-align: center;
-    }
-    .confirm-dialog__title {
-      font-size: 17px;
-      font-weight: 700;
-      margin-bottom: 14px;
-      color: var(--text-primary);
-    }
-    .confirm-dialog__info {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-bottom: 20px;
-      padding: 12px;
-      background: #f9fbfb;
-      border-radius: 12px;
-      border: 1px solid #f0f5f5;
-    }
-    .confirm-dialog__row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 13px;
-    }
-    .confirm-dialog__label { color: var(--text-muted); }
-    .confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
-    .confirm-dialog__actions {
-      display: flex;
-      gap: 10px;
-    }
-    .confirm-dialog__btn {
-      flex: 1;
-      height: 42px;
-      border-radius: 21px;
-      font-size: 14px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .confirm-dialog__btn--cancel {
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      border: 1px solid #ebeff2;
-    }
-    .confirm-dialog__btn--confirm {
-      background: var(--danger);
-      color: #fff;
-    }
-    .toast {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background: rgba(0,0,0,0.76);
-      color: #fff;
-      padding: 14px 24px;
-      border-radius: 12px;
-      font-size: 14px;
-      z-index: 200;
-      text-align: center;
-      max-width: 280px;
-      line-height: 1.6;
-      display: none;
-    }
-    .toast--visible { display: block; }
-    .status-card {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      border-radius: 24px;
-      padding: 22px 18px;
-      color: #fff;
-      box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
-    }
-    .status-card__badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: 999px;
-      background: rgba(255,255,255,0.18);
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 14px;
-    }
-    .status-card__title {
-      font-size: 24px;
-      font-weight: 700;
-      line-height: 1.25;
-      margin-bottom: 8px;
-    }
-    .status-card__desc {
-      font-size: 13px;
-      line-height: 1.7;
-      opacity: 0.92;
-    }
-    .summary-card,
-    .info-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      margin-top: 14px;
-      margin-top: 14px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 700;
-      margin-bottom: 14px;
-    }
-    .summary-list,
-    .info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .summary-item,
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      align-items: flex-start;
-    }
-    .summary-item__label,
-    .info-item__label {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex-shrink: 0;
-    }
-    .summary-item__value,
-    .info-item__value {
-      font-size: 14px;
-      color: var(--text-primary);
-      font-weight: 600;
-      text-align: right;
-      line-height: 1.6;
-    }
-    .summary-item--fee {
-      margin-top: 2px;
-      padding: 14px;
-      border-radius: 18px;
-      background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
-      border: 1px solid #d7f5f3;
-      align-items: center;
-    }
-    .summary-item--fee .summary-item__label {
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .summary-item--fee .summary-item__value {
-      color: var(--primary-dark);
-      font-size: 24px;
-      font-weight: 800;
-    }
-    .person-card {
-      margin-top: 14px;
-      background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #e4f7f5;
-      box-shadow: var(--shadow);
-    }
-    .person-card__header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 14px;
-    }
-    .person-card__avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 16px;
-      background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      font-weight: 700;
-      flex-shrink: 0;
-    }
-    .person-card__name {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: 4px;
-    }
-    .person-card__meta {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .tips-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid #eef5f5;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
-    }
-    .tips-card__title {
-      font-size: 15px;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-    .tips-card__item {
-      display: flex;
-      gap: 8px;
-      font-size: 13px;
-      line-height: 1.7;
-      color: var(--text-secondary);
-      margin-bottom: 8px;
-    }
-    .tips-card__item:last-child { margin-bottom: 0; }
-    .tips-card__dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--primary);
-      margin-top: 8px;
-      flex-shrink: 0;
-    }
-    .qrcode-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-    }
-    .qrcode-wrap__img {
-      width: 160px;
-      height: 160px;
-      border-radius: 12px;
-      border: 1px solid #eef5f5;
-      cursor: pointer;
-      transition: transform 0.2s;
-    }
-    .qrcode-wrap__img:hover { transform: scale(1.04); }
-    .qrcode-wrap__hint {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    /* 二维码放大遮罩 */
-    .qr-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.6);
-      z-index: 100;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-    }
-    .qr-overlay--visible { display: flex; }
-    .qr-overlay__img {
-      width: 260px;
-      height: 260px;
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-    /* 体检进度 */
-    .progress-card {
-      margin-top: 14px;
-      background: #fff;
-      border-radius: 20px;
-      padding: 18px 16px;
-      box-shadow: var(--shadow);
-      border: 1px solid rgba(19, 194, 194, 0.06);
-    }
-    .progress-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 14px;
-    }
-    .progress-card__title {
-      font-size: 16px;
-      font-weight: 700;
-    }
-    .progress-card__ratio {
-      font-size: 13px;
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-    .progress-bar-lg {
-      height: 10px;
-      border-radius: 999px;
-      background: #eef3f3;
-      overflow: hidden;
-      margin-bottom: 16px;
-    }
-    .progress-bar-lg__fill {
-      height: 100%;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
-    }
-    .project-tabs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 8px;
-      margin-bottom: 14px;
-    }
-    .project-tabs__btn {
-      height: 34px;
-      border: none;
-      border-radius: 12px;
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .project-tabs__btn--active {
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .project-list { display: flex; flex-direction: column; gap: 8px; }
-    .project-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 12px;
-      border-radius: 14px;
-      background: #f9fbfb;
-      border: 1px solid #f0f5f5;
-    }
-    .project-item__icon {
-      width: 28px;
-      height: 28px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      font-size: 14px;
-    }
-    .project-item__icon--done {
-      background: var(--success-light);
-      color: var(--success-text);
-    }
-    .project-item__icon--pending {
-      background: #fff7e6;
-      color: #fa8c16;
-    }
-    .project-item__name {
-      flex: 1;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .project-item__status {
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .project-item__status--done { color: var(--success-text); }
-    .project-item__status--pending { color: #fa8c16; }
-    .hidden { display: none !important; }
-    .bottom-actions {
-      position: absolute;
-      left: 16px;
-      right: 16px;
-      bottom: 18px;
-      display: flex;
-      gap: 12px;
-      padding-bottom: 16px;
-    }
-    .bottom-actions__btn {
-      flex: 1;
-      height: 48px;
-      border-radius: 24px;
-      font-size: 15px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .bottom-actions__btn--ghost {
-      background: var(--danger-light);
-      color: var(--danger);
-      border: 1px solid rgba(255, 77, 79, 0.2);
-    }
-    .bottom-actions__btn--primary {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff;
-      box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
-    }
-  </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">
-      <!-- [交互] 点击返回至: my-appointments.html -->
-      <a class="nav-back" href="my-appointments.html">‹</a>
-      <span class="nav-title">体检预约详情</span>
-    </div>
-
-    <div class="scroll-content">
-
-        <!-- 预约状态栏 -->
-        <div class="status-bar">
-          <div class="status-bar__left">
-            <div class="status-bar__dot"></div>
-            <div class="status-bar__text">待体检</div>
-          </div>
-          <button class="status-bar__btn status-bar__btn--disabled" id="cancelBtn" disabled>取消预约</button>
-        </div>
-
-        <div class="summary-card">
-          <div class="section-title">常规体检</div>
-          <div class="summary-list">
-                        <div class="summary-item">
-              <div class="summary-item__label">体检医院</div>
-              <div class="summary-item__value">宁夏宝石花医院</div>
-            </div>
-                        <div class="summary-item">
-              <div class="summary-item__label">预约日期</div>
-              <div class="summary-item__value">2026-03-23</div>
-            </div>
-                                    <div class="summary-item">
-              <div class="summary-item__label">体检员工</div>
-              <div class="summary-item__value">张旭</div>
-            </div>
-            <div class="summary-item">
-              <div class="summary-item__label">单位部门</div>
-              <div class="summary-item__value">采油一厂·xx作业区</div>
-            </div>
-
-          </div>
-        </div>
-
-        <div class="person-card">
-          <div class="section-title">体检签到码</div>
-          <div class="qrcode-wrap">
-            <!-- [交互] 点击二维码放大展示 -->
-            <svg class="qrcode-wrap__img" onclick="document.getElementById('qrOverlay').classList.add('qr-overlay--visible')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
-              <rect width="160" height="160" fill="#fff"/>
-              <!-- 左上定位块 -->
-              <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <!-- 右上定位块 -->
-              <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <!-- 左下定位块 -->
-              <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/>
-              <rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/>
-              <rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
-              <!-- 数据区域模拟 -->
-              <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
-              <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
-            </svg>
-            <span class="qrcode-wrap__hint">点击二维码可放大查看</span>
-          </div>
-        </div>
-
-        <!-- 体检进度 -->
-        <div class="progress-card">
-          <div class="progress-card__header">
-            <div class="progress-card__title">体检进度</div>
-            <div class="progress-card__ratio" id="progressRatio">5 / 26 项</div>
-          </div>
-          <div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 19.2%;"></div></div>
-
-          <!-- [交互] 点击切换已检/未检 Tab -->
-          <div class="project-tabs" id="projectTabs">
-            <button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
-            <button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
-          </div>
-
-          <!-- 已检项目列表（JS动态生成） -->
-          <div class="project-list" id="doneList"></div>
-
-          <!-- 未检项目列表（默认隐藏，JS动态生成） -->
-          <div class="project-list hidden" id="pendingList"></div>
-        </div>
-
-
-      </div>
-    </div>
-
-<!--    <div class="bottom-actions">-->
-<!--      &lt;!&ndash; [交互] 点击跳转至: my-appointments.html &ndash;&gt;-->
-<!--      <button class="bottom-actions__btn bottom-actions__btn&#45;&#45;ghost" onclick="window.location.href='my-appointments.html'">取消预约</button>-->
-<!--      &lt;!&ndash; [交互] 点击跳转至: hospital-checkin.html &ndash;&gt;-->
-<!--      <button class="bottom-actions__btn bottom-actions__btn&#45;&#45;primary" onclick="window.location.href='hospital-checkin.html'">到院体检</button>-->
-<!--    </div>-->
-<!--  </div>-->
-  <!-- 二维码放大遮罩 -->
-  <div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
-    <svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
-      <rect width="160" height="160" fill="#fff"/>
-      <rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
-      <rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
-      <rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
-    </svg>
-  </div>
-  <script>
-    function switchTab(idx) {
-      var btns = document.querySelectorAll('.project-tabs__btn');
-      btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
-      btns[idx].classList.add('project-tabs__btn--active');
-      document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
-      document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
-    }
-    function showToast(msg) {
-      var t = document.getElementById('cancelToast');
-      t.textContent = msg;
-      t.classList.add('toast--visible');
-      setTimeout(function() { t.classList.remove('toast--visible'); }, 2000);
-    }
-
-    // 读取 URL 参数
-    var params = new URLSearchParams(window.location.search);
-    var doneCount = parseInt(params.get('done') || '5', 10);
-    var totalCount = parseInt(params.get('total') || '26', 10);
-    var hospital = params.get('hospital') || '宁夏宝石花医院';
-    var date = params.get('date') || '2026-03-23';
-
-    // 动态更新体检进度
-    var pct = totalCount > 0 ? Math.round(doneCount / totalCount * 1000) / 10 : 0;
-    document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
-    document.getElementById('progressFill').style.width = pct + '%';
-
-    // 全部体检项目池（按常规体检顺序）
-    var allProjects = [
-      '一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
-      '血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
-      '甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
-      '甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
-      '骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
-    ];
-    // 取前 totalCount 个项目，前 doneCount 个为已检
-    var projects = allProjects.slice(0, totalCount);
-    var doneProjects = projects.slice(0, doneCount);
-    var pendingProjects = projects.slice(doneCount);
-
-    function renderItem(name, isDone) {
-      return '<div class="project-item">' +
-        '<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
-        (isDone ? '&#10003;' : '&#9679;') + '</div>' +
-        '<div class="project-item__name">' + name + '</div>' +
-        '<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
-        (isDone ? '已体检' : '未检') + '</div></div>';
-    }
-
-    document.getElementById('doneList').innerHTML = doneProjects.map(function(n) { return renderItem(n, true); }).join('');
-    document.getElementById('pendingList').innerHTML = pendingProjects.map(function(n) { return renderItem(n, false); }).join('');
-    document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
-    document.getElementById('tabPending').textContent = '未检项目 (' + pendingProjects.length + ')';
-
-    // done=0 时默认显示未检 Tab
-    if (doneCount === 0) {
-      switchTab(1);
-    }
-
-    // 根据进度控制取消按钮状态
-    var cancelBtn = document.getElementById('cancelBtn');
-    if (doneCount > 0) {
-      // 已有体检进度 → 按钮禁用，点击弹 toast
-      cancelBtn.classList.add('status-bar__btn--disabled');
-      cancelBtn.disabled = false;
-      cancelBtn.onclick = function() {
-        showToast('您当前已体检了部分项目，无法取消预约');
-      };
-    } else {
-      // 无体检进度 → 按钮可点击，弹二次确认
-      cancelBtn.classList.remove('status-bar__btn--disabled');
-      cancelBtn.disabled = false;
-      cancelBtn.onclick = function() {
-        document.getElementById('confirmHospital').textContent = hospital;
-        document.getElementById('confirmDate').textContent = date;
-        document.getElementById('confirmOverlay').classList.add('confirm-overlay--visible');
-      };
-    }
-  </script>
-  <div class="toast" id="cancelToast"></div>
-  <!-- 取消预约二次确认弹窗 -->
-  <div class="confirm-overlay" id="confirmOverlay">
-    <div class="confirm-dialog">
-      <div class="confirm-dialog__title">是否确认取消预约</div>
-      <div class="confirm-dialog__info">
-        <div class="confirm-dialog__row">
-          <span class="confirm-dialog__label">体检医院</span>
-          <span class="confirm-dialog__value" id="confirmHospital">宁夏宝石花医院</span>
-        </div>
-        <div class="confirm-dialog__row">
-          <span class="confirm-dialog__label">预约日期</span>
-          <span class="confirm-dialog__value" id="confirmDate">2026-03-23</span>
-        </div>
-      </div>
-      <div class="confirm-dialog__actions">
-        <button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="document.getElementById('confirmOverlay').classList.remove('confirm-overlay--visible')">再想想</button>
-        <button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="window.location.href='my-appointments.html'">确认取消</button>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/employee-app/health-checkup/my-appointments-done.html b/employee-app/health-checkup/my-appointments-done.html
deleted file mode 100644
index 48be5a4..0000000
--- a/employee-app/health-checkup/my-appointments-done.html
+++ /dev/null
@@ -1,163 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-bg: #f6ffed;
-      --success-text: #52c41a;
-      --warning-bg: #fff7e6;
-      --warning-text: #fa8c16;
-      --danger-bg: #fff1f0;
-      --danger-text: #ff4d4f;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --border: #e8f3f3;
-      --shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
-    }
-    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, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
-      padding: 14px 16px 20px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .tabs {
-      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
-      background: rgba(255,255,255,0.92); border-radius: 18px;
-      box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
-      position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
-    }
-    .tabs__item {
-      height: 36px; border: none; border-radius: 14px; background: transparent;
-      color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
-      text-decoration: none; display: flex; align-items: center; justify-content: center;
-    }
-    .tabs__item--active {
-      background: var(--primary-light); color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .summary-bar {
-      margin: 14px 0 12px; padding: 16px; border-radius: 20px;
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
-    }
-    .summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
-    .summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
-    .appointment-list { display: flex; flex-direction: column; gap: 12px; }
-    .appointment-card {
-      background: #fff; border-radius: 20px; padding: 16px;
-      border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow);
-    }
-    .appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
-    .appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
-    .appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
-    .appointment-card__status--done { background: var(--success-bg); color: var(--success-text); }
-    .appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
-    .meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
-    .meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
-    .meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
-    .appointment-card__progress { margin-bottom: 14px; }
-    .progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
-    .progress-bar { height: 8px; border-radius: 999px; background: #eef3f3; overflow: hidden; }
-    .progress-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%); }
-    .appointment-card__actions { display: flex; gap: 10px; }
-    .appointment-card__btn {
-      flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
-    }
-    .appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
-  </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">
-      <a class="nav-back" href="index.html">&#8249;</a>
-      <span class="nav-title">我的预约</span>
-    </div>
-    <div class="scroll-content">
-      <!-- [交互] 点击 Tab 跳转对应页面 -->
-      <div class="tabs">
-        <a class="tabs__item" href="my-appointments-all.html">全部</a>
-        <a class="tabs__item" href="my-appointments.html">待体检</a>
-        <a class="tabs__item tabs__item--active" href="my-appointments-done.html">已体检</a>
-        <a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
-      </div>
-
-      <div class="appointment-list">
-        <a class="appointment-card" href="my-appointments-detail-done.html" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--done">已体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head"><span>完成进度</span><span>26/26</span></div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
-          </div>
-
-        </a>
-        <a class="appointment-card" href="my-appointments-detail-gastro-done.html" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">胃肠镜体检</div>
-            <div class="appointment-card__status appointment-card__status--done">已体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
-            <div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head"><span>完成进度</span><span>2/2</span></div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
-          </div>
-
-        </a>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
diff --git a/employee-app/health-checkup/my-appointments.html b/employee-app/health-checkup/my-appointments.html
deleted file mode 100644
index 999a4a9..0000000
--- a/employee-app/health-checkup/my-appointments.html
+++ /dev/null
@@ -1,364 +0,0 @@
-<!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: #13c2c2;
-      --primary-dark: #0f9b9b;
-      --primary-light: #e6fffb;
-      --success-bg: #f6ffed;
-      --success-text: #52c41a;
-      --warning-bg: #fff7e6;
-      --warning-text: #fa8c16;
-      --danger-bg: #fff1f0;
-      --danger-text: #ff4d4f;
-      --text-primary: #1a1a1a;
-      --text-secondary: #666666;
-      --text-muted: #8c8c8c;
-      --bg-page: #f0f2f5;
-      --bg-content: #f7f9fb;
-      --border: #e8f3f3;
-      --shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
-    }
-    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, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
-      padding: 14px 16px 20px;
-    }
-    .scroll-content::-webkit-scrollbar { display: none; }
-    .tabs {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 8px;
-      padding: 6px;
-      background: rgba(255,255,255,0.92);
-      border-radius: 18px;
-      box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
-      position: sticky;
-      top: 0;
-      z-index: 5;
-      backdrop-filter: blur(10px);
-    }
-    .tabs__item {
-      height: 36px;
-      border: none;
-      border-radius: 14px;
-      background: transparent;
-      color: var(--text-secondary);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      text-decoration: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .tabs__item--active {
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
-    }
-    .summary-bar {
-      margin: 14px 0 12px;
-      padding: 16px;
-      border-radius: 20px;
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff;
-      box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
-    }
-    .summary-bar__title {
-      font-size: 18px;
-      font-weight: 700;
-      margin-bottom: 6px;
-    }
-    .summary-bar__desc {
-      font-size: 13px;
-      line-height: 1.7;
-      opacity: 0.92;
-    }
-    .appointment-list {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .appointment-card {
-      background: #fff;
-      border-radius: 20px;
-      padding: 16px;
-      border: 1px solid rgba(19, 194, 194, 0.06);
-      box-shadow: var(--shadow);
-    }
-    .appointment-card__top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 12px;
-    }
-    .appointment-card__title {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--text-primary);
-    }
-    .appointment-card__status {
-      flex-shrink: 0;
-      padding: 5px 10px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .appointment-card__status--pending {
-      background: var(--warning-bg);
-      color: var(--warning-text);
-    }
-    .appointment-card__status--done {
-      background: var(--success-bg);
-      color: var(--success-text);
-    }
-    .appointment-card__status--cancelled {
-      background: var(--danger-bg);
-      color: var(--danger-text);
-    }
-    .appointment-card__meta {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 10px 12px;
-      margin-bottom: 12px;
-    }
-    .meta-item {
-      background: #f9fbfb;
-      border-radius: 14px;
-      padding: 10px 12px;
-      border: 1px solid #f0f5f5;
-    }
-    .meta-item__label {
-      font-size: 11px;
-      color: var(--text-muted);
-      margin-bottom: 5px;
-    }
-    .meta-item__value {
-      font-size: 13px;
-      color: var(--text-primary);
-      font-weight: 600;
-      line-height: 1.5;
-    }
-    .appointment-card__progress {
-      margin-bottom: 14px;
-    }
-    .progress-head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-      font-size: 12px;
-      color: var(--text-secondary);
-    }
-    .progress-bar {
-      height: 8px;
-      border-radius: 999px;
-      background: #eef3f3;
-      overflow: hidden;
-    }
-    .progress-bar__fill {
-      height: 100%;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
-    }
-    .appointment-card__actions {
-      display: flex;
-      gap: 10px;
-    }
-    .appointment-card__btn {
-      flex: 1;
-      height: 40px;
-      border-radius: 20px;
-      font-size: 14px;
-      font-weight: 600;
-      border: none;
-      cursor: pointer;
-    }
-    .appointment-card__btn--ghost {
-      background: #f5f7fa;
-      color: var(--text-secondary);
-      border: 1px solid #ebeff2;
-    }
-    .appointment-card__btn--primary {
-      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
-      color: #fff;
-      box-shadow: 0 8px 20px rgba(19, 194, 194, 0.18);
-    }
-    .appointment-card[data-status="done"],
-    .appointment-card[data-status="cancelled"] {
-      opacity: 0.94;
-    }
-  </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">
-      <!-- [交互] 点击返回至: index-v2.html -->
-      <a class="nav-back" href="index.html">‹</a>
-      <span class="nav-title">我的预约</span>
-    </div>
-
-    <div class="scroll-content">
-      <!-- [交互] 点击 Tab 跳转对应页面 -->
-      <div class="tabs">
-        <a class="tabs__item" href="my-appointments-all.html">全部</a>
-        <a class="tabs__item tabs__item--active" href="my-appointments.html">待体检</a>
-        <a class="tabs__item" href="my-appointments-done.html">已体检</a>
-        <a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
-      </div>
-
-
-
-      <div class="appointment-list">
-        <!-- [交互] 点击卡片跳转至详情页，URL携带进度/医院/日期参数 -->
-        <a class="appointment-card" data-status="pending" href="my-appointments-detail.html?done=5&total=26&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--pending">待体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item">
-              <div class="meta-item__label">体检医院</div>
-              <div class="meta-item__value">宁夏宝石花医院</div>
-            </div>
-            <div class="meta-item">
-              <div class="meta-item__label">预约日期</div>
-              <div class="meta-item__value">2026-03-23</div>
-            </div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head">
-              <span>体检进度</span>
-              <span>5/26</span>
-            </div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 19.2%;"></div></div>
-          </div>
-        </a>
-
-        <a class="appointment-card" data-status="pending" href="my-appointments-detail.html?done=0&total=26&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">常规体检</div>
-            <div class="appointment-card__status appointment-card__status--pending">待体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item">
-              <div class="meta-item__label">体检医院</div>
-              <div class="meta-item__value">宁夏宝石花医院</div>
-            </div>
-            <div class="meta-item">
-              <div class="meta-item__label">预约日期</div>
-              <div class="meta-item__value">2026-03-23</div>
-            </div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head">
-              <span>体检进度</span>
-              <span>0/26</span>
-            </div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
-          </div>
-        </a>
-
-        <a class="appointment-card" data-status="pending" href="my-appointments-detail-gastro.html?done=0&total=2&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
-          <div class="appointment-card__top">
-            <div class="appointment-card__title">胃肠镜体检</div>
-            <div class="appointment-card__status appointment-card__status--pending">待体检</div>
-          </div>
-          <div class="appointment-card__meta">
-            <div class="meta-item">
-              <div class="meta-item__label">体检医院</div>
-              <div class="meta-item__value">宁夏宝石花医院</div>
-            </div>
-            <div class="meta-item">
-              <div class="meta-item__label">预约日期</div>
-              <div class="meta-item__value">2026-03-23</div>
-            </div>
-          </div>
-          <div class="appointment-card__progress">
-            <div class="progress-head">
-              <span>体检进度</span>
-              <span>0/2</span>
-            </div>
-            <div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/employee-app/health-checkup/report-query.html b/employee-app/health-checkup/report-query.html
index 8fb55de..9cd7b0c 100644
--- a/employee-app/health-checkup/report-query.html
+++ b/employee-app/health-checkup/report-query.html
@@ -417,8 +417,8 @@
       </div>
     </div>
     <div class="nav-bar">
-      <!-- [交互] 返回按钮：返回体检报告列表 -->
-      <span class="nav-back" onclick="location.href='reports.html'">‹</span>
+      <!-- [交互] 返回按钮：从消息详情进入（URL 带 msg）时返回该消息详情，否则返回体检报告列表 -->
+      <span class="nav-back" onclick="goBack()">‹</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>
@@ -725,8 +725,8 @@
           </div>
 
           <div class="conclusion-wrap">
-            <!-- [交互] 返回报告列表按钮 -->
-            <button class="back-btn" onclick="location.href='reports.html'">
+            <!-- [交互] 返回按钮：从消息详情进入时文案与目标切换为返回消息详情 -->
+            <button class="back-btn" id="backBtn" onclick="goBack()">
               <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>
@@ -752,6 +752,16 @@
     function toggleVoice(btn) {
       btn.classList.toggle('is-playing');
     }
+
+    /* [交互] 返回导航：URL 带 msg 参数（从体检消息详情进入）时返回该消息详情，否则返回报告列表 */
+    function goBack() {
+      var msgId = new URLSearchParams(location.search).get('msg');
+      location.href = msgId ? 'message-detail.html?id=' + msgId : 'reports.html';
+    }
+    (function () {
+      var msgId = new URLSearchParams(location.search).get('msg');
+      if (msgId) document.getElementById('backBtn').lastChild.textContent = ' 返回消息详情';
+    })();
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/reports.html b/employee-app/health-checkup/reports.html
index 7fd4523..e0ae893 100644
--- a/employee-app/health-checkup/reports.html
+++ b/employee-app/health-checkup/reports.html
@@ -35,24 +35,52 @@
     .scroll-content { flex: 1; overflow-y: auto; background: linear-gradient(180deg, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%); }
     .scroll-content::-webkit-scrollbar { display: none; }
     .page-body { padding: 16px; }
-    /* 顶部 AI 解读大卡片 */
-    .ai-card {
-      background: linear-gradient(135deg, #ffffff 0%, #e6fffb 100%);
-      border: 1px solid #b5f5ec; border-radius: 20px; padding: 20px 18px;
-      box-shadow: 0 6px 18px rgba(20, 180, 176, 0.10); position: relative; overflow: hidden;
+    /* 体检报告汇总卡 */
+    .sum-card {
+      background: linear-gradient(135deg, #1ec6c6 0%, #0d9292 100%);
+      border-radius: 20px; padding: 16px 18px;
+      box-shadow: 0 10px 26px rgba(17, 155, 155, 0.30);
+      position: relative; overflow: hidden;
+      display: flex; align-items: center; gap: 14px; color: #fff;
     }
-    .ai-card::after {
-      content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
-      border-radius: 50%; background: rgba(19, 194, 194, 0.08);
+    .sum-card::after {
+      content: ''; position: absolute; right: -36px; top: -40px; width: 130px; height: 130px;
+      border-radius: 50%; background: rgba(255, 255, 255, 0.10);
     }
-    .ai-card__badge {
-      display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
-      border-radius: 13px; background: rgba(19, 194, 194, 0.12); color: #08979c;
-      font-size: 12px; font-weight: 600; margin-bottom: 10px;
+    .sum-card::before {
+      content: ''; position: absolute; right: 30px; bottom: -52px; width: 100px; height: 100px;
+      border-radius: 50%; background: rgba(255, 255, 255, 0.06);
     }
-    .ai-card__title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; position: relative; z-index: 1; }
-    .ai-card__sub { font-size: 13px; color: #13c2c2; font-weight: 600; margin-bottom: 8px; position: relative; z-index: 1; }
-    .ai-card__desc { font-size: 13px; line-height: 1.7; color: #666; position: relative; z-index: 1; }
+    .sum-card__num { font-size: 34px; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 2px; }
+    .sum-card__num small { font-size: 13px; font-weight: 600; opacity: 0.85; }
+    .sum-card__cap { font-size: 11px; opacity: 0.78; margin-top: 5px; }
+    .sum-card__divider { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.30); flex-shrink: 0; }
+    .sum-card__meta { display: flex; flex-direction: column; gap: 8px; font-size: 12px; position: relative; z-index: 1; }
+    .sum-card__meta .k { opacity: 0.75; margin-right: 8px; }
+    .sum-card__meta .v { font-weight: 700; }
+    .sum-card__timeline { margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; }
+    /* 五年趋势分析入口（精简条卡） */
+    .trend-entry {
+      margin-top: 10px;
+      display: flex; align-items: center; gap: 10px;
+      padding: 11px 14px; border-radius: 16px;
+      background: linear-gradient(135deg, #e6fbfb 0%, #f2fdfa 100%);
+      border: 1px solid #b5f5ec;
+      box-shadow: 0 4px 16px rgba(17, 155, 155, 0.06);
+      cursor: pointer;
+    }
+    .trend-entry:active { transform: scale(0.985); }
+    .trend-entry__icon {
+      width: 34px; height: 34px; border-radius: 11px; background: #fff;
+      border: 1px solid #b5f5ec; display: flex; align-items: center; justify-content: center;
+      color: #0d9292; flex-shrink: 0;
+    }
+    .trend-entry__icon svg { width: 18px; height: 18px; }
+    .trend-entry__main { flex: 1; min-width: 0; }
+    .trend-entry__title { font-size: 13px; font-weight: 700; color: #0d7878; margin-bottom: 2px; }
+    .trend-entry__desc { font-size: 11px; color: #666; }
+    .trend-entry__go { display: flex; align-items: center; color: #119b9b; flex-shrink: 0; }
+    .trend-entry__go svg { width: 14px; height: 14px; }
     /* 报告列表 */
     .section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 22px 2px 12px; }
     .report-list { display: flex; flex-direction: column; gap: 12px; }
@@ -97,16 +125,41 @@
     </div>
     <div class="scroll-content">
       <div class="page-body">
-        <!-- 顶部 AI 解读大卡片 -->
-        <div class="ai-card">
-          <div class="ai-card__badge">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-            <span>AI解读</span>
+        <!-- 体检报告汇总：连续年数 / 起始年份 / 报告总数 + 年度时间轴 -->
+        <div class="sum-card">
+          <div>
+            <div class="sum-card__num">10<small>年</small></div>
+            <div class="sum-card__cap">累计体检年份</div>
           </div>
-          <div class="ai-card__title">体检报告解读</div>
-           <div class="ai-card__desc">依托 AI 技术，自动解析体检报告数据，提供专业指标解读、风险评估与个性化健康指导。</div>
-          <br>
-          <div class="ai-card__sub">查看报告解读</div>
+          <div class="sum-card__divider"></div>
+          <div class="sum-card__meta">
+            <div><span class="k">起始年份</span><span class="v">2012</span></div>
+            <div><span class="k">报告总数</span><span class="v">11 份</span></div>
+          </div>
+          <svg class="sum-card__timeline" width="96" height="36" viewBox="0 0 96 36">
+            <line x1="8" y1="11" x2="88" y2="11" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="8" cy="11" r="4.5" fill="#fff"/>
+            <circle cx="28" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
+            <circle cx="48" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
+            <circle cx="68" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
+            <circle cx="88" cy="11" r="4.5" fill="#fff"/>
+            <text x="1" y="31" font-size="9" fill="rgba(255,255,255,0.9)" text-anchor="start" font-weight="600">2021</text>
+            <text x="95" y="31" font-size="9" fill="rgba(255,255,255,0.9)" text-anchor="end" font-weight="600">2025</text>
+          </svg>
+        </div>
+
+        <!-- [交互] 点击跳转至: indicator-compare.html（重点指标纵向对比总览） -->
+        <div class="trend-entry" onclick="location.href='indicator-compare.html'">
+          <div class="trend-entry__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 7"/><polyline points="15 7 21 7 21 13"/></svg>
+          </div>
+          <div class="trend-entry__main">
+            <div class="trend-entry__title">五年趋势分析</div>
+            <div class="trend-entry__desc">17 项重点指标 · 较2024新增异常 1 / 改善 2</div>
+          </div>
+          <span class="trend-entry__go">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+          </span>
         </div>
 
         <!-- 报告列表 -->
@@ -168,6 +221,34 @@
             </div>
             <span class="report-item__arrow">›</span>
           </div>
+          <!-- [交互] 点击跳转至: report-query.html（常规体检） -->
+          <div class="report-item" onclick="location.href='report-query.html'">
+            <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__header">
+                <span class="report-item__title">2022年度体检报告</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（常规体检） -->
+          <div class="report-item" onclick="location.href='report-query.html'">
+            <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__header">
+                <span class="report-item__title">2021年度体检报告</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>
         </div>
         <div class="bottom-spacer"></div>
       </div>
diff --git a/employee-app/health-consult/expert-list.html b/employee-app/health-consult/expert-list.html
index e27de7b..d9f92c2 100644
--- a/employee-app/health-consult/expert-list.html
+++ b/employee-app/health-consult/expert-list.html
@@ -80,9 +80,9 @@
   </div>
 
   <!-- 导航栏 -->
-  <!-- [交互] 点击返回按钮跳转到 find-expert.html -->
+  <!-- [交互] 点击返回按钮跳转到 find-expert.html；从体检消息详情进入（URL 带 msg）时返回该消息详情 -->
   <div class="nav-bar">
-    <a class="nav-back" onclick="window.location.href='find-expert.html'">&#8249;</a>
+    <a class="nav-back" id="navBack" href="find-expert.html">&#8249;</a>
     <span class="nav-title" id="navTitle">科室专家</span>
   </div>
 
@@ -252,6 +252,9 @@
   /* ===== 根据 URL 参数动态切换页面内容 ===== */
   (function() {
     var params = new URLSearchParams(window.location.search);
+    /* 从体检消息详情进入时（带 msg 参数），返回按钮指向该消息详情页 */
+    var msgId = params.get('msg');
+    if (msgId) document.getElementById('navBack').href = '../health-checkup/message-detail.html?id=' + msgId;
     var type = params.get('type');
     var name = params.get('name');
     if (!name) return;
@@ -273,6 +276,14 @@
         { n: '李明远', t: '主任医师', h: '北京协和医院·心内科', tags: ['高血压','心衰'], s: '4.9', c: '2100', r: '97%' },
         { n: '赵雪梅', t: '主任医师', h: '广州中山医院·心内科', tags: ['高血压','冠心病'], s: '4.8', c: '1560', r: '95%' },
         { n: '孙志强', t: '副主任医师', h: '北京天坛医院·心内科', tags: ['高血压','心律失常'], s: '4.7', c: '920', r: '92%' }
+      ],
+      '高脂血症': [
+        { n: '吴永康', t: '主任医师', h: '上海瑞金医院·内分泌代谢科', tags: ['高脂血症','糖尿病'], s: '4.9', c: '1420', r: '95%' },
+        { n: '郑晓芬', t: '副主任医师', h: '广州中山医院·心内科', tags: ['高脂血症','动脉硬化'], s: '4.7', c: '780', r: '93%' }
+      ],
+      '痛风': [
+        { n: '黄承志', t: '主任医师', h: '北京协和医院·风湿免疫科', tags: ['痛风','高尿酸血症'], s: '4.9', c: '1680', r: '96%' },
+        { n: '马文彬', t: '副主任医师', h: '上海瑞金医院·风湿免疫科', tags: ['痛风','关节炎'], s: '4.8', c: '940', r: '94%' }
       ]
     };
 
diff --git a/index.html b/index.html
index 5a00854..635b2bf 100644
--- a/index.html
+++ b/index.html
@@ -593,17 +593,15 @@ const SITE_MAP = [
       { file:'booking-project-selected.html', label:'预约-已选项目' },
       { file:'booking-date.html', label:'预约-选择日期' },
       { file:'booking-date-selected.html', label:'预约-已选日期' },
-      { file:'my-appointments-detail.html', label:'预约详情' },
-      { file:'my-appointments-detail-done.html', label:'预约详情-已完成' },
-      { file:'my-appointments-detail-cancelled.html', label:'预约详情-已取消' },
-      { file:'my-appointments.html', label:'我的预约-待体检' },
-      { file:'my-appointments-all.html', label:'我的预约-全部' },
-      { file:'my-appointments-done.html', label:'我的预约-已完成' },
-      { file:'my-appointments-cancelled.html', label:'我的预约-已取消' },
+      { file:'my-appointments-all.html', label:'我的预约' },
       { file:'hospital-checkin.html', label:'到院体检' },
       { file:'reports.html', label:'体检报告' },
       { file:'report-query.html', label:'报告查询详情' },
+      { file:'indicator-compare.html', label:'指标纵向对比总览' },
+      { file:'indicator-compare-detail.html', label:'指标纵向对比详情' },
       { file:'report-gastro.html', label:'胃肠镜报告详情' },
+      { file:'messages.html', label:'消息列表' },
+      { file:'message-detail.html', label:'消息详情' },
       { file:'project-detail.html', label:'体检项目详情' }
     ] },
     { name:'体重管理', dir:'employee-app/weight-management', entry:'weight-main-v2.html', prd:'employee-app/weight-management/doc/PRD.md', done:true, pages:[