fail1

src/app/home/home.page.html

@@ -1,11 +1,20 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      首页
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
-  <p>这是首页内容</p>
+  <div class="top-section">
+    <div class="left">
+      <div class="time-slot">08:00:00 - 09:00:00</div>
+      <div class="time-slot">09:00:00 - 10:00:00</div>
+      <div class="time-slot">10:00:00 - 11:00:00</div>
+    </div>
+    <div class="right">
+      <div class="task-content">任务内容1</div>
+      <div class="task-content">任务内容2</div>
+      <div class="task-content">任务内容3</div>
+    </div>
+  </div>
+
+  <div class="bottom-section">
+    <ion-button expand="block" shape="round" class="left-button">未完成</ion-button>
+    <ion-button expand="block" shape="round" class="center-button">打卡</ion-button>
+    <ion-button expand="block" shape="round" class="right-button">详情</ion-button>
+  </div>
 </ion-content>

src/app/home/home.page.scss

@@ -0,0 +1,66 @@
+ion-content {
+    --background: #ffffff;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  
+    .top-section {
+      display: flex;
+      height: 75%;
+      .left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 16px;
+        .time-slot {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #ccc;
+          margin: 4px 0;
+          border-radius: 8px;
+        }
+      }
+      .right {
+        flex: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 16px;
+        .task-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #ccc;
+          margin: 4px 0;
+          border-radius: 8px;
+        }
+      }
+    }
+  
+    .bottom-section {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 25%;
+      padding: 0 16px;
+      .left-button,
+      .center-button,
+      .right-button {
+        width: 150px;
+        height: 150px;
+        margin: 0 8px;
+        border-radius: 50%;
+        --padding-start: 0;
+        --padding-end: 0;
+        --inner-padding: 0;
+        --margin-top: 8px;
+        --margin-bottom: 8px;
+      }
+    }
+  }
+  

src/app/home/home.page.ts

@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  templateUrl: './home.page.html',
-  styleUrls: ['./home.page.scss'],
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
 })
-export class HomePage implements OnInit {
+export class HomePage {
 
-  constructor() { }
+  tasks = [
+    { time: '08:00:00 - 09:00:00', content: '任务内容1' },
+    { time: '09:00:00 - 10:00:00', content: '任务内容2' },
+    { time: '10:00:00 - 11:00:00', content: '任务内容3' },
+  ];
 
-  ngOnInit() {
-  }
+  constructor() {}
 
 }

src/app/track/track.page.html

@@ -1,11 +1,20 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>
-      轨迹
-    </ion-title>
+    <ion-title>轨迹</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <p>这是轨迹内容</p>
+  <ion-card *ngFor="let track of tracks">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon [name]="track.icon"></ion-icon>
+        {{ track.title }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>{{ track.description }}</p>
+      <p>{{ track.date }}</p>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

src/app/track/track.page.scss

@@ -0,0 +1,15 @@
+ion-card {
+    margin: 10px;
+    border-left: 5px solid var(--ion-color-primary);
+  }
+  
+  ion-card-title {
+    display: flex;
+    align-items: center;
+  
+    ion-icon {
+      margin-right: 10px;
+      color: var(--ion-color-primary);
+    }
+  }
+  

src/app/track/track.page.ts

@@ -1,15 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-track',
   templateUrl: './track.page.html',
   styleUrls: ['./track.page.scss'],
 })
-export class TrackPage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class TrackPage {
+  tracks = [
+    {
+      title: '运动记录',
+      description: '早上跑步5公里',
+      date: '2023-06-21',
+      icon: 'walk-outline' // 根据语义匹配适合的icon
+    },
+    {
+      title: '阅读记录',
+      description: '阅读《深入理解计算机系统》一章',
+      date: '2023-06-20',
+      icon: 'book-outline' // 根据语义匹配适合的icon
+    },
+    {
+      title: '饮食记录',
+      description: '午餐：鸡肉沙拉',
+      date: '2023-06-19',
+      icon: 'restaurant-outline' // 根据语义匹配适合的icon
+    },
+    // 可以根据需求添加更多记录
+  ];
 
+  constructor() {}
 }