version-3

src/app/tab2/tab2.page.html

@@ -3,7 +3,7 @@
     <ion-title>训练计划</ion-title>
     <ion-buttons slot="end">
       <ion-button>
-        <ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
+        <ion-icon name="notifications-outline" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -46,28 +46,20 @@
     <ion-button fill="clear" size="small">查看全部</ion-button>
   </ion-list-header>
 
-  <div class="swiper-container">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide" *ngFor="let plan of recommendedPlans">
-        <ion-card class="plan-card">
-          <div class="image-container">
-            <img 
-              [src]="plan.image || 'assets/images/work-1.jpg'"
-              (error)="plan.image = 'assets/images/work-2.jpg'"
-              alt="{{plan.name}}"
-            >
-          </div>
-          <ion-card-header>
-            <ion-badge color="warning" *ngIf="plan.isNew">NEW</ion-badge>
-            <ion-card-title>{{plan.name}}</ion-card-title>
-            <ion-card-subtitle>
-              <ion-icon name="time-outline"></ion-icon>
-              {{plan.duration}}分钟 · {{plan.difficulty}}
-            </ion-card-subtitle>
-          </ion-card-header>
-        </ion-card>
+  <div class="plan-slides">
+    <ion-card class="plan-card" *ngFor="let plan of recommendedPlans">
+      <div class="plan-icon-container">
+        <ion-icon [name]="plan.icon" class="plan-icon"></ion-icon>
       </div>
-    </div>
+      <ion-card-header>
+        <ion-badge color="warning" *ngIf="plan.isNew">NEW</ion-badge>
+        <ion-card-title>{{plan.name}}</ion-card-title>
+        <ion-card-subtitle>
+          <ion-icon name="time-outline"></ion-icon>
+          {{plan.duration}}分钟 · {{plan.difficulty}}
+        </ion-card-subtitle>
+      </ion-card-header>
+    </ion-card>
   </div>
 
   <!-- 我的计划列表 -->
@@ -82,13 +74,13 @@
   <ion-list lines="none">
     <ion-item *ngFor="let item of myPlans" [detail]="true" (click)="openPlan(item)">
       <ion-avatar slot="start">
-        <ion-icon [name]="item.icon || 'barbell'" color="primary"></ion-icon>
+        <ion-icon [name]="item.icon" color="primary"></ion-icon>
       </ion-avatar>
       <ion-label>
-        <h3>{{item.name || '未命名计划'}}</h3>
-        <p>{{(item.progress || 0)}}% 完成 · 下次训练: {{item.nextTime || '未安排'}}</p>
+        <h3>{{item.name}}</h3>
+        <p>{{item.progress}}% 完成 · 下次训练: {{item.nextTime}}</p>
       </ion-label>
-      <ion-badge slot="end" color="light">{{item.remaining || 0}}天</ion-badge>
+      <ion-badge slot="end" color="light">{{item.remaining}}天</ion-badge>
     </ion-item>
   </ion-list>
 

src/app/tab2/tab2.page.scss

