tab1新闻版块更新

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

@@ -1,4 +1,4 @@
-<ion-header style="background-color: #1e1e1e;">
+<ion-header style="background-color: #fffefe;">
   <ion-toolbar color="dark">
     <ion-title>Fearless</ion-title>
   </ion-toolbar>
@@ -37,14 +37,15 @@
     </ion-segment-button>
   </ion-segment>
 
-  <div *ngIf="selectedTab === 'fitnessTips'" style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px 0; border-radius: 15px;">
+  <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: #fff5e1;">
+      <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>{{ tip.description }}</p>
+        <ion-button expand="full" color="primary" (click)="goToFitnessTipDetail(tip)">查看详情</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
@@ -61,6 +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-card-content>
           </ion-card>
         </ion-col>
@@ -74,11 +76,12 @@
       <ion-row>
         <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: #ff6f61;">
+            <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: #ffe8e0;">
               <p>{{ tutorial.description }}</p>
+              <ion-button expand="full" color="primary" (click)="goToRecoveryTutorialDetail(tutorial)">查看详情</ion-button>
             </ion-card-content>
           </ion-card>
         </ion-col>

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.ts

@@ -80,47 +80,18 @@ export class Tab1Page implements OnInit {
     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();
+  // 跳转到健身技巧详情页面
+  goToFitnessTipDetail(tip: any): void {
+    this.router.navigate(['/fitness-tip-detail', { title: tip.title, description: tip.description }]); // 替换为实际的路由路径
   }
 
-  // 显示成功提示
-  async showAlert(header: string, message: string): Promise<void> {
-    const alert = await this.alertController.create({
-      header: header,
-      message: message,
-      buttons: ['确定']
-    });
-    await alert.present();
+  // 跳转到体育新闻详情页面
+  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 }]); // 替换为实际的路由路径
   }
 }