src/app/app-routing.module.ts

@@ -1,29 +1,33 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-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: 'login',
-    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
-  },
-  {
-    path: 'feedback',
-    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+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: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'feedback',
+    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
+  },
  {
+    path: 'settings',
+    loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
   }
 
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

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

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

src/app/settings/settings.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 { SettingsPageRoutingModule } from './settings-routing.module';
+
+import { SettingsPage } from './settings.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SettingsPageRoutingModule
+  ],
+  declarations: [SettingsPage]
+})
+export class SettingsPageModule {}

src/app/settings/settings.page.html

@@ -0,0 +1,51 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>设置页面</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 设置页面内容 -->
+  <ion-item (click)="editProfile()">
+    <ion-icon slot="start" name="person-circle"></ion-icon>
+    <ion-label>个人信息设置</ion-label>
+  </ion-item>
+
+  <ion-item (click)="selectNotification()">
+    <ion-icon slot="start" name="notifications"></ion-icon>
+    <ion-label>通知设置</ion-label>
+  </ion-item>
+
+  <ion-item (click)="managePrivacy()">
+    <ion-icon slot="start" name="lock-closed"></ion-icon>
+    <ion-label>隐私设置</ion-label>
+  </ion-item>
+
+  <ion-item (click)="selectTheme()">
+    <ion-icon slot="start" name="color-palette"></ion-icon>
+    <ion-label>主题设置</ion-label>
+  </ion-item>
+
+  <ion-item (click)="manageSecurity()">
+    <ion-icon slot="start" name="shield-checkmark"></ion-icon>
+    <ion-label>账号安全</ion-label>
+  </ion-item>
+
+  <ion-item (click)="selectLanguage()">
+    <ion-icon slot="start" name="globe"></ion-icon>
+    <ion-label>语言设置</ion-label>
+  </ion-item>
+
+  <ion-item (click)="getHelp()">
+    <ion-icon slot="start" name="help-buoy"></ion-icon>
+    <ion-label>帮助与反馈</ion-label>
+  </ion-item>
+
+  <ion-item (click)="viewAboutPage()">
+    <ion-icon slot="start" name="information-circle"></ion-icon>
+    <ion-label>关于页面</ion-label>
+  </ion-item>
+</ion-content>

src/app/settings/settings.page.scss

@@ -0,0 +1,5 @@
+ion-item {
+    ion-label {
+      font-weight: bold;
+    }
+  }

src/app/settings/settings.page.spec.ts

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

src/app/settings/settings.page.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.page.html',
+  styleUrls: ['./settings.page.scss'],
+})
+export class SettingsPage implements OnInit {
+
+  constructor(private navCtrl: NavController) { }
+  ngOnInit() {
+  }
+  editProfile() {
+    // 编辑个人信息
+  }
+
+  selectNotification() {
+    // 选择通知设置
+  }
+
+  managePrivacy() {
+    // 管理隐私设置
+  }
+
+  selectTheme() {
+    // 选择主题设置
+  }
+
+  manageSecurity() {
+    // 管理账号安全
+  }
+
+  selectLanguage() {
+    // 选择语言设置
+  }
+
+  getHelp() {
+    // 获取帮助与反馈
+  }
+
+  viewAboutPage() {
+    // 查看关于页面
+  }
+}

src/app/tab3/tab3.page.html

@@ -11,6 +11,7 @@
 </ion-header>
 
 <ion-content>
+  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
   <ion-card>
     <ion-card-header>
       <ion-card-title>最新推荐</ion-card-title>
@@ -25,7 +26,6 @@
       <ion-button expand="block">免费提问</ion-button>
     </ion-card-content>
   </ion-card>
-  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
   <div style="display: flex; flex-direction: column;">
    <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
     <ion-segment-button value="explore">

src/app/tab3/tab3.page.scss

@@ -1,5 +1,5 @@
 ion-card {
-  top: 25px;
+  top: 1px;
   margin: 10px;
 }
 
@@ -10,4 +10,3 @@ ion-card-title {
 ion-avatar {
   margin-right: 10px;
 }
-

src/app/tab3/tab3.page.ts

@@ -10,7 +10,7 @@ import { ToastController } from '@ionic/angular';
 })
 export class Tab3Page {
 
-  constructor(private toastController: ToastController) {}
+  constructor(private toastController: ToastController,private router: Router) {}
 
   activeTab:string = 'explore';
   likedPosts: number[] = [];
@@ -21,7 +21,8 @@ export class Tab3Page {
     
   }
   openSettingsPage() {
-    // 打开设置页面
+    // 打开设置页面 
+    this.router.navigate(['/settings']);
   }
   // navigateToPage(page: string) {
   //   this.router.navigate([`/tabs/${page}`]);