baskbuddy-zby/pages/achievement.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="../colors_and_type.css">
  <title>青核 Youthome - 成就徽章</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
      background: var(--youth-bg-page);
      color: var(--youth-text-secondary);
      overflow-x: hidden;
    }

    .page-container {
      width: 375px;
      min-height: 812px;
      margin: 0 auto;
      background: var(--youth-bg-page);
      position: relative;
      display: flex;
      flex-direction: column;
      padding-bottom: 40px;
    }

    /* 渐变头部 */
    .achievement-header {
      background: linear-gradient(135deg, #26C2BB 0%, #54CAC5 50%, #7EDDD9 100%);
      padding-bottom: 60px;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .achievement-header::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -40px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
    }

    .achievement-header::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -30px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
    }

    .status-bar {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      height: 44px;
      position: relative;
      z-index: 1;
    }

    .nav-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      border: none;
      background: transparent;
    }

    .nav-title { font-size: 17px; font-weight: 700; color: #fff; }

    /* 成就总览 */
    .achievement-overview {
      position: relative;
      z-index: 1;
      padding: 8px 24px 0;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .overview-big-icon {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      flex-shrink: 0;
    }

    .overview-info { flex: 1; }

    .overview-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .overview-desc {
      font-size: 12px;
      opacity: 0.85;
      line-height: 1.5;
    }

    .overview-count {
      display: flex;
      gap: 24px;
      margin-top: 12px;
    }

    .count-item { text-align: center; }
    .count-value { font-size: 22px; font-weight: 700; line-height: 1; }
    .count-label { font-size: 11px; opacity: 0.8; margin-top: 4px; }

    /* 分类Tab */
    .tab-bar {
      display: flex;
      background: var(--youth-bg-card);
      margin: -40px 16px 16px;
      border-radius: 16px;
      padding: 6px;
      position: relative;
      z-index: 2;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      flex-shrink: 0;
    }

    .tab-item {
      flex: 1;
      padding: 8px 0;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      color: var(--youth-text-tertiary);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-item.active {
      background: var(--youth-primary);
      color: #fff;
      font-weight: 600;
    }

    /* 成就区域 */
    .achievement-section {
      margin: 0 16px 20px;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .section-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--youth-text-primary);
    }

    .section-progress {
      font-size: 12px;
      color: var(--youth-text-tertiary);
    }

    .badge-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .badge-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--youth-bg-card);
      position: relative;
      overflow: hidden;
    }

    .badge-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .badge-item.unlocked .badge-icon {
      box-shadow: 0 4px 12px rgba(250,173,20,0.25);
    }

    .badge-item.locked .badge-icon {
      filter: grayscale(1);
      opacity: 0.35;
    }

    .badge-name {
      font-size: 11px;
      color: var(--youth-text-secondary);
      font-weight: 500;
      text-align: center;
    }

    .badge-item.locked .badge-name {
      color: var(--youth-text-quaternary);
    }

    /* 成就详情弹窗 */
    .badge-detail-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 999;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .badge-detail-modal.show { display: flex; }

    .detail-card {
      background: #fff;
      border-radius: 20px;
      padding: 28px 24px 24px;
      width: 100%;
      max-width: 280px;
      text-align: center;
      position: relative;
    }

    .detail-badge {
      width: 100px;
      height: 100px;
      margin: 0 auto 16px;
    }

    .detail-badge img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .detail-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--youth-text-primary);
      margin-bottom: 6px;
    }

    .detail-desc {
      font-size: 13px;
      color: var(--youth-text-tertiary);
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .detail-meta {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 16px;
    }

    .detail-meta-item {
      text-align: center;
    }

    .detail-meta-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--youth-primary);
    }

    .detail-meta-label {
      font-size: 11px;
      color: var(--youth-text-tertiary);
      margin-top: 2px;
    }

    .detail-close {
      width: 100%;
      height: 40px;
      background: var(--youth-primary);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .detail-close.locked-btn {
      background: var(--youth-bg-input);
      color: var(--youth-text-tertiary);
    }

    /* 底部说明 */
    .footer-tip {
      text-align: center;
      font-size: 12px;
      color: var(--youth-text-quaternary);
      padding: 8px 24px 0;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="page-container" data-dom-id="page-container">
    <div class="achievement-header">
      <div class="status-bar">
        <span>9:41</span>
        <div style="display:flex;align-items:center;gap:6px;">
          <svg width="17" height="11" viewBox="0 0 17 11" fill="#fff"><rect x="0" y="7" width="3" height="4" rx="0.5"></rect><rect x="4.5" y="5" width="3" height="6" rx="0.5"></rect><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"></rect><rect x="13.5" y="0" width="3" height="11" rx="0.5"></rect></svg>
          <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#fff" opacity="0.5"></rect><rect x="2" y="2" width="18" height="8" rx="1.5" fill="#fff"></rect><rect x="22.5" y="4" width="1.5" height="4" rx="0.5" fill="#fff" opacity="0.5"></rect></svg>
        </div>
      </div>

      <div class="top-nav">
        <button class="nav-btn" onclick="goBack()">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
        </button>
        <div class="nav-title">成就徽章</div>
        <button class="nav-btn">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
        </button>
      </div>

      <div class="achievement-overview">
        <div class="overview-big-icon">🏆</div>
        <div class="overview-info">
          <div class="overview-title">成就收藏家</div>
          <div class="overview-desc">完成任务解锁徽章<br>展现你的校园精彩时刻</div>
          <div class="overview-count">
            <div class="count-item">
              <div class="count-value">8</div>
              <div class="count-label">已解锁</div>
            </div>
            <div class="count-item">
              <div class="count-value">16</div>
              <div class="count-label">待解锁</div>
            </div>
            <div class="count-item">
              <div class="count-value">33%</div>
              <div class="count-label">完成度</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类Tab -->
    <div class="tab-bar">
      <div class="tab-item active" onclick="switchTab(this, 'all')">全部</div>
      <div class="tab-item" onclick="switchTab(this, 'unlocked')">已获得</div>
      <div class="tab-item" onclick="switchTab(this, 'locked')">未获得</div>
    </div>

    <!-- 核心功能徽章 -->
    <div class="achievement-section">
      <div class="section-header">
        <span class="section-title">核心功能徽章</span>
        <span class="section-progress">4 / 8</span>
      </div>
      <div class="badge-grid">
        <div class="badge-item unlocked" onclick="showDetail('活动达人', '参与并发起10场校园活动', '活动模块', true)">
          <div class="badge-icon"><img src="../assets/badge-activity-final.jpg" alt="活动达人"></div>
          <span class="badge-name">活动达人</span>
        </div>
        <div class="badge-item unlocked" onclick="showDetail('动态达人', '发布20条优质动态', '动态模块', true)">
          <div class="badge-icon"><img src="../assets/badge-moments-final.jpg" alt="动态达人" style="height: 62px;"></div>
          <span class="badge-name">动态达人</span>
        </div>
        <div class="badge-item unlocked" onclick="showDetail('签到达人', '连续签到30天', '签到模块', true)">
          <div class="badge-icon"><img src="../assets/badge-checkin-final.jpg" alt="签到达人"></div>
          <span class="badge-name">签到达人</span>
        </div>
        <div class="badge-item locked" onclick="showDetail('交友达人', '添加100位好友', '交友模块', false)">
          <div class="badge-icon"><img src="../assets/badge-friends-final.jpg" alt="交友达人"></div>
          <span class="badge-name">交友达人</span>
        </div>
        <div class="badge-item locked" onclick="showDetail('送礼达人', '送出50份礼物', '送礼模块', false)">
          <div class="badge-icon"><img src="../assets/badge-gift-final.jpg" alt="送礼达人"></div>
          <span class="badge-name">送礼达人</span>
        </div>
        <div class="badge-item unlocked" onclick="showDetail('校园达人', '完成校园认证并完善资料', '校园身份', true)">
          <div class="badge-icon"><img src="../assets/badge-campus-final.jpg" alt="校园达人"></div>
          <span class="badge-name">校园达人</span>
        </div>
        <div class="badge-item locked" onclick="showDetail('人气达人', '累计获赞1000次', '人气互动', false)">
          <div class="badge-icon"><img src="../assets/badge-like-final.jpg" alt="人气达人"></div>
          <span class="badge-name">人气达人</span>
        </div>
        <div class="badge-item locked" onclick="showDetail('分享达人', '分享内容50次', '分享传播', false)">
          <div class="badge-icon"><img src="../assets/badge-share-final.jpg" alt="分享达人"></div>
          <span class="badge-name">分享达人</span>
        </div>
      </div>
    </div>

    <!-- 互动成长徽章 -->
    

    <div class="footer-tip">
      还有更多隐藏徽章等你发现 ✨
    </div>
  </div>

  <!-- 徽章详情弹窗 -->
  <div class="badge-detail-modal" id="badgeModal" onclick="if(event.target===this)hideDetail()">
    <div class="detail-card">
      <div class="detail-badge">
        <img id="detailImg" src="" alt="">
      </div>
      <div class="detail-name" id="detailName">活动达人</div>
      <div class="detail-desc" id="detailDesc">参与并发起10场校园活动</div>
      <div class="detail-meta">
        <div class="detail-meta-item">
          <div class="detail-meta-value" id="detailCat">活动模块</div>
          <div class="detail-meta-label">所属分类</div>
        </div>
        <div class="detail-meta-item">
          <div class="detail-meta-value" id="detailDate">2025.10.01</div>
          <div class="detail-meta-label">解锁时间</div>
        </div>
      </div>
      <button class="detail-close" id="detailBtn" onclick="hideDetail()">知道了</button>
    </div>
  </div>

  <script>
    function goBack() { window.history.back(); }

    function switchTab(el, type) {
      document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
      el.classList.add('active');
    }

    function showDetail(name, desc, cat, unlocked) {
      var modal = document.getElementById('badgeModal');
      document.getElementById('detailName').textContent = name;
      document.getElementById('detailDesc').textContent = desc;
      document.getElementById('detailCat').textContent = cat;
      document.getElementById('detailDate').textContent = unlocked ? '2025.10.01' : '未解锁';
      var btn = document.getElementById('detailBtn');
      if (unlocked) {
        btn.textContent = '知道了';
        btn.classList.remove('locked-btn');
      } else {
        btn.textContent = '去完成';
        btn.classList.add('locked-btn');
      }
      modal.classList.add('show');
    }

    function hideDetail() {
      document.getElementById('badgeModal').classList.remove('show');
    }
  </script>
</body>
</html>