Merge branch 'master' of http://git.fmode.cn:3000/13576288855/202226701011

FitMind-app/src/app/page-bmi/page-bmi.component.html

@@ -28,8 +28,8 @@
     </div>
   </div>
 
-  <!-- BMI输出框 -->
-  <div class="info-section">
+  <!-- BMI 输出框 -->
+  <div class="info-section" *ngIf="bmi !== null">
     <div class="input-row">
       <div class="input-group">
         <label>BMI:</label>
@@ -37,6 +37,10 @@
         <span class="unit">KG/M<sup>2</sup></span>
       </div>
     </div>
+    <!-- BMI 分类提示 -->
+    <div *ngIf="bmiStatus" class="status-box">
+      <p>{{ bmiStatus }}</p>
+    </div>
   </div>
 
   <!-- 按钮区 -->

FitMind-app/src/app/page-bmi/page-bmi.component.scss

@@ -3,6 +3,8 @@ $primary-color: #3880ff; // 主色调
 $secondary-color: #f4f4f4; // 辅助色调
 $accent-color: #ff4081; // 强调色
 $font-family: 'Helvetica Neue', Arial, sans-serif;
+$border-radius: 8px; // 圆角半径
+$box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 阴影样式
 
 /* 主样式 */
 ion-header {
@@ -37,39 +39,43 @@ ion-content {
       padding: 10px;
       font-size: 16px;
       color: $primary-color;
+      transition: background-color 0.3s;
 
       &.activated {
         background-color: $primary-color;
         color: white;
       }
+
+      &:hover {
+        background-color: lighten($primary-color, 30%);
+      }
     }
   }
 
   /* 输入框和显示区域 */
   .info-section {
     background-color: white;
-    border-radius: 8px;
+    border-radius: $border-radius;
     padding: 16px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: $box-shadow;
     margin-bottom: 16px;
 
     .input-row {
       display: flex;
-      justify-content: center; /* 水平居中 */
+      justify-content: center;
       margin-bottom: 16px;
 
       .input-group {
-        width: 60%; /* 控制输入框的宽度为60% */
-        max-width: 300px; /* 限制最大宽度 */
+        width: 60%;
+        max-width: 300px;
         display: flex;
-        flex-direction: column; /* 垂直排列标签和输入框 */
-        align-items: center; /* 内容居中对齐 */
+        flex-direction: column;
+        align-items: center;
 
         label {
           font-weight: bold;
           margin-bottom: 4px;
-          display: block;
-          text-align: center; /* 标签居中 */
+          text-align: center;
         }
 
         .input-box {
@@ -77,6 +83,11 @@ ion-content {
           padding: 8px;
           border: 1px solid #ccc;
           border-radius: 4px;
+          transition: border-color 0.3s;
+
+          &:focus {
+            border-color: $primary-color; // 聚焦时边框颜色
+          }
         }
 
         .unit {
@@ -90,9 +101,9 @@ ion-content {
   /* BMI输出框 */
   .textarea-section {
     background-color: white;
-    border-radius: 8px;
+    border-radius: $border-radius;
     padding: 16px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: $box-shadow;
     margin-bottom: 16px;
 
     .textarea-input {
@@ -102,6 +113,11 @@ ion-content {
       border-radius: 4px;
       padding: 8px;
       resize: none;
+      transition: border-color 0.3s;
+
+      &:focus {
+        border-color: $primary-color; // 聚焦时边框颜色
+      }
     }
   }
 
@@ -128,9 +144,9 @@ ion-content {
   /* 内容框 */
   .bigbox1 {
     background-color: white;
-    border-radius: 8px;
+    border-radius: $border-radius;
     padding: 16px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: $box-shadow;
     margin-top: 16px;
 
     .content-style {
@@ -142,17 +158,39 @@ ion-content {
   /* 居中按钮容器 */
   .center-button {
     display: flex;
-    justify-content: center; /* 水平居中 */
-    align-items: flex-start; /* 垂直居中，但靠上 */
-    width: 100%; /* 父容器宽度占满 */
-    height: 100%; /* 父容器高度占满，确保垂直居中 */
-    text-align: center; /* 按钮文本居中 */
-    padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    padding-top: 40px;
+
+    ion-button {
+      font-size: 18px;
+      padding: 14px 24px;
+      border-radius: $border-radius;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: lighten($primary-color, 20%);
+      }
+    }
   }
+}
 
-  .center-button ion-button {
-    font-size: 18px; /* 增大字体 */
-    padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
-    border-radius: 8px; /* 使按钮角度更加圆润 */
+/* 媒体查询，增强响应性 */
+@media (max-width: 768px) {
+  .info-section .input-group {
+    width: 80%; /* 在小屏幕上增加输入框宽度 */
   }
-}
+
+  .custom-segment {
+    flex-direction: column; /* 垂直排列 */
+    align-items: center;
+
+    .nav-button {
+      margin-bottom: 8px; /* 按钮之间的间距 */
+      width: 100%; /* 按钮宽度100% */
+    }
+  }
+}

FitMind-app/src/app/page-bmi/page-bmi.component.ts

@@ -1,33 +1,41 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { AlertController, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { AlertController } from '@ionic/angular';
 import { FormsModule } from '@angular/forms'; // 导入 FormsModule
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
-import { chevronBackOutline } from 'ionicons/icons';
-import { addIcons } from 'ionicons';
-addIcons({chevronBackOutline});
+import { IonicModule } from '@ionic/angular';
+
 @Component({
   selector: 'app-page-bmi',
   templateUrl: './page-bmi.component.html',
   styleUrls: ['./page-bmi.component.scss'],
   standalone: true,
-  imports:[IonHeader,IonToolbar,IonTitle,IonButton,IonButtons,IonContent,IonItem,IonLabel,IonInput,FormsModule,CommonModule,IonIcon]
+  imports: [FormsModule, CommonModule, IonicModule], // 导入相关模块
 })
-export class PageBmiComponent  implements OnInit {
+export class PageBmiComponent implements OnInit {
 
-  ngOnInit() {this.resetForm();} // 页面加载时清空数据
-  height: number|null =null; // 身高
-  weight: number|null =null; // 体重
-  bmi: number|null=null; // BMI 值
+  height: number | null = null; // 身高
+  weight: number | null = null; // 体重
+  bmi: number | null = null; // BMI 值
+  bmiStatus: string | null = null; // BMI 状态提示
 
-  constructor(private router: Router,private alertController: AlertController) {this.resetForm();}
+  constructor(private router: Router, private alertController: AlertController) {
+    this.resetForm(); // 初始化时清空数据
+  }
+
+  ngOnInit() {
+    this.resetForm(); // 页面加载时清空数据
+  }
 
   // 计算 BMI
   async calculateBMI() {
-    if (this.height !=null && this.weight !=null) {
-      if(this.height >0 && this.weight >0) {
-      const heightInMeters = this.height / 100; // 将身高转换为米
-      this.bmi = this.weight / (heightInMeters * heightInMeters); // 计算 BMI
+    if (this.height != null && this.weight != null) {
+      if (this.height > 0 && this.weight > 0) {
+        const heightInMeters = this.height / 100; // 将身高转换为米
+        this.bmi = this.weight / (heightInMeters * heightInMeters); // 计算 BMI
+
+        // 检查 BMI 并显示相应的提示
+        this.checkBmiStatus(this.bmi);
       } else {
         const alert = await this.alertController.create({
           header: '身高体重不能为0！',
@@ -41,21 +49,32 @@ export class PageBmiComponent  implements OnInit {
         buttons: ['确定']
       });
       await alert.present(); // 显示弹出框
-      
     }
   }
 
-  //清空数据
-    // 清空输入数据
-    resetForm() {
-      this.height = null;
-      this.weight = null;
-      this.bmi = null;
+  // 检查 BMI 并给出分类提示
+  checkBmiStatus(bmi: number) {
+    if (bmi < 18.5) {
+      this.bmiStatus = '低体重：BMI 小于 18.5，建议增加体重';
+    } else if (bmi >= 18.5 && bmi < 24.9) {
+      this.bmiStatus = '正常体重：BMI 在 18.5 到 24.9 之间，保持健康';
+    } else if (bmi >= 25 && bmi < 29.9) {
+      this.bmiStatus = '超重：BMI 在 25 到 29.9 之间，建议控制体重';
+    } else {
+      this.bmiStatus = '肥胖：BMI 大于或等于 30，建议减肥';
     }
+  }
+
+  // 清空数据
+  resetForm() {
+    this.height = null;
+    this.weight = null;
+    this.bmi = null;
+    this.bmiStatus = null; // 清空 BMI 状态提示
+  }
 
   // 返回上一个页面
   goBack() {
     this.router.navigate(['/tabs/tab2'], { replaceUrl: true }); // 使用 replaceUrl 强制重载页面
   }
 }
-

FitMind-app/src/app/page-news/page-news.component.html

@@ -0,0 +1,38 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start"> <!-- 添加按钮组 -->
+      <ion-back-button defaultHref="/"></ion-back-button> <!-- 返回按钮 -->
+    </ion-buttons>
+    <ion-title>新闻页面</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/new1.png" alt="2024年奥运会即将来临"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>乒乓球混合团体世界杯：中国队卫冕夺冠</h2> <!-- 直接写标题 -->
+        <h3>2024-12-08</h3> <!-- 直接写日期 -->
+        <p>央视网消息：北京时间12月8日，在四川成都举行的2024年成都国际乒联混合团体世界杯决赛中，中国队以8比1的总比分战胜韩国队，以全胜战绩卫冕夺冠。首场比赛，王楚钦/孙颖莎迎战赵大成/申裕斌，王楚钦/孙颖莎以11:9率先拿下一局。第二局，韩国组合展开反击，开局7:1领先，王楚钦/孙颖莎慢慢把比分追平，此后双方比分一直持续到17:17平，最终赵大成/申裕斌以19:17扳回一局。第三局，王楚钦和孙颖莎及时调整了状态，11:4结束战斗。
+
+          第二场比赛，王曼昱对阵金娜英，王曼昱以11:3、11:7和11:2连下三城，中国队大比分以5:1领先。
+          
+          第三场比赛，林诗栋对阵吴晙诚，林诗栋火力全开，11-6，11-4，11-6连下3局拿下比赛，为国乒锁定胜局。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/new2.jpg" alt="NBA新赛季开幕"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>法国公开赛国羽斩获三金</h2> <!-- 直接写标题 -->
+        <h3>2024-03-11</h3> <!-- 直接写日期 -->
+        <p>北京时间3月11日凌晨，巴黎奥运会羽毛球项目测试赛暨2024年法国羽毛球公开赛在巴黎阿迪达斯体育馆结束争夺。经过六天的争夺，中国羽毛球队闯入男单、女双、混双决赛，最终拼下男单、女双、混双三项冠军，成为最大赢家。　在备受关注的男单争夺中，2号种子、中国选手石宇奇一路过关斩将进入决赛，与去年世锦赛冠军、泰国名将昆拉武特争夺金牌。首局，石宇奇率先进入状态，第一局以12比6领先，但随后昆拉武特将比分扳平。此后双方陷入均势，石宇奇把握住关键分，22比20胜出。第二局，石宇奇一直占据主动权，将比分打到20比12。但随后，没有退路的昆拉武特连续追分，连追7分，将比分追至19比20仅差一分。关键时刻，石宇奇没有再给对手机会，进攻得分，21比19锁定胜利，斩获本赛季第二个世界羽联巡回赛超级750级别赛冠军。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

FitMind-app/src/app/page-news/page-news.component.scss

@@ -0,0 +1,82 @@
+/* page-news.component.scss */
+
+/* 设置全局样式 */
+ion-header {
+  background-color: #f8f9fa; /* 浅色背景 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+ion-toolbar {
+  --background: #ffffff; /* 工具栏背景 */
+}
+
+ion-title {
+  font-size: 1.5rem; /* 增加标题字体大小 */
+  color: #333; /* 深色字体 */
+}
+
+/* 内容样式 */
+ion-content {
+  background-color: #f0f2f5; /* 页面背景 */
+  padding: 16px; /* 内边距 */
+}
+
+/* 列表样式 */
+ion-list {
+  --ion-item-background: transparent; /* 透明背景 */
+  --ion-item-border-color: transparent; /* 透明边框 */
+}
+
+/* 每个新闻项 */
+ion-item {
+  background: white; /* 每个新闻项的背景 */
+  border-radius: 8px; /* 圆角 */
+  margin-bottom: 16px; /* 下边距 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
+  transition: transform 0.2s, box-shadow 0.2s; /* 动画效果 */
+
+  &:hover {
+    transform: translateY(-2px); /* 悬停效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
+  }
+}
+
+/* 缩略图样式 */
+ion-thumbnail {
+  border-radius: 8px; /* 圆角 */
+  overflow: hidden; /* 防止图片溢出 */
+}
+
+/* 图片样式 */
+ion-thumbnail img {
+  width: 100%; /* 图片宽度100% */
+  height: auto; /* 高度自适应 */
+}
+
+/* 标签样式 */
+ion-label {
+  padding: 8px; /* 内边距 */
+  color: #555; /* 标签颜色 */
+}
+
+/* 标题样式 */
+h2 {
+  font-size: 1.2rem; /* 标题字体大小 */
+  color: #333; /* 深色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}
+
+/* 日期样式 */
+h3 {
+  font-size: 1rem; /* 日期字体大小 */
+  color: #888; /* 灰色字体 */
+  margin: 4px 0; /* 上下边距 */
+}
+
+/* 描述样式 */
+p {
+  font-size: 0.9rem; /* 描述字体大小 */
+  line-height: 1.5; /* 行高 */
+  color: #666; /* 中灰色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}

FitMind-app/src/app/page-news/page-news.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageNewsComponent } from './page-news.component';
+
+describe('PageNewsComponent', () => {
+  let component: PageNewsComponent;
+  let fixture: ComponentFixture<PageNewsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageNewsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageNewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // it('should have news articles', () => {
+  //   expect(component.newsArticles.length).toBeGreaterThan(0);
+  // });
+});

FitMind-app/src/app/page-news/page-news.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms'; 
+import { CommonModule } from '@angular/common'; 
+import { IonicModule } from '@ionic/angular';
+@Component({
+  selector: 'app-page-news',
+  templateUrl: './page-news.component.html',
+  styleUrls: ['./page-news.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule], 
+})
+export class PageNewsComponent {
+  constructor(private router: Router) {}
+
+  openArticle(article: any) {
+    console.log('打开文章:', article.title);
+  }
+}

FitMind-app/src/app/page-skill/page-skill.component.html

@@ -0,0 +1,37 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start"> <!-- 添加按钮组 -->
+      <ion-back-button defaultHref="/"></ion-back-button> <!-- 返回按钮 -->
+    </ion-buttons>
+    <ion-title>技巧页面</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/skill.webp" alt="2024年奥运会即将来临"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>没有过度训练，只有恢复不足</h2> <!-- 直接写标题 -->
+        <!-- <h3>2024-12-08</h3> 直接写日期 -->
+        <p>当训练者觉得自己过度训练时，真正的问题往往出在恢复环节。
+          正是这些恢复错误，让成功者与那些一直寻找减脂、增肌或提升表现方法的人拉开了差距。要想让身体得到恢复，你必须先“赢得”恢复的权利。这并不意味着你需要在健身房拼命或花费数小时训练，而是需要通过正确的方法施加训练压力，以达到想要的适应效果。
+          不论你的目标是减脂、提高深蹲重量，还是拥有更紧实强壮的双腿，都需要以高效方式训练。许多人只关注恢复的某一方面，却忽视了训练对多个系统的影响。正确的恢复应该覆盖以下机制：修复肌肉和组织。清除代谢废物并减少炎症。补充能量储备和细胞活动所需的营养。
+          恢复中枢神经系统（CNS），即修复大脑与身体之间的连接。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/skill2.webp" alt="NBA新赛季开幕"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>接纳碳水化合物</h2> <!-- 直接写标题 -->
+        <!-- <h3>2024-03-11</h3> 直接写日期 -->
+        <p>运动后补充合适的营养物质能加速恢复和促进肌肉生长，而人体在锻炼后有吸收碳水化合物的倾向，因此锻炼结束后应加餐，大约占一天总碳水化合物摄入量的20%~30%。除此之外，还需摄入25~30克蛋白质。切记这顿加餐所含脂肪不应超过10克，否则人体对营养物质的吸收速度会降低。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

FitMind-app/src/app/page-skill/page-skill.component.scss

@@ -0,0 +1,82 @@
+/* page-news.component.scss */
+
+/* 设置全局样式 */
+ion-header {
+  background-color: #f8f9fa; /* 浅色背景 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+ion-toolbar {
+  --background: #ffffff; /* 工具栏背景 */
+}
+
+ion-title {
+  font-size: 1.5rem; /* 增加标题字体大小 */
+  color: #333; /* 深色字体 */
+}
+
+/* 内容样式 */
+ion-content {
+  background-color: #f0f2f5; /* 页面背景 */
+  padding: 16px; /* 内边距 */
+}
+
+/* 列表样式 */
+ion-list {
+  --ion-item-background: transparent; /* 透明背景 */
+  --ion-item-border-color: transparent; /* 透明边框 */
+}
+
+/* 每个新闻项 */
+ion-item {
+  background: white; /* 每个新闻项的背景 */
+  border-radius: 8px; /* 圆角 */
+  margin-bottom: 16px; /* 下边距 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
+  transition: transform 0.2s, box-shadow 0.2s; /* 动画效果 */
+
+  &:hover {
+    transform: translateY(-2px); /* 悬停效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
+  }
+}
+
+/* 缩略图样式 */
+ion-thumbnail {
+  border-radius: 8px; /* 圆角 */
+  overflow: hidden; /* 防止图片溢出 */
+}
+
+/* 图片样式 */
+ion-thumbnail img {
+  width: 100%; /* 图片宽度100% */
+  height: auto; /* 高度自适应 */
+}
+
+/* 标签样式 */
+ion-label {
+  padding: 8px; /* 内边距 */
+  color: #555; /* 标签颜色 */
+}
+
+/* 标题样式 */
+h2 {
+  font-size: 1.2rem; /* 标题字体大小 */
+  color: #333; /* 深色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}
+
+/* 日期样式 */
+h3 {
+  font-size: 1rem; /* 日期字体大小 */
+  color: #888; /* 灰色字体 */
+  margin: 4px 0; /* 上下边距 */
+}
+
+/* 描述样式 */
+p {
+  font-size: 0.9rem; /* 描述字体大小 */
+  line-height: 1.5; /* 行高 */
+  color: #666; /* 中灰色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}

FitMind-app/src/app/page-skill/page-skill.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageskillComponent } from './page-skill.component';
+
+describe('PageskillComponent', () => {
+  let component: PageskillComponent;
+  let fixture: ComponentFixture<PageskillComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageskillComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageskillComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // it('should have skill articles', () => {
+  //   expect(component.skillArticles.length).toBeGreaterThan(0);
+  // });
+});

FitMind-app/src/app/page-skill/page-skill.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms'; 
+import { CommonModule } from '@angular/common'; 
+import { IonicModule } from '@ionic/angular';
+@Component({
+  selector: 'app-page-skill',
+  templateUrl: './page-skill.component.html',
+  styleUrls: ['./page-skill.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule], 
+})
+export class PageskillComponent {
+  constructor(private router: Router) {}
+
+  openArticle(article: any) {
+    console.log('打开文章:', article.title);
+  }
+}

FitMind-app/src/app/page-teach/page-teach.component.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-buttons slot="start"> <!-- 添加按钮组 -->
+      <ion-back-button defaultHref="/"></ion-back-button> <!-- 返回按钮 -->
+    </ion-buttons>
+    <ion-title>教程页面</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/teach.webp" alt="2024年奥运会即将来临"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>全身健身教程，从头到脚</h2> <!-- 直接写标题 -->
+        <!-- <h3>2024-12-08</h3> 直接写日期 -->
+        <p>【消灭赘肉--全身变紧实】俯撑螺旋腿：双腿支撑在凳上，保持从头至脚后跟一条直线。收紧腹部，收右膝靠近胸口，保持腿的高度不变向左侧平移，再还原至平行。两条腿各做8次，休息1分钟，共做3组。这个动作很累，但效果很棒。【消灭肚腩--接力传球动态版】仰卧，双腿夹紧健身球(可用枕头替代)，双手高举在头上方。收缩腹部，同时抬起手和腿，把球从腿上传到手中，再把球回传。来回10次，手脚一直旋在空中，不能碰地。做3遍。难度提升的腹部训练，挑战一下 !【瘦手臂小妙方】 手握哑铃或装满水的瓶子，坐在椅子上，双腿分开，身体微微前倾。左手撑在左膝盖上，右手拿哑铃从腿内侧放下，手臂伸直向内转动，感觉到手臂肌肉紧绷时HOLD住2秒。慢慢还原，做30次。手臂会有酸酸的感觉，轻轻松松减掉手臂赘肉。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="assets/teach2.jpeg" alt="NBA新赛季开幕"> <!-- 直接引用图片 -->
+      </ion-thumbnail>
+      <ion-label>
+        <h2>仰卧哑铃上拉</h2> <!-- 直接写标题 -->
+        <!-- <h3>2024-03-11</h3> 直接写日期 -->
+        <p>1.起始姿势：首先，找一个平整的长凳或卧推凳，仰卧在上面。调整头部和背部的位置，确保身体舒适且稳定。双脚平放在地面上，以保持身体稳定。
+
+          2.准备哑铃：双手各持一只哑铃，手臂伸直，掌心朝上，哑铃位于头部两侧，与肩同宽。
+          
+          3.动作执行：保持上背部和肩胛骨紧贴在长凳上，稳定核心肌群。然后，屈肘将哑铃沿着身体两侧向上拉起，直至哑铃触及胸部或接近胸部位置。在此过程中，注意控制呼吸，避免屏气。
+          
+          4.还原动作：在达到顶点后，慢慢将哑铃沿原路径下放至起始位置。下放时，同样要保持对哑铃的控制，避免突然放松导致动作失控。</p> <!-- 直接写描述 -->
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

FitMind-app/src/app/page-teach/page-teach.component.scss

@@ -0,0 +1,82 @@
+/* page-news.component.scss */
+
+/* 设置全局样式 */
+ion-header {
+  background-color: #f8f9fa; /* 浅色背景 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+ion-toolbar {
+  --background: #ffffff; /* 工具栏背景 */
+}
+
+ion-title {
+  font-size: 1.5rem; /* 增加标题字体大小 */
+  color: #333; /* 深色字体 */
+}
+
+/* 内容样式 */
+ion-content {
+  background-color: #f0f2f5; /* 页面背景 */
+  padding: 16px; /* 内边距 */
+}
+
+/* 列表样式 */
+ion-list {
+  --ion-item-background: transparent; /* 透明背景 */
+  --ion-item-border-color: transparent; /* 透明边框 */
+}
+
+/* 每个新闻项 */
+ion-item {
+  background: white; /* 每个新闻项的背景 */
+  border-radius: 8px; /* 圆角 */
+  margin-bottom: 16px; /* 下边距 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
+  transition: transform 0.2s, box-shadow 0.2s; /* 动画效果 */
+
+  &:hover {
+    transform: translateY(-2px); /* 悬停效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
+  }
+}
+
+/* 缩略图样式 */
+ion-thumbnail {
+  border-radius: 8px; /* 圆角 */
+  overflow: hidden; /* 防止图片溢出 */
+}
+
+/* 图片样式 */
+ion-thumbnail img {
+  width: 100%; /* 图片宽度100% */
+  height: auto; /* 高度自适应 */
+}
+
+/* 标签样式 */
+ion-label {
+  padding: 8px; /* 内边距 */
+  color: #555; /* 标签颜色 */
+}
+
+/* 标题样式 */
+h2 {
+  font-size: 1.2rem; /* 标题字体大小 */
+  color: #333; /* 深色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}
+
+/* 日期样式 */
+h3 {
+  font-size: 1rem; /* 日期字体大小 */
+  color: #888; /* 灰色字体 */
+  margin: 4px 0; /* 上下边距 */
+}
+
+/* 描述样式 */
+p {
+  font-size: 0.9rem; /* 描述字体大小 */
+  line-height: 1.5; /* 行高 */
+  color: #666; /* 中灰色字体 */
+  margin: 0; /* 去掉默认外边距 */
+}

FitMind-app/src/app/page-teach/page-teach.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms'; 
+import { CommonModule } from '@angular/common'; 
+import { IonicModule } from '@ionic/angular';
+@Component({
+  selector: 'app-page-teach',
+  templateUrl: './page-teach.component.html',
+  styleUrls: ['./page-teach.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule], 
+})
+export class PageteachComponent {
+  constructor(private router: Router) {}
+
+  openArticle(article: any) {
+    console.log('打开文章:', article.title);
+  }
+}

FitMind-app/src/app/page-teach/page.teach.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageteachComponent } from './page-teach.component';
+
+describe('PageteachComponent', () => {
+  let component: PageteachComponent;
+  let fixture: ComponentFixture<PageteachComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageteachComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageteachComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // it('should have teach articles', () => {
+  //   expect(component.teachArticles.length).toBeGreaterThan(0);
+  // });
+});

FitMind-app/src/app/page-test/page-test.component.html

@@ -0,0 +1,72 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()" fill="clear">
+        <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>体脂率测试</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+<!-- 身高体重输入框 -->
+<div class="info-section">
+  <div class="input-row">
+    <div class="input-group">
+      <label>身高:</label>
+      <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
+      <span class="unit">CM</span>
+    </div>
+  </div>
+  <div class="input-row">
+    <div class="input-group">
+      <label>体重:</label>
+      <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
+      <span class="unit">KG</span>
+    </div>
+  </div>
+  <div class="input-row">
+    <div class="input-group">
+      <label>年龄:</label>
+      <input type="number" [(ngModel)]="age" placeholder="请输入年龄" class="input-box" />
+    </div>
+  </div>
+  <div class="input-row">
+    <div class="input-group">
+      <label>性别:</label>
+      <ion-select [(ngModel)]="gender">
+        <ion-select-option value="male">男性</ion-select-option>
+        <ion-select-option value="female">女性</ion-select-option>
+      </ion-select>
+    </div>
+  </div>
+  <!-- 腰围输入框 -->
+  <div class="input-row">
+    <div class="input-group">
+      <label>腰围:</label>
+      <input type="number" [(ngModel)]="waist" placeholder="请输入腰围" class="input-box" />
+      <span class="unit">CM</span>
+    </div>
+  </div>
+</div>
+
+<!-- 体脂率输出框 -->
+<div class="info-section" *ngIf="bodyFatPercentage !== null">
+  <div class="output-box">
+    <h3>体脂率</h3>
+    <p>{{ bodyFatPercentage | number: '1.1-1' }}%</p>
+  </div>
+
+  <!-- 体脂率分类提示 -->
+  <div *ngIf="bodyFatStatus" class="status-box">
+    <p>{{ bodyFatStatus }}</p>
+  </div>
+</div>
+
+<!-- 按钮区 -->
+<div class="center-button">
+  <ion-button fill="clear" class="analysis-button" (click)="calculateBodyFat()">计算体脂率</ion-button>
+  <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
+</div>
+</ion-content>

FitMind-app/src/app/page-test/page-test.component.scss

@@ -0,0 +1,158 @@
+/* 变量定义 */
+$primary-color: #3880ff; // 主色调
+$secondary-color: #f4f4f4; // 辅助色调
+$accent-color: #ff4081; // 强调色
+$font-family: 'Helvetica Neue', Arial, sans-serif;
+
+/* 主样式 */
+ion-header {
+  background-color: $primary-color;
+  color: white;
+
+  ion-toolbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ion-title {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
+ion-content {
+  padding: 16px;
+  background-color: $secondary-color;
+
+  /* 自定义段落样式 */
+  .custom-segment {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 16px;
+
+    .nav-button {
+      flex: 1;
+      text-align: center;
+      padding: 10px;
+      font-size: 16px;
+      color: $primary-color;
+
+      &.activated {
+        background-color: $primary-color;
+        color: white;
+      }
+    }
+  }
+
+  /* 输入框和显示区域 */
+  .info-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .input-row {
+      display: flex;
+      justify-content: center; /* 水平居中 */
+      margin-bottom: 16px;
+
+      .input-group {
+        width: 60%; /* 控制输入框的宽度为60% */
+        max-width: 300px; /* 限制最大宽度 */
+        display: flex;
+        flex-direction: column; /* 垂直排列标签和输入框 */
+        align-items: center; /* 内容居中对齐 */
+
+        label {
+          font-weight: bold;
+          margin-bottom: 4px;
+          display: block;
+          text-align: center; /* 标签居中 */
+        }
+
+        .input-box {
+          width: 100%;
+          padding: 8px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+        }
+
+        .unit {
+          font-size: 14px;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  /* BMI输出框 */
+  .textarea-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .textarea-input {
+      width: 100%;
+      height: 120px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      resize: none;
+    }
+  }
+
+  /* 按钮 */
+  .analysis-button {
+    width: 100%;
+    margin-top: 16px;
+    background-color: $primary-color;
+    color: white;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background-color 0.3s;
+
+    &.generating {
+      background-color: $accent-color;
+    }
+
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+
+  /* 内容框 */
+  .bigbox1 {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-top: 16px;
+
+    .content-style {
+      font-size: 16px;
+      line-height: 1.5;
+    }
+  }
+
+  /* 居中按钮容器 */
+  .center-button {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: flex-start; /* 垂直居中，但靠上 */
+    width: 100%; /* 父容器宽度占满 */
+    height: 100%; /* 父容器高度占满，确保垂直居中 */
+    text-align: center; /* 按钮文本居中 */
+    padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
+  }
+
+  .center-button ion-button {
+    font-size: 18px; /* 增大字体 */
+    padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
+    border-radius: 8px; /* 使按钮角度更加圆润 */
+  }
+}

FitMind-app/src/app/page-test/page-test.component.spec.ts

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

FitMind-app/src/app/page-test/page-test.component.ts

@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlertController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+import { IonicModule } from '@ionic/angular';  // 导入 IonicModule
+
+@Component({
+  selector: 'app-page-test',
+  templateUrl: './page-test.component.html',
+  styleUrls: ['./page-test.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule], // 在这里加入 IonicModule
+})
+export class PageBodyFatComponent implements OnInit {
+  // 页面属性
+  height: number | null = null; // 身高
+  weight: number | null = null; // 体重
+  age: number | null = null; // 年龄
+  gender: string = 'male'; // 性别
+  waist: number | null = null; // 腰围
+  bodyFatPercentage: number | null = null; // 体脂率
+  bodyFatStatus: string | null = null; // 体脂率状态提示
+
+  constructor(private router: Router, private alertController: AlertController) { }
+
+  ngOnInit() {
+    this.resetForm(); // 页面加载时清空数据
+  }
+
+  // 计算体脂率
+  async calculateBodyFat() {
+    if (this.height && this.weight && this.age && this.waist) {
+      if (this.height > 0 && this.weight > 0 && this.age > 0 && this.waist > 0) {
+        // 计算 BMI
+        const heightInMeters = this.height / 100; // 将身高转换为米
+        const bmi = this.weight / (heightInMeters * heightInMeters);
+
+        // 根据性别和腰围、BMI、年龄计算体脂率
+        let bodyFatPercentage: number;
+        
+        if (this.gender === 'female') {
+          // 女性的体脂率估算公式
+          bodyFatPercentage = 0.1 * this.waist + 0.23 * bmi + 0.15 * this.age;
+        } else {
+          // 男性的体脂率估算公式
+          bodyFatPercentage = 0.1 * this.waist + 0.23 * bmi + 0.15 * this.age;
+        }
+
+        this.bodyFatPercentage = bodyFatPercentage;
+        this.checkBodyFatStatus(this.bodyFatPercentage);
+
+      } else {
+        const alert = await this.alertController.create({
+          header: '身高、体重、年龄和腰围不能为零！',
+          buttons: ['确定']
+        });
+        await alert.present(); // 显示弹出框
+      }
+    } else {
+      const alert = await this.alertController.create({
+        header: '请确保输入完整的身高、体重、年龄和腰围！',
+        buttons: ['确定']
+      });
+      await alert.present(); // 显示弹出框
+    }
+  }
+
+  // 检查体脂率并给出分类提示
+  checkBodyFatStatus(bodyFatPercentage: number) {
+    if (this.gender === 'female') {
+      if (bodyFatPercentage < 18) {
+        this.bodyFatStatus = '低体脂：体脂率小于18%，建议增加体脂';
+      } else if (bodyFatPercentage >= 18 && bodyFatPercentage < 28) {
+        this.bodyFatStatus = '正常体脂：体脂率在18%-28%之间，保持健康';
+      } else if (bodyFatPercentage >= 28 && bodyFatPercentage < 33) {
+        this.bodyFatStatus = '超重：体脂率在28%-33%之间，建议控制体脂';
+      } else {
+        this.bodyFatStatus = '肥胖：体脂率大于33%，建议减脂';
+      }
+    } else {
+      if (bodyFatPercentage < 10) {
+        this.bodyFatStatus = '低体脂：体脂率小于10%，建议增加体脂';
+      } else if (bodyFatPercentage >= 10 && bodyFatPercentage < 20) {
+        this.bodyFatStatus = '正常体脂：体脂率在10%-20%之间，保持健康';
+      } else if (bodyFatPercentage >= 20 && bodyFatPercentage < 25) {
+        this.bodyFatStatus = '超重：体脂率在20%-25%之间，建议控制体脂';
+      } else {
+        this.bodyFatStatus = '肥胖：体脂率大于25%，建议减脂';
+      }
+    }
+  }
+
+  // 清空数据
+  resetForm() {
+    this.height = null;
+    this.weight = null;
+    this.age = null;
+    this.gender = 'male';
+    this.waist = null;
+    this.bodyFatPercentage = null;
+    this.bodyFatStatus = null; // 清空体脂率状态
+  }
+
+  // 返回上一个页面
+  goBack() {
+    this.router.navigate(['/tabs/tab2'], { replaceUrl: true }); // 使用 replaceUrl 强制重载页面
+  }
+}

FitMind-app/src/app/page-ytb/page-ytb.component.html

@@ -0,0 +1,55 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()" fill="clear">
+        <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>腰臀比测试</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 身高和腰围输入框 -->
+  <div class="info-section">
+    <div class="input-row">
+      <div class="input-group">
+        <label>身高:</label>
+        <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
+        <span class="unit">CM</span>
+      </div>
+    </div>
+    <div class="input-row">
+      <div class="input-group">
+        <label>臀围:</label>
+        <input type="number" [(ngModel)]="hip" placeholder="请输入臀围" class="input-box" />
+        <span class="unit">CM</span>
+      </div>
+    </div>
+    <div class="input-row">
+      <div class="input-group">
+        <label>腰围:</label>
+        <input type="number" [(ngModel)]="waist" placeholder="请输入腰围" class="input-box" />
+        <span class="unit">CM</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- 腰臀比输出框 -->
+  <div class="info-section" *ngIf="whr !== null">
+    <div class="output-box">
+      <h3>腰臀比</h3>
+      <p>{{ whr | number: '1.2-2' }}</p>
+    </div>
+    <!-- 弹出腰臀比提示 -->
+    <div *ngIf="whrStatus" class="status-box">
+      <p>{{ whrStatus }}</p>
+    </div>
+  </div>
+
+  <!-- 按钮区 -->
+  <div class="center-button">
+    <ion-button fill="clear" class="analysis-button" (click)="calculateWhr()">计算腰臀比</ion-button>
+    <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
+  </div>
+</ion-content>

FitMind-app/src/app/page-ytb/page-ytb.component.scss

@@ -0,0 +1,91 @@
+$primary-color: #3880ff;  // 设置主色调
+$secondary-color: #f4f4f4; // 设置次要颜色
+
+/* 继承之前的样式 */
+ion-header {
+  background-color: $primary-color;
+  color: white;
+
+  ion-toolbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ion-title {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
+ion-content {
+  padding: 16px;
+  background-color: $secondary-color;
+
+  /* 输入框和显示区域 */
+  .info-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .input-row {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 16px;
+
+      .input-group {
+        width: 60%;
+        max-width: 300px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        label {
+          font-weight: bold;
+          margin-bottom: 4px;
+          display: block;
+          text-align: center;
+        }
+
+        .input-box {
+          width: 100%;
+          padding: 8px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+        }
+
+        .unit {
+          font-size: 14px;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  .center-button {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    padding-top: 40px;
+  }
+
+  .analysis-button {
+    width: 100%;
+    margin-top: 16px;
+    background-color: $primary-color;
+    color: white;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+}

FitMind-app/src/app/page-ytb/page-ytb.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { PageWhrTestComponent } from './page-ytb.component';
+
+describe('PageWhrTestComponent', () => {
+  let component: PageWhrTestComponent;
+  let fixture: ComponentFixture<PageWhrTestComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageWhrTestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageWhrTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should calculate waist-to-hip ratio correctly', () => {
+    component.height = 170;
+    component.waist = 70;
+    component.hip = 90;
+    component.calculateWhr();
+    expect(component.whr).toBeCloseTo(0.777, 2);
+  });
+
+  it('should show alert if input is invalid', async () => {
+    component.height = null;
+    component.waist = 0;
+    component.hip = 90;
+    await component.calculateWhr();
+    expect(component.whr).toBeNull();
+  });
+});

FitMind-app/src/app/page-ytb/page-ytb.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlertController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-page-ytb',
+  templateUrl: './page-ytb.component.html',
+  styleUrls: ['./page-ytb.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule],
+})
+export class PageYtbComponent implements OnInit {
+  height: number | null = null; // 身高
+  waist: number | null = null;  // 腰围
+  hip: number | null = null;    // 臀围
+  whr: number | null = null;    // 腰臀比
+  whrStatus: string | null = null; // 腰臀比状态信息
+
+  constructor(private router: Router, private alertController: AlertController) {}
+
+  ngOnInit() {
+    this.resetForm(); // 页面加载时清空数据
+  }
+
+  // 计算腰臀比
+  async calculateWhr() {
+    if (this.height && this.waist && this.hip) {
+      if (this.height > 0 && this.waist > 0 && this.hip > 0) {
+        // 计算腰臀比
+        const whr = this.waist / this.hip;
+        this.whr = whr;
+
+        // 检查腰臀比是否正常
+        this.checkWhrStatus(whr);
+      } else {
+        const alert = await this.alertController.create({
+          header: '身高、腰围和臀围不能为零！',
+          buttons: ['确定'],
+        });
+        await alert.present(); // 显示弹出框
+      }
+    } else {
+      const alert = await this.alertController.create({
+        header: '请确保输入完整的身高、腰围和臀围！',
+        buttons: ['确定'],
+      });
+      await alert.present(); // 显示弹出框
+    }
+  }
+
+  // 检查腰臀比是否正常
+  checkWhrStatus(whr: number) {
+    if (whr <= 0) {
+      this.whrStatus = '腰臀比不正常，请检查输入数据';
+    } else if (whr > 0 && whr <= 0.9) {
+      this.whrStatus = '腰臀比正常';
+    } else if (whr > 0.9 && whr <= 1.0) {
+      this.whrStatus = '腰臀比偏高，需注意';
+    } else {
+      this.whrStatus = '腰臀比不正常，建议调整';
+    }
+  }
+
+  // 清空数据
+  resetForm() {
+    this.height = null;
+    this.waist = null;
+    this.hip = null;
+    this.whr = null;
+    this.whrStatus = null; // 清空状态信息
+  }
+
+  // 返回上一个页面
+  goBack() {
+    this.router.navigate(['/tabs/tab2'], { replaceUrl: true });
+  }
+}

FitMind-app/src/app/tab1/tab1.page.html

@@ -1,12 +1,11 @@
-<ion-header style="background-color: #1e1e1e;">
-  <ion-toolbar color="dark">
+<ion-header style="background-color: #fffefe;">
+  <ion-toolbar color="light">
     <ion-title>Fearless</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
   <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; let i = index">
         <img [src]="image" alt="轮播图" class="carousel-image">
@@ -16,90 +15,77 @@
     <!-- 上一张按钮 -->
     <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>
-  
 
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
-    <ion-segment-button value="recommend">
-      推荐
+    <ion-segment-button value="fitnessTips">
+      恢复教程
     </ion-segment-button>
-    <ion-segment-button value="activities">
-      活动
+    <ion-segment-button value="sportsNews">
+      体育新闻
     </ion-segment-button>
-    <ion-segment-button value="courses">
-      课程
+    <ion-segment-button value="recoveryTutorials">
+      健身技巧
     </ion-segment-button>
   </ion-segment>
 
-  <div *ngIf="selectedTab === 'recommend'" style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px 0; border-radius: 15px;">
-    <ion-card *ngFor="let item of recommendations" style="border-radius: 10px; overflow: hidden;">
-      <img [src]="item.image" alt="推荐图片" />
-      <ion-card-header style="background-color: #fff5e1;">
-        <ion-card-title>{{ item.title }}</ion-card-title>
-        <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
+  <div *ngIf="selectedTab === 'fitnessTips'" style="background: linear-gradient(to right, #fffffe, #fcfbfb); padding: 20px 0; border-radius: 15px;">
+    <ion-card *ngFor="let tip of fitnessTips" style="border-radius: 10px; overflow: hidden;">
+      <ion-card-header style="background-color: #e1fbff;">
+        <ion-card-title>{{ tip.title }}</ion-card-title>
+        <ion-card-subtitle>{{ tip.subtitle }}</ion-card-subtitle>
       </ion-card-header>
       <ion-card-content style="background-color: #fff9f2;">
-        <p>{{ item.description }}</p>
-        <ion-button expand="full" color="warning" (click)="promptAddress()">立即购买</ion-button>
+        <p>{{ tip.description }}</p>
+        <ion-button expand="full" color="primary" (click)="goskillpage()">查看技巧</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
 
-  <!-- 活动内容 -->
-  <div *ngIf="selectedTab === 'activities'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
+  <!-- 体育新闻内容 -->
+  <div *ngIf="selectedTab === 'sportsNews'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
-        <ion-col size="12" size-md="4" *ngFor="let activity of activities">
+        <ion-col size="12" size-md="4" *ngFor="let news of sportsNews">
           <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <ion-card-header style="background-color: #ff6f61;">
-              <ion-card-title style="color: #fff;">{{ activity.title }}</ion-card-title>
-              <ion-card-subtitle style="color: #fff;">{{ activity.date }}</ion-card-subtitle>
+            <ion-card-header style="background-color: #1e88e5;">
+              <ion-card-title style="color: #fff;">{{ news.title }}</ion-card-title>
+              <ion-card-subtitle style="color: #fff;">{{ news.date }}</ion-card-subtitle>
             </ion-card-header>
-            <ion-card-content style="background-color: #ffe8e0;">
-              <p>{{ activity.description }}</p>
-              <ion-chip color="primary">
-                <ion-icon name="star" slot="start"></ion-icon>
-                热门
-              </ion-chip>
+            <ion-card-content style="background-color: #e1f5fe;">
+              <p>{{ news.description }}</p>
+              <ion-button expand="full" color="primary" (click)="goNewspage()">查看新闻</ion-button>
             </ion-card-content>
-            <ion-button expand="full" color="danger" (click)="promptRegistration(activity)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </div>
 
-  <!-- 课程内容 -->
-  <div *ngIf="selectedTab === 'courses'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
+  <!-- 恢复教程内容 -->
+  <div *ngIf="selectedTab === 'recoveryTutorials'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
     <ion-grid>
       <ion-row>
-        <ion-col size="12" size-md="4" *ngFor="let course of courses">
+        <ion-col size="12" size-md="4" *ngFor="let tutorial of recoveryTutorials">
           <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <ion-card-header style="background-color: #1e88e5;">
-              <ion-card-title style="color: #fff;">{{ course.title }}</ion-card-title>
-              <ion-card-subtitle style="color: #fff;">{{ course.instructor }}</ion-card-subtitle>
+            <ion-card-header style="background-color: #9061ff;">
+              <ion-card-title style="color: #fff;">{{ tutorial.title }}</ion-card-title>
             </ion-card-header>
-            <ion-card-content style="background-color: #e1f5fe;">
-              <p>{{ course.description }}</p>
-              <ion-chip color="danger">
-                <ion-icon name="checkmark-circle" slot="start"></ion-icon>
-                热销
-              </ion-chip>
+            <ion-card-content style="background-color: #ffe8e0;">
+              <p>{{ tutorial.description }}</p>
+              <ion-button expand="full" color="primary" (click)="goteachpage()">查看教程</ion-button>
             </ion-card-content>
-            <ion-button expand="full" color="primary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </div>
-</ion-content>
+</ion-content>

FitMind-app/src/app/tab1/tab1.page.scss

@@ -1,65 +1,85 @@
 .carousel-container {
-    position: relative;
-    width: 100%;
-    max-width: 600px;
-    overflow: hidden;
-  }
-  
-  .carousel {
-    display: flex;
-    transition: transform 0.5s ease-in-out;
-  }
-  
-  .slide {
-    min-width: 100%;
-    box-sizing: border-box;
-  }
-  
-  .carousel-image {
-    width: 100%;
-    border-radius: 10px;
-    object-fit: cover;
-  }
-  
-  .prev, .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    font-size: 30px;
-    padding: 10px;
-    cursor: pointer;
-  }
-  
-  .prev {
-    left: 10px;
-  }
-  
-  .next {
-    right: 10px;
-  }
-  
-  .dots {
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-  }
-  
-  .dot {
-    height: 10px;
-    width: 10px;
-    margin: 0 5px;
-    background-color: rgba(255, 255, 255, 0.7);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .dot.active {
-    background-color: white;
-  }
-  
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.carousel-image {
+  width: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  font-size: 30px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.prev {
+  left: 10px;
+}
+
+.next {
+  right: 10px;
+}
+
+.dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  margin: 0 5px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.dot.active {
+  background-color: white;
+}
+
+/* 查看详情按钮样式 */
+.view-detail-button {
+  background-color: #1e88e5; /* 按钮背景色 */
+  color: white; /* 按钮文字颜色 */
+  border: none; /* 去掉边框 */
+  border-radius: 5px; /* 圆角 */
+  padding: 10px; /* 内边距 */
+  font-size: 16px; /* 字体大小 */
+  cursor: pointer; /* 鼠标指针样式 */
+  transition: background-color 0.3s; /* 背景色变化效果 */
+  width: 100%; /* 按钮宽度 */
+}
+
+.view-detail-button:hover {
+  background-color: #1565c0; /* 悬停时背景色 */
+}
+
+.view-detail-button:focus {
+  outline: none; /* 去掉聚焦时的轮廓 */
+}

FitMind-app/src/app/tab1/tab1.page.spec.ts

@@ -29,6 +29,4 @@ describe('Tab1Page', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  
 });

FitMind-app/src/app/tab1/tab1.page.ts

@@ -32,21 +32,21 @@ export class Tab1Page implements OnInit {
   ];
 
   // 其他数据
-  selectedTab: string = 'recommend';
+  selectedTab: string = 'fitnessTips';
 
-  recommendations = [
-    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'assets/4.png' },
-    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'assets/5.png' },
+  fitnessTips = [
+    { title: '没有过度训练，只有恢复不足', subtitle: '恢复不够不如不运动', description: '当训练者觉得自己过度训练时，真正的问题往往出在恢复环节。' },
+    { title: '接纳碳水化合物', subtitle: '吃碳水化合物很重要！', description: '运动后补充合适的营养物质能加速恢复和促进肌肉生长，而人体在锻炼后有吸收碳水化合物的倾向，因此锻炼结束后应加餐，大约占一天总碳水化合物摄入量的20%~30%。' },
   ];
 
-  activities = [
-    { title: '冬季滑雪大赛', date: '2024-12-30', description: '加入我们，挑战滑雪极限！' },
-    { title: '夏季自行车比赛', date: '2025-06-15', description: '感受骑行的乐趣，挑战极限！' },
+  sportsNews = [
+    { title: '乒乓球混合团体世界杯：中国队卫冕夺冠', date: '2024-12-08', description: '北京时间12月8日，在四川成都举行的2024年成都国际乒联混合团体世界杯决赛中，中国队以8比1的总比分战胜韩国队，以全胜战绩卫冕夺冠。' },
+    { title: '法国公开赛国羽斩获三金', date: '2024-03-11', description: '北京时间3月11日凌晨，巴黎奥运会羽毛球项目测试赛暨2024年法国羽毛球公开赛在巴黎阿迪达斯体育馆结束争夺。' },
   ];
 
-  courses = [
-    { title: '高级瑜伽课程', instructor: '王老师', description: '为您提供更加深度的瑜伽体验，提升身体和心理健康。' },
-    { title: '马拉松训练营', instructor: '李教练', description: '为马拉松爱好者提供专业的训练课程，帮助提升跑步成绩。' },
+  recoveryTutorials = [
+    { title: '全身健身教程，从头到脚', description: '消灭赘肉--全身变紧实' },
+    { title: '仰卧哑铃上拉', description: '很多种方法，十分有效' },
   ];
 
   constructor(private router: Router, private alertController: AlertController) {}
@@ -79,116 +79,13 @@ export class Tab1Page implements OnInit {
   goToSlide(index: number): void {
     this.currentSlide = index;
   }
-
-  // 弹出输入地址和手机号的弹窗
-  async promptAddress(): Promise<void> {
-    const alert = await this.alertController.create({
-      header: '输入地址和手机号',
-      inputs: [
-        {
-          name: 'address',
-          type: 'text',
-          placeholder: '请输入地址'
-        },
-        {
-          name: 'phone',
-          type: 'tel',
-          placeholder: '请输入手机号'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '确认',
-          handler: (data:any) => {
-            console.log('地址:', data.address);
-            console.log('手机号:', data.phone);
-            this.showAlert('购买成功', '您的订单已提交！');
-          }
-        }
-      ]
-    });
-    await alert.present();
+  goNewspage() {
+    this.router.navigate(['/tabs/news']); // 跳转到测试BMI页面
   }
-
-  // 弹出输入姓名和手机号的弹窗
-  async promptRegistration(activity: any): Promise<void> {
-    const alert = await this.alertController.create({
-      header: '输入姓名和手机号',
-      inputs: [
-        {
-          name: 'name',
-          type: 'text',
-          placeholder: '请输入姓名'
-        },
-        {
-          name: 'phone',
-          type: 'tel',
-          placeholder: '请输入手机号'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '确认',
-          handler: (data:any) => {
-            console.log('姓名:', data.name);
-            console.log('手机号:', data.phone);
-            this.showAlert('报名成功', '您已成功报名活动！');
-          }
-        }
-      ]
-    });
-    await alert.present();
+  goteachpage() {
+    this.router.navigate(['/tabs/teach']); // 跳转到测试BMI页面
   }
-
-  // 弹出输入上课时间和手机号的弹窗
-  async promptCourseEnrollment(course: any): Promise<void> {
-    const alert = await this.alertController.create({
-      header: '输入上课时间和手机号',
-      inputs: [
-        {
-          name: 'classTime',
-          type: 'text',
-          placeholder: '请输入上课时间'
-        },
-        {
-          name: 'phone',
-          type: 'tel',
-          placeholder: '请输入手机号'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '确认',
-          handler: (data:any) => {
-            console.log('上课时间:', data.classTime);
-            console.log('手机号:', data.phone);
-            this.showAlert('报名成功', '您已成功报名课程！');
-          }
-        }
-      ]
-    });
-    await alert.present();
-  }
-
-  // 显示成功提示
-  async showAlert(header: string, message: string): Promise<void> {
-    const alert = await this.alertController.create({
-      header: header,
-      message: message,
-      buttons: ['确定']
-    });
-    await alert.present();
+  goskillpage() {
+    this.router.navigate(['/tabs/skill']); // 跳转到测试BMI页面
   }
-}
+}

FitMind-app/src/app/tab2/tab2.page.html

@@ -102,14 +102,20 @@
 
   </div>
   
-  <!--测试-->
-  <div *ngIf="selectedSegment === 'test'" class="center-button">
-    <ion-button (click)="goBmipage()">测测你的BMI</ion-button>
+  <div *ngIf="selectedSegment === 'test'" class="center-buttons">
+    <div class="center-button">
+      <ion-button (click)="goBmipage()">测测你的BMI</ion-button>
+    </div>
+    
+    <div class="center-button">
+      <ion-button (click)="goTestpage()">测测你的体脂率</ion-button>
+    </div>
+      
+  <div class="center-button">
+    <ion-button (click)="goYtbpage()">测测你的腰臀比</ion-button>
   </div>
-  
-
-
 
+  </div>
 
   
 </ion-content>

FitMind-app/src/app/tab2/tab2.page.scss

@@ -150,18 +150,21 @@ ion-content {
       line-height: 1.5;
     }
   }
-}.center-button {
-  display: flex; /* 使用 Flexbox 布局 */
-  justify-content: center; /* 水平居中 */
-  align-items: flex-start; /* 垂直居中，但靠上 */
-  width: 100%; /* 父容器宽度占满 */
-  height: 100%; /* 父容器高度占满，确保垂直居中 */
-  text-align: center; /* 按钮文本居中 */
-  padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
-}
-
-.center-button ion-button {
-  font-size: 18px; /* 增大字体 */
-  padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
-  border-radius: 8px; /* 使按钮角度更加圆润 */
-}
+  .center-button {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    padding-top: 20px; /* 减小顶部间距，缩短按钮与顶部的距离 */
+    margin-bottom: 10px; /* 调整按钮之间的间距，减少底部间距 */
+  }
+  
+  /* 对按钮进行样式调整 */
+  .center-button ion-button {
+    font-size: 18px;
+    padding: 14px 24px;
+    border-radius: 8px;
+  }
+}  

FitMind-app/src/app/tab2/tab2.page.ts

@@ -12,7 +12,7 @@ import { PageAiChatComponent } from '../page-ai-chat/page-ai-chat.component';
 
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-
+// import { CloudfearlessPlan } from 'src/app/lib/cloudPlans'; // 引入封装好的 CloudfearlessPlan 类
 
 
 @Component({
@@ -21,7 +21,7 @@ import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-log
   styleUrls: ['tab2.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonItem,IonList,IonSelect,IonSelectOption,IonButton,CommonModule,IonTextarea,FormsModule,
-    MarkdownPreviewModule,IonSegment,IonSegmentButton,IonLabel,// ASR语音输入模块
+    MarkdownPreviewModule,IonSegment,IonSegmentButton,IonLabel,
     FmChatModalInput,PageAiChatComponent,IonAlert,IonButtons],
 })
 export class Tab2Page {
@@ -216,11 +216,16 @@ stopTimer() {
 
 //测试
 goBmipage() {
-  this.router.navigate(['/tabs/bmi']); // 跳转到测试BMI页面
+  this.router.navigate(['/tabs/bmi']); 
 }
 
+goTestpage() {
+  this.router.navigate(['/tabs/test']); 
+}
 
-
+goYtbpage() {
+  this.router.navigate(['/tabs/ytb']); 
+}
 
 
 alertButtons = ['退出'];

FitMind-app/src/app/tabs/tabs.routes.ts

@@ -41,6 +41,32 @@ export const routes: Routes = [
       },
      
       
+      {
+        path: 'test',
+        loadComponent: () =>
+          import('../page-test/page-test.component').then((m) => m.PageBodyFatComponent),
+      },  
+      {
+        path: 'ytb',
+        loadComponent: () =>
+          import('../page-ytb/page-ytb.component').then((m) => m.PageYtbComponent),
+      },
+
+      {
+        path: 'news',
+        loadComponent: () =>
+          import('../page-news/page-news.component').then((m) => m.PageNewsComponent),
+      },
+      {
+        path: 'teach',
+        loadComponent: () =>
+          import('../page-teach/page-teach.component').then((m) => m.PageteachComponent),
+      },
+      {
+        path: 'skill',
+        loadComponent: () =>
+          import('../page-skill/page-skill.component').then((m) => m.PageskillComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',