src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ const routes: Routes = [
   {
     path: 'login',
     loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'feedback',
+    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
   }
 
 ];

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

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

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

src/app/feedback/feedback.page.html

@@ -0,0 +1,25 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title style="font-size:30px">反馈</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list lines="none">
+  <ion-item *ngFor="let message of chatMessages" [class.sender]="message.sender === 'customer'">
+    <ion-avatar slot="start">
+      <ion-img [src]="'Assets/img/' + message.avatar"></ion-img>
+    </ion-avatar>
+    <ion-label>{{ message.text }}</ion-label>
+  </ion-item>
+</ion-list>
+
+
+  <ion-footer>
+    <ion-input placeholder="输入消息..." [(ngModel)]="newMessage"></ion-input>
+    <ion-button expand="block" (click)="sendMessage()">发送</ion-button>
+  </ion-footer>
+</ion-content>

src/app/feedback/feedback.page.spec.ts

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

src/app/feedback/feedback.page.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-feedback',
+  templateUrl: './feedback.page.html',
+  styleUrls: ['./feedback.page.scss'],
+})
+export class FeedbackPage implements OnInit {
+
+  chatMessages: { text: string, sender: string, avatar: string }[] = [];
+  newMessage: string = '';
+
+  constructor() {}
+
+  ngOnInit() {
+    // 模拟一些聊天消息
+    this.chatMessages = [
+      { text: '你好，请问有什么可以帮助您的吗？', sender: 'customer', avatar: 'customer-avatar.jpg' },
+      { text: '您好，我想咨询一下关于产品的信息。', sender: 'support', avatar: 'support-avatar.png' }
+    ];
+  }
+
+  sendMessage() {
+    if (this.newMessage.trim() !== '') {
+      this.chatMessages.push({ text: this.newMessage, sender: 'customer', avatar: 'customer-avatar.jpg' });
+      // 在这里可以添加客服回复的逻辑
+      this.newMessage = '';
+    }
+  }
+
+}

src/app/tab4/tab4.page.html

@@ -4,7 +4,7 @@
     <ion-buttons slot="end">
       <ion-button (click)="openFeedbackPage()">
         <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
-        <ion-label>反馈</ion-label>
+        <p (click)="openFeedbackPage()" style="margin-left:10px;margin-top:15px;font-size:20px">反馈</p>
       </ion-button>
       
       <ion-button (click)="openSettingsPage()">
@@ -18,7 +18,7 @@
 
 <ion-content>
     <ion-card-content>
-      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.5)">
+      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.8)">
         <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="User Avatar">
       </ion-avatar>
       <ion-card-content>

src/app/tab4/tab4.page.scss

@@ -24,14 +24,19 @@ ion-segment-button {
   font-size: 15px; /* 设置按钮字体大小为20px，让按钮整体看起来更大 */
   padding: 5px 20px; /* 设置按钮内边距，增加按钮的大小 */
 }
+
 ion-segment {
-  --padding-start: 0; /* 设置起始内边距为0，让按钮靠左对齐 */
-  --padding-end: 0; /* 设置结束内边距为0，让按钮靠右对齐 */
-  overflow-x: auto; /* 水平滚动 */
   scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
-  
+  -ms-overflow-style: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
+  &::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条（适用于 Chrome 和 Safari） */
+  }
+  &::-ms-overflow-style {
+    display: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
+  }
 }
 
+
 p {
   font-size: 20px; /* 设置文字大小为20px */
 }

src/app/tab4/tab4.page.ts

@@ -61,6 +61,7 @@ export class Tab4Page implements OnInit {
 
   openFeedbackPage() {
     // 打开反馈页面
+    this.navCtrl.navigateForward('/feedback');
   }