@@ -1,235 +1,180 @@
 /* 全局卡片样式 */
 ion-card {
-    --background: #ffffff;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-    border-radius: 12px;
-    margin: 16px;
-  }
-  
-  /* 本周训练卡片 */
-  .weekly-card {
-    ion-card-header {
-      padding-bottom: 8px;
-      
-      ion-card-title {
-        font-size: 18px;
-        display: flex;
-        align-items: center;
-        
-        ion-icon {
-          margin-right: 8px;
-          font-size: 20px;
-          color: var(--ion-color-primary);
-        }
-      }
+  --background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  margin: 16px;
+}
+
+/* 本周训练卡片 */
+.weekly-card {
+  ion-card-header {
+    padding-bottom: 8px;
+    
+    ion-card-title {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
       
-      ion-card-subtitle {
-        font-size: 14px;
-        color: var(--ion-color-medium);
+      ion-icon {
+        margin-right: 8px;
+        font-size: 20px;
+        color: var(--ion-color-primary);
       }
     }
     
-    .progress-container {
-      margin: 12px 0;
+    ion-card-subtitle {
+      font-size: 14px;
+      color: var(--ion-color-medium);
+    }
+  }
+  
+  .progress-container {
+    margin: 12px 0;
+    
+    .progress-text {
+      text-align: right;
+      font-size: 12px;
+      color: var(--ion-color-medium);
+      margin-top: 4px;
+    }
+  }
+  
+  .day-grid {
+    padding: 0;
+    
+    ion-col {
+      text-align: center;
+      padding: 8px 4px;
       
-      .progress-text {
-        text-align: right;
+      .day-name {
         font-size: 12px;
         color: var(--ion-color-medium);
-        margin-top: 4px;
+        margin-bottom: 4px;
       }
-    }
-    
-    .day-grid {
-      padding: 0;
       
-      ion-col {
-        text-align: center;
-        padding: 8px 4px;
-        
+      ion-icon {
+        font-size: 20px;
+      }
+      
+      &.active {
         .day-name {
-          font-size: 12px;
-          color: var(--ion-color-medium);
-          margin-bottom: 4px;
-        }
-        
-        ion-icon {
-          font-size: 20px;
-        }
-        
-        &.active {
-          .day-name {
-            color: var(--ion-color-primary);
-            font-weight: bold;
-          }
+          color: var(--ion-color-primary);
+          font-weight: bold;
         }
       }
     }
   }
+}
+
+/* 推荐计划 */
+.plan-slides {
+  display: flex;
+  overflow-x: auto;
+  padding: 0 16px 16px;
   
-  /* 推荐计划轮播 */
-  .plan-slides {
-    padding: 0 0 16px 16px;
+  .plan-card {
+    min-width: 200px;
+    margin-right: 16px;
     
-    ion-slide {
-      width: 75%;
+    .plan-icon-container {
+      display: flex;
+      justify-content: center;
+      padding: 16px;
+      
+      .plan-icon {
+        font-size: 48px;
+        color: var(--ion-color-primary);
+        padding: 12px;
+        background: rgba(var(--ion-color-primary-rgb), 0.1);
+        border-radius: 50%;
+      }
     }
     
-    .plan-card {
-      margin: 0 8px 16px 0;
-      height: 100%;
+    ion-card-header {
+      padding: 0 12px 12px;
       
-      img {
-        width: 100%;
-        height: 120px;
-        object-fit: cover;
+      ion-badge {
+        position: absolute;
+        top: 10px;
+        right: 10px;
       }
       
-      ion-card-header {
-        padding: 12px;
-        
-        ion-badge {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-        }
-        
-        ion-card-title {
-          font-size: 16px;
-          margin-bottom: 4px;
-        }
-        
-        ion-card-subtitle {
-          font-size: 12px;
-          display: flex;
-          align-items: center;
-          
-          ion-icon {
-            margin-right: 4px;
-            font-size: 14px;
-          }
-        }
+      ion-card-title {
+        font-size: 16px;
+        margin-bottom: 4px;
       }
-    }
-  }
-  
-  /* 我的计划列表 */
-  ion-list {
-    background: transparent;
-    padding: 0;
-    
-    ion-item {
-      --padding-start: 16px;
-      --padding-end: 16px;
-      --inner-padding-end: 0;
-      --background: #ffffff;
-      margin-bottom: 8px;
       
-      ion-avatar {
-        width: 40px;
-        height: 40px;
-        background: rgba(var(--ion-color-primary-rgb), 0.1);
+      ion-card-subtitle {
+        font-size: 12px;
         display: flex;
         align-items: center;
-        justify-content: center;
         
         ion-icon {
-          font-size: 20px;
+          margin-right: 4px;
+          font-size: 14px;
         }
       }
-      
-      ion-label {
-        h3 {
-          font-weight: 500;
-          margin-bottom: 4px;
-        }
-        
-        p {
-          font-size: 12px;
-          color: var(--ion-color-medium);
-        }
-      }
-      
-      ion-badge {
-        font-weight: normal;
-      }
     }
   }
-  
-  /* 响应式调整 */
-  @media (min-width: 768px) {
-    .plan-slides ion-slide {
-      width: 50%;
-    }
-  }
-  /* 添加到现有样式文件中 */
+}
 
-.image-placeholder {
-    width: 100%;
-    height: 120px;
-    background: var(--ion-color-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--ion-color-medium);
-  }
+/* 我的计划列表 */
+ion-list {
+  background: transparent;
+  padding: 0;
   
-  .empty-state {
-    text-align: center;
-    padding: 40px 20px;
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --inner-padding-end: 0;
+    --background: #ffffff;
+    margin-bottom: 8px;
     
-    ion-icon {
-      font-size: 48px;
-      color: var(--ion-color-medium);
-      margin-bottom: 16px;
+    ion-avatar {
+      width: 40px;
+      height: 40px;
+      background: rgba(var(--ion-color-primary-rgb), 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      ion-icon {
+        font-size: 20px;
+      }
     }
     
-    p {
-      color: var(--ion-color-medium);
-      margin-bottom: 20px;
+    ion-label {
+      h3 {
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+      
+      p {
+        font-size: 12px;
+        color: var(--ion-color-medium);
+      }
+    }
+    
+    ion-badge {
+      font-weight: normal;
     }
   }
-  /* 添加到现有样式文件中 */
+}
 
-.image-placeholder {
-    width: 100%;
-    height: 120px;
-    background: var(--ion-color-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  
+  ion-icon {
+    font-size: 48px;
     color: var(--ion-color-medium);
+    margin-bottom: 16px;
   }
   
-  .empty-state {
-    text-align: center;
-    padding: 40px 20px;
-    
-    ion-icon {
-      font-size: 48px;
-      color: var(--ion-color-medium);
-      margin-bottom: 16px;
-    }
-    
-    p {
-      color: var(--ion-color-medium);
-      margin-bottom: 20px;
-    }
+  p {
+    color: var(--ion-color-medium);
+    margin-bottom: 20px;
   }
-  
-  .swiper-container {
-    width: 100%;
-    padding: 0 16px 16px;
-    
-    .swiper-wrapper {
-      display: flex;
-    }
-    
-    .swiper-slide {
-      width: 75%;
-      
-      @media (min-width: 768px) {
-        width: 50%;
-      }
-    }
-  }
+}

src/app/tab2/tab2.page.ts

@@ -8,7 +8,8 @@ import {
 import { addIcons } from 'ionicons';
 import { 
   notificationsOutline, calendarNumber, checkmarkCircle, ellipseOutline,
-  timeOutline, barbell, body, walk, add, refresh, fitness 
+  timeOutline, barbell, body, walk, add, refresh, fitness,
+  flame, bicycle, trophy
 } from 'ionicons/icons';
 
 @Component({
@@ -54,21 +55,21 @@ export class Tab2Page {
       name: '全身燃脂训练',
       duration: 28,
       difficulty: '中级',
-      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      icon: 'flame',
       isNew: true
     },
     {
       name: '核心力量提升',
       duration: 35,
       difficulty: '高级',
-      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      icon: 'barbell',
       isNew: false
     },
     {
       name: '瑜伽晨间唤醒',
       duration: 20,
       difficulty: '初级',
-      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      icon: 'yoga',
       isNew: true
     }
   ];
@@ -80,14 +81,14 @@ export class Tab2Page {
       progress: 65,
       nextTime: '明天 7:00',
       remaining: 12,
-      icon: 'barbell'
+      icon: 'flame'
     },
     {
       name: '上肢力量训练',
       progress: 30,
       nextTime: '后天 19:30',
       remaining: 5,
-      icon: 'body'
+      icon: 'barbell'
     },
     {
       name: '晨跑计划',
@@ -100,35 +101,21 @@ export class Tab2Page {
 
   constructor() {
     addIcons({ 
-      notificationsOutline, 
-      calendarNumber, 
-      checkmarkCircle, 
-      ellipseOutline,
-      timeOutline,
-      barbell,
-      body,
-      walk,
-      add,
-      refresh,
-      fitness
+      notificationsOutline, calendarNumber, checkmarkCircle, ellipseOutline,
+      timeOutline, barbell, body, walk, add, refresh, fitness,
+      flame, bicycle,  trophy
     });
   }
 
-  // 刷新计划
   refreshPlans() {
     console.log('刷新计划数据');
-    // 这里可以添加实际刷新逻辑
   }
 
-  // 打开计划详情
   openPlan(plan: any) {
     console.log('打开计划:', plan.name);
-    // 这里可以添加导航逻辑
   }
 
-  // 创建新计划
   createNewPlan() {
     console.log('创建新计划');
-    // 这里可以添加创建逻辑
   }
 }