f

ballfire/src/app/tab1/tab1.page.html

@@ -1,49 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>训练心得交流</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <!-- 训练心得交流区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>训练心得交流区</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item *ngFor="let topic of topics">
-            <ion-label>
-              <h2>{{ topic.title }}</h2>
-              <p>参与人数: {{ topic.participants }}</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
-
-  <!-- 教练指导区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>教练指导区</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item *ngFor="let coach of coaches">
-            <ion-avatar slot="start">
-              <img [src]="coach.avatar" alt="{{ coach.name }}">
-            </ion-avatar>
-            <ion-label>
-              <h2>{{ coach.name }}</h2>
-              <p>风格: {{ coach.style }}</p>
-            </ion-label>
-            <ion-button slot="end" (click)="selectCoach(coach)">选择</ion-button>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
-</ion-content>

ballfire/package-lock.json → package-lock.json

@@ -12,7 +12,7 @@
         "@angular/cdk": "^17.0.0",
         "@angular/common": "^18.0.0",
         "@angular/compiler": "^18.0.0",
-        "@angular/core": "^18.0.0",
+        "@angular/core": "^18.2.13",
         "@angular/forms": "^18.2.13",
         "@angular/material": "^17.0.0",
         "@angular/platform-browser": "^18.0.0",
@@ -629,7 +629,7 @@
     },
     "node_modules/@angular/core": {
       "version": "18.2.13",
-      "resolved": "https://registry.npmmirror.com/@angular/core/-/core-18.2.13.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.13.tgz",
       "integrity": "sha512-8mbWHMgO95OuFV1Ejy4oKmbe9NOJ3WazQf/f7wks8Bck7pcihd0IKhlPBNjFllbF5o+04EYSwFhEtvEgjMDClA==",
       "license": "MIT",
       "dependencies": {

ballfire/package.json → package.json

@@ -17,7 +17,7 @@
     "@angular/cdk": "^17.0.0",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
+    "@angular/core": "^18.2.13",
     "@angular/forms": "^18.2.13",
     "@angular/material": "^17.0.0",
     "@angular/platform-browser": "^18.0.0",

src/app/tab1/tab1.page.html

@@ -0,0 +1,48 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>训练心得交流</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 轮播图区域 -->
+  <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
+    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+      <div class="slide" *ngFor="let image of images">
+        <img [src]="image" alt="轮播图" height="100px" >
+      </div>
+    </div>
+  
+    <button class="prev" (click)="prevSlide()">&#10094;</button>
+    <button class="next" (click)="nextSlide()">&#10095;</button>
+  
+    <div class="dots">
+      <span class="dot" *ngFor="let image of images; let i = index" 
+            [class.active]="i === currentSlide" 
+            (click)="goToSlide(i)"></span>
+    </div>
+  </div>
+
+  <!-- 教练指导区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>教练指导区</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let coach of coaches" (click)="gototab9()">
+            <ion-avatar slot="start">
+              <img [src]="coach.avatar" alt="{{ coach.name }}">
+            </ion-avatar>
+            <ion-label>
+              <h2>{{ coach.name }}</h2>
+              <p>风格: {{ coach.style }}</p>
+            </ion-label>
+            <ion-button slot="end">选择</ion-button>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+</ion-content>

ballfire/src/app/tab1/tab1.page.scss → src/app/tab1/tab1.page.scss

@@ -67,4 +67,68 @@ ion-card-content {
 
 ion-content {
   --background: #f9f9f9; /* 设置内容背景色 */
-}
+}
+
+
+// 轮播图区域
+.carousel-container {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+}
+
+.slide img {
+  width: 100%;
+  height: auto;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.prev {
+  left: 0;
+}
+
+.next {
+  right: 0;
+}
+
+.dots {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.dot.active {
+  background: #717171;
+} 

ballfire/src/app/tab1/tab1.page.ts → src/app/tab1/tab1.page.ts

@@ -2,6 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonList, IonInput, IonTextarea, IonAvatar } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab1',
@@ -17,6 +18,45 @@ import { CommonModule } from '@angular/common';
   schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab1Page {
+  /**
+  * 轮播图
+  */
+  images = [
+    'https://picsum.photos/800/400?random=19',
+    'https://picsum.photos/800/400?random=18',
+    'https://picsum.photos/800/400?random=17',
+    'https://picsum.photos/800/400?random=15',
+    'https://picsum.photos/800/400?random=13',
+    'https://picsum.photos/800/400?random=14',
+  ];
+  currentSlide = 0;
+  intervalId: any;
+  setSlidePosition() {
+    // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
+  }
+
+  nextSlide() {
+    this.currentSlide = (this.currentSlide + 1) % this.images.length;
+  }
+
+  prevSlide() {
+    this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
+  }
+
+  goToSlide(index: number) {
+    this.currentSlide = index;
+  }
+
+  startAutoSlide() {
+    this.intervalId = setInterval(() => this.nextSlide(), 3000);
+  }
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  constructor(private router: Router,) {}
   topics = [
     { title: '如何更好练习球性', participants: 120 },
     { title: '经典招式学习', participants: 80 },
@@ -41,6 +81,9 @@ export class Tab1Page {
       this.newPost.content = '';
     }
   }
+  gototab9(){
+    this.router.navigate(["tabs/tab9"])
+ }
 
   selectCoach(coach: any) {
     console.log(`选择了教练: ${coach.name}，风格: ${coach.style}`);
@@ -52,4 +95,6 @@ export class Tab1Page {
     console.log('搜索内容:', searchTerm);
     // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
   }
+
 }
+

ballfire/src/app/tab3/tab3.page.html → src/app/tab3/tab3.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>数据统计</ion-title>
+    <ion-title>训练记录</ion-title>
   </ion-toolbar>
 </ion-header>
 

ballfire/src/app/tab4/tab4.page.html → src/app/tab4/tab4.page.html

@@ -59,6 +59,25 @@
       <p class="memo-description">记录下您每次训练时的心得体会，及时做出改变加强训练</p>
     </ion-card>
   }
+  @if(currentUser?.id){
+    <ion-card class="memo-card" (click)="gototab6()">
+      <h2 class="memo-title">身体数据</h2>
+      <p class="memo-description">记录下您的身体数据</p>
+    </ion-card>
+  }
+  @if(currentUser?.id){
+    <ion-card class="memo-card" (click)="gototab7()">
+      <h2 class="memo-title">训练记录</h2>
+      <p class="memo-description">记录下您的训练记录，成长与进步</p>
+    </ion-card>
+  }
+  @if(currentUser?.id){
+    <ion-card class="memo-card" (click)="gototab8()">
+      <h2 class="memo-title">评价与反馈</h2>
+      <p class="memo-description">请您给出宝贵的建议</p>
+    </ion-card>
+  }
+
 
 
 </ion-content>

ballfire/src/app/tab4/tab4.page.ts → src/app/tab4/tab4.page.ts

@@ -82,4 +82,15 @@ export class Tab4Page {
 
     this.router.navigate(["tabs/tab5"])
   }
+  gototab6(){
+
+    this.router.navigate(["tabs/tab6"])
+  }
+    gototab7(){
+     this.router.navigate(["tabs/tab7"])
+  }
+  gototab8(){
+    this.router.navigate(["tabs/tab8"])
+ }
+  
 }

ballfire/src/app/tabs/tabs.page.html → src/app/tabs/tabs.page.html

@@ -2,12 +2,12 @@
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
       <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-label>训练</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab4" href="/tabs/tab4">

ballfire/src/app/tabs/tabs.routes.ts → src/app/tabs/tabs.routes.ts

@@ -31,6 +31,27 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../test/test.component').then((m) => m.TestComponent),
       },
+      {
+        path: 'tab6',
+        loadComponent: () =>
+          import('../test2/test2.component').then((m) => m.Test2Component),
+      },
+      {
+        path: 'tab7',
+        loadComponent: () =>
+          import('../test3/test3.component').then((m) => m.Test3Component),
+      },
+      {
+        path: 'tab8',
+        loadComponent: () =>
+          import('../test4/test4.component').then((m) => m.Test4Component),
+      },
+      {
+        path: 'tab9',
+        loadComponent: () =>
+          import('../test5/test5.component').then((m) => m.Test5Component),
+      },
+      
       {
         path: '',
         redirectTo: '/tabs/tab1',

ballfire/src/app/test/test.component.html → src/app/test/test.component.html

@@ -3,6 +3,9 @@
     <ion-title class="custom-title">
       我的
     </ion-title>
+    
+      <ion-button slot="end" (click)="gototab5()" >返回</ion-button>
+    
   </ion-toolbar>
 </ion-header>
 

ballfire/src/app/test/test.component.ts → src/app/test/test.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem,IonCard, IonCardContent, IonLabel,IonList,IonInput,IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-test',
@@ -13,18 +14,27 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem,IonCard, IonCardCo
   ],
 })
 export class TestComponent  implements OnInit {
-
-  constructor() { }
+  
+  constructor( private router: Router,) { }
 
   ngOnInit() {}
 
   newMemo: string = ''; // 新备忘录内容
   memos: string[] = []; // 储存备忘录的数组
 
+   
+    gototab5(){
+  
+      this.router.navigate(["tabs/tab4"])
+    }
+  
   addMemo() {
     if (this.newMemo.trim()) {
       this.memos.push(this.newMemo.trim());
       this.newMemo = ''; // 清空输入框
     }
+    
   }
-}
+}
+
+

