123

FitMind-app/src/app/tab1/tab1.page.html

@@ -6,7 +6,6 @@
 
 <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
   <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
- 
     <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
       <div class="slide" *ngFor="let image of images; let i = index">
         <img [src]="image" alt="轮播图" class="carousel-image">
@@ -16,90 +15,74 @@
     <!-- 上一张按钮 -->
     <button class="prev" (click)="prevSlide()">&#10094;</button>
   
-   
     <button class="next" (click)="nextSlide()">&#10095;</button>
   
-   
     <div class="dots">
       <span class="dot" *ngFor="let image of images; let i = index" 
             [class.active]="i === currentSlide" 
             (click)="goToSlide(i)"></span>
     </div>
   </div>
-  
 
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
-    <ion-segment-button value="recommend">
-      推荐
+    <ion-segment-button value="fitnessTips">
+      健身技巧
     </ion-segment-button>
-    <ion-segment-button value="activities">
-      活动
+    <ion-segment-button value="sportsNews">
+      体育新闻
     </ion-segment-button>
-    <ion-segment-button value="courses">
-      课程
+    <ion-segment-button value="recoveryTutorials">
+      恢复教程
     </ion-segment-button>
   </ion-segment>
 
-  <div *ngIf="selectedTab === 'recommend'" style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px 0; border-radius: 15px;">
-    <ion-card *ngFor="let item of recommendations" style="border-radius: 10px; overflow: hidden;">
-      <img [src]="item.image" alt="推荐图片" />
+  <div *ngIf="selectedTab === 'fitnessTips'" style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px 0; border-radius: 15px;">
+    <ion-card *ngFor="let tip of fitnessTips" style="border-radius: 10px; overflow: hidden;">
       <ion-card-header style="background-color: #fff5e1;">
-        <ion-card-title>{{ item.title }}</ion-card-title>
-        <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
+        <ion-card-title>{{ tip.title }}</ion-card-title>
+        <ion-card-subtitle>{{ tip.subtitle }}</ion-card-subtitle>
       </ion-card-header>
       <ion-card-content style="background-color: #fff9f2;">
-        <p>{{ item.description }}</p>
-        <ion-button expand="full" color="warning" (click)="promptAddress()">立即购买</ion-button>
+        <p>{{ tip.description }}</p>
       </ion-card-content>
     </ion-card>
   </div>
 
-  <!-- 活动内容 -->
-  <div *ngIf="selectedTab === 'activities'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
+  <!-- 体育新闻内容 -->
+  <div *ngIf="selectedTab === 'sportsNews'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
-        <ion-col size="12" size-md="4" *ngFor="let activity of activities">
+        <ion-col size="12" size-md="4" *ngFor="let news of sportsNews">
           <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <ion-card-header style="background-color: #ff6f61;">
-              <ion-card-title style="color: #fff;">{{ activity.title }}</ion-card-title>
-              <ion-card-subtitle style="color: #fff;">{{ activity.date }}</ion-card-subtitle>
+            <ion-card-header style="background-color: #1e88e5;">
+              <ion-card-title style="color: #fff;">{{ news.title }}</ion-card-title>
+              <ion-card-subtitle style="color: #fff;">{{ news.date }}</ion-card-subtitle>
             </ion-card-header>
-            <ion-card-content style="background-color: #ffe8e0;">
-              <p>{{ activity.description }}</p>
-              <ion-chip color="primary">
-                <ion-icon name="star" slot="start"></ion-icon>
-                热门
-              </ion-chip>
+            <ion-card-content style="background-color: #e1f5fe;">
+              <p>{{ news.description }}</p>
             </ion-card-content>
-            <ion-button expand="full" color="danger" (click)="promptRegistration(activity)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </div>
 
-  <!-- 课程内容 -->
-  <div *ngIf="selectedTab === 'courses'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
+  <!-- 恢复教程内容 -->
+  <div *ngIf="selectedTab === 'recoveryTutorials'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
-        <ion-col size="12" size-md="4" *ngFor="let course of courses">
+        <ion-col size="12" size-md="4" *ngFor="let tutorial of recoveryTutorials">
           <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <ion-card-header style="background-color: #1e88e5;">
-              <ion-card-title style="color: #fff;">{{ course.title }}</ion-card-title>
-              <ion-card-subtitle style="color: #fff;">{{ course.instructor }}</ion-card-subtitle>
+            <ion-card-header style="background-color: #ff6f61;">
+              <ion-card-title style="color: #fff;">{{ tutorial.title }}</ion-card-title>
             </ion-card-header>
