bg/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <div class="avatar-container">
        <div class="avatar">
          <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
        </div>
        <div class="streak">
          <span class="lightning-icon">⚡</span>
          <span class="streak-days">7天</span>
        </div>
      </div>
    </ion-buttons>

    <ion-buttons slot="end">
      <div class="message-icon">
        ✉️
        <span class="message-badge">3</span>
      </div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="search-container">
    <div class="search-bar">
      <span class="search-icon">🔍</span>
      <input 
        type="text" 
        class="search-input" 
        placeholder="跑步节奏训练" 
        id="searchInput"
      />
    </div>
  </div>
  
   <!-- 内容区域 -->
   <div class="content">
    <!-- 选项卡 -->
    <div class="tab-container" id="tabContainer">
        <div class="tab-item active">社区</div>
        <div class="tab-item">推荐</div>
        <div class="tab-item">课程</div>
        <div class="tab-item">计划</div>
        <div class="tab-item">奖牌</div>
        <div class="tab-item">比赛</div>
        <div class="tab-item">路线</div>
        <div class="indicator" id="indicator"></div>
    </div>
    
    <!-- 卡片区域 -->
    <div class="card-container">
        <!-- 卡片1 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">今天完成了5公里跑步，感觉整个人都焕然一新！</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">跑步达人</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        245
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 卡片2 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">分享我的10公里训练计划，适合新手进阶</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">运动教练</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        189
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 卡片3 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">晨跑5公里打卡，坚持30天了！分享我的跑步装备</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">跑步小将</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        312
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 卡片4 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">马拉松训练第15周，今天完成了32公里长距离跑</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">马拉松选手</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        428
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 卡片5 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">分享我的跑步歌单，这些音乐让我跑得更远</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">音乐跑者</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        156
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 卡片6 -->
        <div class="card">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑步图片">
            </div>
            <div class="card-content">
                <div class="card-desc">新手跑步指南：如何避免受伤和正确热身</div>
                <div class="card-footer">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
                        </div>
                        <span class="user-name">健康教练</span>
                    </div>
                    <div class="like-count">
                        <span class="like-icon">❤️</span>
                        278
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</ion-content>