tab1.page.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <ion-header style="background-color: #1e1e1e;">
  2. <ion-toolbar color="dark">
  3. <ion-title>Fearless</ion-title>
  4. </ion-toolbar>
  5. </ion-header>
  6. <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
  7. <!-- 单张图片 -->
  8. <img src="assets/1.png" alt="推荐图片" style="width: 100%; height: auto; object-fit: cover;" />
  9. <!-- 标签切换 -->
  10. <ion-segment [(ngModel)]="selectedTab" color="secondary">
  11. <ion-segment-button value="recommend">
  12. 推荐
  13. </ion-segment-button>
  14. <ion-segment-button value="activities">
  15. 活动
  16. </ion-segment-button>
  17. <ion-segment-button value="courses">
  18. 课程
  19. </ion-segment-button>
  20. </ion-segment>
  21. <div *ngIf="selectedTab === 'recommend'">
  22. <ion-card *ngFor="let item of recommendations">
  23. <img [src]="item.image" alt="推荐图片" />
  24. <ion-card-header>
  25. <ion-card-title>{{ item.title }}</ion-card-title>
  26. <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
  27. </ion-card-header>
  28. <ion-card-content>
  29. <p>{{ item.description }}</p>
  30. <ion-button expand="full" color="primary" (click)="promptAddress()">立即购买</ion-button>
  31. </ion-card-content>
  32. </ion-card>
  33. </div>
  34. <!-- 活动内容 -->
  35. <div *ngIf="selectedTab === 'activities'">
  36. <ion-grid>
  37. <ion-row>
  38. <ion-col size="12" size-md="4" *ngFor="let activity of activities">
  39. <ion-card>
  40. <ion-card-header>
  41. <ion-card-title>{{ activity.title }}</ion-card-title>
  42. <ion-card-subtitle>{{ activity.date }}</ion-card-subtitle>
  43. </ion-card-header>
  44. <ion-card-content>
  45. <p>{{ activity.description }}</p>
  46. <ion-chip color="primary">
  47. <ion-icon name="star" slot="start"></ion-icon>
  48. 热门
  49. </ion-chip>
  50. </ion-card-content>
  51. <ion-button expand="full" color="tertiary" (click)="promptRegistration(activity)">立即报名</ion-button>
  52. </ion-card>
  53. </ion-col>
  54. </ion-row>
  55. </ion-grid>
  56. </div>
  57. <!-- 课程内容 -->
  58. <div *ngIf="selectedTab === 'courses'">
  59. <ion-grid>
  60. <ion-row>
  61. <ion-col size="12" size-md="4" *ngFor="let course of courses">
  62. <ion-card>
  63. <ion-card-header>
  64. <ion-card-title>{{ course.title }}</ion-card-title>
  65. <ion-card-subtitle>{{ course.instructor }}</ion-card-subtitle>
  66. </ion-card-header>
  67. <ion-card-content>
  68. <p>{{ course.description }}</p>
  69. <ion-chip color="danger">
  70. <ion-icon name="checkmark-circle" slot="start"></ion-icon>
  71. 热销
  72. </ion-chip>
  73. </ion-card-content>
  74. <ion-button expand="full" color="secondary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
  75. </ion-card>
  76. </ion-col>
  77. </ion-row>
  78. </ion-grid>
  79. </div>
  80. </ion-content>