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

<ion-header style="background-color: #fffefe;">
  <ion-toolbar color="light">
    <ion-title>Fearless</ion-title>
  </ion-toolbar>
</ion-header>

<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">
      </div>
    </div>
  
    <!-- 上一张按钮 -->
    <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="fitnessTips">
      健身技巧
    </ion-segment-button>
    <ion-segment-button value="sportsNews">
      体育新闻
    </ion-segment-button>
    <ion-segment-button value="recoveryTutorials">
      恢复教程
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="selectedTab === 'fitnessTips'" style="background: linear-gradient(to right, #fffffe, #fcfbfb); 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: #e1fbff;">
        <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>{{ tip.description }}</p>
        <ion-button expand="full" color="primary" (click)="goNewspage()">查看技巧</ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 体育新闻内容 -->
  <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 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: #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: #e1f5fe;">
              <p>{{ news.description }}</p>
              <ion-button expand="full" color="primary" (click)="goNewspage()">查看新闻</ion-button>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 恢复教程内容 -->
  <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 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: #9061ff;">
              <ion-card-title style="color: #fff;">{{ tutorial.title }}</ion-card-title>
            </ion-card-header>
            <ion-card-content style="background-color: #ffe8e0;">
              <p>{{ tutorial.description }}</p>
              <ion-button expand="full" color="primary" (click)="goNewspage()">查看教程</ion-button>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>