tab3

src/app/app-routing.module.ts

@@ -49,6 +49,7 @@ const routes: Routes = [
     loadChildren: () => import('./language-settings/language-settings.module').then( m => m.LanguageSettingsPageModule)
   }
 
+<<<<<<< HEAD
 
   
 
@@ -60,3 +61,61 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
+=======
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'tab4',
+    loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
+  },
+  {
+    path: 'feedback',
+    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
+  },
+  {
+    path: 'settings',
+    loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
+  },
+  {
+    path: 'edit-profile',
+    loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
+  },
+  {
+    path: 'notification-settings',
+    loadChildren: () => import('./notification-settings/notification-settings.module').then( m => m.NotificationSettingsPageModule)
+  },
+  {
+    path: 'privacy',
+    loadChildren: () => import('./privacy/privacy.module').then( m => m.PrivacyPageModule)
+  },
+<<<<<<< HEAD
+=======
+    // 添加：
+    {
+      path: 'user',
+      loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+    },
+  {
+    path: 'following',
+    loadChildren: () => import('./following/following.module').then( m => m.FollowingPageModule)
+  },
+  {
+    path: 'follower',
+    loadChildren: () => import('./follower/follower.module').then( m => m.FollowerPageModule)
+  }
+>>>>>>> 87918af0e1c30e994678bf04d041318da5e73e19
+
+  
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
+>>>>>>> 5e5fa4b1cc44df8d6d24f2f95a16130573bb10b3

src/app/follower/follower-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FollowerPage } from './follower.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FollowerPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FollowerPageRoutingModule {}

src/app/follower/follower.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FollowerPageRoutingModule } from './follower-routing.module';
+
+import { FollowerPage } from './follower.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FollowerPageRoutingModule
+  ],
+  declarations: [FollowerPage]
+})
+export class FollowerPageModule {}

src/app/follower/follower.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>follower</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">follower</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/follower/follower.page.spec.ts

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

src/app/follower/follower.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-follower',
+  templateUrl: './follower.page.html',
+  styleUrls: ['./follower.page.scss'],
+})
+export class FollowerPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/following/following-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FollowingPage } from './following.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FollowingPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FollowingPageRoutingModule {}

src/app/following/following.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FollowingPageRoutingModule } from './following-routing.module';
+
+import { FollowingPage } from './following.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FollowingPageRoutingModule
+  ],
+  declarations: [FollowingPage]
+})
+export class FollowingPageModule {}

src/app/following/following.page.html

@@ -0,0 +1,41 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <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-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.spec.ts

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

src/app/following/following.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-following',
+  templateUrl: './following.page.html',
+  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() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -401,6 +401,91 @@
   <!-- 设计我家页 -->
   <div *ngIf="selectedSegment === 'home'">
     <!-- 设计我家内容 -->
+    <!-- Swiper轮播图 手动创建 -->
+    <!-- Slider main container -->
+    <button (click)="slide1?.slideNext()">next</button>
+    <div #slide1Comp class="swiper">
+      <!-- Additional required wrapper其他必需的包装器 -->
+      <!-- 分页 -->
+      <div class="swiper-wrapper">
+        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-280px, 0px, 0px);">
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
+            Slide 8
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
+            Slide 9
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
+            Slide 10
+          </div>
+          <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
+            Slide 1
+          </div>
+          <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
+            Slide 2
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
+            Slide 3
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="3" style="width: 110px; margin-right: 30px;">
+            Slide 4
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="4" style="width: 110px; margin-right: 30px;">
+            Slide 5
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="5" style="width: 110px; margin-right: 30px;">
+            Slide 6
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="6" style="width: 110px; margin-right: 30px;">
+            Slide 7
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
+            Slide 8
+          </div>
+          <div class="swiper-slide" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
+            Slide 9
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
+            Slide 10
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
+            Slide 1
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
+            Slide 2
+          </div>
+          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
+            Slide 3
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+
+        <!-- If we need pagination分页按钮 -->
+        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
+          <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 9"></span>
+          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 10"></span>
+        </div>
+        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
+        <div class="swiper-pagination">
+          <div class="swiper-wrapper">
+            <!-- Slides幻灯片 -->
+            <div class="swiper-slide">
+              <img src="assets\img\ChineseStyle.png">
+            </div>
+            <div class="swiper-slide">
+              <img src="assets\img\NorthernEuropeStyle.png">
+            </div>
+            <div class="swiper-slide">
+              <img src="assets\img\WoodStyle.png">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <img src="example3.jpg" alt="Example 9">
   </div>
 