src/app/test2/test2.component.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>填写身高和体重</ion-title>
+    <ion-button slot="end" (click)="gototab5()" >返回</ion-button>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <form (ngSubmit)="onSubmit()" #heightWeightForm="ngForm">
+    <ion-card>
+      <ion-card-content>
+        <ion-item>
+          <ion-label position="floating">身高 (厘米)</ion-label>
+          <ion-input type="number" [(ngModel)]="height" name="height" required></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">体重 (公斤)</ion-label>
+          <ion-input type="number" [(ngModel)]="weight" name="weight" required></ion-input>
+        </ion-item>
+
+        <ion-button expand="full" type="submit" [disabled]="!heightWeightForm.form.valid">{{ isEditing ? '更新' : '保存' }}</ion-button>
+      </ion-card-content>
+    </ion-card>
+  </form>
+
+  <ion-card *ngIf="result" class="result-card">
+    <ion-card-header>
+      <ion-card-title>输入结果</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      您的身高是 <strong>{{ height }}</strong> 厘米，体重是 <strong>{{ weight }}</strong> 公斤。
+      <ion-button expand="full" (click)="edit()" color="primary" class="edit-button">修改</ion-button>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/test2/test2.component.scss

@@ -0,0 +1,51 @@
+ion-header {
+    background-color: #4CAF50; /* 设置头部背景颜色 */
+    color: white; /* 设置头部字体颜色 */
+  }
+  
+  ion-toolbar {
+    --background: #4CAF50; /* 头部工具栏背景颜色 */
+  }
+  
+  ion-title {
+    font-size: 26px; /* 设置标题字体大小 */
+    font-weight: bold; /* 设置标题加粗 */
+    text-align: center; /* 居中对齐 */
+  }
+  
+  ion-content {
+    background-color: #f9f9f9; /* 设置内容区域背景颜色 */
+    display: flex; /* 使用 flexbox 布局 */
+    flex-direction: column; /* 垂直排列 */
+    align-items: center; /* 居中对齐 */
+    justify-content: center; /* 垂直居中 */
+    padding: 20px; /* 内边距 */
+  }
+  
+  ion-card {
+    width: 100%; /* 卡片宽度 */
+    max-width: 400px; /* 最大宽度 */
+    margin: 10px 0; /* 卡片间距 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  
+  ion-button {
+    background-color: #4CAF50; /* 提交按钮背景颜色 */
+    color: white; /* 提交按钮字体颜色 */
+    font-size: 18px; /* 提交按钮字体大小 */
+    border-radius: 8px; /* 提交按钮圆角 */
+    padding: 12px; /* 提交按钮内边距 */
+    transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
+  }
+  
+  ion-button:hover {
+    background-color: #45a049; /* 提交按钮悬停时背景颜色 */
+    transform: translateY(-2px); /* 悬停时上移效果 */
+  }
+  
+  .result-card {
+    margin-top: 20px; /* 结果卡片顶部间距 */
+    background-color: #e7f4e4; /* 结果卡片背景颜色 */
+    border-radius: 8px; /* 结果卡片圆角 */
+  }

