优化首页

src/app/tab1/tab1.page.html

@@ -42,156 +42,70 @@
       </div>
       
       <!-- 选项卡 -->
-      <ion-segment value="community">
-        <ion-segment-button value="community">
+      <ion-segment [value]="currentCategory">
+        <ion-segment-button value="community" (click)="changeCategory('community')">
           <ion-label>社区</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="recommend">
+        <ion-segment-button value="recommend" (click)="changeCategory('recommend')">
           <ion-label>推荐</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="courses">
+        <ion-segment-button value="courses" (click)="changeCategory('courses')">
           <ion-label>课程</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="plans">
+        <ion-segment-button value="plans" (click)="changeCategory('plans')">
           <ion-label>计划</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="medals">
+        <ion-segment-button value="medals" (click)="changeCategory('medals')">
           <ion-label>奖牌</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="races">
+        <ion-segment-button value="races" (click)="changeCategory('races')">
           <ion-label>比赛</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="routes">
+        <ion-segment-button value="routes" (click)="changeCategory('routes')">
           <ion-label>路线</ion-label>
         </ion-segment-button>
       </ion-segment>
       
       <!-- 卡片区域 -->
-      <div class="card-grid">
-        <!-- 卡片1 -->
-        <ion-card class="card-1">
-          <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">跑</div>
-                <span class="user-name">跑步达人</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                245
-              </div>
-            </div>
-          </div>
-        </ion-card>
-        
-        <!-- 卡片2 -->
-        <ion-card class="card-2">
-          <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">教</div>
-                <span class="user-name">运动教练</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                189
-              </div>
-            </div>
-          </div>
-        </ion-card>
-        
-        <!-- 卡片3 -->
-        <ion-card class="card-3">
-          <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">将</div>
-                <span class="user-name">跑步小将</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                312
-              </div>
-            </div>
-          </div>
-        </ion-card>
-        
-        <!-- 卡片4 -->
-        <ion-card class="card-4">
-          <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">马</div>
-                <span class="user-name">马拉松选手</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                428
-              </div>
-            </div>
-          </div>
-        </ion-card>
-        
-        <!-- 卡片5 -->
-        <ion-card class="card-5">
-          <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">音</div>
-                <span class="user-name">音乐跑者</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                156
-              </div>
-            </div>
-          </div>
-        </ion-card>
-        
-        <!-- 卡片6 -->
-        <ion-card class="card-6">
-          <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">健</div>
-                <span class="user-name">健康教练</span>
-              </div>
-              <div class="like-count">
-                <ion-icon name="heart" style="color: #e03131;"></ion-icon>
-                278
-              </div>
-            </div>
-          </div>
-        </ion-card>
+         <!-- 动态卡片区域 -->
+         <div class="card-grid">
+          <!-- 循环渲染卡片 -->
+       <!-- 循环渲染卡片 -->
+       <ion-card 
+       *ngFor="let card of filteredCards" 
+       class="dynamic-card"
+     >
+     <div class="card-image">
+      <img [src]="card.imageUrl" alt="跑步图片">
+      <!-- 添加分类标签 -->
+      <div class="category-indicator">
+        {{ getCategoryLabel(card.category) }}
       </div>
+    </div>
+    <div class="card-content">
+      <h3 class="card-title">{{ card.title }}</h3>
+      <div class="card-desc">{{ card.description }}</div>
+      <div class="card-footer">
+        <div class="user-info">
+          <div class="user-avatar">{{ card.avatar }}</div>
+          <span class="user-name">{{ card.name }}</span>
+        </div>
+        <div class="like-count">
+          <ion-icon name="heart" style="color: #e03131;"></ion-icon>
+          {{ card.likes }}
+        </div>
+      </div>
+    </div>
+  </ion-card>
+          
+          <!-- 没有内容的提示 -->
+          <div *ngIf="filteredCards.length === 0" class="empty-state">
+            <ion-icon name="alert-circle-outline"></ion-icon>
+            <p>没有找到{{getCategoryLabel(currentCategory)}}内容</p>
+            <ion-button fill="outline">添加新内容</ion-button>
+          </div>
+        </div>
     </ion-content>