src/app/tab1/tab1.page.scss

@@ -309,3 +309,20 @@ p {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.swiper {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+  height: 300px;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+}

src/app/tab1/tab1.page.ts

@@ -1,16 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+
+import Swiper from 'swiper';
+
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
 
   selectedSegment: string = 'explore';
+  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
 
   constructor() {}
 
+  ngOnInit() {
+    // 延迟500毫秒加载
+    setTimeout(() => {
+      this.initSwiper();
+    }, 500);
+  }
+  
+  // 初始化轮播图
+  slide1:Swiper|undefined
+  initSwiper(){
+  console.log(this.slide1Comp)
+    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
+      loop:true,
+      autoplay:{
+        delay:500,
+      },
+      mousewheel: {
+        forceToAxis: true,
+      },
+      pagination:{
+        el:".swiper-pagination",
+        clickable:true
+      }
+    });
+  }
+
+
   segmentChanged(event: CustomEvent) {
     this.selectedSegment = event.detail.value;
   }

src/app/tab2/tab2.page.ts

@@ -13,55 +13,55 @@ export class Tab2Page {
       name: '和美空间设计',
       starRating: 4.7,
       reviewCount: 150,
-      description: '华美装饰设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
+      description: '和美空间设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
       services: '室内装修设计\n定制家具设计\n空间规划布局\n装饰材料供应',
       advantages: '专业团队：拥有经验丰富的设计师和施工团队，保证项目质量\n创意设计：注重细节，根据客户需求量身定制设计方案\n优质材料：选用优质装饰材料，确保装修质量和耐久性\n贴心服务：全程跟踪服务，提供周到的售后服务，保障客户满意度。',
       cases: '客厅装修案例：现代简约风格，打造温馨舒适的家居空间。\n卧室装修案例：北欧风格，简约清新，注重自然光线的利用。\n餐厅装修案例：中式风格，传统与现代相结合，展现东方韵味。'
-    },
+     },
     {
       name: '灵感装修工程',
       starRating: 4.5,
       reviewCount: 120,
-      description: '装修公司B的简介',
-      services: '创意设计、个性定制',
-      advantages: '专业设计师、创新理念',
-      cases: '装修公司B的案例'
+      description: '灵感装修工程是一家注重细节、追求品质的室内装修设计公司。我们拥有一支充满激情和创意的设计团队，致力于为客户打造高品质、个性化的居家空间。',
+      services: '室内装修设计与施工\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
+      advantages: '设计创新：注重细节，追求设计的个性化与独特性\n施工质量：严格把控每一个施工环节，确保工程质量\n售后服务：提供专业的售后服务，保障客户满意度\n团队实力：拥有一支技术过硬、经验丰富的设计与施工团队',
+      cases: '书房装修案例： 现代简约风格，打造宁静工作空间\n阳台装修案例： 自然清新风格，打造休闲放松空间\n儿童房装修案例： 欧式童趣风格，创造温馨童话空间'
     },
     {
       name: '璞心设计工作室',
-      starRating: 4.5,
-      reviewCount: 120,
-      description: '装修公司C的简介',
-      services: '创意设计、个性定制',
-      advantages: '专业设计师、创新理念',
-      cases: '装修公司B的案例'
+      starRating: 4.8,
+      reviewCount: 180,
+      description: '璞心设计工作室是一家注重创意与实用性的室内设计公司，致力于为客户提供个性化、舒适的家居环境。我们以客户需求为中心，打造具有温暖和美感的居家空间。',
+      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n装饰材料供应与选择',
+      advantages: '创意设计：注重细节，打造独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户至上：提供周到的售后服务，确保客户满意度',
+      cases: '客厅装修案例： 现代简约风格，打造温馨舒适的家居空间\n卧室装修案例： 北欧风格，清新简约，注重自然元素的融入\n餐厅装修案例： 中式风格，传统与现代结合，展现东方文化魅力'
     },
     {
       name: '悦居室内设计',
-      starRating: 4.5,
-      reviewCount: 120,
-      description: '装修公司C的简介',
-      services: '创意设计、个性定制',
-      advantages: '专业设计师、创新理念',
-      cases: '装修公司B的案例'
+      starRating: 4.6,
+      reviewCount: 140,
+      description: '悦居室内设计专注于为客户打造温馨、舒适的家居环境。我们拥有一支充满创意和激情的设计团队，致力于提供个性化、高品质的装修设计服务。',
+      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
+      advantages: '创新设计：注重细节，打造独特的家居空间\n施工质量：严格把控施工过程，确保工程质量\n专业团队：设计师和施工团队经验丰富，提供专业服务\n客户满意：关注客户需求，提供贴心的售后服务，确保客户满意度',
+      cases: '客厅装修案例： 现代简约风格，营造温馨家庭氛围\n卧室装修案例： 北欧风格，清新舒适，注重舒眠体验\n餐厅装修案例： 中式风格，传统与现代结合，展现东方韵味'
     },
     {
       name: '彩虹装饰工程',
-      starRating: 4.5,
-      reviewCount: 120,
-      description: '装修公司C的简介',
-      services: '创意设计、个性定制',
-      advantages: '专业设计师、创新理念',
-      cases: '装修公司B的案例'
+      starRating: 4.9,
+      reviewCount: 200,
+      description: '彩虹装饰工程致力于为客户提供创新、个性化的室内设计与装修服务。我们拥有一支充满创意和激情的设计团队，以客户需求为中心，打造独特、舒适的居家空间。',
+      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n装饰材料供应与选择',
+      advantages: '创意设计：打造个性化、独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户至上：提供周到的售后服务，确保客户满意度',
+      cases: '客厅装修案例： 现代简约风格，打造温馨舒适的家居空间\n卧室装修案例： 北欧风格，清新简约，注重自然元素的融入\n餐厅装修案例： 中式风格，传统与现代结合，展现东方文化魅力'
     },
     {
       name: '素雅装饰设计',
-      starRating: 4.5,
-      reviewCount: 120,
-      description: '装修公司C的简介',
-      services: '创意设计、个性定制',
-      advantages: '专业设计师、创新理念',
-      cases: '装修公司B的案例'
+      starRating: 4.8,
+      reviewCount: 160,
+      description: '素雅装饰设计专注于为客户提供创新、独特的室内设计与装修方案。我们以客户需求和个性为出发点，致力于打造与众不同、舒适宜居的家居环境。',
+      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
+      advantages: '创意设计：注重细节，打造独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户满意：关注客户需求，提供贴心的售后服务，确保客户满意度',
+      cases: '客厅装修案例： 欧式古典风格，彰显典雅与奢华\n卧室装修案例： 现代简约风格，打造舒适宁静的休息空间\n餐厅装修案例： 中式传统风格，展现东方文化韵味'
     }
     // 添加更多装修公司信息
   ];
