add

package-lock.json

@@ -25,6 +25,7 @@
         "ionicons": "^7.0.0",
         "parse": "^5.3.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15561,6 +15562,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "ionicons": "^7.0.0",
     "parse": "^5.3.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/app-routing.module.ts

@@ -32,6 +32,22 @@ const routes: Routes = [
     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
 
   
 

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.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/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/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() {

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" />