-            <ion-card-content style="background-color: #e1f5fe;">
-              <p>{{ course.description }}</p>
-              <ion-chip color="danger">
-                <ion-icon name="checkmark-circle" slot="start"></ion-icon>
-                热销
-              </ion-chip>
+            <ion-card-content style="background-color: #ffe8e0;">
+              <p>{{ tutorial.description }}</p>
             </ion-card-content>
-            <ion-button expand="full" color="primary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </div>
-</ion-content>
+</ion-content>

FitMind-app/src/app/tab1/tab1.page.spec.ts

@@ -29,6 +29,4 @@ describe('Tab1Page', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  
 });

FitMind-app/src/app/tab1/tab1.page.ts

@@ -32,21 +32,21 @@ export class Tab1Page implements OnInit {
   ];
 
   // 其他数据
-  selectedTab: string = 'recommend';
+  selectedTab: string = 'fitnessTips';
 
-  recommendations = [
-    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'assets/4.png' },
-    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'assets/5.png' },
+  fitnessTips = [
+    { title: '如何正确热身', subtitle: '热身的重要性', description: '热身可以有效预防运动损伤，提升运动表现。' },
+    { title: '力量训练的基础', subtitle: '增强肌肉力量', description: '力量训练是健身的重要组成部分，有助于提高基础代谢率。' },
   ];
 
-  activities = [
-    { title: '冬季滑雪大赛', date: '2024-12-30', description: '加入我们，挑战滑雪极限！' },
-    { title: '夏季自行车比赛', date: '2025-06-15', description: '感受骑行的乐趣，挑战极限！' },
+  sportsNews = [
+    { title: '2024年奥运会即将来临', date: '2024-12-15', description: '各国运动员正在积极备战，期待精彩赛事。' },
+    { title: 'NBA新赛季开幕', date: '2024-10-01', description: '各大球队已做好准备，争夺总冠军。' },
   ];
 
-  courses = [
-    { title: '高级瑜伽课程', instructor: '王老师', description: '为您提供更加深度的瑜伽体验，提升身体和心理健康。' },
-    { title: '马拉松训练营', instructor: '李教练', description: '为马拉松爱好者提供专业的训练课程，帮助提升跑步成绩。' },
+  recoveryTutorials = [
+    { title: '运动后的拉伸', description: '运动后拉伸有助于肌肉恢复，减少酸痛。' },
+    { title: '泡沫轴的使用', description: '泡沫轴可以帮助放松肌肉，缓解紧张感。' },
   ];
 
   constructor(private router: Router, private alertController: AlertController) {}
@@ -114,74 +114,6 @@ export class Tab1Page implements OnInit {
     await alert.present();
   }
 
-  // 弹出输入姓名和手机号的弹窗
-  async promptRegistration(activity: any): Promise<void> {
-    const alert = await this.alertController.create({
-      header: '输入姓名和手机号',
-      inputs: [
-        {
-          name: 'name',
-          type: 'text',
-          placeholder: '请输入姓名'
-        },
-        {
-          name: 'phone',
-          type: 'tel',
-          placeholder: '请输入手机号'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '确认',
-          handler: (data:any) => {
-            console.log('姓名:', data.name);
-            console.log('手机号:', data.phone);
-            this.showAlert('报名成功', '您已成功报名活动！');
-          }
-        }
-      ]
-    });
-    await alert.present();
-  }
-
-  // 弹出输入上课时间和手机号的弹窗
-  async promptCourseEnrollment(course: any): Promise<void> {
-    const alert = await this.alertController.create({
-      header: '输入上课时间和手机号',
-      inputs: [
-        {
-          name: 'classTime',
-          type: 'text',
-          placeholder: '请输入上课时间'
-        },
-        {
-          name: 'phone',
-          type: 'tel',
-          placeholder: '请输入手机号'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '确认',
-          handler: (data:any) => {
-            console.log('上课时间:', data.classTime);
-            console.log('手机号:', data.phone);
-            this.showAlert('报名成功', '您已成功报名课程！');
-          }
-        }
-      ]
-    });
-    await alert.present();
-  }
-
   // 显示成功提示
   async showAlert(header: string, message: string): Promise<void> {
     const alert = await this.alertController.create({
@@ -191,4 +123,4 @@ export class Tab1Page implements OnInit {
     });
     await alert.present();
   }
-}
+}