Save-2

src/app/tab1/tab1.page.html

@@ -97,24 +97,25 @@
     </div>
 </body>
 </html> -->
+
 <ion-header [translucent]="true">
   <ion-toolbar>
     <!-- 顶部导航栏 -->
-    <ion-segment [(ngModel)]="selectedTab" scrollable>
-      <ion-segment-button value="recommend" class="active-tab">
-        <ion-label>推荐</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="vip">
-        <ion-icon name="crown-outline" slot="start"></ion-icon>
-        <ion-label>会员</ion-label>
-        <ion-badge *ngIf="!isVip" color="warning" slot="end">限免试用</ion-badge>
-      </ion-segment-button>
-      <ion-segment-button value="camp">
-        <ion-icon name="flame-outline" slot="start"></ion-icon>
-        <ion-label>减脂营</ion-label>
-        <ion-badge *ngIf="hasCampActivity" color="danger" slot="end"></ion-badge>
-      </ion-segment-button>
-    </ion-segment>
+    <ion-segment [(ngModel)]="selectedTab" (ionChange)="segmentChanged()" scrollable>
+  <ion-segment-button value="recommend" [class.active-tab]="selectedTab === 'recommend'">
+    <ion-label>推荐</ion-label>
+  </ion-segment-button>
+  <ion-segment-button value="vip" [class.active-tab]="selectedTab === 'vip'">
+    <ion-icon name="crown" slot="start"></ion-icon>
+    <ion-label>会员</ion-label>
+    <ion-badge *ngIf="!isVip" color="warning" slot="end">限免试用</ion-badge>
+  </ion-segment-button>
+  <ion-segment-button value="camp" [class.active-tab]="selectedTab === 'camp'">
+    <ion-icon name="flame" slot="start"></ion-icon>
+    <ion-label>减脂营</ion-label>
+    <ion-badge *ngIf="hasCampActivity" color="danger" slot="end"></ion-badge>
+  </ion-segment-button>
+</ion-segment>
 
     <ion-buttons slot="end">
       <ion-button (click)="openNotifications()">

src/app/tab1/tab1.page.scss

@@ -226,37 +226,45 @@ ion-toolbar {
     --background: var(--ion-color-primary);
     --color: white;
     
-    ion-segment {
-      ion-segment-button {
-        --color: rgba(255, 255, 255, 0.7);
-        --color-checked: white;
-        --indicator-color: transparent;
-        
-        &.active-tab {
-          --color: white;
-          position: relative;
-          
-          &::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 25%;
-            width: 50%;
-            height: 3px;
-            background: white;
-            border-radius: 3px;
-          }
-        }
-        
-        ion-icon {
-          font-size: 16px;
-        }
+     ion-segment {
+    ion-segment-button {
+      --color: rgba(255, 255, 255, 0.7);
+      --color-checked: white;
+      --indicator-color: transparent;
+      --padding-top: 8px;
+      --padding-bottom: 8px;
+      min-width: auto;
+      position: relative;
+      transition: all 0.3s ease;
+
+      &.active-tab {
+        --color: white;
         
-        ion-badge {
-          margin-left: 4px;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 40%;
+          height: 3px;
+          background: white;
+          border-radius: 3px;
+          transition: all 0.3s ease;
         }
       }
+
+      ion-icon {
+        font-size: 16px;
+        margin-right: 4px;
+      }
+
+      ion-badge {
+        margin-left: 4px;
+        font-size: 10px;
+      }
     }
+  }
     
     .notification-badge {
       position: absolute;

src/app/tab1/tab1.page.ts

@@ -23,6 +23,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { register } from 'swiper/element/bundle';
 
+
 // 注册 Swiper 组件
 register();
 
@@ -95,7 +96,7 @@ export class Tab1Page {
   popularCourses = [
     {
       title: '马甲线养成',
-      image: 'assets/images/abs1.jpg',
+      image: 'assets/images/work-1.jpg',
       duration: '30分钟',
       level: 'K2 初级',
       calories: 280,
@@ -132,7 +133,11 @@ export class Tab1Page {
       description: '帮助你快速入睡，提高睡眠质量'
     }
   ];
-  
+  // 在Tab1Page类中添加
+segmentChanged() {
+  // 这里可以添加切换逻辑
+  console.log('当前选中:', this.selectedTab);
+}
   // 解锁徽章
   unlockedBadges = [
     { name: '坚持之星', icon: 'star-outline' },