diff --git a/employee-app/health-checkup/booking-date-selected.html b/employee-app/health-checkup/booking-date-selected.html
index 5e339ef..fa30b21 100644
--- a/employee-app/health-checkup/booking-date-selected.html
+++ b/employee-app/health-checkup/booking-date-selected.html
@@ -68,6 +68,95 @@
     .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); }
+    /* 原型演示状态下拉框(导航栏右上角) */
+    .demo-select {
+      margin-left: auto; flex-shrink: 0; font-family: inherit;
+      font-size: 11px; font-weight: 600; color: var(--text-secondary);
+      border: 1px solid #e8e8e8; border-radius: 12px; padding: 3px 6px;
+      background: #f5f5f5; cursor: pointer; outline: none;
+    }
+    /* 预约结果横幅 */
+    .result-banner {
+      display: flex; align-items: flex-start; gap: 12px;
+      border-radius: 20px; padding: 16px; margin-bottom: 14px;
+    }
+    .result-banner--success { background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%); border: 1px solid #b7eb8f; }
+    .result-banner--fail { background: linear-gradient(135deg, #fff1f0 0%, #ffffff 100%); border: 1px solid #ffccc7; }
+    .result-banner__icon {
+      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .result-banner--success .result-banner__icon { background: #52c41a; }
+    .result-banner--fail .result-banner__icon { background: #ff4d4f; }
+    .result-banner--success .icon-cross { display: none; }
+    .result-banner--fail .icon-check { display: none; }
+    .result-banner__title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
+    .result-banner--success .result-banner__title { color: #389e0d; }
+    .result-banner--fail .result-banner__title { color: #cf1322; }
+    .result-banner__sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
+    .result-banner__reason {
+      display: none; align-items: center; gap: 6px; margin-top: 6px;
+      font-size: 13px; color: var(--text-secondary);
+    }
+    .result-banner--fail .result-banner__reason { display: flex; }
+    .reason-help {
+      width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ff4d4f; color: #ff4d4f;
+      display: inline-flex; align-items: center; justify-content: center;
+      font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: all 0.2s;
+    }
+    .reason-help:hover { background: #ff4d4f; color: #fff; }
+    /* 失败原因详情弹窗 */
+    .modal-overlay {
+      position: absolute; inset: 0; background: rgba(0,0,0,0.42); z-index: 120;
+      display: flex; align-items: center; justify-content: center; padding: 24px;
+    }
+    .modal-overlay.hidden { display: none; }
+    .reason-modal {
+      width: 100%; background: #fff; border-radius: 24px; padding: 22px 20px 18px;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.16);
+    }
+    .reason-modal__title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 16px; }
+    .reason-modal__item { margin-bottom: 14px; }
+    .reason-modal__label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+    .reason-modal__text { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.6; }
+    .reason-modal__text--danger { color: #cf1322; }
+    .reason-modal__btn {
+      width: 100%; height: 44px; border-radius: 22px; border: none; cursor: pointer;
+      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%); color: #fff;
+      font-size: 15px; font-weight: 600; margin-top: 4px;
+    }
+    /* 取消预约确认弹窗 */
+    .cancel-modal {
+      width: 100%; background: #fff; border-radius: 24px; padding: 22px 20px 18px;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.16);
+    }
+    .cancel-modal__title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+    .cancel-modal__desc { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 14px; }
+    .cancel-modal__order {
+      background: #f7f9fb; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
+      font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: center;
+    }
+    .cancel-modal__label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
+    .cancel-modal__label em { color: var(--danger); font-style: normal; }
+    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+    .chip {
+      padding: 7px 14px; border-radius: 16px; border: 1px solid #e8e8e8; background: #fafafa;
+      font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; user-select: none;
+    }
+    .chip.selected { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
+    .other-input {
+      display: none; width: 100%; border: 1px solid #e8e8e8; border-radius: 12px;
+      padding: 10px 12px; font-size: 13px; font-family: inherit; line-height: 1.6;
+      resize: none; outline: none; margin-bottom: 6px; color: var(--text-primary);
+    }
+    .other-input.show { display: block; }
+    .other-input:focus { border-color: var(--primary); }
+    .cancel-modal__err { display: none; font-size: 12px; color: var(--danger); margin-bottom: 6px; }
+    .cancel-modal__err.show { display: block; }
+    .cancel-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
+    .cancel-modal__btn { height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; }
+    .cancel-modal__btn--ghost { background: #f5f5f5; color: var(--text-secondary); }
+    .cancel-modal__btn--danger { background: var(--danger); color: #fff; box-shadow: 0 6px 16px rgba(255,77,79,0.28); }
     .section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
     /* 信息卡片 */
     .info-card {
@@ -135,6 +224,11 @@
     <div class="nav-bar">
       <a class="nav-back" href="index.html">&#8249;</a>
       <span class="nav-title">体检预约</span>
+      <!-- [交互] 原型演示:切换预约成功/失败两态 -->
+      <select class="demo-select" id="demoSelect" title="原型演示：切换预约结果状态" onchange="setResult(this.value)">
+        <option value="success">预约成功</option>
+        <option value="fail">预约失败</option>
+      </select>
     </div>
     <div class="scroll-content">
       <div class="page-body">
@@ -148,7 +242,23 @@
           <div class="stepper__item stepper__item--active"><div class="stepper__dot">&#10003;</div><div class="stepper__label">预约日期</div></div>
         </div>
 
-        <!-- 预约成功信息 -->
+        <!-- [交互] 预约结果横幅:成功/失败两态,由右上角演示切换器控制 -->
+        <div class="result-banner result-banner--success" id="resultBanner">
+          <div class="result-banner__icon">
+            <svg class="icon-check" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+            <svg class="icon-cross" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </div>
+          <div>
+            <div class="result-banner__title" id="resultTitle">预约成功</div>
+            <div class="result-banner__sub" id="resultSub">已为您锁定体检名额,请按预约日期准时到检</div>
+            <div class="result-banner__reason">
+              <span>失败原因:所选日期号源已约满</span>
+              <span class="reason-help" onclick="openReasonModal()">?</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 预约信息 -->
         <div class="info-card">
           <div class="section-title">预约信息</div>
           <div class="info-card__row">
@@ -184,13 +294,61 @@
       </div>
     </div>
 
-    <div class="bottom-actions">
-      <!-- [交互] 取消预约 -->
-      <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='booking-date.html'">取消预约</button>
+    <!-- [交互] 预约成功态底部按钮 -->
+    <div class="bottom-actions" id="actionsSuccess">
+      <!-- [交互] 取消预约改为二次确认弹窗,需选择或填写取消原因 -->
+      <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="openCancelModal()">取消预约</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="bottom-actions" id="actionsFail" style="display: none;">
+      <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='booking-date.html'">重新预约</button>
+    </div>
     <div class="toast" id="stepToast">当前已预约体检，无法重新选择，请先取消预约</div>
+
+    <!-- [交互] 点击失败原因旁的小问号，弹窗查看具体失败原因 -->
+    <div class="modal-overlay hidden" id="reasonModal">
+      <div class="reason-modal">
+        <div class="reason-modal__title">失败原因详情</div>
+        <div class="reason-modal__item">
+          <div class="reason-modal__label">失败原因</div>
+          <div class="reason-modal__text reason-modal__text--danger">号源争抢失败：宁夏宝石花医院 2026年3月23日 体检号源已被其他员工约满</div>
+        </div>
+        <div class="reason-modal__item">
+          <div class="reason-modal__label">发生时间</div>
+          <div class="reason-modal__text">2026-03-16 12:00:35</div>
+        </div>
+        <div class="reason-modal__item">
+          <div class="reason-modal__label">处理建议</div>
+          <div class="reason-modal__text">请点击「重新预约」选择其他可约日期；若长期无可用号源，可联系健康管理专员协调加号。</div>
+        </div>
+        <button class="reason-modal__btn" onclick="closeReasonModal()">知道了</button>
+      </div>
+    </div>
+
+    <!-- [交互] 取消预约二次确认:单选原因chips,选「其他」时填写具体原因 -->
+    <div class="modal-overlay hidden" id="cancelModal">
+      <div class="cancel-modal">
+        <div class="cancel-modal__title">确认取消预约</div>
+        <div class="cancel-modal__desc">取消后名额将释放，如仍需体检请重新预约</div>
+        <div class="cancel-modal__order">宁夏宝石花医院 · 2026年3月23日</div>
+        <div class="cancel-modal__label">请选择取消原因 <em>*</em></div>
+        <div class="chips" id="cancelChips">
+          <span class="chip" data-reason="时间冲突" onclick="selectChip(this)">时间冲突</span>
+          <span class="chip" data-reason="医院选择不当" onclick="selectChip(this)">医院选择不当</span>
+          <span class="chip" data-reason="日期选择不当" onclick="selectChip(this)">日期选择不当</span>
+          <span class="chip" data-reason="个人健康原因" onclick="selectChip(this)">个人健康原因</span>
+          <span class="chip" data-reason="other" onclick="selectChip(this)">其他</span>
+        </div>
+        <textarea class="other-input" id="otherInput" rows="2" maxlength="100" placeholder="请填写取消原因（必填）"></textarea>
+        <div class="cancel-modal__err" id="cancelErr">请选择或填写取消原因</div>
+        <div class="cancel-modal__actions">
+          <button class="cancel-modal__btn cancel-modal__btn--ghost" onclick="closeCancelModal()">再想想</button>
+          <button class="cancel-modal__btn cancel-modal__btn--danger" onclick="confirmCancel()">确认取消</button>
+        </div>
+      </div>
+    </div>
   </div>
   <script>
     let toastTimer = null;
@@ -200,6 +358,65 @@
       clearTimeout(toastTimer);
       toastTimer = setTimeout(() => { toast.classList.remove('show'); }, 2200);
     }
+
+    // [交互] 原型演示：切换预约成功/失败两态（横幅、底部按钮、步骤条提示联动）
+    function setResult(state) {
+      const fail = state === 'fail';
+      const banner = document.getElementById('resultBanner');
+      banner.classList.toggle('result-banner--fail', fail);
+      banner.classList.toggle('result-banner--success', !fail);
+      document.getElementById('resultTitle').textContent = fail ? '预约失败' : '预约成功';
+      document.getElementById('resultSub').style.display = fail ? 'none' : '';
+      document.getElementById('actionsSuccess').style.display = fail ? 'none' : 'flex';
+      document.getElementById('actionsFail').style.display = fail ? 'flex' : 'none';
+      document.getElementById('stepToast').textContent = fail
+        ? '预约未成功，请点击下方「重新预约」按钮重新预约'
+        : '当前已预约体检，无法重新选择，请先取消预约';
+    }
+
+    function openReasonModal() {
+      document.getElementById('reasonModal').classList.remove('hidden');
+    }
+    function closeReasonModal() {
+      document.getElementById('reasonModal').classList.add('hidden');
+    }
+
+    // [交互] 取消预约二次确认:原因单选 + 其他原因填写 + 校验 + 确认后跳转重新预约
+    let cancelReason = null;
+    function selectChip(el) {
+      document.querySelectorAll('#cancelChips .chip').forEach(c => c.classList.remove('selected'));
+      el.classList.add('selected');
+      cancelReason = el.dataset.reason;
+      document.getElementById('otherInput').classList.toggle('show', cancelReason === 'other');
+      hideCancelErr();
+    }
+    function hideCancelErr() {
+      document.getElementById('cancelErr').classList.remove('show');
+    }
+    function openCancelModal() {
+      cancelReason = null;
+      document.querySelectorAll('#cancelChips .chip').forEach(c => c.classList.remove('selected'));
+      const input = document.getElementById('otherInput');
+      input.value = '';
+      input.classList.remove('show');
+      hideCancelErr();
+      document.getElementById('cancelModal').classList.remove('hidden');
+    }
+    function closeCancelModal() {
+      document.getElementById('cancelModal').classList.add('hidden');
+    }
+    function confirmCancel() {
+      const input = document.getElementById('otherInput');
+      if (!cancelReason || (cancelReason === 'other' && !input.value.trim())) {
+        document.getElementById('cancelErr').classList.add('show');
+        return;
+      }
+      closeCancelModal();
+      const toast = document.getElementById('stepToast');
+      toast.textContent = '预约已取消';
+      showToast();
+      setTimeout(() => { window.location.href = 'booking-date.html'; }, 1200);
+    }
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/booking-date.html b/employee-app/health-checkup/booking-date.html
index f2bf51f..5582a2d 100644
--- a/employee-app/health-checkup/booking-date.html
+++ b/employee-app/health-checkup/booking-date.html
@@ -75,6 +75,24 @@
     .fee-banner__label { font-size: 13px; color: var(--primary-dark); font-weight: 600; }
     .fee-banner__value { font-size: 24px; font-weight: 800; color: var(--primary-dark); }
     .section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
+    /* 预约状态条 */
+    .status-card {
+      background: #fff; border-radius: 20px; padding: 14px 16px; margin-bottom: 14px;
+      box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06);
+    }
+    .status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .status-badge {
+      display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
+      padding: 4px 12px; border-radius: 12px; flex-shrink: 0;
+    }
+    .status-badge--open { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
+    .status-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #52c41a; }
+    .status-range { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
+    .status-tip {
+      display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px;
+      border-top: 1px dashed #f0f0f0; font-size: 12px; color: var(--text-muted); line-height: 1.5;
+    }
+    .status-tip svg { flex-shrink: 0; }
     .date-card {
       background: #fff; border-radius: 20px; padding: 18px 16px; margin-bottom: 14px;
       box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06);
@@ -196,6 +214,19 @@
     .confirm-modal__btn--primary {
       background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%); color: #fff;
     }
+    /* 预约提交 loading */
+    .loading-overlay {
+      position: absolute; inset: 0; background: rgba(255,255,255,0.88); z-index: 150;
+      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
+    }
+    .loading-overlay.hidden { display: none; }
+    .loading-spinner {
+      width: 44px; height: 44px; border-radius: 50%;
+      border: 4px solid rgba(19,194,194,0.15); border-top-color: var(--primary);
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .loading-text { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
     .toast {
       position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
       background: rgba(0,0,0,0.75); color: #fff; padding: 14px 22px; border-radius: 12px;
@@ -241,6 +272,17 @@
 <!--            <div class="summary-item"><div class="summary-item__label">预计费用</div><div class="summary-item__value">&yen;680</div></div>-->
           </div>
         </div>
+        <!-- [交互] 预约状态与可预约日期范围,日期范围由脚本按「近30天」规则动态生成 -->
+        <div class="status-card">
+          <div class="status-row">
+            <span class="status-badge status-badge--open"><span class="status-badge__dot"></span>可预约</span>
+            <span class="status-range" id="rangeText"></span>
+          </div>
+          <div class="status-tip">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8c8c8c" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+            <span>至多可预约近30天内的体检日期,超出范围日期不可选择</span>
+          </div>
+        </div>
         <div class="date-card">
           <div class="calendar-header">
             <span class="calendar-header__month" id="calendarMonth"></span>
@@ -279,10 +321,6 @@
             <span>体检医院</span>
             <span class="confirm-modal__value">宁夏宝石花医院</span>
           </div>
-          <div class="confirm-modal__row">
-            <span>体检项目数</span>
-            <span class="confirm-modal__value" id="confirmCount">9 项</span>
-          </div>
           <div class="confirm-modal__row">
             <span>体检日期</span>
             <span class="confirm-modal__value confirm-modal__value--highlight" id="confirmDate">--</span>
@@ -290,14 +328,25 @@
         </div>
         <div class="confirm-modal__actions">
           <button class="confirm-modal__btn confirm-modal__btn--ghost" onclick="closeConfirm()">取消</button>
-          <button class="confirm-modal__btn confirm-modal__btn--primary" onclick="window.location.href='booking-date-selected.html'">确认预约</button>
+          <button class="confirm-modal__btn confirm-modal__btn--primary" onclick="submitBooking()">确认预约</button>
         </div>
       </div>
     </div>
+    <!-- [交互] 确认预约后圆圈loading过渡,约1.8秒后跳转预约结果页 -->
+    <div class="loading-overlay hidden" id="loadingOverlay">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">正在为您预约体检...</div>
+    </div>
     <div class="toast" id="stepToast">当前已提交项目，如需重新选择医院，请先点击下方重选项目按钮</div>
   </div>
   <script>
     const today = new Date(2026, 2, 16); // 2026-03-16
+    // 近30天可预约范围:今天 ~ 今天+30天
+    const maxBookDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
+    function fmtDate(d) {
+      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    }
+    document.getElementById('rangeText').textContent = `可预约日期:${fmtDate(today)} 至 ${fmtDate(maxBookDate)}`;
     let currentYear = today.getFullYear();
     let currentMonth = today.getMonth();
     let selectedDate = null;
@@ -321,8 +370,9 @@
     function getSlots(year, month, day) {
       const d = new Date(year, month, day);
       const dow = d.getDay();
-      // 已过日期
+      // 已过日期或超出近30天范围
       if (d < new Date(today.getFullYear(), today.getMonth(), today.getDate())) return -1;
+      if (d > maxBookDate) return -1;
       // 周末不可约
       if (dow === 0 || dow === 6) return 0;
       // 模拟剩余人数（用日期做伪随机）
@@ -334,8 +384,10 @@
     function renderCalendar() {
       grid.innerHTML = '';
       monthLabel.textContent = `${currentYear}年${currentMonth + 1}月`;
-      // 不允许切换到当月之前
+      // 不允许切换到当月之前,也不允许翻过近30天范围所在月份
       prevBtn.disabled = (currentYear === today.getFullYear() && currentMonth <= today.getMonth());
+      nextBtn.disabled = (currentYear > maxBookDate.getFullYear()) ||
+        (currentYear === maxBookDate.getFullYear() && currentMonth >= maxBookDate.getMonth());
 
       const firstDay = new Date(currentYear, currentMonth, 1);
       // 周一为起始（getDay: 0=周日，转为周一起始）
@@ -412,6 +464,14 @@
     function closeConfirm() {
       document.getElementById('confirmModal').classList.add('hidden');
     }
+    // 提交预约:关闭弹窗 → 圆圈loading → 1.8秒后跳转预约结果页
+    function submitBooking() {
+      closeConfirm();
+      document.getElementById('loadingOverlay').classList.remove('hidden');
+      setTimeout(() => {
+        window.location.href = 'booking-date-selected.html';
+      }, 1800);
+    }
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/booking-type.html b/employee-app/health-checkup/booking-type.html
index 6cb1c94..839a80a 100644
--- a/employee-app/health-checkup/booking-type.html
+++ b/employee-app/health-checkup/booking-type.html
@@ -258,8 +258,6 @@
     <div class="scroll-content">
       <div class="page-body">
         <div class="section-title">选择体检类型</div>
-        <div class="section-desc">以下为您所属单位本年度组织的体检计划，请确认后预约</div>
-
         <!-- [交互] 点击切换选中态，单选；卡片信息来自后台体检计划与人群划分规则 -->
         <div class="type-card active" onclick="selectType(this, 'routine')">
           <div class="type-card__header">
@@ -274,14 +272,6 @@
             <div class="radio-dot"></div>
           </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>
@@ -314,14 +304,6 @@
             <div class="radio-dot"></div>
           </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>
diff --git a/employee-app/health-checkup/gastro-date-selected.html b/employee-app/health-checkup/gastro-date-selected.html
index 075f70c..1efcf03 100644
--- a/employee-app/health-checkup/gastro-date-selected.html
+++ b/employee-app/health-checkup/gastro-date-selected.html
@@ -104,6 +104,43 @@
       opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 280px;
     }
     .toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    /* 取消预约确认弹窗 */
+    .modal-overlay {
+      position: absolute; inset: 0; background: rgba(0,0,0,0.42); z-index: 120;
+      display: flex; align-items: center; justify-content: center; padding: 24px;
+    }
+    .modal-overlay.hidden { display: none; }
+    .cancel-modal {
+      width: 100%; background: #fff; border-radius: 24px; padding: 22px 20px 18px;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.16);
+    }
+    .cancel-modal__title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+    .cancel-modal__desc { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 14px; }
+    .cancel-modal__order {
+      background: #f7f9fb; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
+      font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: center;
+    }
+    .cancel-modal__label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
+    .cancel-modal__label em { color: var(--danger); font-style: normal; }
+    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+    .chip {
+      padding: 7px 14px; border-radius: 16px; border: 1px solid #e8e8e8; background: #fafafa;
+      font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; user-select: none;
+    }
+    .chip.selected { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
+    .other-input {
+      display: none; width: 100%; border: 1px solid #e8e8e8; border-radius: 12px;
+      padding: 10px 12px; font-size: 13px; font-family: inherit; line-height: 1.6;
+      resize: none; outline: none; margin-bottom: 6px; color: var(--text-primary);
+    }
+    .other-input.show { display: block; }
+    .other-input:focus { border-color: var(--primary); }
+    .cancel-modal__err { display: none; font-size: 12px; color: var(--danger); margin-bottom: 6px; }
+    .cancel-modal__err.show { display: block; }
+    .cancel-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
+    .cancel-modal__btn { height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; }
+    .cancel-modal__btn--ghost { background: #f5f5f5; color: var(--text-secondary); }
+    .cancel-modal__btn--danger { background: var(--danger); color: #fff; box-shadow: 0 6px 16px rgba(255,77,79,0.28); }
   </style>
 </head>
 <body>
@@ -169,10 +206,34 @@
     </div>
 
     <div class="bottom-actions">
-      <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='gastro-date.html'">取消预约</button>
-      <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='index.html'">返回首页</button>
+      <!-- [交互] 取消预约改为二次确认弹窗,需选择或填写取消原因 -->
+      <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="openCancelModal()">取消预约</button>
+      <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-all.html?type=gastro'">查看预约详情</button>
     </div>
     <div class="toast" id="stepToast">当前已预约胃肠镜检查，无法重新选择，请先取消预约</div>
+
+    <!-- [交互] 取消预约二次确认:单选原因chips,选「其他」时填写具体原因 -->
+    <div class="modal-overlay hidden" id="cancelModal">
+      <div class="cancel-modal">
+        <div class="cancel-modal__title">确认取消预约</div>
+        <div class="cancel-modal__desc">取消后名额将释放，如仍需检查请重新预约</div>
+        <div class="cancel-modal__order">宁夏宝石花医院 · 2026年3月23日</div>
+        <div class="cancel-modal__label">请选择取消原因 <em>*</em></div>
+        <div class="chips" id="cancelChips">
+          <span class="chip" data-reason="时间冲突" onclick="selectChip(this)">时间冲突</span>
+          <span class="chip" data-reason="医院选择不当" onclick="selectChip(this)">医院选择不当</span>
+          <span class="chip" data-reason="日期选择不当" onclick="selectChip(this)">日期选择不当</span>
+          <span class="chip" data-reason="个人健康原因" onclick="selectChip(this)">个人健康原因</span>
+          <span class="chip" data-reason="other" onclick="selectChip(this)">其他</span>
+        </div>
+        <textarea class="other-input" id="otherInput" rows="2" maxlength="100" placeholder="请填写取消原因（必填）"></textarea>
+        <div class="cancel-modal__err" id="cancelErr">请选择或填写取消原因</div>
+        <div class="cancel-modal__actions">
+          <button class="cancel-modal__btn cancel-modal__btn--ghost" onclick="closeCancelModal()">再想想</button>
+          <button class="cancel-modal__btn cancel-modal__btn--danger" onclick="confirmCancel()">确认取消</button>
+        </div>
+      </div>
+    </div>
   </div>
   <script>
     var toastTimer = null;
@@ -182,6 +243,47 @@
       clearTimeout(toastTimer);
       toastTimer = setTimeout(function() { toast.classList.remove('show'); }, 2200);
     }
+
+    // [交互] 取消预约二次确认:原因单选 + 其他原因填写 + 校验 + 确认后返回预约日期页重新选择
+    var cancelReason = null;
+    function selectChip(el) {
+      var chips = document.querySelectorAll('#cancelChips .chip');
+      for (var i = 0; i < chips.length; i++) chips[i].classList.remove('selected');
+      el.classList.add('selected');
+      cancelReason = el.dataset.reason;
+      document.getElementById('otherInput').classList.toggle('show', cancelReason === 'other');
+      hideCancelErr();
+    }
+    function hideCancelErr() {
+      document.getElementById('cancelErr').classList.remove('show');
+    }
+    function openCancelModal() {
+      cancelReason = null;
+      var chips = document.querySelectorAll('#cancelChips .chip');
+      for (var i = 0; i < chips.length; i++) chips[i].classList.remove('selected');
+      var input = document.getElementById('otherInput');
+      input.value = '';
+      input.classList.remove('show');
+      hideCancelErr();
+      document.getElementById('cancelModal').classList.remove('hidden');
+    }
+    function closeCancelModal() {
+      document.getElementById('cancelModal').classList.add('hidden');
+    }
+    function confirmCancel() {
+      var input = document.getElementById('otherInput');
+      if (!cancelReason || (cancelReason === 'other' && !input.value.trim())) {
+        document.getElementById('cancelErr').classList.add('show');
+        return;
+      }
+      closeCancelModal();
+      var toast = document.getElementById('stepToast');
+      toast.textContent = '预约已取消';
+      showToast();
+      setTimeout(function() {
+        window.location.href = 'gastro-date.html';
+      }, 1200);
+    }
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/gastro-date.html b/employee-app/health-checkup/gastro-date.html
index 676be00..7ae841c 100644
--- a/employee-app/health-checkup/gastro-date.html
+++ b/employee-app/health-checkup/gastro-date.html
@@ -77,6 +77,24 @@
     .summary-item { display: flex; justify-content: space-between; gap: 12px; }
     .summary-item__label { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
     .summary-item__value { font-size: 14px; font-weight: 600; text-align: right; line-height: 1.6; }
+    /* 预约状态条 */
+    .status-card {
+      background: #fff; border-radius: 20px; padding: 14px 16px; margin-bottom: 14px;
+      box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06);
+    }
+    .status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .status-badge {
+      display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
+      padding: 4px 12px; border-radius: 12px; flex-shrink: 0;
+    }
+    .status-badge--open { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
+    .status-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #52c41a; }
+    .status-range { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
+    .status-tip {
+      display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px;
+      border-top: 1px dashed #f0f0f0; font-size: 12px; color: var(--text-muted); line-height: 1.5;
+    }
+    .status-tip svg { flex-shrink: 0; }
     .date-card {
       background: #fff; border-radius: 20px; padding: 18px 16px;
       box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06);
@@ -178,6 +196,18 @@
           </div>
         </div>
 
+        <!-- [交互] 预约状态与可预约日期范围,日期范围由脚本按「最早7天后」规则动态生成 -->
+        <div class="status-card">
+          <div class="status-row">
+            <span class="status-badge status-badge--open"><span class="status-badge__dot"></span>可预约</span>
+            <span class="status-range" id="rangeText"></span>
+          </div>
+          <div class="status-tip">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8c8c8c" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+            <span>胃肠镜检查需提前预约,最早仅可预约7天后的日期,超出范围日期不可选择</span>
+          </div>
+        </div>
+
         <div class="date-card">
           <div class="calendar-header">
             <span class="calendar-header__month" id="calendarMonth"></span>
@@ -219,6 +249,15 @@
   </div>
   <script>
     var today = new Date(2026, 2, 16);
+    // 胃肠镜预约窗口:最早7天后,最晚30天后
+    var minBookDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+    var maxBookDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
+    function fmtDate(d) {
+      var m = d.getMonth() + 1; var day = d.getDate();
+      return d.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day);
+    }
+    document.getElementById('rangeText').textContent =
+      '可预约日期:' + fmtDate(minBookDate) + ' 至 ' + fmtDate(maxBookDate);
     var currentYear = today.getFullYear();
     var currentMonth = today.getMonth();
     var selectedDate = null;
@@ -231,7 +270,9 @@
     function getSlots(year, month, day) {
       var d = new Date(year, month, day);
       var dow = d.getDay();
-      if (d < new Date(today.getFullYear(), today.getMonth(), today.getDate())) return -1;
+      // 早于7天后或超出30天窗口均不可约
+      if (d < minBookDate) return -1;
+      if (d > maxBookDate) return -1;
       if (dow === 0 || dow === 6) return 0;
       var seed = (day * 7 + month * 13) % 20;
       if (seed < 3) return 0;
@@ -241,7 +282,9 @@
     function renderCalendar() {
       grid.innerHTML = '';
       monthLabel.textContent = currentYear + '年' + (currentMonth + 1) + '月';
-      prevBtn.disabled = (currentYear === today.getFullYear() && currentMonth <= today.getMonth());
+      prevBtn.disabled = (currentYear === minBookDate.getFullYear() && currentMonth <= minBookDate.getMonth());
+      nextBtn.disabled = (currentYear > maxBookDate.getFullYear()) ||
+        (currentYear === maxBookDate.getFullYear() && currentMonth >= maxBookDate.getMonth());
       var firstDay = new Date(currentYear, currentMonth, 1);
       var startDow = firstDay.getDay();
       startDow = startDow === 0 ? 6 : startDow - 1;
@@ -291,7 +334,8 @@
       renderCalendar();
     });
 
-    selectedDate = { y: today.getFullYear(), m: today.getMonth(), d: today.getDate() };
+    // 默认选中最早可预约日期(7天后)
+    selectedDate = { y: minBookDate.getFullYear(), m: minBookDate.getMonth(), d: minBookDate.getDate() };
     renderCalendar();
 
     function openConfirm() {
diff --git a/employee-app/health-checkup/gastro-hospital.html b/employee-app/health-checkup/gastro-hospital.html
index 100c711..8ed0aaa 100644
--- a/employee-app/health-checkup/gastro-hospital.html
+++ b/employee-app/health-checkup/gastro-hospital.html
@@ -185,14 +185,15 @@
           </div>
           <div class="radio-dot"></div>
         </div>
-        <div class="hospital-card" onclick="selectHospital(this)">
+        <!-- [交互] 唐都医院胃肠镜预约需先办理就诊卡,问卷首页出现就诊卡题 -->
+        <div class="hospital-card" data-hospital="tangdu" 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__name">唐都医院</div>
               <div class="hospital-card__addr">陕西西安市</div>
               <div class="hospital-card__tags">
-                <span class="htag htag--routine">常规体检</span>
+                <span class="htag htag--gastro">胃肠镜体检</span>
               </div>
             </div>
           </div>
@@ -202,7 +203,7 @@
     </div>
 
     <div class="bottom-actions">
-      <button class="bottom-actions__btn" onclick="location.href='gastro-questionnaire.html'">下一步</button>
+      <button class="bottom-actions__btn" onclick="goNext()">下一步</button>
     </div>
 
     <div class="modal-overlay hidden" id="personModal">
@@ -227,6 +228,15 @@
       document.querySelectorAll('.hospital-card').forEach(c => c.classList.remove('active'));
       el.classList.add('active');
     }
+    // [交互] 选中唐都医院时携带参数进入问卷,问卷页展示就诊卡题;其他医院维持原问卷
+    function goNext() {
+      var active = document.querySelector('.hospital-card.active');
+      if (active && active.dataset.hospital === 'tangdu') {
+        location.href = 'gastro-questionnaire.html?hospital=tangdu';
+      } else {
+        location.href = 'gastro-questionnaire.html';
+      }
+    }
     function openModal() { document.getElementById('personModal').classList.remove('hidden'); }
     function closeModal() { document.getElementById('personModal').classList.add('hidden'); }
   </script>
diff --git a/employee-app/health-checkup/gastro-preselect-done.html b/employee-app/health-checkup/gastro-preselect-done.html
new file mode 100644
index 0000000..cad3159
--- /dev/null
+++ b/employee-app/health-checkup/gastro-preselect-done.html
@@ -0,0 +1,171 @@
+<!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;
+      --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 220px, #f7f9fb 100%); padding-bottom: 120px; }
+    .scroll-content::-webkit-scrollbar { display: none; }
+    .page-body { padding: 16px; }
+    /* 提交成功卡：绿色对勾 + 提交时间 + 不可修改说明 */
+    .success-card {
+      background: #fff; border-radius: 18px; padding: 24px 16px 18px; margin-bottom: 18px;
+      box-shadow: var(--shadow); border: 1px solid var(--border); text-align: center;
+    }
+    .success-card__icon {
+      width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
+      background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+      display: flex; align-items: center; justify-content: center;
+      box-shadow: 0 10px 24px rgba(82, 196, 26, 0.28);
+    }
+    .success-card__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
+    .success-card__time { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .success-card__note {
+      display: inline-block; padding: 6px 12px; border-radius: 12px;
+      background: #f6ffed; border: 1px solid #b7eb8f;
+      font-size: 12px; color: #52c41a; line-height: 1.6;
+    }
+    .section-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
+    .section-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    /* 已选医院只读卡片：不可点击，右侧固定绿色对勾 */
+    .hospital-card {
+      background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 12px;
+      border: 2px solid var(--primary); box-shadow: var(--shadow);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .hospital-card__info { display: flex; align-items: center; gap: 12px; }
+    .hospital-card__icon {
+      width: 42px; height: 42px; border-radius: 14px;
+      background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%);
+      display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
+    }
+    .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--gastro { background: #f6ffed; color: #52c41a; }
+    .htag--routine { background: #e6f7ff; color: #1890ff; }
+    .checked-mark {
+      width: 22px; height: 22px; border-radius: 6px; background: var(--primary);
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .bottom-actions { position: absolute; left: 16px; right: 16px; bottom: 18px; padding-bottom: 16px; }
+    .bottom-actions__btn {
+      width: 100%; height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600;
+      border: none; cursor: pointer; 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">
+      <!-- [交互] 返回首页: 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="success-card">
+          <div class="success-card__icon">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+          </div>
+          <div class="success-card__title">预选提交成功</div>
+          <div class="success-card__time">提交时间：2026-09-03 12:00</div>
+          <div class="success-card__note">感谢您的参与，您的意向将作为2027年度承检医院安排参考<br>预选结果提交后不可修改</div>
+        </div>
+
+        <div class="section-title">我选择的意向医院</div>
+        <div class="section-sub">共 <b style="color:#0f9b9b;">2</b> 家，以下为只读回显，不可再次编辑</div>
+
+        <div class="hospital-card">
+          <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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="checked-mark">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+          </div>
+        </div>
+
+        <div class="hospital-card">
+          <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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="checked-mark">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-actions">
+      <!-- [交互] 点击返回首页: index.html，首页通知条同步变为「预选已完成」态 -->
+      <button class="bottom-actions__btn" onclick="location.href='index.html'">返回首页</button>
+    </div>
+  </div>
+  </body>
+</html>
diff --git a/employee-app/health-checkup/gastro-preselect.html b/employee-app/health-checkup/gastro-preselect.html
new file mode 100644
index 0000000..22f11ba
--- /dev/null
+++ b/employee-app/health-checkup/gastro-preselect.html
@@ -0,0 +1,294 @@
+<!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;
+      --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; }
+    /* 征集说明卡：目的、周期、不可逆提示 */
+    .intro-card {
+      background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 18px;
+      box-shadow: var(--shadow); border: 1px solid var(--border);
+    }
+    .intro-card__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
+    /* 计划信息行：组织单位 / 开始日期 / 截止日期，左标签右值 */
+    .intro-card__field {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 9px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;
+    }
+    .intro-card__field span { color: var(--text-muted); }
+    .intro-card__field b { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
+    .intro-card__field:last-of-type { border-bottom: none; padding-bottom: 2px; }
+    .intro-card__warn {
+      margin-top: 10px; padding: 8px 10px; border-radius: 10px;
+      background: #fff2f0; border: 1px solid #ffccc7;
+      font-size: 12px; color: #f5222d; line-height: 1.6;
+    }
+    .section-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
+    .section-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+    .hospital-card {
+      background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 12px;
+      border: 2px solid transparent; box-shadow: var(--shadow); cursor: pointer;
+      display: flex; align-items: center; justify-content: space-between; transition: all 0.25s ease;
+    }
+    .hospital-card.active { border-color: var(--primary); background: var(--primary-light); }
+    .hospital-card__info { display: flex; align-items: center; gap: 12px; }
+    .hospital-card__icon {
+      width: 42px; height: 42px; border-radius: 14px;
+      background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%);
+      display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
+    }
+    .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--gastro { background: #f6ffed; color: #52c41a; }
+    .htag--routine { background: #e6f7ff; color: #1890ff; }
+    /* 多选复选框：区别于正式预约的单选圆点 */
+    .check-box {
+      width: 22px; height: 22px; border-radius: 6px; border: 2px solid #d9d9d9;
+      position: relative; flex-shrink: 0; transition: all 0.25s ease; background: #fff;
+    }
+    .check-box::after {
+      content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
+      border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
+      opacity: 0; transition: opacity 0.2s ease;
+    }
+    .hospital-card.active .check-box { border-color: var(--primary); background: var(--primary); }
+    .hospital-card.active .check-box::after { opacity: 1; }
+    .bottom-actions { position: absolute; left: 16px; right: 16px; bottom: 18px; padding-bottom: 16px; }
+    .bottom-actions__btn {
+      width: 100%; height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600;
+      border: none; cursor: pointer; background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
+      color: #fff; box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22); transition: all 0.2s ease;
+    }
+    .bottom-actions__btn:disabled {
+      background: #d9d9d9; color: #fff; box-shadow: none; cursor: not-allowed;
+    }
+    /* 提交二次确认弹窗：因预选仅可填写一次，提交前强制确认 */
+    .modal-overlay {
+      position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 100;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .modal-overlay.hidden { display: none; }
+    .modal-card { width: 340px; background: #fff; border-radius: 24px; padding: 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
+    .modal-card__title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+    .modal-card__sub { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 16px; line-height: 1.6; }
+    .modal-card__sub b { color: #f5222d; }
+    .modal-hospital-list { background: #f7f9fb; border-radius: 14px; padding: 12px 14px; margin-bottom: 20px; }
+    .modal-hospital-list__title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
+    .modal-hospital-list__item {
+      display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
+      color: var(--text-primary); padding: 5px 0;
+    }
+    .modal-hospital-list__item::before { content: '🏥'; font-size: 14px; }
+    .modal-btns { display: flex; gap: 12px; }
+    .modal-btn {
+      flex: 1; height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600;
+      border: none; cursor: pointer;
+    }
+    .modal-btn--cancel { background: #f5f5f5; color: var(--text-secondary); }
+    .modal-btn--confirm {
+      background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
+      color: #fff; box-shadow: 0 8px 20px rgba(19, 194, 194, 0.2);
+    }
+  </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="intro-card">
+          <div class="intro-card__title">📋 2027 年度胃肠镜体检医院意向征集</div>
+          <div class="intro-card__field"><span>预选日期：  2026-07-01至2026-10-20</span></div>
+          <div class="intro-card__warn">⚠️ 本次预选每人仅可填写一次，提交后不可修改，请谨慎选择。</div>
+        </div>
+
+        <div class="section-title">选择意向医院</div>
+        <div class="section-sub">点击卡片可多选，当前已选 <span id="selectedCount">0</span> 家</div>
+
+        <div class="hospital-card" onclick="toggleHospital(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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+                <span class="htag htag--routine">常规体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="check-box"></div>
+        </div>
+
+        <div class="hospital-card" onclick="toggleHospital(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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="check-box"></div>
+        </div>
+
+        <div class="hospital-card" onclick="toggleHospital(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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="check-box"></div>
+        </div>
+
+        <div class="hospital-card" onclick="toggleHospital(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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+                <span class="htag htag--routine">常规体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="check-box"></div>
+        </div>
+
+        <div class="hospital-card" onclick="toggleHospital(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 class="hospital-card__tags">
+                <span class="htag htag--gastro">胃肠镜体检</span>
+              </div>
+            </div>
+          </div>
+          <div class="check-box"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-actions">
+      <!-- [交互] 未选择任何医院时按钮置灰禁用；点击提交弹出二次确认弹窗 -->
+      <button class="bottom-actions__btn" id="submitBtn" disabled onclick="openConfirm()">提交预选</button>
+    </div>
+
+    <!-- [交互] 二次确认弹窗：列出已选医院，确认后跳转 gastro-preselect-done.html -->
+    <div class="modal-overlay hidden" id="confirmModal">
+      <div class="modal-card">
+        <div class="modal-card__title">确认提交预选</div>
+        <div class="modal-card__sub">本次预选<b>仅可填写一次，提交后不可修改</b><br>请确认以下意向医院无误</div>
+        <div class="modal-hospital-list">
+          <div class="modal-hospital-list__title">已选 <span id="modalCount">0</span> 家医院</div>
+          <div id="modalHospitalList"></div>
+        </div>
+        <div class="modal-btns">
+          <button class="modal-btn modal-btn--cancel" onclick="closeConfirm()">返回修改</button>
+          <button class="modal-btn modal-btn--confirm" onclick="confirmSubmit()">确认提交</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // 多选切换：点击卡片勾选/取消勾选
+    function toggleHospital(el) {
+      el.classList.toggle('active');
+      updateSubmitState();
+    }
+    // 根据已选数量更新计数文案与提交按钮禁用态
+    function updateSubmitState() {
+      var count = document.querySelectorAll('.hospital-card.active').length;
+      document.getElementById('selectedCount').textContent = count;
+      var btn = document.getElementById('submitBtn');
+      btn.disabled = count === 0;
+      btn.textContent = count === 0 ? '提交预选' : '提交预选（已选 ' + count + ' 家）';
+    }
+    // 打开二次确认弹窗前，将已选医院名称注入弹窗列表
+    function openConfirm() {
+      var actives = document.querySelectorAll('.hospital-card.active');
+      if (actives.length === 0) return;
+      var html = '';
+      actives.forEach(function (card) {
+        html += '<div class="modal-hospital-list__item">' + card.querySelector('.hospital-card__name').textContent + '</div>';
+      });
+      document.getElementById('modalHospitalList').innerHTML = html;
+      document.getElementById('modalCount').textContent = actives.length;
+      document.getElementById('confirmModal').classList.remove('hidden');
+    }
+    function closeConfirm() { document.getElementById('confirmModal').classList.add('hidden'); }
+    // [交互] 确认提交后进入已提交只读页: gastro-preselect-done.html
+    function confirmSubmit() { location.href = 'gastro-preselect-done.html'; }
+  </script>
+</body>
+</html>
diff --git a/employee-app/health-checkup/gastro-questionnaire.html b/employee-app/health-checkup/gastro-questionnaire.html
index 0d0ccdc..97d5bc2 100644
--- a/employee-app/health-checkup/gastro-questionnaire.html
+++ b/employee-app/health-checkup/gastro-questionnaire.html
@@ -103,6 +103,50 @@
       background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
       color: #fff; box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
     }
+    /* 就诊卡题:必填卡号输入与办理提示 */
+    .q-card__required { color: #ff4d4f; font-style: normal; margin-left: 2px; }
+    .q-card__hint {
+      margin-top: 12px; font-size: 13px; color: var(--primary-dark); font-weight: 600;
+      cursor: pointer; display: inline-flex; align-items: center; gap: 2px; text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .q-card__input { margin-top: 14px; }
+    .q-card__input-el {
+      width: 100%; height: 44px; border: 2px solid #e8e8e8; border-radius: 22px;
+      padding: 0 16px; font-size: 14px; font-family: inherit; color: var(--text-primary);
+      outline: none; background: #fff; transition: border-color 0.2s;
+    }
+    .q-card__input-el:focus { border-color: var(--primary); }
+    .q-card__guide-step {
+      display: flex; gap: 8px; font-size: 12px; line-height: 1.7;
+      color: #614700; margin-bottom: 6px;
+    }
+    .q-card__guide-step:last-child { margin-bottom: 0; }
+    .q-card__guide-no {
+      width: 16px; height: 16px; border-radius: 50%; background: #faad14; color: #fff;
+      font-size: 10px; font-weight: 700; display: flex; align-items: center;
+      justify-content: center; flex-shrink: 0; margin-top: 3px;
+    }
+    /* 就诊卡办理流程弹窗 */
+    /* 页面内容较长时手机壳会被撑高,弹窗改为顶部定位并在打开时滚回页首,保证可见 */
+    .modal-overlay {
+      position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 100;
+      display: flex; align-items: flex-start; justify-content: center; padding: 24px;
+    }
+    .modal-overlay.hidden { display: none; }
+    .modal-card {
+      width: 100%; background: #fff; border-radius: 24px; padding: 22px 20px 18px;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.16); margin-top: 90px;
+    }
+    .modal-card__title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 14px; }
+    .modal-card__sub {
+      font-size: 12px; color: var(--text-muted); line-height: 1.6; text-align: center; margin-top: 12px;
+    }
+    .modal-confirm-btn {
+      margin-top: 18px; 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%);
+      color: #fff; box-shadow: 0 8px 20px rgba(19,194,194,0.2);
+    }
   </style>
 </head>
 <body>
@@ -133,6 +177,15 @@
         <div class="section-title">胃肠镜检查问卷</div>
         <div class="section-desc">请如实填写以下信息，以便医生评估检查方案</div>
 
+        <!-- [交互] 就诊卡题仅在选择唐都医院时出现(?hospital=tangdu),卡号为必填;点击「没有就诊卡?」弹窗查看办理流程 -->
+        <div class="q-card" id="qVisitCard" style="display:none">
+          <div class="q-card__label"><span class="q-card__index">1</span>请填写唐都医院就诊卡号 <em class="q-card__required">*</em></div>
+          <div class="q-card__input">
+            <input class="q-card__input-el" type="text" maxlength="20" placeholder="请输入就诊卡号">
+          </div>
+          <div class="q-card__hint" onclick="openCardModal()">没有就诊卡？</div>
+        </div>
+
         <div class="q-card">
           <div class="q-card__label"><span class="q-card__index">1</span>是否使用阿司匹林？</div>
           <div class="q-options">
@@ -187,6 +240,18 @@
       <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="location.href='gastro-hospital.html'">上一步</button>
       <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="location.href='gastro-date.html'">下一步</button>
     </div>
+
+    <!-- [交互] 就诊卡办理流程弹窗 -->
+    <div class="modal-overlay hidden" id="cardModal">
+      <div class="modal-card">
+        <div class="modal-card__title">就诊卡办理流程</div>
+        <div class="q-card__guide-step"><span class="q-card__guide-no">1</span><span>携带本人身份证，前往唐都医院门诊大厅建卡窗口或自助机现场办理就诊卡。</span></div>
+        <div class="q-card__guide-step"><span class="q-card__guide-no">2</span><span>或关注「唐都医院」微信公众号，在线申领电子就诊卡。</span></div>
+        <div class="q-card__guide-step"><span class="q-card__guide-no">3</span><span>办理完成后返回本页，填写就诊卡号即可继续预约。</span></div>
+        <div class="modal-card__sub">就诊卡号为预约必填项，未办理将无法完成胃肠镜预约</div>
+        <button class="modal-confirm-btn" onclick="closeCardModal()">知道了</button>
+      </div>
+    </div>
   </div>
 
   <script>
@@ -195,6 +260,24 @@
       group.querySelectorAll('.q-option').forEach(function(b) { b.classList.remove('active'); });
       btn.classList.add('active');
     }
+    // [交互] 「没有就诊卡?」弹窗查看办理流程
+    function openCardModal() {
+      window.scrollTo(0, 0);
+      document.getElementById('cardModal').classList.remove('hidden');
+    }
+    function closeCardModal() { document.getElementById('cardModal').classList.add('hidden'); }
+    // [交互] 根据URL参数决定是否展示就诊卡题,并按可见卡片重新编排序号
+    (function initFromUrl() {
+      var hospital = new URLSearchParams(window.location.search).get('hospital');
+      document.getElementById('qVisitCard').style.display = (hospital === 'tangdu') ? '' : 'none';
+      var idx = 1;
+      var cards = document.querySelectorAll('.q-card');
+      for (var i = 0; i < cards.length; i++) {
+        if (cards[i].style.display === 'none') continue;
+        var badge = cards[i].querySelector('.q-card__index');
+        if (badge) badge.textContent = idx++;
+      }
+    })();
   </script>
 </body>
 </html>
diff --git a/employee-app/health-checkup/index.html b/employee-app/health-checkup/index.html
index e18c328..93b4dc3 100644
--- a/employee-app/health-checkup/index.html
+++ b/employee-app/health-checkup/index.html
@@ -214,6 +214,71 @@
       transition: all 0.25s ease;
     }
     .banner__dot.is-active { width: 18px; background: #13c2c2; }
+    /* 胃肠镜医院预选事件通知条：限期待办入口，仅征集期展示，橙色区别于下方青绿主色内容区 */
+    .notice-bar {
+      margin-top: 14px;
+      background: linear-gradient(135deg, #fff7e6 0%, #fffdf7 100%);
+      border: 1px solid #ffe7ba;
+      border-radius: 16px;
+      padding: 12px 14px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      box-shadow: 0 4px 14px rgba(250, 140, 22, 0.08);
+      transition: transform 0.15s ease;
+    }
+    .notice-bar:active { transform: scale(0.985); }
+    .notice-bar__icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      flex-shrink: 0;
+    }
+    .notice-bar__content { flex: 1; min-width: 0; }
+    .notice-bar__title {
+      font-size: 14px;
+      font-weight: 700;
+      color: #d46b08;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .notice-bar__live {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #f5222d;
+      animation: noticePulse 1.2s ease-in-out infinite;
+    }
+    @keyframes noticePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+    .notice-bar__desc {
+      margin-top: 3px;
+      font-size: 11px;
+      line-height: 1.5;
+      color: #ad6800;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .notice-bar__action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      padding: 0 12px;
+      border-radius: 14px;
+      background: #fa8c16;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
     .section-title {
       font-size: 16px;
       font-weight: 700;
@@ -442,6 +507,19 @@
           <span class="banner__dot"></span>
         </div>
 
+        <!-- [交互] 胃肠镜医院预选通知条：仅管理员开启预选计划期间展示；
+             未提交时点击进入: gastro-preselect.html（示意当前态）；
+             员工提交后变为完成态（标题改「预选已完成」、徽标变绿勾、按钮改「查看结果 ›」），点击进入: gastro-preselect-done.html；
+             征集期结束后整条隐藏 -->
+        <div class="notice-bar" onclick="location.href='gastro-preselect.html'">
+          <span class="notice-bar__icon">📢</span>
+          <div class="notice-bar__content">
+            <div class="notice-bar__title">胃肠镜体检医院预选进行中<span class="notice-bar__live"></span></div>
+            <div class="notice-bar__desc">选出您倾向的体检医院，截止 09-15，每人仅可填写一次</div>
+          </div>
+          <span class="notice-bar__action">去选择</span>
+        </div>
+
         <div class="section-title">体检服务</div>
         <div class="feature-list">
           <!-- [交互] 点击跳转至: booking-type.html -->
diff --git a/employee-app/health-checkup/my-appointments-all.html b/employee-app/health-checkup/my-appointments-all.html
index 8ce6bd5..c9beba7 100644
--- a/employee-app/health-checkup/my-appointments-all.html
+++ b/employee-app/health-checkup/my-appointments-all.html
@@ -278,17 +278,6 @@
       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;
     }
@@ -469,11 +458,6 @@
           </div>
         </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="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>
@@ -497,11 +481,6 @@
           </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>
@@ -538,8 +517,8 @@
             <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>
+        <!-- [交互] 点击跳转至: booking-date.html（重新走常规体检预约流程） -->
+        <button class="rebook-btn" type="button" onclick="location.href='booking-date.html'">重新预约</button>
       </div>
 
       <!-- ======================= 常规体检 · 无预约信息 ======================= -->
@@ -557,45 +536,6 @@
 
       <!-- ======================= 胃肠镜体检 · 待体检 ======================= -->
       <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">
@@ -617,11 +557,6 @@
           <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>
@@ -646,11 +581,6 @@
           </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>
diff --git a/employee-app/health-checkup/report-gastro.html b/employee-app/health-checkup/report-gastro.html
index 9956242..ad754bd 100644
--- a/employee-app/health-checkup/report-gastro.html
+++ b/employee-app/health-checkup/report-gastro.html
@@ -79,6 +79,16 @@
       font-weight: 600;
       color: var(--text-primary);
     }
+    .nav-action {
+      margin-left: auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      color: var(--primary-dark);
+      text-decoration: none;
+      font-weight: 600;
+    }
     .scroll-content {
       flex: 1;
       overflow-y: auto;
@@ -244,10 +254,7 @@
       display: inline-flex;
     }
 
-    /* 报告图片 */
-    .image-section {
-      padding: 14px 16px 4px;
-    }
+    /* 影像报告 */
     .image-section__label {
       font-size: 12px;
       color: var(--text-muted);
@@ -314,6 +321,11 @@
       <!-- [交互] 返回按钮：返回体检报告列表 -->
       <span class="nav-back" onclick="location.href='reports.html'">‹</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>
+        下载
+      </a>
     </div>
     <div class="scroll-content">
       <div class="page-body">
@@ -374,15 +386,6 @@
             </div>
           </div>
 
-          <!-- 胃镜报告图片 -->
-          <div class="image-section">
-            <div class="image-section__label">胃镜报告图片</div>
-            <div class="image-view-link">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-              查看
-            </div>
-          </div>
-
           <div class="divider"></div>
 
           <!-- ========== 肠镜检查 ========== -->
@@ -416,18 +419,22 @@
             </div>
           </div>
 
-          <!-- 肠镜报告图片 -->
-          <div class="image-section">
-            <div class="image-section__label">肠镜报告图片</div>
+          <div class="divider"></div>
+
+          <!-- ========== 影像报告 ========== -->
+          <div class="report-section">
+            <div class="report-section__title">影像报告</div>
+            <div class="image-section__label">胃镜报告</div>
             <div class="image-view-link">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
               查看
             </div>
-          </div>
-
-          <!-- 货件报告图片 -->
-          <div class="image-section">
-            <div class="image-section__label">货件报告图片</div>
+            <div class="image-section__label">肠镜报告</div>
+            <div class="image-view-link">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+              查看
+            </div>
+            <div class="image-section__label">活检报告</div>
             <div class="image-view-link">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
               查看
diff --git a/index.html b/index.html
index 635b2bf..7ed0766 100644
--- a/index.html
+++ b/index.html
@@ -593,6 +593,8 @@ const SITE_MAP = [
       { file:'booking-project-selected.html', label:'预约-已选项目' },
       { file:'booking-date.html', label:'预约-选择日期' },
       { file:'booking-date-selected.html', label:'预约-已选日期' },
+      { file:'gastro-preselect.html', label:'胃肠镜医院预选' },
+      { file:'gastro-preselect-done.html', label:'胃肠镜预选-已提交' },
       { file:'my-appointments-all.html', label:'我的预约' },
       { file:'hospital-checkin.html', label:'到院体检' },
       { file:'reports.html', label:'体检报告' },