verion-1

angular.json

@@ -109,6 +109,7 @@
                 "output": "assets"
               }
             ],
+            
             "styles": ["src/global.scss", "src/theme/variables.scss"],
             "scripts": []
           },
@@ -145,4 +146,5 @@
       "setParserOptionsProject": true
     }
   }
+  
 }

src/app/tab1/tab1.page.html

@@ -216,28 +216,23 @@
         <h3>热门课程</h3>
         <ion-button fill="clear" size="small">更多</ion-button>
       </div>
-      <ion-slides [options]="slideOpts">
-        <ion-slide *ngFor="let course of popularCourses">
-          <ion-card class="course-card">
-            <img [src]="course.image" alt="course image">
-            <div class="card-badge" *ngIf="course.badge">
-              <ion-badge [color]="course.badge.color">{{course.badge.text}}</ion-badge>
-            </div>
-            <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>
-              <span>{{course.participants}}人训练</span>
-            </div>
-          </ion-card>
-        </ion-slide>
-      </ion-slides>
+
     </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>
 
   <!-- 为你推荐 -->

src/app/tab1/tab1.page.ts

@@ -11,7 +11,7 @@
 // export class Tab1Page {
 //   constructor() {}
 // }
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { 
   IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, 
   IonIcon, IonBadge, IonButtons, IonButton, IonSearchbar, 
@@ -20,7 +20,7 @@ import {
   IonItem, IonThumbnail 
 } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms'; // 添加这行
+import { FormsModule } from '@angular/forms';
 import { register } from 'swiper/element/bundle';
 
 // 注册 Swiper 组件
@@ -31,6 +31,7 @@ register();
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加这行以支持 Web Components
   imports: [
     CommonModule,
     FormsModule,
@@ -52,11 +53,11 @@ export class Tab1Page {
   currentSearchHint = this.searchHints[0];
   
   // Swiper 配置
-  swiperConfig = {
+  swiperConfig = JSON.stringify({
     slidesPerView: 'auto',
     spaceBetween: 8,
     freeMode: true
-  };
+  });
 
   // 快速入口分类
   quickAccessItems = [
@@ -74,7 +75,7 @@ export class Tab1Page {
   recentCourses = [
     {
       title: '活力燃脂走',
-      image: 'assets/images/workout1.jpg',
+      image: 'assets/images/work-1.jpg',
       duration: '20分钟',
       level: 'K1 零基础',
       calories: 220,
@@ -114,7 +115,7 @@ export class Tab1Page {
   recommendedCourses = [
     {
       title: '20分钟站立燃脂',
-      image: 'assets/images/workout3.jpg',
+      image: 'assets/images/work-2.jpg',
       duration: '20分钟',
       level: 'K1 零基础',
       calories: 240,
@@ -123,7 +124,7 @@ export class Tab1Page {
     },
     {
       title: '深度睡眠冥想',
-      image: 'assets/images/meditation1.jpg',
+      image: 'assets/images/work-3.jpg',
       duration: '15分钟',
       level: 'K1 零基础',
       calories: 80,
@@ -159,4 +160,4 @@ export class Tab1Page {
   viewReport() {
     console.log('查看年度报告');
   }
-}
+}

src/app/tab2/tab2.page.html

@@ -1,17 +1,107 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title>训练计划</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <!-- 本周训练概览 -->
+  <ion-card class="weekly-card">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon name="calendar-number"></ion-icon>
+        本周训练
+      </ion-card-title>
+      <ion-card-subtitle>已完成 {{completedWorkouts}}/{{totalWorkouts}} 次训练</ion-card-subtitle>
+    </ion-card-header>
+    
+    <ion-card-content>
+      <div class="progress-container">
+        <ion-progress-bar [value]="completionRate" color="primary"></ion-progress-bar>
+        <div class="progress-text">40% 完成度</div>
+      </div>
+      
+      <ion-grid class="day-grid">
+        <ion-row>
+          <ion-col *ngFor="let day of weekDays" [class.active]="day.active">
+            <div class="day-name">{{day.shortName}}</div>
+            <ion-icon 
+              [name]="day.trained ? 'checkmark-circle' : 'ellipse-outline'" 
+              [color]="day.trained ? 'success' : 'medium'">
+            </ion-icon>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <!-- 推荐训练计划 -->
+  <ion-list-header>
+    <ion-label>推荐计划</ion-label>
+    <ion-button fill="clear" size="small">查看全部</ion-button>
+  </ion-list-header>
+
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" *ngFor="let plan of recommendedPlans">
+        <ion-card class="plan-card">
+          <div class="image-container">
+            <img 
+              [src]="plan.image || 'assets/images/work-1.jpg'"
+              (error)="plan.image = 'assets/images/work-2.jpg'"
+              alt="{{plan.name}}"
+            >
+          </div>
+          <ion-card-header>
+            <ion-badge color="warning" *ngIf="plan.isNew">NEW</ion-badge>
+            <ion-card-title>{{plan.name}}</ion-card-title>
+            <ion-card-subtitle>
+              <ion-icon name="time-outline"></ion-icon>
+              {{plan.duration}}分钟 · {{plan.difficulty}}
+            </ion-card-subtitle>
+          </ion-card-header>
+        </ion-card>
+      </div>
+    </div>
+  </div>
+
+  <!-- 我的计划列表 -->
+  <ion-list-header>
+    <ion-label>我的计划</ion-label>
+    <ion-button fill="clear" size="small" (click)="refreshPlans()">
+      <ion-icon name="refresh" slot="start"></ion-icon>
+      刷新
+    </ion-button>
+  </ion-list-header>
+
+  <ion-list lines="none">
+    <ion-item *ngFor="let item of myPlans" [detail]="true" (click)="openPlan(item)">
+      <ion-avatar slot="start">
+        <ion-icon [name]="item.icon || 'barbell'" color="primary"></ion-icon>
+      </ion-avatar>
+      <ion-label>
+        <h3>{{item.name || '未命名计划'}}</h3>
+        <p>{{(item.progress || 0)}}% 完成 · 下次训练: {{item.nextTime || '未安排'}}</p>
+      </ion-label>
+      <ion-badge slot="end" color="light">{{item.remaining || 0}}天</ion-badge>
+    </ion-item>
+  </ion-list>
+
+  <div class="empty-state" *ngIf="myPlans.length === 0">
+    <ion-icon name="fitness"></ion-icon>
+    <p>暂无训练计划</p>
+    <ion-button fill="outline" (click)="createNewPlan()">创建新计划</ion-button>
+  </div>
+
+  <!-- 底部添加按钮 -->
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button (click)="createNewPlan()">
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,235 @@
+/* 全局卡片样式 */
+ion-card {
+    --background: #ffffff;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    margin: 16px;
+  }
+  
+  /* 本周训练卡片 */
+  .weekly-card {
+    ion-card-header {
+      padding-bottom: 8px;
+      
+      ion-card-title {
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        
+        ion-icon {
+          margin-right: 8px;
+          font-size: 20px;
+          color: var(--ion-color-primary);
+        }
+      }
+      
+      ion-card-subtitle {
+        font-size: 14px;
+        color: var(--ion-color-medium);
+      }
+    }
+    
+    .progress-container {
+      margin: 12px 0;
+      
+      .progress-text {
+        text-align: right;
+        font-size: 12px;
+        color: var(--ion-color-medium);
+        margin-top: 4px;
+      }
+    }
+    
+    .day-grid {
+      padding: 0;
+      
+      ion-col {
+        text-align: center;
+        padding: 8px 4px;
+        
+        .day-name {
+          font-size: 12px;
+          color: var(--ion-color-medium);
+          margin-bottom: 4px;
+        }
+        
+        ion-icon {
+          font-size: 20px;
+        }
+        
+        &.active {
+          .day-name {
+            color: var(--ion-color-primary);
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+  
+  /* 推荐计划轮播 */
+  .plan-slides {
+    padding: 0 0 16px 16px;
+    
+    ion-slide {
+      width: 75%;
+    }
+    
+    .plan-card {
+      margin: 0 8px 16px 0;
+      height: 100%;
+      
+      img {
+        width: 100%;
+        height: 120px;
+        object-fit: cover;
+      }
+      
+      ion-card-header {
+        padding: 12px;
+        
+        ion-badge {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+        }
+        
+        ion-card-title {
+          font-size: 16px;
+          margin-bottom: 4px;
+        }
+        
+        ion-card-subtitle {
+          font-size: 12px;
+          display: flex;
+          align-items: center;
+          
+          ion-icon {
+            margin-right: 4px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  
+  /* 我的计划列表 */
+  ion-list {
+    background: transparent;
+    padding: 0;
+    
+    ion-item {
+      --padding-start: 16px;
+      --padding-end: 16px;
+      --inner-padding-end: 0;
+      --background: #ffffff;
+      margin-bottom: 8px;
+      
+      ion-avatar {
+        width: 40px;
+        height: 40px;
+        background: rgba(var(--ion-color-primary-rgb), 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        ion-icon {
+          font-size: 20px;
+        }
+      }
+      
+      ion-label {
+        h3 {
+          font-weight: 500;
+          margin-bottom: 4px;
+        }
+        
+        p {
+          font-size: 12px;
+          color: var(--ion-color-medium);
+        }
+      }
+      
+      ion-badge {
+        font-weight: normal;
+      }
+    }
+  }
+  
+  /* 响应式调整 */
+  @media (min-width: 768px) {
+    .plan-slides ion-slide {
+      width: 50%;
+    }
+  }
+  /* 添加到现有样式文件中 */
+
+.image-placeholder {
+    width: 100%;
+    height: 120px;
+    background: var(--ion-color-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ion-color-medium);
+  }
+  
+  .empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    
+    ion-icon {
+      font-size: 48px;
+      color: var(--ion-color-medium);
+      margin-bottom: 16px;
+    }
+    
+    p {
+      color: var(--ion-color-medium);
+      margin-bottom: 20px;
+    }
+  }
+  /* 添加到现有样式文件中 */
+
+.image-placeholder {
+    width: 100%;
+    height: 120px;
+    background: var(--ion-color-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ion-color-medium);
+  }
+  
+  .empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    
+    ion-icon {
+      font-size: 48px;
+      color: var(--ion-color-medium);
+      margin-bottom: 16px;
+    }
+    
+    p {
+      color: var(--ion-color-medium);
+      margin-bottom: 20px;
+    }
+  }
+  
+  .swiper-container {
+    width: 100%;
+    padding: 0 16px 16px;
+    
+    .swiper-wrapper {
+      display: flex;
+    }
+    
+    .swiper-slide {
+      width: 75%;
+      
+      @media (min-width: 768px) {
+        width: 50%;
+      }
+    }
+  }

src/app/tab2/tab2.page.ts

@@ -1,15 +1,134 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon,
+  IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle,
+  IonCardContent, IonProgressBar, IonGrid, IonRow, IonCol, IonListHeader,
+  IonLabel, IonList, IonItem, IonAvatar, IonBadge, IonFab, IonFabButton
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { 
+  notificationsOutline, calendarNumber, checkmarkCircle, ellipseOutline,
+  timeOutline, barbell, body, walk, add, refresh, fitness 
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon,
+    IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle,
+    IonCardContent, IonProgressBar, IonGrid, IonRow, IonCol, IonListHeader,
+    IonLabel, IonList, IonItem, IonAvatar, IonBadge, IonFab, IonFabButton
+  ]
 })
 export class Tab2Page {
+  // 周训练数据
+  weekDays = [
+    { shortName: '周一', name: 'Monday', trained: true, active: false },
+    { shortName: '周二', name: 'Tuesday', trained: false, active: true },
+    { shortName: '周三', name: 'Wednesday', trained: true, active: false },
+    { shortName: '周四', name: 'Thursday', trained: false, active: false },
+    { shortName: '周五', name: 'Friday', trained: false, active: false },
+    { shortName: '周六', name: 'Saturday', trained: false, active: false },
+    { shortName: '周日', name: 'Sunday', trained: false, active: false }
+  ];
 
-  constructor() {}
+  // 计算属性
+  get completedWorkouts(): number {
+    return this.weekDays.filter(day => day.trained).length;
+  }
 
-}
+  get totalWorkouts(): number {
+    return this.weekDays.length;
+  }
+
+  get completionRate(): number {
+    return this.completedWorkouts / this.totalWorkouts;
+  }
+
+  // 推荐计划
+  recommendedPlans = [
+    {
+      name: '全身燃脂训练',
+      duration: 28,
+      difficulty: '中级',
+      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      isNew: true
+    },
+    {
+      name: '核心力量提升',
+      duration: 35,
+      difficulty: '高级',
+      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      isNew: false
+    },
+    {
+      name: '瑜伽晨间唤醒',
+      duration: 20,
+      difficulty: '初级',
+      image: 'assets/images/work-1.jpg', // 可以替换为实际图片路径
+      isNew: true
+    }
+  ];
+
+  // 我的计划
+  myPlans = [
+    {
+      name: '30天减脂挑战',
+      progress: 65,
+      nextTime: '明天 7:00',
+      remaining: 12,
+      icon: 'barbell'
+    },
+    {
+      name: '上肢力量训练',
+      progress: 30,
+      nextTime: '后天 19:30',
+      remaining: 5,
+      icon: 'body'
+    },
+    {
+      name: '晨跑计划',
+      progress: 80,
+      nextTime: '今天 6:00',
+      remaining: 3,
+      icon: 'walk'
+    }
+  ];
+
+  constructor() {
+    addIcons({ 
+      notificationsOutline, 
+      calendarNumber, 
+      checkmarkCircle, 
+      ellipseOutline,
+      timeOutline,
+      barbell,
+      body,
+      walk,
+      add,
+      refresh,
+      fitness
+    });
+  }
+
+  // 刷新计划
+  refreshPlans() {
+    console.log('刷新计划数据');
+    // 这里可以添加实际刷新逻辑
+  }
+
+  // 打开计划详情
+  openPlan(plan: any) {
+    console.log('打开计划:', plan.name);
+    // 这里可以添加导航逻辑
+  }
+
+  // 创建新计划
+  createNewPlan() {
+    console.log('创建新计划');
+    // 这里可以添加创建逻辑
+  }
+}

src/app/tab3/tab3.page.html

@@ -1,17 +1,153 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title>运动商城</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="cart-outline" slot="icon-only"></ion-icon>
+        <ion-badge color="danger" class="cart-badge">3</ion-badge>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <!-- 引导区 -->
+  <div class="banner-section">
+    <div class="rank-banner">
+      <div class="banner-text">
+        <h3>快加入本周排行</h3>
+        <p>练一下开启本周排行！</p>
+      </div>
+      <div class="avatar-group">
+        <ion-avatar>
+          <ion-icon name="person-circle"></ion-icon>
+        </ion-avatar>
+        <ion-avatar>
+          <ion-icon name="person-circle"></ion-icon>
+        </ion-avatar>
+        <ion-avatar>
+          <ion-icon name="person-circle"></ion-icon>
+        </ion-avatar>
+      </div>
+    </div>
+    <div class="action-icons">
+      <ion-button fill="clear">
+        <ion-icon name="search-outline"></ion-icon>
+      </ion-button>
+      <ion-button fill="clear">
+        <ion-icon name="flash-outline"></ion-icon>
+      </ion-button>
+    </div>
+  </div>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  <!-- 分类导航 -->
+  <ion-segment scrollable value="all" class="category-segment">
+    <ion-segment-button value="all">
+      <ion-label>全部</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="essentials">
+      <ion-label>运动必备</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="equipment">
+      <ion-label>健身器材</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- 新人首单礼 -->
+  <ion-card class="newbie-card">
+    <ion-card-header>
+      <ion-card-title>
+        新人首单礼 <ion-badge color="danger">NEW</ion-badge>
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="newbie-products">
+        <div class="product-card">
+          <ion-icon name="nutrition" class="product-icon"></ion-icon>
+          <div class="price-info">
+            <span class="original-price">¥299</span>
+            <span class="current-price">¥199</span>
+            <ion-badge color="success">6.6折</ion-badge>
+          </div>
+        </div>
+        <div class="product-card">
+          <ion-icon name="barbell" class="product-icon"></ion-icon>
+          <div class="price-info">
+            <span class="original-price">¥159</span>
+            <span class="current-price">¥99</span>
+            <ion-badge color="success">6.2折</ion-badge>
+          </div>
+        </div>
+        <div class="product-card">
+          <ion-icon name="headset" class="product-icon"></ion-icon>
+          <div class="price-info">
+            <span class="original-price">¥399</span>
+            <span class="current-price">¥299</span>
+            <ion-badge color="success">7.5折</ion-badge>
+          </div>
+        </div>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 功能入口区 -->
+  <ion-grid class="function-grid">
+    <ion-row>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="wallet-outline"></ion-icon>
+          <p>购物返现</p>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="pulse-outline"></ion-icon>
+          <p>身体数据</p>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="diamond-outline"></ion-icon>
+          <p>会员专享</p>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="gift-outline"></ion-icon>
+          <p>积分兑换</p>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="trophy-outline"></ion-icon>
+          <p>运动挑战</p>
+        </div>
+      </ion-col>
+      <ion-col size="4">
+        <div class="function-card">
+          <ion-icon name="nutrition-outline"></ion-icon>
+          <p>营养方案</p>
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- 促销活动区 -->
+  <ion-card class="promo-card">
+    <ion-card-header>
+      <ion-card-title>14天饮食计划</ion-card-title>
+      <ion-card-subtitle>完成挑战返现50元</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="promo-content">
+        <ion-icon name="calendar" class="promo-icon"></ion-icon>
+        <div class="promo-info">
+          <p>专业营养师定制14天饮食方案，坚持完成可获得返现奖励</p>
+          <ion-button expand="block" color="warning">
+            立即参与 <ion-icon name="arrow-forward" slot="end"></ion-icon>
+          </ion-button>
+        </div>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,223 @@
+/* 全局样式 */
+ion-content {
+    --background: #f8f8f8;
+  }
+  
+  /* 引导区 */
+  .banner-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #5b7fff, #33ccff);
+    color: white;
+    
+    .rank-banner {
+      display: flex;
+      align-items: center;
+      
+      .banner-text {
+        margin-right: 12px;
+        
+        h3 {
+          margin: 0 0 4px 0;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        
+        p {
+          margin: 0;
+          font-size: 12px;
+          opacity: 0.9;
+        }
+      }
+      
+      .avatar-group {
+        display: flex;
+        
+        ion-avatar {
+          width: 32px;
+          height: 32px;
+          margin-left: -8px;
+          background: rgba(255,255,255,0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          &:first-child {
+            margin-left: 0;
+          }
+          
+          ion-icon {
+            font-size: 20px;
+            color: white;
+          }
+        }
+      }
+    }
+    
+    .action-icons {
+      display: flex;
+      
+      ion-button {
+        --padding-start: 4px;
+        --padding-end: 4px;
+      }
+      
+      ion-icon {
+        font-size: 20px;
+        color: white;
+      }
+    }
+  }
+  
+  /* 分类导航 */
+  .category-segment {
+    padding: 8px 0;
+    background: white;
+    
+    ion-segment-button {
+      --indicator-color: var(--ion-color-primary);
+      --color: var(--ion-color-medium);
+      --color-checked: var(--ion-color-primary);
+      min-width: auto;
+      padding: 0 12px;
+    }
+  }
+  
+  /* 新人首单礼 */
+  .newbie-card {
+    margin: 16px;
+    border-radius: 12px;
+    
+    ion-card-header {
+      padding-bottom: 8px;
+      
+      ion-card-title {
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        
+        ion-badge {
+          margin-left: 8px;
+        }
+      }
+    }
+    
+    .newbie-products {
+      display: flex;
+      overflow-x: auto;
+      padding-bottom: 8px;
+      
+      .product-card {
+        min-width: 100px;
+        margin-right: 12px;
+        text-align: center;
+        
+        .product-icon {
+          font-size: 48px;
+          color: var(--ion-color-primary);
+          padding: 12px;
+          background: rgba(var(--ion-color-primary-rgb), 0.1);
+          border-radius: 8px;
+        }
+        
+        .price-info {
+          margin-top: 8px;
+          
+          .original-price {
+            font-size: 12px;
+            color: var(--ion-color-medium);
+            text-decoration: line-through;
+            margin-right: 4px;
+          }
+          
+          .current-price {
+            font-size: 14px;
+            color: var(--ion-color-danger);
+            font-weight: bold;
+          }
+          
+          ion-badge {
+            font-size: 10px;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+  
+  /* 功能入口区 */
+  .function-grid {
+    padding: 16px;
+    background: white;
+    
+    .function-card {
+      text-align: center;
+      padding: 12px 0;
+      
+      ion-icon {
+        font-size: 24px;
+        color: var(--ion-color-primary);
+        margin-bottom: 8px;
+      }
+      
+      p {
+        margin: 0;
+        font-size: 12px;
+        color: var(--ion-color-dark);
+      }
+    }
+  }
+  
+  /* 促销活动区 */
+  .promo-card {
+    margin: 16px;
+    border-radius: 12px;
+    
+    ion-card-header {
+      padding-bottom: 0;
+      
+      ion-card-title {
+        font-size: 16px;
+      }
+      
+      ion-card-subtitle {
+        font-size: 12px;
+        color: var(--ion-color-medium);
+      }
+    }
+    
+    .promo-content {
+      display: flex;
+      align-items: center;
+      
+      .promo-icon {
+        font-size: 64px;
+        color: var(--ion-color-primary);
+        margin-right: 12px;
+        padding: 8px;
+        background: rgba(var(--ion-color-primary-rgb), 0.1);
+        border-radius: 50%;
+      }
+      
+      .promo-info {
+        flex: 1;
+        
+        p {
+          margin: 0 0 12px 0;
+          font-size: 14px;
+          color: var(--ion-color-medium);
+        }
+      }
+    }
+  }
+  
+  /* 购物车徽章 */
+  .cart-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 10px;
+    padding: 2px 4px;
+  }

src/app/tab3/tab3.page.ts

@@ -1,13 +1,39 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, 
+  IonIcon, IonBadge, IonContent, IonAvatar, IonSegment, 
+  IonSegmentButton, IonLabel, IonCard, IonCardHeader, 
+  IonCardTitle, IonCardSubtitle, IonCardContent, IonGrid, 
+  IonRow, IonCol
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { 
+  cartOutline, searchOutline, flashOutline, arrowForward,
+  personCircle, walletOutline, pulseOutline, diamondOutline,
+  giftOutline, trophyOutline, nutritionOutline, barbell,
+  headset, calendar
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss'],
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  templateUrl: './tab3.page.html',
+  styleUrls: ['./tab3.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, 
+    IonIcon, IonBadge, IonContent, IonAvatar, IonSegment, 
+    IonSegmentButton, IonLabel, IonCard, IonCardHeader, 
+    IonCardTitle, IonCardSubtitle, IonCardContent, IonGrid, 
+    IonRow, IonCol
+  ]
 })
 export class Tab3Page {
-  constructor() {}
-}
+  constructor() {
+    addIcons({
+      cartOutline, searchOutline, flashOutline, arrowForward,
+      personCircle, walletOutline, pulseOutline, diamondOutline,
+      giftOutline, trophyOutline, nutritionOutline, barbell,
+      headset, calendar
+    });
+  }
+}

src/app/tab4/tab4.page.html

@@ -0,0 +1,141 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-avatar class="header-avatar">
+        <ion-icon name="person" class="avatar-icon"></ion-icon>
+      </ion-avatar>
+    </ion-buttons>
+
+    <div class="header-user-info">
+      <div class="username">直率的_Keepereza8</div>
+      <div class="user-stats">
+        <span>关注0</span> | <span>粉丝0</span> | <span>加油0</span>
+        <div class="secondary-stats">4 0 - ￥0 - ￥0</div>
+      </div>
+    </div>
+
+    <ion-buttons slot="end">
+      <ion-badge color="danger" class="challenge-badge">新挑战 2025.04</ion-badge>
+      <ion-button fill="clear" class="settings-btn">
+        <ion-icon slot="icon-only" name="settings"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 运动数据卡片 -->
+  <ion-card class="data-card" (click)="goToDataDetails()">
+    <ion-card-header>
+      <ion-card-title>
+        <span class="warning-text">
+          <ion-icon name="cloud-upload"></ion-icon>
+          待上传 
+        </span>
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button fill="clear" expand="block">
+        本周运动 <ion-icon name="chevron-forward"></ion-icon>
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 体重监控模块 -->
+  <ion-card class="weight-card">
+    <ion-card-header>
+      <ion-card-title>体重监控</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="weight-content">
+        <div class="weight-value">74.0<small>公斤</small></div>
+        <div class="weight-controls">
+          <ion-button fill="clear" class="chart-button">
+            <ion-icon name="stats-chart"></ion-icon>
+          </ion-button>
+          <ion-select value="12" interface="popover">
+            <ion-select-option value="1">近1个月</ion-select-option>
+            <ion-select-option value="3">近3个月</ion-select-option>
+            <ion-select-option value="12">近12个月</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 会员服务 -->
+  <ion-card class="vip-card">
+    <ion-card-header (click)="toggleVipPanel()">
+      <ion-card-title>
+        <ion-icon name="diamond"></ion-icon> Svip·会员
+        <span class="vip-action">立即开通 <ion-icon [name]="vipPanelOpen ? 'chevron-down' : 'chevron-forward'"></ion-icon></span>
+      </ion-card-title>
+    </ion-card-header>
+    
+    <ion-card-content *ngIf="vipPanelOpen">
+      <div class="vip-item">
+        <ion-icon name="calendar"></ion-icon> 7天瑜伽打卡计划 <ion-icon name="chevron-forward"></ion-icon>
+      </div>
+      <div class="vip-promo">
+        <ion-icon name="alarm"></ion-icon> 会员大促最后 
+        <span class="countdown">23:59:59</span>
+        <ion-icon name="chevron-down"></ion-icon>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 功能网格 -->
+  <ion-grid class="function-grid">
+    <ion-row>
+      <ion-col (click)="goToFavorites()">
+        <ion-icon name="star"></ion-icon>
+        <div>收藏与加油</div>
+      </ion-col>
+      <ion-col (click)="goToCourses()">
+        <ion-icon name="videocam"></ion-icon>
+        <div>我的课程</div>
+      </ion-col>
+      <ion-col (click)="goToActivities()">
+        <ion-icon name="trophy"></ion-icon>
+        <div>我的活动</div>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col class="disabled" (click)="showLockedFeature()">
+        <ion-icon name="nutrition"></ion-icon>
+        <div>我的饮食</div>
+      </ion-col>
+      <ion-col (click)="goToOrders()">
+        <ion-icon name="wallet"></ion-icon>
+        <div>订单与钱包</div>
+      </ion-col>
+      <ion-col (click)="goToRewards()">
+        <ion-icon name="gift"></ion-icon>
+        <div>领福利</div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- 发布按钮
+  <div class="fab-container">
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button color="primary">
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="top">
+        <ion-fab-button color="light" (click)="createSportRecord()">
+          <ion-icon name="barbell"></ion-icon>
+          <ion-label>运动打卡</ion-label>
+        </ion-fab-button>
+        <ion-fab-button color="light" (click)="createDietRecord()">
+          <ion-icon name="restaurant"></ion-icon>
+          <ion-label>饮食记录</ion-label>
+        </ion-fab-button>
+        <ion-fab-button color="light" (click)="shareMoment()">
+          <ion-icon name="share-social"></ion-icon>
+          <ion-label>动态分享</ion-label>
+        </ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+  </div> -->
+</ion-content>

src/app/tab4/tab4.page.scss

@@ -0,0 +1,284 @@
+ion-toolbar {
+    --background: #ffffff;
+    --border-width: 0;
+    --padding-top: 12px;
+    --padding-bottom: 8px;
+  }
+  
+  .user-info {
+    text-align: center;
+    padding: 0 16px;
+    
+    .user-name {
+      font-weight: bold;
+      font-size: 16px;
+      color: #333;
+    }
+    
+    .user-stats {
+      font-size: 12px;
+      color: #666;
+      
+      .secondary-stats {
+        margin-top: 2px;
+        font-size: 10px;
+      }
+    }
+  }
+  
+  .challenge-badge {
+    margin-right: 8px;
+    font-size: 12px;
+    font-weight: normal;
+    border-radius: 12px;
+    padding: 4px 8px;
+  }
+  
+  .data-card {
+    margin: 16px;
+    border-radius: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    
+    ion-card-header {
+      padding-bottom: 0;
+      
+      ion-card-title {
+        font-size: 24px;
+        
+        .warning-text {
+          color: var(--ion-color-danger);
+          display: flex;
+          align-items: center;
+          
+          ion-icon {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+    
+    ion-card-content {
+      padding-top: 0;
+      
+      ion-button {
+        --padding-start: 0;
+        --padding-end: 0;
+        font-size: 14px;
+        color: var(--ion-color-medium);
+      }
+    }
+  }
+  
+  .weight-card {
+    margin: 16px;
+    border-radius: 16px;
+    
+    .weight-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .weight-value {
+        font-size: 28px;
+        font-weight: bold;
+        
+        small {
+          font-size: 16px;
+          font-weight: normal;
+          color: var(--ion-color-medium);
+        }
+      }
+      
+      .weight-controls {
+        display: flex;
+        align-items: center;
+        
+        ion-select {
+          width: 100px;
+          max-width: 100%;
+          --padding-start: 8px;
+          --padding-end: 8px;
+        }
+        
+        .chart-button {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  
+  .vip-card {
+    margin: 16px;
+    background: linear-gradient(135deg, #f8e3b8, #e8c275);
+    
+    ion-card-header {
+      ion-card-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #8a6d3b;
+        
+        .vip-action {
+          font-size: 14px;
+          font-weight: normal;
+        }
+      }
+    }
+    
+    .vip-item, .vip-promo {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(138, 109, 59, 0.2);
+      
+      ion-icon {
+        margin-right: 8px;
+        color: #8a6d3b;
+      }
+      
+      .countdown {
+        color: var(--ion-color-danger);
+        font-weight: bold;
+        animation: blink 1s infinite;
+      }
+    }
+    
+    .vip-promo {
+      border-bottom: none;
+    }
+  }
+  
+  @keyframes blink {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  
+  .function-grid {
+    padding: 0;
+    margin: 16px;
+    
+    ion-row {
+      border-bottom: 1px solid var(--ion-color-light-shade);
+      
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    
+    ion-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 16px 8px;
+      text-align: center;
+      
+      ion-icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+        color: var(--ion-color-primary);
+        transition: transform 0.2s ease;
+      }
+      
+      div {
+        font-size: 14px;
+        color: #333;
+      }
+      
+      &:active ion-icon {
+        transform: scale(1.2);
+      }
+      &.diet-col {
+        .grid-icon, div {
+          color: var(--ion-color-primary); // 使用主色调
+          opacity: 1; // 移除半透明效果
+        }
+      }
+    }
+    
+    .disabled {
+      opacity: 0.5;
+      
+      ion-icon, div {
+        color: var(--ion-color-medium);
+      }
+    }
+  }
+  
+  .fab-container {
+    margin-bottom: 80px;
+  }
+  
+  ion-fab-button {
+    --box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
+  }
+  
+  ion-fab-list {
+    ion-fab-button {
+      width: 120px;
+      margin-bottom: 8px;
+      
+      ion-icon {
+        font-size: 20px;
+      }
+      
+      ion-label {
+        margin-left: 8px;
+        font-size: 12px;
+      }
+    }
+  }
+  ion-toolbar {
+    --background: #f8f8f8;
+    --border-width: 0;
+    padding: 8px 12px;
+    
+    .header-avatar {
+      width: 40px;
+      height: 40px;
+      margin-right: 12px;
+      background: var(--ion-color-primary);
+      
+      .avatar-icon {
+        font-size: 24px;
+        color: white;
+      }
+    }
+    
+    .header-user-info {
+      flex-grow: 1;
+      text-align: left;
+      
+      .username {
+        font-weight: bold;
+        font-size: 16px;
+        color: #333;
+        margin-bottom: 2px;
+      }
+      
+      .user-stats {
+        font-size: 12px;
+        color: #666;
+        
+        .secondary-stats {
+          margin-top: 2px;
+          font-size: 10px;
+        }
+      }
+    }
+    
+    .challenge-badge {
+      margin-right: 8px;
+      font-size: 12px;
+      font-weight: normal;
+      border-radius: 12px;
+      padding: 4px 8px;
+    }
+    
+    .settings-btn {
+      --padding-start: 0;
+      --padding-end: 0;
+      --color: #333;
+    }
+  }

src/app/tab4/tab4.page.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Tab4Page } from './tab4.page';
+
+describe('tab4Page', () => {
+  let component: Tab4Page;
+  let fixture: ComponentFixture<Tab4Page>;
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(Tab4Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tab4/tab4.page.ts

@@ -0,0 +1,117 @@
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { addIcons } from 'ionicons';
+import { 
+  chevronBack, 
+  settings, 
+  cloudUpload, 
+  chevronForward, 
+  statsChart,
+  diamond,
+  calendar,
+  alarm,
+  star,
+  videocam,
+  trophy,
+  nutrition,
+  wallet,
+  gift,
+  add,
+  barbell,
+  restaurant,
+  shareSocial
+} from 'ionicons/icons';
+
+@Component({
+  selector: 'app-tab4',
+  templateUrl: 'tab4.page.html',
+  styleUrls: ['tab4.page.scss'],
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule]
+})
+export class Tab4Page {
+  vipPanelOpen = false;
+
+  constructor() {
+    // 注册所有需要的图标
+    addIcons({
+      chevronBack, 
+      settings, 
+      cloudUpload, 
+      chevronForward, 
+      statsChart,
+      diamond,
+      calendar,
+      alarm,
+      star,
+      videocam,
+      trophy,
+      nutrition,
+      wallet,
+      gift,
+      add,
+      barbell,
+      restaurant,
+      shareSocial
+    });
+  }
+
+  // 顶部栏操作
+  goBack() {
+    console.log('返回上一页');
+  }
+
+  goToSettings() {
+    console.log('跳转到设置页面');
+  }
+
+  // 运动数据卡片
+  goToDataDetails() {
+    console.log('跳转到数据详情');
+  }
+
+  // 会员服务
+  toggleVipPanel() {
+    this.vipPanelOpen = !this.vipPanelOpen;
+  }
+
+  // 功能网格操作
+  goToFavorites() {
+    console.log('跳转到收藏与加油');
+  }
+
+  goToCourses() {
+    console.log('跳转到我的课程');
+  }
+
+  goToActivities() {
+    console.log('跳转到我的活动');
+  }
+
+  showLockedFeature() {
+    console.log('显示功能锁定提示');
+  }
+
+  goToOrders() {
+    console.log('跳转到订单与钱包');
+  }
+
+  goToRewards() {
+    console.log('跳转到领福利');
+  }
+
+  // 发布操作
+  createSportRecord() {
+    console.log('创建运动打卡');
+  }
+
+  createDietRecord() {
+    console.log('创建饮食记录');
+  }
+
+  shareMoment() {
+    console.log('分享动态');
+  }
+}

src/app/tabs/tabs.page.html

@@ -2,17 +2,21 @@
   
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="home-outline"></ion-icon>
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>发现</ion-label>
+      <ion-icon aria-hidden="true" name="barbell-outline"></ion-icon>
+      <ion-label>计划</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="cart-outline"></ion-icon>
+      <ion-label>商城</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
+      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

src/app/tabs/tabs.routes.ts

@@ -21,6 +21,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
+      {
+        path: 'tab4',
+        loadComponent: () =>
+          import('../tab4/tab4.page').then((m) => m.Tab4Page),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

src/main.ts

@@ -1,14 +1,38 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
 import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+
+// 1. 导入所有需要的图标
+import { 
+  walkOutline, bodyOutline, footstepsOutline, flameOutline,
+  videocamOutline, trophyOutline, statsChartOutline, cartOutline,
+  notificationsOutline, trendingUpOutline, podiumOutline, starOutline,
+  alarmOutline, peopleOutline,  searchOutline,
+  ellipsisHorizontalOutline, playOutline, timeOutline, barbellOutline,
+  heartOutline, settingsOutline, personOutline, homeOutline,
+  fitnessOutline, listOutline, flashOutline, bicycleOutline
+} from 'ionicons/icons';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+// 2. 注册所有图标
+addIcons({
+  walkOutline, bodyOutline, footstepsOutline, flameOutline,
+  videocamOutline, trophyOutline, statsChartOutline, cartOutline,
+  notificationsOutline, trendingUpOutline, podiumOutline, starOutline,
+  alarmOutline, peopleOutline,  searchOutline,
+  ellipsisHorizontalOutline, playOutline, timeOutline, barbellOutline,
+  heartOutline, settingsOutline, personOutline, homeOutline,
+  fitnessOutline, listOutline, flashOutline, bicycleOutline
+});
+
+// 3. 启动应用
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
   ],
-});
+});