|
|
@@ -211,29 +211,31 @@
|
|
|
</swiper-container>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 热门课程 -->
|
|
|
+ <!-- 修正后的热门课程模块 -->
|
|
|
<div class="course-row">
|
|
|
<div class="row-header">
|
|
|
<h3>热门课程</h3>
|
|
|
<ion-button fill="clear" size="small">更多</ion-button>
|
|
|
</div>
|
|
|
-
|
|
|
+ <swiper-container [init]="false" [config]="swiperConfig">
|
|
|
+ <swiper-slide *ngFor="let course of popularCourses">
|
|
|
+ <ion-card class="course-card">
|
|
|
+ <img [src]="course.image" alt="course image">
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{course.title}}</ion-card-title>
|
|
|
+ <ion-card-subtitle>
|
|
|
+ {{course.duration}} · {{course.level}}
|
|
|
+ <span class="calories-badge">🔥{{course.calories}}kcal</span>
|
|
|
+ </ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ <div class="participants">
|
|
|
+ <ion-icon name="people-outline"></ion-icon>
|
|
|
+ {{course.participants}}
|
|
|
+ </div>
|
|
|
+ </ion-card>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper-container>
|
|
|
</div>
|
|
|
- <swiper-container [init]="false" [config]="swiperConfig">
|
|
|
- <swiper-slide *ngFor="let course of recentCourses">
|
|
|
- <ion-card class="course-card">
|
|
|
- <img [src]="course.image" alt="course image">
|
|
|
- <ion-card-header>
|
|
|
- <ion-card-title>{{course.title}}</ion-card-title>
|
|
|
- <ion-card-subtitle>
|
|
|
- {{course.duration}} · {{course.level}}
|
|
|
- <span class="calories-badge">🔥{{course.calories}}kcal</span>
|
|
|
- </ion-card-subtitle>
|
|
|
- </ion-card-header>
|
|
|
- <ion-progress-bar *ngIf="course.progress" [value]="course.progress"></ion-progress-bar>
|
|
|
- </ion-card>
|
|
|
- </swiper-slide>
|
|
|
- </swiper-container>
|
|
|
</div>
|
|
|
|
|
|
<!-- 为你推荐 -->
|
