123

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

@@ -41,38 +41,38 @@
     </ion-segment-button>
   </ion-segment>
 
-  <div *ngIf="selectedTab === 'recommend'">
-    <ion-card *ngFor="let item of recommendations">
+  <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="推荐图片" />
-      <ion-card-header>
+      <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-header>
-      <ion-card-content>
+      <ion-card-content style="background-color: #fff9f2;">
         <p>{{ item.description }}</p>
-        <ion-button expand="full" color="primary" (click)="promptAddress()">立即购买</ion-button>
+        <ion-button expand="full" color="warning" (click)="promptAddress()">立即购买</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
 
   <!-- 活动内容 -->
-  <div *ngIf="selectedTab === 'activities'">
+  <div *ngIf="selectedTab === 'activities'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
         <ion-col size="12" size-md="4" *ngFor="let activity of activities">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>{{ activity.title }}</ion-card-title>
-              <ion-card-subtitle>{{ activity.date }}</ion-card-subtitle>
+          <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>
-            <ion-card-content>
+            <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>
-            <ion-button expand="full" color="tertiary" (click)="promptRegistration(activity)">立即报名</ion-button>
+            <ion-button expand="full" color="danger" (click)="promptRegistration(activity)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
@@ -80,23 +80,23 @@
   </div>
 
   <!-- 课程内容 -->
-  <div *ngIf="selectedTab === 'courses'">
+  <div *ngIf="selectedTab === 'courses'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
         <ion-col size="12" size-md="4" *ngFor="let course of courses">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>{{ course.title }}</ion-card-title>
-              <ion-card-subtitle>{{ course.instructor }}</ion-card-subtitle>
+          <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>
-            <ion-card-content>
+            <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>
-            <ion-button expand="full" color="secondary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
+            <ion-button expand="full" color="primary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>