cfc/cfc-frontend/.superpowers/brainstorm/1782495-1783004956/content/layout-myactivities-v1.html

<h2>活动主页 — 「我的活动」优先布局</h2>
<p class="subtitle">顶部 Tab：「我的活动」|「发现活动」|「历史记录」</p>

<div class="mockup">
  <div class="mockup-header">活动主页 — 我的活动优先</div>
  <div class="mockup-body">
    <!-- Tab Bar -->
    <div style="display:flex;background:#fff;border-bottom:1px solid #eee;padding:0 16px;">
      <div style="flex:1;text-align:center;padding:12px 0;color:#F97316;font-weight:bold;border-bottom:2px solid #F97316;">我的活动</div>
      <div style="flex:1;text-align:center;padding:12px 0;color:#999;">发现活动</div>
      <div style="flex:1;text-align:center;padding:12px 0;color:#999;">历史记录</div>
    </div>

    <!-- 我的活动 Tab Content -->
    <div style="padding:16px;">

      <!-- 报名状态筛选 -->
      <div style="display:flex;gap:8px;margin-bottom:12px;">
        <div style="background:#FFF7ED;color:#F97316;padding:6px 14px;border-radius:20px;font-size:12px;">全部</div>
        <div style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:20px;font-size:12px;">待开始</div>
        <div style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:20px;font-size:12px;">报名待审核</div>
        <div style="background:#f5f5f5;color:#666;padding:6px 14px;border-radius:20px;font-size:12px;">已签到</div>
      </div>

      <!-- 待参加活动 Card -->
      <div style="background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
        <div style="display:flex;">
          <div style="width:80px;height:80px;background:linear-gradient(135deg,#FDE68A,#F97316);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;">🏃</div>
          <div style="flex:1;margin-left:12px;">
            <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:4px;">周末亲子自然探索活动</div>
            <div style="font-size:11px;color:#999;margin-bottom:6px;">🕐 2026-07-05 09:00 ~ 17:00</div>
            <div style="font-size:11px;color:#999;margin-bottom:6px;">📍 朝阳公园东门集合</div>
            <div style="display:flex;align-items:center;gap:6px;">
              <span style="background:#F0FDF4;color:#22C55E;font-size:10px;padding:2px 8px;border-radius:4px;">报名成功</span>
              <span style="background:#FFF7ED;color:#F97316;font-size:10px;padding:2px 8px;border-radius:4px;">3天后开始</span>
            </div>
          </div>
        </div>
        <div style="margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:8px;">
          <button style="background:#fff;border:1px solid #ddd;color:#666;padding:6px 16px;border-radius:16px;font-size:11px;">取消报名</button>
          <button style="background:linear-gradient(135deg,#F97316,#FB923C);border:none;color:#fff;padding:6px 16px;border-radius:16px;font-size:11px;">签到</button>
        </div>
      </div>

      <!-- 待审核 Card -->
      <div style="background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
        <div style="display:flex;">
          <div style="width:80px;height:80px;background:linear-gradient(135deg,#E0E7FF,#6366F1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;">🎨</div>
          <div style="flex:1;margin-left:12px;">
            <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:4px;">青少年创客编程体验课</div>
            <div style="font-size:11px;color:#999;margin-bottom:6px;">🕐 2026-07-12 14:00 ~ 16:00</div>
            <div style="font-size:11px;color:#999;margin-bottom:6px;">📍 中关村创业大厦3层</div>
            <div style="display:flex;align-items:center;gap:6px;">
              <span style="background:#FEF3C7;color:#D97706;font-size:10px;padding:2px 8px;border-radius:4px;">报名待审核</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态引导 -->
      <div style="text-align:center;padding:40px 20px;background:#fff;border-radius:12px;">
        <div style="font-size:48px;margin-bottom:12px;">📋</div>
        <div style="font-size:14px;color:#666;margin-bottom:4px;">暂无报名的活动</div>
        <div style="font-size:12px;color:#999;margin-bottom:16px;">去发现页探索精彩活动吧</div>
        <button style="background:linear-gradient(135deg,#F97316,#FB923C);border:none;color:#fff;padding:10px 24px;border-radius:20px;font-size:13px;">去发现活动</button>
      </div>
    </div>
  </div>
</div>

<div class="options" style="margin-top:16px;">
  <div class="option" data-choice="b1" onclick="toggleSelect(this)">
    <div class="letter">✓</div>
    <div class="content">
      <h3>这个布局方向可以</h3>
      <p>「我的活动」Tab 优先 + 状态筛选 + 空状态引导，发现页作为次级 Tab</p>
    </div>
  </div>
</div>