src/app/test2/test2.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Test2Component } from './test2.component';
+
+describe('Test2Component', () => {
+  let component: Test2Component;
+  let fixture: ComponentFixture<Test2Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Test2Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Test2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test2/test2.component.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem,IonCard, IonCardContent, IonLabel,IonList,IonInput,IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-test2',
+  templateUrl: './test2.component.html',
+  styleUrls: ['./test2.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, FormsModule, // 添加 FormsModule
+     CommonModule, // 确保 CommonModule 被导入
+      IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,IonItem,IonLabel,IonInput,IonList
+  ],
+})
+export class Test2Component {
+  height: number | undefined;
+  weight: number | undefined;
+  result: boolean = false;
+  isEditing: boolean = false;
+
+  constructor(private router: Router,) {}
+  gototab5(){
+  
+    this.router.navigate(["tabs/tab4"])
+  }
+
+
+  onSubmit() {
+    this.result = true; // 提交后显示结果
+    this.isEditing = false; // 提交后重置编辑状态
+  }
+
+  edit() {
+    this.isEditing = true; // 进入编辑状态
+  }
+}

src/app/test3/test3.component.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>训练项目</title>
+    <link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            height: 100vh; /* 确保整个视口高度 */
+            overflow-y: auto; /* 允许垂直滚动 */
+            background-color: #f0f0f0; /* 背景颜色 */
+        }
+
+        .header {
+            background-color: #4CAF50; /* 标题背景颜色 */
+            color: white;
+            text-align: center;
+            padding: 20px 0; /* 上下内边距 */
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+        }
+
+        .header h1 {
+            margin: 0; /* 去掉默认的 margin */
+            font-size: 2em; /* 标题字体大小 */
+        }
+
+        .training-container {
+            display: flex;
+            flex-direction: column; /* 垂直排列 */
+            align-items: center; /* 居中对齐 */
+            padding: 20px;
+        }
+
+        .training-card {
+            background-color: white; /* 卡片背景颜色 */
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            width: 80%; /* 根据需要调整宽度 */
+            margin: 10px 0; /* 卡片之间的间距 */
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
+            transition: transform 0.2s; /* 添加过渡效果 */
+        }
+
+        .training-card:hover {
+            transform: translateY(-5px); /* 悬停时上移效果 */
+        }
+
+        .training-card h2 {
+            font-size: 1.5em;
+            color: #333;
+            margin-bottom: 10px; /* 卡片标题与内容之间的间距 */
+        }
+
+        .training-card img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 4px;
+        }
+
+        .training-card p {
+            font-size: 1em;
+            color: #666;
+        }
+
+        .training-card button {
+            background-color: #007bff; /* 按钮颜色 */
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 10px 15px;
+            cursor: pointer;
+            margin-top: 10px;
+            transition: background-color 0.3s; /* 按钮过渡效果 */
+        }
+
+        .training-card button:hover {
+            background-color: #0056b3; /* 悬停效果 */
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>训练记录</h1>
+    </div>
+    <div class="training-container">
+        <div class="training-card">
+            <h2>运球训练</h2>
+            <img src="assets/tab4.img/1.jpg" alt="运球训练图片">
+            <button routerLink="/tab2" (click)="gototab5()">继续训练</button>
+        </div>
+        <div class="training-card">
+            <h2>脚步训练</h2>
+            <img src="assets/tab4.img/2.jpg" alt="脚步训练图片">
+            <button routerLink="/tab2" (click)="gototab5()">继续训练</button>
+        </div>
+        <div class="training-card">
+            <h2>投篮训练</h2>
+            <img src="assets/tab4.img/3.jpg" alt="投篮训练图片">
+            <button routerLink="/tab2" (click)="gototab5()">继续训练</button>
+        </div>
+        <!-- 添加返回按钮 -->
+        <ion-button slot="end" (click)="gototab4()">返回</ion-button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic.js"></script>
+</body>
+</html>

src/app/test3/test3.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Test3Component } from './test3.component';
+
+describe('Test3Component', () => {
+  let component: Test3Component;
+  let fixture: ComponentFixture<Test3Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Test3Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Test3Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test3/test3.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem,IonCard, IonCardContent, IonLabel,IonList,IonInput,IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-test3',
+  templateUrl: './test3.component.html',
+  styleUrls: ['./test3.component.scss'],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, FormsModule, // 添加 FormsModule
+     CommonModule, // 确保 CommonModule 被导入
+      IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,IonItem,IonLabel,IonInput,IonList
+    ],
+  standalone: true,
+ 
+})
+export class Test3Component  implements OnInit {
+
+  constructor(
+     private router: Router,
+  ) { }
+
+  ngOnInit() {}
+  gototab4(){
+  
+    this.router.navigate(["tabs/tab4"])
+  }
+  gototab5(){
+
+    this.router.navigate(["tabs/tab2"])
+  }
+
+}

