fix：tab1

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

@@ -1,4 +1,3 @@
-
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
@@ -7,12 +6,22 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content class="ion-padding">
+    <div class="header">
+        <img src="path/to/your/image.jpg" alt="悦食 App 图片"> <!-- 替换为您的图片路径 -->
+        <h1>欢迎使用悦食 App</h1>
+    </div>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content> 
+    <div class="content">
+        <h2>个性化饮食建议</h2>
+        <p>通过我们的应用，您可以获得专业的饮食建议，帮助您实现健康饮食与营养平衡。</p>
+        
+        <h2>营养追踪</h2>
+        <p>记录您的每日饮食，实时监测营养摄入情况。</p>
+        
+        <h2>开始您的健康之旅</h2>
+        <ion-button expand="full" (click)="goToPage1()">
+          开始饮食分析
+        </ion-button>
+    </div>
+</ion-content>

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

@@ -0,0 +1,43 @@
+.header {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.header img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px; /* 添加圆角效果 */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
+}
+
+.content {
+    background-color: #ffffff; /* 内容背景色 */
+    border-radius: 10px; /* 圆角 */
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 内容框阴影 */
+    margin-top: 20px; /* 与顶部间距 */
+}
+
+h1 {
+    font-size: 24px;
+    color: #4CAF50; /* 绿色字体 */
+    margin: 10px 0;
+}
+
+h2 {
+    font-size: 20px;
+    color: #333; /* 深色字体 */
+    margin: 15px 0 5px;
+}
+
+p {
+    font-size: 16px;
+    color: #666; /* 灰色字体 */
+    margin-bottom: 15px;
+}
+
+ion-button {
+    --background: #4CAF50; /* 按钮背景色 */
+    --color: white; /* 按钮字体颜色 */
+    --border-radius: 20px; /* 按钮圆角 */
+}

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

@@ -1,14 +1,26 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Router } from '@angular/router';
+import { IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonButton],
 })
 export class Tab1Page {
-  constructor() {}
+
+  constructor(private router: Router) {} 
+goToPage1(){
+this.router.navigate(['/tabs/eatadvice'])
+//   goToPage2(){
+//       this.router.navigate(['/tabs/inquiry'])
+//     }
+}
  }
+
+
+