src/app/app-routing.module.ts

@@ -20,10 +20,6 @@ const routes: Routes = [
     path: 'settings',
     loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
   },
-  // {
-  //   path: 'login',
-  //   loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
-  // },
   {
     path: 'edit-profile',
     loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)

src/app/following/following.page.html

@@ -1,13 +1,41 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>following</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title>关注</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">关注</ion-title>
     </ion-toolbar>
   </ion-header>
 </ion-content>
+ -->
+<!-- <ion-content>
+  <ion-list>
+    <ion-item *ngFor="let person of followingList">
+      <ion-avatar slot="start">
+        <ion-img [src]="person.avatar"></ion-img>
+      </ion-avatar>
+      <ion-label>{{ person.name }}</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content> -->
+
+<ion-content style="top:20px">
+  <ion-list lines="none">
+    <ion-item *ngFor="let person of followingList" lines="none">
+      <ion-avatar slot="start">
+        <ion-img [src]="person.avatar"></ion-img>
+      </ion-avatar>
+      <ion-label style="font-size: 20px">{{ person.name }}</ion-label>
+      <ion-button color="light">私信</ion-button>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+

src/app/following/following.page.scss

@@ -0,0 +1,20 @@
+ion-list {
+  display: block; /* 显示为块级元素 */
+  margin-top: 0; /* 顶部间距为0，从顶部开始排列 */
+}
+
+ion-item {
+  margin-bottom: 10px; /* 增加底部外边距，调整每一栏之间的间距 */
+}
+
+ion-avatar {
+  --border-radius: 50%; /* 将头像设置为圆形 */
+  width: 60px; /* 调整头像宽度 */
+  height: 60px; /* 调整头像高度 */
+}
+
+ion-avatar ion-img {
+  width: 100%; /* 图片宽度占满 ion-avatar 元素 */
+  height: 100%; /* 图片高度占满 ion-avatar 元素 */
+  object-fit: cover; /* 图片保持比例填充，不变形 */
+}

src/app/following/following.page.ts

@@ -6,6 +6,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./following.page.scss'],
 })
 export class FollowingPage implements OnInit {
+  followingList: { name: string, avatar: string }[] = [
+    { name: 'Alice', avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.YOrn8Q0aoOfp7bQc_efOHwAAAA?rs=1&pid=ImgDetMain' },
+    { name: 'Bob', avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.1jz69VebvpbUkThZsSWVfQAAAA?pid=ImgDet&w=400&h=400&rs=1' },
+    // 添加更多关注的人的信息
+  ];
 
   constructor() { }
 

src/app/tab4/tab4.page.html

@@ -43,15 +43,15 @@
     <ion-grid>
   <ion-row>
     <ion-col size="4">
-      <p class="count" (click)="openFollowingPage()">{{user.following}}</p>
+      <p class="count" style="color:black" (click)="openFollowingPage()">{{user.following}}</p>
       <p class="label">关注</p>
     </ion-col>
     <ion-col size="4">
-      <p class="count">{{user.followers}}</p>
+      <p class="count" style="color:black">{{user.followers}}</p>
       <p class="label">粉丝</p>
     </ion-col>
     <ion-col size="4">
-      <p class="count">{{user.likes}}</p>
+      <p class="count" style="color:black">{{user.likes}}</p>
       <p class="label">获赞</p>
     </ion-col>
   </ion-row>
@@ -59,7 +59,7 @@
     <ion-card-content>
     <ion-segment scrollable>
     <ion-segment-button value="creators">
-      <ion-icon name="brush-outline"></ion-icon>
+      <ion-icon name="color-palette-outline"></ion-icon>
       创作者中心
     </ion-segment-button>
     <ion-segment-button value="ai">

src/app/tab4/tab4.page.scss

@@ -21,8 +21,9 @@ ion-card {
   }
 
 ion-segment-button {
+ 
   font-size: 15px; /* 设置按钮字体大小为20px，让按钮整体看起来更大 */
-  padding: 5px 20px; /* 设置按钮内边距，增加按钮的大小 */
+  padding: 10px 0px; /* 设置按钮内边距，增加按钮的大小 */
 }
 
 ion-segment {

src/app/tab4/tab4.page.ts

@@ -73,6 +73,7 @@ export class Tab4Page implements OnInit {
   }
 
   openLoginPage() {
+    //打开登录页面
     this.navCtrl.navigateForward('../../modules/user/login/login.module');
   }
 
@@ -95,9 +96,9 @@ export class Tab4Page implements OnInit {
   // }
 
   user={
-    followers: 1000,
-    following: 500,
-    likes: 2000
+    followers: 3,
+    following: 2,
+    likes: 0
   }
 
   ngOnInit() {