From 524de4c289190669a3b66655638f530582e0f0b9 Mon Sep 17 00:00:00 2001
From: liuyunqin <liuyunqin@rk-health.com>
Date: Fri, 5 Jun 2026 09:30:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B4=BB=E5=8A=A8=E5=88=97=E8=A1=A8Tab?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=E4=BA=A4=E6=8D=A2+=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=96=87=E6=A1=88=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 已参加/待参加Tab换顺序,已参加默认选中
- 待参加Tab添加红圈badge显示待参加数量
- 待参加活动状态'未开始'改为'待开始'
- 已参加列表新增进行中状态活动卡片

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../health-monitor/health-checkup/index.html  | 60 +++++++++++++------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/employee-app/health-monitor/health-checkup/index.html b/employee-app/health-monitor/health-checkup/index.html
index 48aa96e..74c2857 100644
--- a/employee-app/health-monitor/health-checkup/index.html
+++ b/employee-app/health-monitor/health-checkup/index.html
@@ -23,6 +23,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
 .tab-item { flex: 1; text-align: center; padding: 10px 0 12px; font-size: 14px; color: #999; cursor: pointer; position: relative; font-weight: 500; transition: color 0.2s; }
 .tab-item.active { color: #667eea; font-weight: 600; }
 .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: #667eea; border-radius: 2px; }
+.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: #ff4d4f; color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; line-height: 1; margin-left: 4px; vertical-align: middle; }
 
 /* 活动列表 */
 .activity-section { padding: 12px; }
@@ -92,8 +93,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
   <!-- Tab 切换 -->
   <div class="tab-bar">
     <div class="tab-list">
-      <div class="tab-item active" data-tab="pending" onclick="switchTab(this)">待参加</div>
-      <div class="tab-item" data-tab="done" onclick="switchTab(this)">已参加</div>
+      <div class="tab-item active" data-tab="done" onclick="switchTab(this)">已参加</div>
+      <div class="tab-item" data-tab="pending" onclick="switchTab(this)">待参加<span class="tab-badge">2</span></div>
     </div>
   </div>
 
@@ -101,7 +102,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
     <div class="activity-section">
 
       <!-- 待参加列表 -->
-      <div class="activity-list" id="tab-pending">
+      <div class="activity-list" id="tab-pending" style="display:none;">
 
         <!-- 活动1：待参加 -->
         <a class="activity-card activity-card--pending" href="activity-detail.html?id=1">
@@ -128,17 +129,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
               <div class="attendance-bar__fill" style="width: 36%;"></div>
             </div>
           </div>
-          <div class="activity-card__participate">
-            <span class="participate--pending">⏰ 尚未参加</span>
-            <a class="participate-btn" href="activity-fill.html?id=1">去填写</a>
-          </div>
+
         </a>
 
         <!-- 活动2：待参加 -->
         <a class="activity-card activity-card--pending" href="activity-detail.html?id=2">
           <div class="activity-card__header">
             <div class="activity-card__name">2026年第三季度健康排查</div>
-            <div class="activity-card__status status--pending">未开始</div>
+            <div class="activity-card__status status--pending">待开始</div>
           </div>
           <div class="activity-card__rows">
             <div class="activity-card__row">
@@ -159,18 +157,46 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
               <div class="attendance-bar__fill" style="width: 0%;"></div>
             </div>
           </div>
-          <div class="activity-card__participate">
-            <span class="participate--pending">⏰ 尚未开始</span>
-          </div>
+
         </a>
 
       </div>
 
       <!-- 已参加列表 -->
-      <div class="activity-list" id="tab-done" style="display:none;">
+      <div class="activity-list" id="tab-done">
 
-        <!-- 活动3：已参加 -->
+        <!-- 活动3：已参加-进行中 -->
         <a class="activity-card activity-card--done" href="activity-detail.html?id=3">
+          <div class="activity-card__header">
+            <div class="activity-card__name">2026年第二季度健康排查</div>
+            <div class="activity-card__status status--ongoing">进行中</div>
+          </div>
+          <div class="activity-card__rows">
+            <div class="activity-card__row">
+              <svg width="14" height="14" fill="none"><rect x="2" y="2" width="10" height="11" rx="1.5" stroke="#999" stroke-width="1.2"/><path d="M1 6h12M6 1v3M8 1v3" stroke="#999" stroke-width="1.2" stroke-linecap="round"/></svg>
+              2026-06-01 ~ 2026-06-30
+            </div>
+            <div class="activity-card__row">
+              <svg width="14" height="14" fill="none"><path d="M7 1a3.5 3.5 0 013.5 3.5c0 2.5-3.5 6-3.5 6S3.5 7 3.5 4.5A3.5 3.5 0 017 1z" stroke="#999" stroke-width="1.2"/><circle cx="7" cy="4.5" r="1.2" stroke="#999" stroke-width="1.2"/></svg>
+              <span>工会办公室</span>
+            </div>
+          </div>
+          <div class="attendance-bar">
+            <div class="attendance-bar__text">
+              <span>应参加 <strong>356</strong> 人</span>
+              <span>已参加 <strong>210</strong> 人</span>
+            </div>
+            <div class="attendance-bar__track">
+              <div class="attendance-bar__fill" style="width: 59%;"></div>
+            </div>
+          </div>
+          <div class="activity-card__participate">
+            <span class="participate--done">✓ 已参加 &nbsp;2026-06-05 10:30</span>
+          </div>
+        </a>
+
+        <!-- 活动4：已参加-已结束 -->
+        <a class="activity-card activity-card--done" href="activity-detail.html?id=4">
           <div class="activity-card__header">
             <div class="activity-card__name">2026年第一季度健康排查</div>
             <div class="activity-card__status status--ended">已结束</div>
@@ -199,8 +225,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
           </div>
         </a>
 
-        <!-- 活动4：已参加 -->
-        <a class="activity-card activity-card--done" href="activity-detail.html?id=4">
+        <!-- 活动5：已参加 -->
+        <a class="activity-card activity-card--done" href="activity-detail.html?id=5">
           <div class="activity-card__header">
             <div class="activity-card__name">2025年第四季度健康排查</div>
             <div class="activity-card__status status--ended">已结束</div>
@@ -229,8 +255,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
           </div>
         </a>
 
-        <!-- 活动5：已参加 -->
-        <a class="activity-card activity-card--done" href="activity-detail.html?id=5">
+        <!-- 活动6：已参加 -->
+        <a class="activity-card activity-card--done" href="activity-detail.html?id=6">
           <div class="activity-card__header">
             <div class="activity-card__name">2025年第三季度健康排查</div>
             <div class="activity-card__status status--ended">已结束</div>