<!-- tab1.page.html -->
<ion-header [translucent]="true">
    <header class="header">六韬策</header>
  </ion-header>
  
  <ion-content [fullscreen]="true">
    <main class="main-content">
      <!-- 搜索区域 -->
      <div class="search-bar">
          <select class="city-select">
              <option>长安</option>
              <option>洛阳</option>
              <option>邺城</option>
              <option>建康</option>
          </select>
          <input type="text" class="search-input" placeholder="谋定身心疆场，淬就今古锋芒">
      </div>
  
      <!-- 完整战术按钮组 -->
      <div class="button-grid">
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_wtzczz.css')"></div>
            <div class="btn-text">
                <div class="btn-title">文韬智策</div>
                <div class="btn-subtitle">战略规划中枢</div>
            </div>
        </div>
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_xyzabc.css')"></div>
            <div class="btn-text">
                <div class="btn-title">武韬战枢</div>
                <div class="btn-subtitle">竞技对抗熔炉</div>
            </div>
        </div>
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_uvwxyz.css')"></div>
            <div class="btn-text">
                <div class="btn-title">龙韬军阵</div>
                <div class="btn-subtitle">团队协作密令</div>
            </div>
        </div>
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_abcdefg.css')"></div>
            <div class="btn-text">
                <div class="btn-title">虎韬锋镝</div>
                <div class="btn-subtitle">环境淬火疆场</div>
            </div>
        </div>
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_hijklm.css')"></div>
            <div class="btn-text">
                <div class="btn-title">豹韬奇袭</div>
                <div class="btn-subtitle">敏捷破阵锋刃</div>
            </div>
        </div>
        <div class="tactics-btn">
            <div class="tactics-icon" style="background-image:url('//iconfont.alicdn.com/t/font_1234567_nopqrs.css')"></div>
            <div class="btn-text">
                <div class="btn-title">犬韬训典</div>
                <div class="btn-subtitle">动作基准火纹</div>
            </div>
        </div>
    </div>
  
      <!-- 广告区域 -->
      <div class="ad-banner">
          <div class="ad-text">兵法精要</div>
          <div class="ad-scroll">
              <div class="ad-item"></div>
              <div class="ad-item"></div>
              <div class="ad-item"></div>
              <div class="ad-item"></div>
              <div class="ad-item"></div>
          </div>
      </div>
  
      <!-- 修改后的运动分享 -->
      <div class="share-tabs">
        <div class="tab-item" 
             [class.active]="activeTab === 'nearby'"
             (click)="changeTab('nearby')">附近</div>
        <div class="tab-item" 
             [class.active]="activeTab === 'recommend'"
             (click)="changeTab('recommend')">推荐</div>
        <div class="tab-item" 
             [class.active]="activeTab === 'follow'"
             (click)="changeTab('follow')">关注</div>
        <div class="tab-item" style="flex:0.6">+ 发布</div>
      </div>
  
      <!-- 附近内容 -->
      <div class="share-grid" *ngIf="activeTab === 'nearby'">
        
        @for(share of shareList;track share){
            

          <div (click)="goShare(share)" class="share-card">
            <div class="card-image">{{share.image}}</div>
            <div class="card-info">
                <div class="card-title">{{share.title}}</div>
                <div class="card-footer">
                    <span class="card-tag">{{share.tag}}</span>
                    <div class="user-avatar">{{share.avatar}}</div>
                </div>
            </div>
        </div>
        }
          
      </div>
  
      <!-- 推荐内容 -->
      <div class="share-grid" *ngIf="activeTab === 'recommend'">
      @for(share1 of shareList1;track share1){
        <div (click)="goShare(share1)" class="share-card">
            <div class="card-image">{{share1.image}}</div>
            <div class="card-info">
                <div class="card-title">{{share1.title}}</div>
                <div class="card-footer">
                    <span class="card-tag">{{share1.tag}}</span>
                    <div class="user-avatar">{{share1.avatar}}</div>
                </div>
            </div>
        </div>
          <!-- 更多推荐卡片... -->
        }
      </div>
    
  
      <!-- 关注内容 -->
      <div class="share-grid" *ngIf="activeTab === 'follow'">
      @for(share2 of shareList2;track share2){
        <div (click)="goShare(share2)" class="share-card">
            <div class="card-image">{{share2.image}}</div>
            <div class="card-info">
                <div class="card-title">{{share2.title}}</div>
                <div class="card-footer">
                    <span class="card-tag">{{share2.tag}}</span>
                    <div class="user-avatar">{{share2.avatar}}</div>
                </div>
            </div>
        </div>
          <!-- 更多关注卡片... -->
        }
      </div>
    </main>
  
    <!-- 修改后的HTML脚本部分 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有选项卡和内容区域
        const tabs = document.querySelectorAll('.share-tabs .tab-item');
        const contents = document.querySelectorAll('.share-grid');
    
        // 初始化显示第一个选项卡内容
        contents.forEach(content => content.style.display = 'none');
        document.getElementById('nearby').style.display = 'grid';
    
        // 事件监听优化版
        document.querySelector('.share-tabs').addEventListener('click', function(event) {
            const clickedTab = event.target.closest('.tab-item');
            
            // 有效性验证
            if (!clickedTab || 
                clickedTab.style.flex === '0.6' || 
                clickedTab.classList.contains('active')) return;
    
            // 获取目标ID
            const tabId = clickedTab.dataset.tab;
            const targetContent = document.getElementById(tabId);
    
            // 执行切换
            tabs.forEach(tab => tab.classList.remove('active'));
            clickedTab.classList.add('active');
    
            contents.forEach(content => {
                content.style.display = 'none';
                content.classList.remove('active');
            });
            
            if (targetContent) {
                targetContent.style.display = 'grid';
                setTimeout(() => {
                    targetContent.classList.add('active');
                }, 10);
            }
        });
    });
    </script>
  </ion-content>