-    
-    <!-- 底部导航 -->
-    
   </ion-app>
  <script>
   // 初始化Ionic组件
@@ -202,16 +116,8 @@
       console.log('Segment changed', ev.detail.value);
     });
     
-    // 卡片点击效果
-    const cards = document.querySelectorAll('ion-card');
-    cards.forEach(card => {
-      card.addEventListener('click', () => {
-        card.style.transform = 'scale(0.98)';
-        setTimeout(() => {
-          card.style.transform = '';
-        }, 200);
-      });
-    });
+   
+ 
   });
 </script>
 </body> 

src/app/tab1/tab1.page.scss

@@ -1,10 +1,10 @@
 :root {
-  --ion-color-primary: #07C160;
+  --ion-color-primary: #40ddf8;
   --ion-color-primary-rgb: 7,193,96;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255,255,255;
-  --ion-color-primary-shade: #06aa54;
-  --ion-color-primary-tint: #20c770;
+  --ion-color-primary-shade: #3dc9e2;
+  --ion-color-primary-tint: #4da2db;
   
   --ion-color-secondary: #FFCC00;
   --ion-color-secondary-rgb: 255,204,0;
@@ -20,12 +20,12 @@
   --ion-color-tertiary-shade: #4854e0;
   --ion-color-tertiary-tint: #6370ff;
   
-  --ion-color-success: #2dd36f;
+  --ion-color-success: #55aaf0;
   --ion-color-success-rgb: 45,211,111;
   --ion-color-success-contrast: #ffffff;
   --ion-color-success-contrast-rgb: 255,255,255;
-  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #42d77d;
+  --ion-color-success-shade: #50c2f0;
+  --ion-color-success-tint: #5999ee;
   
   --ion-color-warning: #ffc409;
   --ion-color-warning-rgb: 255,196,9;
@@ -77,16 +77,21 @@
 
 ion-content {
   --background: #f8f9fa;
-  --padding-top: 60px;
+  --padding-top: 10px;
   --padding-bottom: 60px;
 }
 
 /* 顶部工具栏美化 */
 .custom-toolbar {
-  --background: white;
+  --background: linear-gradient(135deg, #49bbf0 0%, #30aae2 100%);
   --border-width: 0;
   --min-height: 60px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  color: white;
+  box-shadow: 0 4px 12px rgba(49, 94, 240, 0.3);
+  padding: 0 0 6px; /* 增加底部内边距补偿 */
+  ion-icon {
+    color: white;
+  }
 }
 
 .avatar-container {
@@ -96,6 +101,8 @@ ion-content {
 }
 
 .avatar {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -139,13 +146,14 @@ ion-content {
 
 /* 搜索栏美化 */
 .search-container {
-  padding: 10px 16px;
+  padding: 8px 16px 0; /* 上8px/左右16px/下0px */
   background: white;
 }
 
 ion-searchbar {
   --background: #f1f3f5;
-  --border-radius: 12px;
+  --border-radius: 10px;
+  --min-height: 42px; /* 减少高度 */
   --box-shadow: none;
   --icon-color: var(--ion-color-medium);
   --placeholder-color: #868e96;
@@ -156,8 +164,9 @@ ion-searchbar {
 /* 选项卡美化 */
 ion-segment {
   --background: white;
-  padding: 8px 16px;
+  padding: 4px 16px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
 }
 
 ion-segment-button {
@@ -179,7 +188,7 @@ ion-segment-button {
 
 /* 卡片美化 */
 .card-grid {
-  padding: 10px 16px;
+  padding: 6px 16px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
@@ -298,4 +307,72 @@ ion-card {
     min-width: 50px;
     font-size: 12px;
   }
+}
+
+/* 动态卡片样式 */
+.dynamic-card {
+  animation: fadeIn 0.5s ease forwards;
+  opacity: 0;
+  
+  &:nth-child(1) { animation-delay: 0.1s; }
+  &:nth-child(2) { animation-delay: 0.2s; }
+  &:nth-child(3) { animation-delay: 0.3s; }
+  &:nth-child(4) { animation-delay: 0.4s; }
+  &:nth-child(5) { animation-delay: 0.5s; }
+  &:nth-child(6) { animation-delay: 0.6s; }
+  
+  .card-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #343a40;
+    margin-bottom: 8px;
+    line-height: 1.3;
+  }
+  
+  &.card-active {
+    transform: scale(0.98);
+    transition: transform 0.2s ease;
+  }
+}
+
+/* 分类指示器 */
+.category-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(35, 134, 214, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  z-index: 1;
+}
+
+/* 空状态提示 */
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 40px 20px;
+  
+  ion-icon {
+    font-size: 60px;
+    color: var(--ion-color-medium);
+    margin-bottom: 20px;
+  }
+  
+  p {
+    color: var(--ion-color-medium-shade);
+    margin-bottom: 20px;
+  }
+}
+
+/* 增加分类切换动画 */
+@keyframes categoryChange {
+  0% { opacity: 0; transform: translateY(10px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.card-grid {
+  animation: categoryChange 0.4s ease forwards;
 }

src/app/tab1/tab1.page.ts

@@ -9,10 +9,20 @@ import { addIcons } from 'ionicons';
 import { 
   personOutline, flashOutline, notificationsOutline, 
   heart, homeOutline, compassOutline, 
-  playCircleOutline, barbellOutline, person 
-} from 'ionicons/icons';
+  playCircleOutline, barbellOutline, person, alertCircleOutline } from 'ionicons/icons';
 import { CommonModule } from '@angular/common';
 
+interface CardData {
+  id: number;
+  category: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  avatar: string;
+  name: string;
+  likes: number;
+}
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -26,12 +36,116 @@ import { CommonModule } from '@angular/common';
     IonCardContent, IonTabBar, IonTabButton, IonRow, IonCol
   ]
 })
+
+
 export class Tab1Page {
+  currentCategory: string = 'community'; // 当前选中的分类
+  allCards: CardData[] = []; // 所有卡片数据
+  filteredCards: CardData[] = []; // 当前显示的卡片
+
+  categoryLabels: { [key: string]: string } = {
+    'community': '社区',
+    'recommend': '推荐',
+    'courses': '课程',
+    'plans': '计划',
+    'medals': '奖牌',
+    'races': '比赛',
+    'routes': '路线'
+  };
+
   constructor() {
-    addIcons({ 
-      personOutline, flashOutline, notificationsOutline, 
-      heart, homeOutline, compassOutline, 
-      playCircleOutline, barbellOutline, person 
-    });
+    addIcons({personOutline,flashOutline,notificationsOutline,heart,alertCircleOutline,homeOutline,compassOutline,playCircleOutline,barbellOutline,person});
+        // 初始化卡片数据
+        this.initializeCardData();
+        this.filterCards(); // 初始筛选
+  }
+
+  getCategoryLabel(category: string): string {
+    return this.categoryLabels[category] || category;
+  }
+
+  initializeCardData() {
+    // 模拟卡片数据
+    this.allCards = [
+      { id: 1, category: 'community', title: '5公里跑步打卡', description: '今天完成了5公里跑步，感觉整个人都焕然一新！', imageUrl: 'https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '跑', name: '跑步达人', likes: 245 },
+  { id: 2, category: 'community', title: '10公里训练计划', description: '分享我的10公里训练计划，适合新手进阶', imageUrl: 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '教', name: '运动教练', likes: 189 },
+  { id: 3, category: 'community', title: '晨跑30天打卡', description: '晨跑5公里打卡，坚持30天了！分享我的跑步装备', imageUrl: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '将', name: '跑步小将', likes: 312 },
+  { id: 4, category: 'community', title: '马拉松训练进展', description: '马拉松训练第15周，今天完成了32公里长距离跑', imageUrl: 'https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '马', name: '马拉松选手', likes: 428 },
+  { id: 5, category: 'community', title: '跑步歌单分享', description: '分享我的跑步歌单，这些音乐让我跑得更远', imageUrl: 'https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '音', name: '音乐跑者', likes: 156 },
+  { id: 6, category: 'community', title: '新手跑步指南', description: '新手跑步指南：如何避免受伤和正确热身', imageUrl: 'https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '健', name: '健康教练', likes: 278 },
+  
+  // 推荐卡片（至少6张）
+  { id: 101, category: 'recommend', title: '跑步新手指南', description: '专业教练推荐的5个跑步技巧，让你快速入门', imageUrl: 'https://images.unsplash.com/photo-1526507110764-456a56f8b8e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '推', name: '跑步推荐官', likes: 187 },
+  { id: 102, category: 'recommend', title: '顶级跑鞋推荐', description: '2023年专业跑者最推荐的5款跑鞋', imageUrl: 'https://images.unsplash.com/photo-1564981797816-1043697bead7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '鞋', name: '装备专家', likes: 342 },
+  { id: 103, category: 'recommend', title: '健康跑步心率', description: '最佳跑步心率区间，让你的训练更高效', imageUrl: 'https://images.unsplash.com/photo-1518457352023-4a8f5f0a0d0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '心', name: '健康顾问', likes: 125 },
+  { id: 104, category: 'recommend', title: '跑步应用程序推荐', description: '5款帮助跑者提升表现的手机应用', imageUrl: 'https://images.unsplash.com/photo-1551650975-8f8bb3bd8dd9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '应', name: '科技达人', likes: 98 },
+  { id: 105, category: 'recommend', title: '夏季跑步装备', description: '炎热天气下跑得更舒适的装备选择', imageUrl: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '夏', name: '运动装备师', likes: 156 },
+  { id: 106, category: 'recommend', title: '跑步恢复技巧', description: '专业教练推荐的5个赛后恢复技巧', imageUrl: 'https://images.unsplash.com/photo-1594737625784-9a97d0b7bf46?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '恢', name: '恢复专家', likes: 234 },
+  
+  // 课程卡片（至少6张）
+  { id: 201, category: 'courses', title: '新手跑步基础课', description: '零基础跑步课程，从步行到跑完5公里', imageUrl: 'https://images.unsplash.com/photo-1530020614778-feba3aef6a2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '师', name: '专业教练', likes: 156 },
+  { id: 202, category: 'courses', title: '间歇跑训练课', description: '提升跑步效率的专业间歇跑训练计划', imageUrl: 'https://images.unsplash.com/photo-1470165525431-00a7f0de1a1a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '速', name: '速度训练师', likes: 98 },
+  { id: 203, category: 'courses', title: '耐力提升技巧课', description: '如何有效提升跑步耐力，跑得轻松又持久', imageUrl: 'https://images.unsplash.com/photo-1452626038306-9723f0efb87d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '耐', name: '耐力导师', likes: 120 },
+  { id: 204, category: 'courses', title: '坡道训练课程', description: '掌握不同坡度的跑步技巧，提升爆发力', imageUrl: 'https://images.unsplash.com/photo-1596367409221-2f1da0b9b1c7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '坡', name: '山地跑者', likes: 75 },
+  { id: 205, category: 'courses', title: '跑步姿势纠正课', description: '改善跑步姿态，预防损伤的专业课程', imageUrl: 'https://images.unsplash.com/photo-1519925610903-381054cc2a1c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '姿', name: '姿态教练', likes: 186 },
+  { id: 206, category: 'courses', title: '跑步核心训练课', description: '强化核心力量，提升跑步表现的专项训练', imageUrl: 'https://images.unsplash.com/photo-1549060279-7e1682c6f9cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '核', name: '核心教练', likes: 142 },
+  
+  // 计划卡片（至少6张）
+  { id: 301, category: 'plans', title: '5公里挑战计划', description: '30天5公里挑战计划，循序渐进提高跑步能力', imageUrl: 'https://images.unsplash.com/photo-1428705019403-efd65e967a98?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '计', name: '计划规划师', likes: 82 },
+  { id: 302, category: 'plans', title: '10公里突破方案', description: '2个月10公里突破方案，适合有一定基础的跑者', imageUrl: 'https://images.unsplash.com/photo-1526507138702-5feb27384192?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '突', name: '突破教练', likes: 105 },
+  { id: 303, category: 'plans', title: '半程马拉松训练', description: '12周全马训练计划，让你轻松完成首场半马', imageUrl: 'https://images.unsplash.com/photo-1541534741688-607fbfaaff2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '半', name: '马拉松教练', likes: 162 },
+  { id: 304, category: 'plans', title: '马拉松提升计划', description: '高级马拉松训练方案，助你突破个人最佳成绩', imageUrl: 'https://images.unsplash.com/photo-1552674358-6c78a4bb7f20?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '提', name: 'PB教练', likes: 98 },
+  { id: 305, category: 'plans', title: '减脂跑步计划', description: '8周跑步减脂方案，科学燃烧脂肪瘦身', imageUrl: 'https://images.unsplash.com/photo-1549060279-7e1682c6f9cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '脂', name: '减脂专家', likes: 213 },
+  { id: 306, category: 'plans', title: '越野跑训练计划', description: '山地越野跑专项训练，准备你的首个越野赛', imageUrl: 'https://images.unsplash.com/photo-1523987354483-90158f9cbe5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '野', name: '越野教练', likes: 124 },
+  
+  // 奖牌卡片（至少6张）
+  { id: 401, category: 'medals', title: '跑者荣誉收集册', description: '收集我过去一年的比赛奖牌，满满的成就感！', imageUrl: 'https://images.unsplash.com/photo-1534945160247-353dd1defc86?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '奖', name: '奖牌收藏家', likes: 212 },
+  { id: 402, category: 'medals', title: '我的首个半马奖牌', description: '终于拿到了我的第一枚半程马拉松奖牌，纪念这美好时刻', imageUrl: 'https://images.unsplash.com/photo-1614267860338-09d7f8d1c6ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '首', name: '首跑者', likes: 178 },
+  { id: 403, category: 'medals', title: '特别版城市马拉松奖牌', description: '限量版城市马拉松奖牌，记录这个特别的赛季', imageUrl: 'https://images.unsplash.com/photo-1542293785-2bebf673c3ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '限', name: '限量收藏家', likes: 97 },
+  { id: 404, category: 'medals', title: '越野跑挑战奖牌', description: '50公里越野跑完赛奖牌，最艰难也最有成就感的一次', imageUrl: 'https://images.unsplash.com/photo-1579546929519-8eab1e8d70a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '野', name: '越野勇士', likes: 145 },
+  { id: 405, category: 'medals', title: '跑步周年纪念章', description: '坚持跑步3周年纪念章，感谢一路坚持的自己', imageUrl: 'https://images.unsplash.com/photo-1526656002439-8c4da9c3f6c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '周', name: '坚持跑者', likes: 321 },
+  { id: 406, category: 'medals', title: '夜跑系列奖章', description: '完成10场夜跑挑战获得的特别系列奖章', imageUrl: 'https://images.unsplash.com/photo-1507499739999-097e0e27ae48?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '夜', name: '夜跑爱好者', likes: 156 },
+  
+  // 比赛卡片（至少6张）
+  { id: 501, category: 'races', title: '城市马拉松报名开始', description: '2023城市马拉松赛报名通道已开启，准备你的首马！', imageUrl: 'https://images.unsplash.com/photo-1518984938952-aef9f19d8b6f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '竞', name: '赛事组织者', likes: 105 },
+  { id: 502, category: 'races', title: '越野跑挑战赛报名', description: '山地越野跑挑战赛开始报名，50公里极限挑战！', imageUrl: 'https://images.unsplash.com/photo-1511898634545-2c683d8a3469?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '野', name: '越野老炮', likes: 89 },
+  { id: 503, category: 'races', title: '半程马拉松训练营', description: '为期8周半程马拉松训练营，适合希望突破自我的人群', imageUrl: 'https://images.unsplash.com/photo-1483995112250-3764afed9f4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '训', name: '训练专家', likes: 67 },
+  { id: 504, category: 'races', title: '5公里趣味跑赛事', description: '家庭友好型趣味5公里跑，含儿童跑环节', imageUrl: 'https://images.unsplash.com/photo-1517838277536-f5f99be501cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '趣', name: '趣味跑推广', likes: 112 },
+  { id: 505, category: 'races', title: '沙滩荧光夜跑', description: '夏季限定沙滩荧光夜跑，享受海风与星光', imageUrl: 'https://images.unsplash.com/photo-1521012097321-ee14060dc5c7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '沙', name: '沙滩跑主办', likes: 132 },
+  { id: 506, category: 'races', title: '慈善跑报名开启', description: '为罕见病患儿筹款的慈善跑活动开始报名', imageUrl: 'https://images.unsplash.com/photo-1532018114547-1a0dd0ce5adf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '慈', name: '慈善组织', likes: 287 },
+  
+  // 路线卡片（至少6张）
+  { id: 601, category: 'routes', title: '城市公园经典路线', description: '分享我的城市公园5公里经典路线，风景超美！', imageUrl: 'https://images.unsplash.com/photo-1518640467707-6811f80a77ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '线', name: '路线探索者', likes: 143 },
+  { id: 602, category: 'routes', title: '沿海跑道体验', description: '沿着海岸线奔跑，10公里绝美滨海路线分享', imageUrl: 'https://images.unsplash.com/photo-1494319198384-d9e5d3d6b48a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '海', name: '滨海跑者', likes: 198 },
+  { id: 603, category: 'routes', title: '森林氧吧路线', description: '城市周边的森林路线，享受绿意盎然的好空气', imageUrl: 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '森', name: '自然跑者', likes: 156 },
+  { id: 604, category: 'routes', title: '城市夜景路线', description: '8公里城市夜景跑路线，感受城市的夜晚魅力', imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4a2a6f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '夜', name: '夜跑专家', likes: 145 },
+  { id: 605, category: 'routes', title: '滨江跑道路线', description: '15公里滨江路线，一路欣赏水岸风光', imageUrl: 'https://images.unsplash.com/photo-1470229722913-7c0d1d392e01?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '江', name: '水岸跑者', likes: 112 },
+  { id: 606, category: 'routes', title: '山地越野路线', description: '专业越野跑路线分享，25公里爬升800米', imageUrl: 'https://images.unsplash.com/photo-1553877528-aa93e3d37a4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', avatar: '山', name: '山地探险家', likes: 178 }
+    ];
+  }
+  
+  // 切换分类
+  changeCategory(category: string) {
+    this.currentCategory = category;
+    this.filterCards();
+  }
+  
+  // 筛选当前分类的卡片
+  filterCards() {
+    this.filteredCards = this.allCards.filter(
+      card => card.category === this.currentCategory
+    );
+  }
+  
+  // 卡片点击效果
+  cardClick(card: CardData) {
+    // 卡片点击效果
+    const cardElement = document.querySelector(`ion-card[data-id="${card.id}"]`);
+    if (cardElement) {
+      cardElement.classList.add('card-active');
+      setTimeout(() => {
+        cardElement.classList.remove('card-active');
+      }, 200);
+    }
   }
 }