tabs

src/app/tab1/tab1.page.html

@@ -25,9 +25,59 @@
 </ion-header>
 
 <ion-content>
-  <div class="column-wrapper">
+  <div class="column-wrapper" *ngIf="segmentModel === 'follow'">
     <div class="image-container">
-      <ion-card *ngFor="let item of items">
+      <ion-card *ngFor="let item of FollowItems">
+        <img src="{{item.image}}" alt="Item Image">
+        <ion-card-header>
+          <ion-card-title>{{item.title}}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="card-footer">
+            <div class="avatar-section">
+              <ion-avatar>
+                <img src="{{item.avatar}}" alt="Item Avatar">
+              </ion-avatar>
+            </div>
+            <div class="heart-section">
+              <ion-button fill="clear" (click)="like()">
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-button>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </div>
+
+  <div class="column-wrapper" *ngIf="segmentModel === 'recommend'">
+    <div class="image-container">
+      <ion-card *ngFor="let item of RecommendItems">
+        <img src="{{item.image}}" alt="Item Image">
+        <ion-card-header>
+          <ion-card-title>{{item.title}}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="card-footer">
+            <div class="avatar-section">
+              <ion-avatar>
+                <img src="{{item.avatar}}" alt="Item Avatar">
+              </ion-avatar>
+            </div>
+            <div class="heart-section">
+              <ion-button fill="clear" (click)="like()">
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-button>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </div>
+
+  <div class="column-wrapper" *ngIf="segmentModel === 'nearby'">
+    <div class="image-container">
+      <ion-card *ngFor="let item of NearbyItems">
         <img src="{{item.image}}" alt="Item Image">
         <ion-card-header>
           <ion-card-title>{{item.title}}</ion-card-title>
@@ -51,7 +101,7 @@
   </div>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button (click)="addNew()">
+    <ion-fab-button (click)="addNew()" color=light>
       <ion-icon name="add"></ion-icon>
     </ion-fab-button>
   </ion-fab>

src/app/tab1/tab1.page.ts

