news

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

@@ -1,5 +1,5 @@
 <ion-header style="background-color: #fffefe;">
-  <ion-toolbar color="dark">
+  <ion-toolbar color="light">
     <ion-title>Fearless</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -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)="goToFitnessTipDetail(tip)">查看详情</ion-button>
+        <ion-button expand="full" color="primary" (click)="goNewspage()">查看技巧</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
@@ -62,7 +62,7 @@
             </ion-card-header>
             <ion-card-content style="background-color: #e1f5fe;">
               <p>{{ news.description }}</p>
-              <ion-button expand="full" color="primary" (click)="goToSportsNewsDetail(news)">查看详情</ion-button>
+              <ion-button expand="full" color="primary" (click)="goNewspage()">查看新闻</ion-button>
             </ion-card-content>
           </ion-card>
         </ion-col>
@@ -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)="goToRecoveryTutorialDetail(tutorial)">查看详情</ion-button>
+              <ion-button expand="full" color="primary" (click)="goNewspage()">查看教程</ion-button>
             </ion-card-content>
           </ion-card>
         </ion-col>

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

@@ -40,8 +40,8 @@ export class Tab1Page implements OnInit {
   ];
 
   sportsNews = [
-    { title: '2024年奥运会即将来临', date: '2024-12-15', description: '各国运动员正在积极备战，期待精彩赛事。' },
-    { title: 'NBA新赛季开幕', date: '2024-10-01', description: '各大球队已做好准备，争夺总冠军。' },
+    { title: '乒乓球混合团体世界杯：中国队卫冕夺冠', date: '2024-12-08', description: '北京时间12月8日，在四川成都举行的2024年成都国际乒联混合团体世界杯决赛中，中国队以8比1的总比分战胜韩国队，以全胜战绩卫冕夺冠。' },
+    { title: '法国公开赛国羽斩获三金', date: '2024-03-11', description: '北京时间3月11日凌晨，巴黎奥运会羽毛球项目测试赛暨2024年法国羽毛球公开赛在巴黎阿迪达斯体育馆结束争夺。' },
   ];
 
   recoveryTutorials = [
@@ -79,19 +79,7 @@ export class Tab1Page implements OnInit {
   goToSlide(index: number): void {
     this.currentSlide = index;
   }
-
-  // 跳转到健身技巧详情页面
-  goToFitnessTipDetail(tip: any): void {
-    this.router.navigate(['/fitness-tip-detail', { title: tip.title, description: tip.description }]); // 替换为实际的路由路径
-  }
-
-  // 跳转到体育新闻详情页面
-  goToSportsNewsDetail(news: any): void {
-    this.router.navigate(['/sports-news-detail', { title: news.title, description: news.description }]); // 替换为实际的路由路径
-  }
-
-  // 跳转到恢复教程详情页面
-  goToRecoveryTutorialDetail(tutorial: any): void {
-    this.router.navigate(['/recovery-tutorial-detail', { title: tutorial.title, description: tutorial.description }]); // 替换为实际的路由路径
+  goNewspage() {
+    this.router.navigate(['/tabs/news']); // 跳转到测试BMI页面
   }
 }

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

@@ -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,15 +216,15 @@ stopTimer() {
 
 //测试
 goBmipage() {
-  this.router.navigate(['/tabs/bmi']); // 跳转到测试BMI页面
+  this.router.navigate(['/tabs/bmi']); 
 }
 
 goTestpage() {
-  this.router.navigate(['/tabs/test']); // 跳转到测试BMI页面
+  this.router.navigate(['/tabs/test']); 
 }
 
 goYtbpage() {
-  this.router.navigate(['/tabs/ytb']); // 跳转到测试BMI页面
+  this.router.navigate(['/tabs/ytb']); 
 }
 
 

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

@@ -54,7 +54,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../ai-chat-component/ai-chat-component.component').then((m) => m.AiChatComponentComponent),
       },
-      
+      {
+        path: 'news',
+        loadComponent: () =>
+          import('../page-news/page-news.component').then((m) => m.PageNewsComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',