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

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

@@ -20,7 +20,7 @@
 
           第二场比赛，王曼昱对阵金娜英，王曼昱以11:3、11:7和11:2连下三城，中国队大比分以5:1领先。
           
-          第三场比赛，林诗栋对阵吴晙诚，林诗栋火力全开，11-6，11-4，11-6连下3局拿下比赛，为国乒锁定胜局。</p> <!-- 直接写描述 -->
+          第三场比赛，林诗栋对阵吴晙诚，林诗栋火力全开，11-6，11-5，11-6连下3局拿下比赛，为国乒锁定胜局。</p> <!-- 直接写描述 -->
       </ion-label>
     </ion-item>
     

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/tab1/tab1.page.html

@@ -27,13 +27,13 @@
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
     <ion-segment-button value="fitnessTips">
-      健身技巧
+      恢复教程
     </ion-segment-button>
     <ion-segment-button value="sportsNews">
       体育新闻
     </ion-segment-button>
     <ion-segment-button value="recoveryTutorials">
-      恢复教程
+      健身技巧
     </ion-segment-button>
   </ion-segment>
 
@@ -45,7 +45,7 @@
       </ion-card-header>
       <ion-card-content style="background-color: #fff9f2;">
         <p>{{ tip.description }}</p>
-        <ion-button expand="full" color="primary" (click)="goNewspage()">查看技巧</ion-button>
+        <ion-button expand="full" color="primary" (click)="goskillpage()">查看技巧</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
@@ -81,7 +81,7 @@
             </ion-card-header>
             <ion-card-content style="background-color: #ffe8e0;">
               <p>{{ tutorial.description }}</p>
-              <ion-button expand="full" color="primary" (click)="goNewspage()">查看教程</ion-button>
+              <ion-button expand="full" color="primary" (click)="goteachpage()">查看教程</ion-button>
             </ion-card-content>
           </ion-card>
         </ion-col>

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

@@ -35,8 +35,8 @@ export class Tab1Page implements OnInit {
   selectedTab: string = 'fitnessTips';
 
   fitnessTips = [
-    { title: '如何正确热身', subtitle: '热身的重要性', description: '热身可以有效预防运动损伤，提升运动表现。' },
-    { title: '力量训练的基础', subtitle: '增强肌肉力量', description: '力量训练是健身的重要组成部分，有助于提高基础代谢率。' },
+    { title: '没有过度训练，只有恢复不足', subtitle: '恢复不够不如不运动', description: '当训练者觉得自己过度训练时，真正的问题往往出在恢复环节。' },
+    { title: '接纳碳水化合物', subtitle: '吃碳水化合物很重要！', description: '运动后补充合适的营养物质能加速恢复和促进肌肉生长，而人体在锻炼后有吸收碳水化合物的倾向，因此锻炼结束后应加餐，大约占一天总碳水化合物摄入量的20%~30%。' },
   ];
 
   sportsNews = [
@@ -45,8 +45,8 @@ export class Tab1Page implements OnInit {
   ];
 
   recoveryTutorials = [
-    { title: '运动后的拉伸', description: '运动后拉伸有助于肌肉恢复，减少酸痛。' },
-    { title: '泡沫轴的使用', description: '泡沫轴可以帮助放松肌肉，缓解紧张感。' },
+    { title: '全身健身教程，从头到脚', description: '消灭赘肉--全身变紧实' },
+    { title: '仰卧哑铃上拉', description: '很多种方法，十分有效' },
   ];
 
   constructor(private router: Router, private alertController: AlertController) {}
@@ -82,4 +82,10 @@ export class Tab1Page implements OnInit {
   goNewspage() {
     this.router.navigate(['/tabs/news']); // 跳转到测试BMI页面
   }
+  goteachpage() {
+    this.router.navigate(['/tabs/teach']); // 跳转到测试BMI页面
+  }
+  goskillpage() {
+    this.router.navigate(['/tabs/skill']); // 跳转到测试BMI页面
+  }
 }

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

@@ -59,6 +59,16 @@ export const routes: Routes = [
         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',