@@ -348,6 +348,15 @@ export class Tab2Page {
   selectedDesignerSegment: string = 'designer';
 
   constructor(private sanitizer: DomSanitizer) {}
+  selectedCompany: any;
+
+toggleDetails(company: any) {
+  if (this.selectedCompany === company) {
+    this.selectedCompany = null;
+  } else {
+    this.selectedCompany = company;
+  }
+}
 
   formatHtmlContent(content: string): SafeHtml {
     const formattedContent = content.replace(/\n/g, '<br>');

src/app/tab4/tab4.page.html

@@ -43,15 +43,15 @@
     <ion-grid>
   <ion-row>
     <ion-col size="4">
-      <p class="count">{{user.following}}</p>
-      <p class="label">关注</p>
+      <p class="count" style="color:black" (click)="openFollowingPage()">{{user.following}}</p>
+      <p class="label" (click)="openFollowerPage()">关注</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,9 +73,20 @@ export class Tab4Page implements OnInit {
   }
 
   openLoginPage() {
+    //打开登录页面
     this.navCtrl.navigateForward('../../modules/user/login/login.module');
   }
 
+  openFollowingPage(){
+    //打开关注页面
+    this.router.navigate(['/following']);
+  }
+
+  openFollowerPage(){
+    //打开粉丝页面
+    this.router.navigate(['/follower']);
+  }
+
   // 由于Parse.User.current()是随着localStorage变化的属性
   // 为了避免首次复制后用户状态变化，页面不同步，通过get方法实现实时获取
   // user:Parse.User|undefined
@@ -90,9 +101,9 @@ export class Tab4Page implements OnInit {
   // }
 
   user={
-    followers: 1000,
-    following: 500,
-    likes: 2000
+    followers: 3,
+    following: 2,
+    likes: 0
   }
 
   ngOnInit() {

src/index.html

@@ -4,7 +4,8 @@
 <head>
   <meta charset="utf-8" />
   <title>Ionic App</title>
-
+  <!-- Swiper轮播图样式 -->
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />