TUSL 2 months ago
parent
commit
733a9cfa26

+ 9 - 2
FitMind-app/src/app/tab1/tab1.page.html

@@ -5,10 +5,17 @@
 </ion-header>
 
 <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
+  <!-- 轮播图 -->
+  <ion-slides pager="true" style="height: 200px;">
+    <ion-slide *ngFor="let slide of slides">
+      <img [src]="slide.image" alt="轮播图" style="width: 100%; height: 100%; object-fit: cover;" />
+    </ion-slide>
+  </ion-slides>
+
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
     <ion-segment-button value="recommend">
-      推荐活动123
+      推荐活动
     </ion-segment-button>
     <ion-segment-button value="activities">
       活动
@@ -80,4 +87,4 @@
       </ion-row>
     </ion-grid>
   </div>
-</ion-content>
+</ion-content>

+ 10 - 1
FitMind-app/src/app/tab1/tab1.page.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { Tab1Page } from './tab1.page';
 
 describe('Tab1Page', () => {
@@ -16,3 +15,13 @@ describe('Tab1Page', () => {
     expect(component).toBeTruthy();
   });
 });
+
+
+
+
+
+
+
+
+
+

+ 17 - 10
FitMind-app/src/app/tab1/tab1.page.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';  // 导入 FormsModule 用于 ngModel(双向绑定)
-import { IonicModule } from '@ionic/angular';  // 必须导入 IonicModule,来使用 Ionic 组件
-import { CommonModule } from '@angular/common';  // 必须导入 CommonModule,来处理 ngIf、ngModel 等指令
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab1',
@@ -9,13 +9,20 @@ import { CommonModule } from '@angular/common';  // 必须导入 CommonModule,
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   imports: [
-    IonicModule,      // 导入 IonicModule 来使用 IonHeader、IonToolbar 等组件
-    CommonModule,     // 导入 CommonModule 来使用结构指令(如 ngIf)
-    FormsModule       // 导入 FormsModule 用于 ngModel(双向绑定)
-  ]
+    IonicModule,
+    CommonModule,
+    FormsModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class Tab1Page {
-  selectedTab: string = 'recommend';  // 默认选中 "推荐" 标签
+  selectedTab: string = 'recommend';
+
+  slides = [
+    { image: 'assets/1.png' },
+    { image: 'assets/2.png' },
+    { image: 'assets/3.png' },
+  ];
 
   recommendations = [
     { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机,享受便捷运动体验。', image: 'https://example.com/running-machine.jpg' },
@@ -46,4 +53,4 @@ export class Tab1Page {
   enroll(course: { title: string; instructor: string; description: string }): void {
     console.log('注册课程:', course);
   }
-}
+}

BIN
FitMind-app/src/assets/1.png


BIN
FitMind-app/src/assets/2.png


BIN
FitMind-app/src/assets/3.png