tab3

src/app/app-routing.module.ts

@@ -9,7 +9,8 @@ const routes: Routes = [
   {
     path: 'tab4',
     loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
-  }
+  },
+  
 ];
 @NgModule({
   imports: [

src/app/tab3/tab3.page.html

@@ -1,34 +1,37 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-title>
       消息
     </ion-title>
+      <ion-button (click)="openSettingsPage()">
+        <ion-icon name="settings-outline"></ion-icon>
+        <ion-label>设置</ion-label>
+      </ion-button>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-list>
-    <ion-item>
-      <ion-icon slot="start" name="chatbubble-ellipses"></ion-icon>
-      <ion-label>评论和回复</ion-label>
-    </ion-item>
-    
-    <ion-item>
-      <ion-icon slot="start" name="thumbs-up"></ion-icon>
-      <ion-label>赞与收藏</ion-label>
-    </ion-item>
-    
-    <ion-item>
-      <ion-icon slot="start" name="person-add"></ion-icon>
-      <ion-label>新增关注</ion-label>
-    </ion-item>
-    
-    <ion-item>
-      <ion-icon slot="start" name="notifications"></ion-icon>
-      <ion-label>系统消息</ion-label>
-    </ion-item>
-  </ion-list>
-
+  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
+  <ion-toolbar>
+   <ion-segment value="explore">
+    <ion-segment-button value="explore">
+      <ion-icon  name="chatbubble-ellipses"></ion-icon>
+      评论和回复
+    </ion-segment-button>
+    <ion-segment-button value="video">
+      <ion-icon  name="thumbs-up"></ion-icon>
+      赞与收藏
+    </ion-segment-button>
+    <ion-segment-button value="search">
+      <ion-icon  name="person-add"></ion-icon>
+      新增关注
+    </ion-segment-button>
+    <ion-segment-button value="system">
+      <ion-icon  name="notifications"></ion-icon>
+      系统消息
+    </ion-segment-button>
+   </ion-segment>
+  </ion-toolbar>
   <ion-card>
     <ion-card-header>
       <ion-card-title>最新推荐</ion-card-title>
@@ -44,32 +47,3 @@
     </ion-card-content>
   </ion-card>
 </ion-content>
-
-<!--<ion-footer>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-button routerLink="/tabs/tab1">
-        <ion-icon name="home"></ion-icon>
-        首页
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="start">
-      <ion-button routerLink="/tabs/tab2">
-        <ion-icon name="construct"></ion-icon>
-        装修
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="start">
-      <ion-button routerLink="/tabs/tab3" color="primary">
-        <ion-icon name="chatbubbles"></ion-icon>
-        消息
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="start">
-      <ion-button routerLink="/tabs/tab4">
-        <ion-icon name="person"></ion-icon>
-        我的
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>-->

src/app/tab3/tab3.page.scss

@@ -1,4 +1,8 @@
+.details-container {
+  padding: 10px;
+}
 ion-card {
+  top: 25px;
   margin: 10px;
 }
 
@@ -8,4 +12,7 @@ ion-card-title {
 
 ion-avatar {
   margin-right: 10px;
+}
+ion-toolbar{
+  top: 10px;
 }

src/app/tab3/tab3.page.ts

@@ -8,5 +8,13 @@ import { Component } from '@angular/core';
 export class Tab3Page {
 
   constructor() {}
+  openFeedbackPage() {
+    // 打开反馈页面
+  }
+  
+
+  openSettingsPage() {
+    // 打开设置页面
+  }
 
 }