src/app/test4/test4.component.html

@@ -0,0 +1,33 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>评价反馈</ion-title>
+    <ion-button slot="end" (click)="gototab5()" >返回</ion-button>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <form (ngSubmit)="submitFeedback()" #feedbackForm="ngForm">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>请留下您的反馈</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item>
+          <ion-label position="floating">您的评价</ion-label>
+          <ion-input [(ngModel)]="feedback" name="feedback" required></ion-input>
+        </ion-item>
+
+        <ion-button expand="full" type="submit" [disabled]="!feedbackForm.form.valid">提交反馈</ion-button>
+      </ion-card-content>
+    </ion-card>
+  </form>
+
+  <ion-card *ngIf="submittedFeedback">
+    <ion-card-header>
+      <ion-card-title>您的反馈</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>{{ submittedFeedback }}</p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/test4/test4.component.scss

@@ -0,0 +1,39 @@
+.feedback-card {
+    background-color: #ffffff; /* 卡片背景颜色 */
+    border-radius: 10px; /* 圆角 */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  
+  .result-card {
+    margin-top: 20px; /* 卡片顶部间距 */
+    background-color: #e7f4e4; /* 结果卡片背景颜色 */
+    border-radius: 10px; /* 圆角 */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  
+  .submit-button {
+    background-color: #4CAF50; /* 按钮颜色 */
+    color: white; /* 按钮字体颜色 */
+    border-radius: 5px; /* 按钮圆角 */
+    transition: background-color 0.3s; /* 按钮过渡效果 */
+  }
+  
+  .submit-button:hover {
+    background-color: #45a049; /* 悬停效果 */
+  }
+  
+  ion-card-title {
+    color: #333; /* 卡片标题颜色 */
+    font-weight: bold; /* 加粗标题 */
+    font-size: 1.5em; /* 标题字体大小 */
+  }
+  
+  ion-label {
+    color: #555; /* 标签颜色 */
+  }
+  
+  p {
+    font-size: 1.2em; /* 结果字体大小 */
+    color: #333; /* 结果字体颜色 */
+    text-align: center; /* 居中对齐 */
+  }

src/app/test4/test4.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Test4Component } from './test4.component';
+
+describe('Test4Component', () => {
+  let component: Test4Component;
+  let fixture: ComponentFixture<Test4Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Test4Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Test4Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test4/test4.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem,IonCard, IonCardContent, IonLabel,IonList,IonInput,IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-test4',
+  templateUrl: './test4.component.html',
+  styleUrls: ['./test4.component.scss'],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, FormsModule, // 添加 FormsModule
+       CommonModule, // 确保 CommonModule 被导入
+        IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,IonItem,IonLabel,IonInput,IonList
+      ],
+  standalone: true,
+})
+export class Test4Component {
+  feedback: string = ''; // 用于存储用户输入的反馈
+  submittedFeedback: string | null = null; // 用于存储提交后的反馈
+
+  constructor(private router: Router,) {}
+  gototab5(){
+  
+    this.router.navigate(["tabs/tab4"])
+  }
+
+  submitFeedback() {
+    this.submittedFeedback = this.feedback; // 将输入的反馈存储到 submittedFeedback 中
+    this.feedback = ''; // 清空输入框
+  }
+}

src/app/test5/test5.component.html

@@ -0,0 +1,3 @@
+<p>
+  test5 works!
+</p>

src/app/test5/test5.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Test5Component } from './test5.component';
+
+describe('Test5Component', () => {
+  let component: Test5Component;
+  let fixture: ComponentFixture<Test5Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Test5Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Test5Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test5/test5.component.ts

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