yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 活动列表Tab顺序交换+状态文案调整

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-06-05 09:30:02 +08:00
co-authored by Claude Opus 4.8
parent 27f72d8049
commit 524de4c289
1 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-monitor/health-checkup/index.html
+43 -17
View File
@@ -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>