tab4

src/app/tab1/tab1.page.scss

@@ -13,17 +13,4 @@ ion-avatar {
 
 ion-button {
   --border-radius: 0;
-}
-
-ion-footer {
-  ion-toolbar {
-    ion-button {
-      --background: transparent;
-      --color: black;
-      &.active {
-        font-weight: bold;
-        color: blue;
-      }
-    }
-  }
 }

src/app/tab2/tab2.page.html

@@ -82,17 +82,27 @@
 <ion-footer>
   <ion-toolbar color="light">
     <ion-buttons slot="start">
-      <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
-        <ion-icon name="home"></ion-icon>
+      <ion-button [class.active]="selectedTab === 'home'" (click)="selectTab('home')">
+        <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
+          <ion-icon name="home"></ion-icon>
+        </ion-button>
       </ion-button>
-      <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
-        <ion-icon name="cart"></ion-icon>
+      <ion-button [class.active]="selectedTab === 'shop'" (click)="selectTab('shop')">
+        <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
+          <ion-icon name="cart"></ion-icon>
+        </ion-button>
       </ion-button>
-      <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
-        <ion-icon name="chatbox"></ion-icon>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button [class.active]="selectedTab === 'message'" (click)="selectTab('message')">
+        <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
+          <ion-icon name="chatbox"></ion-icon>
+        </ion-button>
       </ion-button>
-      <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
-        <ion-icon name="person"></ion-icon>
+      <ion-button [class.active]="selectedTab === 'profile'" (click)="selectTab('profile')">
+        <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
+          <ion-icon name="person"></ion-icon>
+        </ion-button>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

src/app/tab2/tab2.page.scss

@@ -2,6 +2,10 @@ ion-content {
   background-color: #ffffff;
 }
 
+ion-card {
+  width: 150px;
+  height: 210px;
+}
 .header {
   --background: rgba(166, 66, 253, 0.7); /* 设置顶部工具栏背景色为紫白色渐变的半透明色 */
   color: #000000; /* 设置文字颜色为白色 */
@@ -65,7 +69,7 @@ ion-content {
       background-color: rgba(255, 255, 255, 0.3);
       color: #000000;
       border: 1px solid rgba(255, 255, 255, 0.3);
-      margin: 0 60px;
+      margin: 0 30px;
       width: 140px;
       height: 80px;
     }

src/app/tab2/tab2.page.ts

@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['tab2.page.scss'],
 })
 export class Tab2Page {
+  selectedTab = 'profile';
   items: any[] = [
     { image: 'assets/image1.jpg', likes: 100 },
     { image: 'assets/image1.jpg', likes: 150 },
@@ -14,5 +15,8 @@ export class Tab2Page {
   ];
 
   constructor() {}
+  selectTab(tab: string) {
+    this.selectedTab = tab;
+  }
 
 }

src/app/tab3/tab3.page.html

@@ -1,11 +1,14 @@
 <ion-header>
-  <ion-toolbar color="light" class="header">
+  <ion-toolbar color="light">
     <ion-searchbar placeholder="搜索"></ion-searchbar>
     <ion-buttons slot="end">
       <ion-button>
         <ion-icon name="ellipsis-horizontal"></ion-icon>
       </ion-button>
     </ion-buttons>
+    
+  </ion-toolbar>
+  <div class="user-actions">
     <ion-button color="light">
       <ion-icon name="document"></ion-icon>
       我的订单
@@ -22,7 +25,7 @@
       <ion-icon name="time"></ion-icon>
       浏览记录
     </ion-button>
-  </ion-toolbar>
+  </div>
   
 </ion-header>
 
@@ -81,18 +84,26 @@
   <ion-toolbar color="light">
     <ion-buttons slot="start">
       <ion-button [class.active]="selectedTab === 'home'" (click)="selectTab('home')">
-        <ion-icon name="home"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
+          <ion-icon name="home"></ion-icon>
+        </ion-button>
       </ion-button>
       <ion-button [class.active]="selectedTab === 'shop'" (click)="selectTab('shop')">
-        <ion-icon name="cart"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
+          <ion-icon name="cart"></ion-icon>
+        </ion-button>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="end">
       <ion-button [class.active]="selectedTab === 'message'" (click)="selectTab('message')">
-        <ion-icon name="chatbox"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
+          <ion-icon name="chatbox"></ion-icon>
+        </ion-button>
       </ion-button>
       <ion-button [class.active]="selectedTab === 'profile'" (click)="selectTab('profile')">
-        <ion-icon name="person"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
+          <ion-icon name="person"></ion-icon>
+        </ion-button>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

src/app/tab3/tab3.page.scss

@@ -25,9 +25,13 @@ img {
 ion-label {
   text-align: center;
 }
-.header{
+.user-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
   ion-button{
-    align-content: center;
+    margin: 0px 20px;
     margin-top: 5px;
     margin-bottom: 5px;
     color: #000000;

src/app/tab3/tab3.page.ts

@@ -10,8 +10,8 @@ export class Tab3Page {
   selectedTab = 'shop';
 
   aiRecommendItems = [
-    { image: 'image_url_1', label: 'Label 1' },
-    { image: 'image_url_2', label: 'Label 2' },
+    { image: 'assets/image4.jpg', label: 'Label 1' },
+    { image: 'assets/image2.jpg', label: 'Label 2' },
     // Add more items as needed
   ];
 

src/app/tab4/tab4.page.html

@@ -1,98 +1,69 @@
 <ion-header>
-  <ion-toolbar color="light" class="header">
-    <ion-searchbar placeholder="搜索"></ion-searchbar>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start">
+      <ion-button>
+        消息 ({{unreadMessages}})
+      </ion-button>
+    </ion-buttons>
     <ion-buttons slot="end">
+      <ion-button (click)="search()">
+        <ion-icon name="search"></ion-icon>
+      </ion-button>
       <ion-button>
-        <ion-icon name="ellipsis-horizontal"></ion-icon>
+        <ion-icon name="people-outline"></ion-icon>
+      </ion-button>
+      <ion-button (click)="addNewMessage()">
+        <ion-icon name="add"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-button color="light">
-      <ion-icon name="document"></ion-icon>
-      我的订单
-    </ion-button>
-    <ion-button color="light">
-      <ion-icon name="cart"></ion-icon>
-      购物车
-    </ion-button>
-    <ion-button color="light">
-      <ion-icon name="ticket"></ion-icon>
-      红包/卡券
-    </ion-button>
-    <ion-button color="light">
-      <ion-icon name="time"></ion-icon>
-      浏览记录
-    </ion-button>
   </ion-toolbar>
-  
 </ion-header>
 
 <ion-content>
-  <ion-segment [(ngModel)]="segmentModel">
-    <ion-segment-button value="aiRecommend">
-      AI推荐
-    </ion-segment-button>
-    <ion-segment-button value="seasonHot">
-      当季热门
-    </ion-segment-button>
-    <ion-segment-button value="styleChange">
-      风格转换
-    </ion-segment-button>
-    <ion-segment-button value="selectedProducts">
-      精选商品
-    </ion-segment-button>
-    <ion-segment-button value="favoriteProducts">
-      收藏商品
-    </ion-segment-button>
-  </ion-segment>
-
-  <!-- Content for each segment -->
-  <ion-grid *ngIf="segmentModel === 'aiRecommend'">
-    <!-- AI推荐内容 -->
+  <ion-grid>
     <ion-row>
-      <ion-col size="6" *ngFor="let item of aiRecommendItems">
-        <ion-card>
-          <img src="{{item.image}}" />
+      <ion-col size="12">
+        <ion-card *ngFor="let message of messages">
+          <ion-card-header>
+            <ion-avatar>
+              <img src="{{message.avatar}}">
+            </ion-avatar>
+            <ion-card-title>{{message.title}}</ion-card-title>
+            <ion-card-subtitle>{{message.time}}</ion-card-subtitle>
+          </ion-card-header>
           <ion-card-content>
-            <ion-label>{{item.label}}</ion-label>
+            {{message.content}}
           </ion-card-content>
         </ion-card>
       </ion-col>
     </ion-row>
   </ion-grid>
-
-  <ion-grid *ngIf="segmentModel === 'seasonHot'">
-    <!-- 当季热门内容 -->
-  </ion-grid>
-
-  <ion-grid *ngIf="segmentModel === 'styleChange'">
-    <!-- 风格转换内容 -->
-  </ion-grid>
-
-  <ion-grid *ngIf="segmentModel === 'selectedProducts'">
-    <!-- 精选商品内容 -->
-  </ion-grid>
-
-  <ion-grid *ngIf="segmentModel === 'favoriteProducts'">
-    <!-- 收藏商品内容 -->
-  </ion-grid>
 </ion-content>
 
 <ion-footer>
   <ion-toolbar color="light">
     <ion-buttons slot="start">
       <ion-button [class.active]="selectedTab === 'home'" (click)="selectTab('home')">
-        <ion-icon name="home"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
+          <ion-icon name="home"></ion-icon>
+        </ion-button>
       </ion-button>
       <ion-button [class.active]="selectedTab === 'shop'" (click)="selectTab('shop')">
-        <ion-icon name="cart"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
+          <ion-icon name="cart"></ion-icon>
+        </ion-button>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="end">
       <ion-button [class.active]="selectedTab === 'message'" (click)="selectTab('message')">
-        <ion-icon name="chatbox"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
+          <ion-icon name="chatbox"></ion-icon>
+        </ion-button>
       </ion-button>
       <ion-button [class.active]="selectedTab === 'profile'" (click)="selectTab('profile')">
-        <ion-icon name="person"></ion-icon>
+        <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
+          <ion-icon name="person"></ion-icon>
+        </ion-button>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

src/app/tab4/tab4.page.scss

@@ -2,35 +2,19 @@ ion-content {
   background-color: #fff;
 }
 
-ion-segment-button {
-  color: black;
-}
-
-ion-grid {
-  height: 100%;
-}
-ion-content {
-  background-color: #fff;
-}
-
 ion-card {
-  margin: 10px;
+  margin:5px 0px;
 }
 
-img {
-  width: 100%;
-  height: auto;
+ion-avatar {
+  width: 50px;
+  height: 50px;
 }
 
-ion-label {
-  text-align: center;
+ion-button {
+  --border-radius: 0;
 }
-.header{
-  ion-button{
-    align-content: center;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    color: #000000;
-    background-color: white;
-  }
+
+ion-card-subtitle {
+  margin-left: auto;
 }

src/app/tab4/tab4.page.ts

@@ -6,17 +6,28 @@ import { Component } from '@angular/core';
   styleUrls: ['tab4.page.scss'],
 })
 export class Tab4Page {
-  segmentModel = 'aiRecommend';
-  selectedTab = 'shop';
+  unreadMessages = 3; // Example value, update with actual unread messages count
+  selectedTab = 'message';
 
-  aiRecommendItems = [
-    { image: 'image_url_1', label: 'Label 1' },
-    { image: 'image_url_2', label: 'Label 2' },
-    // Add more items as needed
+  messages = [
+    { avatar: 'assets/image4.jpg', title: '交易物流', content: '您购买的宝贝已签收', time: '星期二' },
+    { avatar: 'avatar_url_2', title: 'Message 2', content: 'Content of message 2', time: '11:30 AM' },
+    { avatar: 'avatar_url_2', title: 'Message 3', content: 'Content of message 3', time: '11:30 AM' },
+    { avatar: 'avatar_url_2', title: 'Message 4', content: 'Content of message 4', time: '11:30 AM' },
+    { avatar: 'avatar_url_2', title: 'Message 5', content: 'Content of message 5', time: '11:30 AM' },
+    // Add more messages as needed
   ];
 
   constructor() {}
 
+  search() {
+    // Implement search functionality
+  }
+
+  addNewMessage() {
+    // Implement adding new message functionality
+  }
+
   selectTab(tab: string) {
     this.selectedTab = tab;
   }

src/app/tabs/tabs.page.html

@@ -16,7 +16,7 @@
       <ion-label>Tab 3</ion-label>
     </ion-tab-button>
     <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon aria-hidden="true" name="cart"></ion-icon>
+      <ion-icon aria-hidden="true" name="star"></ion-icon>
       <ion-label>Tab 4</ion-label>
     </ion-tab-button>
   </ion-tab-bar>