15179588180 před 3 měsíci
rodič
revize
950e820907

+ 114 - 7
seeking-app/src/app/tab1/tab1.page.html

@@ -1,17 +1,124 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 1
+      首页
     </ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="notifications"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </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-card>
+    <ion-card-header>
+      <ion-card-title>饮食计划</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-icon slot="start" name="bread"></ion-icon> <!-- 全麦面包 -->
+          <ion-label>早餐:全麦面包 + 牛奶 + 水果</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="pizza"></ion-icon> <!-- 鸡胸肉沙拉 -->
+          <ion-label>午餐:鸡胸肉 + 沙拉</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="fish"></ion-icon> <!-- 蒸鱼 -->
+          <ion-label>晚餐:蒸鱼 + 蔬菜</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 运动计划 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>运动计划</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-icon slot="start" name="walk"></ion-icon> <!-- 跑步 -->
+          <ion-label>早晨:跑步 30 分钟</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="bicycle"></ion-icon> <!-- 瑜伽 -->
+          <ion-label>中午:瑜伽 20 分钟</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="walk"></ion-icon> <!-- 快走 -->
+          <ion-label>晚上:快走 30 分钟</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 身体数据 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>身体数据</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="fitness"></ion-icon> <!-- 体重 -->
+              <ion-label>体重</ion-label>
+              <ion-note slot="end">70kg</ion-note>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="fitness"></ion-icon> <!-- 身高 -->
+              <ion-label>身高</ion-label>
+              <ion-note slot="end">175cm</ion-note>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="fitness"></ion-icon> <!-- 体脂率 -->
+              <ion-label>体脂率</ion-label>
+              <ion-note slot="end">18%</ion-note>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="walk"></ion-icon> <!-- 步数 -->
+              <ion-label>步数</ion-label>
+              <ion-note slot="end">8000步</ion-note>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="flame"></ion-icon> <!-- 卡路里 -->
+              <ion-label>卡路里</ion-label>
+              <ion-note slot="end">500kcal</ion-note>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item lines="none">
+              <ion-icon slot="start" name="water"></ion-icon> <!-- 水分 -->
+              <ion-label>水分</ion-label>
+              <ion-note slot="end">1500ml</ion-note>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+
+
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
 </ion-content>

+ 44 - 2
seeking-app/src/app/tab1/tab1.page.ts

@@ -1,5 +1,26 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonButton,
+  IonIcon,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonFooter,
+  IonButtons
+} from '@ionic/angular/standalone';  // 引入所有需要的Ionic组件
+
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,7 +28,28 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButton,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonNote,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonFooter,
+    IonButtons,
+    ExploreContainerComponent
+  ],
 })
 export class Tab1Page {
   constructor() {}