@@ -9,11 +9,27 @@ export class Tab1Page {
   segmentModel = 'follow';
   selectedTab = 'home';
 
-  items: any[] = [
-    { image: 'assets/image1.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '4662' },
-    { image: 'assets/image3.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '8564' },
-    { image: 'assets/image2.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '1241' },
-    { image: 'assets/image4.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '4.2w' },
+  FollowItems: any[] = [
+    { image: 'assets/image1.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '4662' },
+    { image: 'assets/image2.jpg', avatar: 'assets/user-avatar2.jpg',title: '夏季热门穿搭',likes: '8564' },
+    { image: 'assets/image3.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '1241' },
+    { image: 'assets/image4.jpg', avatar: 'assets/user-avatar3.jpg',title: '夏季热门穿搭',likes: '4.2w' },
+    // 添加更多项目
+  ];
+
+  RecommendItems: any[] = [
+    { image: 'assets/image1.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '4662' },
+    { image: 'assets/image2.jpg', avatar: 'assets/user-avatar2.jpg',title: '夏季热门穿搭',likes: '8564' },
+    { image: 'assets/image3.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '1241' },
+    { image: 'assets/image4.jpg', avatar: 'assets/user-avatar3.jpg',title: '夏季热门穿搭',likes: '4.2w' },
+    // 添加更多项目
+  ];
+
+  NearbyItems: any[] = [
+    { image: 'assets/image1.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '4662' },
+    { image: 'assets/image2.jpg', avatar: 'assets/user-avatar2.jpg',title: '夏季热门穿搭',likes: '8564' },
+    { image: 'assets/image3.jpg', avatar: 'assets/user-avatar1.jpg',title: '夏季热门穿搭',likes: '1241' },
+    { image: 'assets/image4.jpg', avatar: 'assets/user-avatar3.jpg',title: '夏季热门穿搭',likes: '4.2w' },
     // 添加更多项目
   ];
 

src/app/tab2/tab2.page.html

@@ -75,14 +75,38 @@
 
   <ion-grid *ngIf="segmentModel === 'styleChange'">
     <!-- 风格转换内容 -->
+    <div class="column-wrapper">
+      <ion-card *ngFor="let item of styleChangeItems">
+        <img src="{{item.image}}" />
+        <ion-card-content>
+          <ion-label>{{item.label}}</ion-label>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-grid>
 
   <ion-grid *ngIf="segmentModel === 'selectedProducts'">
     <!-- 精选商品内容 -->
+    <div class="column-wrapper">
+      <ion-card *ngFor="let item of selectedProductsItems">
+        <img src="{{item.image}}" />
+        <ion-card-content>
+          <ion-label>{{item.label}}</ion-label>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-grid>
 
   <ion-grid *ngIf="segmentModel === 'favoriteProducts'">
     <!-- 收藏商品内容 -->
+    <div class="column-wrapper">
+      <ion-card *ngFor="let item of favoriteProductsItems">
+        <img src="{{item.image}}" />
+        <ion-card-content>
+          <ion-label>{{item.label}}</ion-label>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-grid>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/app/tab2/tab2.page.ts

@@ -10,18 +10,42 @@ export class Tab2Page {
   selectedTab = 'shop';
 
   aiRecommendItems = [
-    { image: 'assets/image1.jpg', label: '商品1' },
-    { image: 'assets/image4.jpg', label: '商品2' },
-    { image: 'assets/image2.jpg', label: '商品3' },
-    { image: 'assets/image3.jpg', label: '商品4' },
+    { image: 'assets/commodity1.jpg', label: '商品1' },
+    { image: 'assets/commodity2.jpg', label: '商品2' },
+    { image: 'assets/commodity3.jpg', label: '商品3' },
+    { image: 'assets/commodity4.jpg', label: '商品4' },
     // Add more items as needed
   ];
 
   seasonHotItems = [
-    { image: 'assets/image1.jpg', label: 'Label 1' },
-    { image: 'assets/image2.jpg', label: 'Label 2' },
-    { image: 'assets/image3.jpg', label: 'Label 3' },
-    { image: 'assets/image4.jpg', label: 'Label 4' },
+    { image: 'assets/commodity1.jpg', label: '商品1' },
+    { image: 'assets/commodity2.jpg', label: '商品2' },
+    { image: 'assets/commodity3.jpg', label: '商品3' },
+    { image: 'assets/commodity4.jpg', label: '商品4' },
+    // Add more items as needed
+  ];
+
+  styleChangeItems = [
+    { image: 'assets/commodity1.jpg', label: '商品1' },
+    { image: 'assets/commodity2.jpg', label: '商品2' },
+    { image: 'assets/commodity3.jpg', label: '商品3' },
+    { image: 'assets/commodity4.jpg', label: '商品4' },
+    // Add more items as needed
+  ];
+
+  selectedProductsItems = [
+    { image: 'assets/commodity1.jpg', label: '商品1' },
+    { image: 'assets/commodity2.jpg', label: '商品2' },
+    { image: 'assets/commodity3.jpg', label: '商品3' },
+    { image: 'assets/commodity4.jpg', label: '商品4' },
+    // Add more items as needed
+  ];
+
+  favoriteProductsItems = [
+    { image: 'assets/commodity1.jpg', label: '商品1' },
+    { image: 'assets/commodity2.jpg', label: '商品2' },
+    { image: 'assets/commodity3.jpg', label: '商品3' },
+    { image: 'assets/commodity4.jpg', label: '商品4' },
     // Add more items as needed
   ];
 

src/app/tab3/tab3.page.ts

@@ -10,11 +10,11 @@ export class Tab3Page {
   selectedTab = 'message';
 
   messages = [
-    { avatar: 'assets/image4.jpg', title: '交易物流', content: '您购买的宝贝已签收', time: '昨天' },
-    { avatar: 'assets/user-avatar.jpg', title: 'abab', content: '来自abab的穿搭分享', time: '昨天' },
+    { avatar: 'assets/trucks.jpg', title: '交易物流', content: '您购买的宝贝已签收', time: '昨天' },
+    { avatar: 'assets/user-avatar1.jpg', title: 'abab', content: '来自abab的穿搭分享', time: '昨天' },
     { avatar: 'assets/image2.jpg', title: '客服机器人2号', content: '请确认收货地址', time: '星期五' },
-    { avatar: 'assets/image3.jpg', title: '穿搭小助手', content: '为您推荐', time: '星期四' },
-    { avatar: 'assets/image1.jpg', title: 'iakz', content: '互关', time: '星期一' },
+    { avatar: 'assets/user-avatar2.jpg', title: '穿搭小助手', content: '为您推荐', time: '星期四' },
+    { avatar: 'assets/user-avatar3.jpg', title: 'iakz', content: '互关', time: '星期一' },
     // Add more tab3s as needed
   ];
 

src/app/tab4/tab4.page.html

@@ -19,7 +19,7 @@
 <ion-content>
   <div class="user-profile">
     <div class="user-info">
-      <img src="assets/user-avatar.jpg" alt="User Avatar">
+      <img src="assets/user-avatar1.jpg" alt="User Avatar">
       <h3>不吃粉面菜蛋</h3>
       <p>ID:0210033</p>
       <p>个人简介</p>
@@ -51,7 +51,7 @@
     </div>
   </div>
   <div class="content">
-    <ion-segment>
+    <ion-segment [(ngModel)]="segmentModel">
       <ion-segment-button value="works" checked>
         作品
       </ion-segment-button>
@@ -63,9 +63,39 @@
       </ion-segment-button>
     </ion-segment>
 
-    <ion-grid>
+    <ion-grid *ngIf="segmentModel === 'works'">
       <ion-row>
-        <ion-col size="4" *ngFor="let item of items">
+        <ion-col size="4" *ngFor="let item of WorksItems">
+          <div class="image-container">
+            <ion-card>
+              <img src="{{item.image}}" alt="Item Image">
+              <ion-card-content>
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <ion-grid *ngIf="segmentModel === 'likes'">
+      <ion-row>
+        <ion-col size="4" *ngFor="let item of LikesItems">
+          <div class="image-container">
+            <ion-card>
+              <img src="{{item.image}}" alt="Item Image">
+              <ion-card-content>
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <ion-grid *ngIf="segmentModel === 'favorites'">
+      <ion-row>
+        <ion-col size="4" *ngFor="let item of FavoritesItems">
           <div class="image-container">
             <ion-card>
               <img src="{{item.image}}" alt="Item Image">

src/app/tab4/tab4.page.scss

@@ -16,7 +16,7 @@ ion-card {
   width: 100%;
   height: 75%;
   background-color: #000000;
-  object-fit: contain;
+  object-fit: cover;
   object-position: center;
 }
 .header {

src/app/tab4/tab4.page.ts

@@ -6,11 +6,26 @@ import { Component } from '@angular/core';
   styleUrls: ['tab4.page.scss'],
 })
 export class Tab4Page {
+  segmentModel = 'works';
   selectedTab = 'profile';
-  items: any[] = [
-    { image: 'assets/image1.jpg', likes: 100 },
-    { image: 'assets/image2.jpg', likes: 150 },
-    { image: 'assets/image4.jpg', likes: 120 },
+  WorksItems: any[] = [
+    { image: 'assets/image2.jpg', likes: '100' },
+    { image: 'assets/image3.jpg', likes: '150' },
+    { image: 'assets/image4.jpg', likes: '120' },
+    // 添加更多项目
+  ];
+
+  LikesItems: any[] = [
+    { image: 'assets/image1.jpg', likes: '2.2w' },
+    { image: 'assets/image2.jpg', likes: '1.6w' },
+    { image: 'assets/image3.jpg', likes: '10.3w' },
+    // 添加更多项目
+  ];
+
+  FavoritesItems: any[] = [
+    { image: 'assets/image1.jpg', likes: '2.2w' },
+    { image: 'assets/image2.jpg', likes: '1.6w' },
+    { image: 'assets/image3.jpg', likes: '10.3w' },
     // 添加更多项目
   ];