update: home

src/app/app-routing.module.ts

@@ -11,8 +11,8 @@ const routes: Routes = [
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
   },
   {
-    path: 'track',
-    loadChildren: () => import('./track/track.module').then( m => m.TrackPageModule)
+    path: 'tasks',
+    loadChildren: () => import('./tasks/tasks.module').then( m => m.TasksPageModule)
   },
   {
     path: 'services',

src/app/home/home.page.html

@@ -1,20 +1,30 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      首页
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
   <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 class="task-time">08:00:00 - 11:30:00</div>
+      <div class="task-time">12:00:00 - 17:30:00</div>
+      <div class="task-time">18:00:00 - 11:30: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 class="task-content">早间任务</div>
+      <div class="task-content">中间任务</div>
+      <div class="task-content">晚间任务</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>
+    <ion-button expand="block" shape="round" color="danger" class="unfinished-button">
+      未完成
+    </ion-button>
+    <ion-button expand="block" shape="round" color="success" class="checkin-button">
+      打卡
+    </ion-button>
   </div>
 </ion-content>

src/app/home/home.page.scss

@@ -1,44 +1,36 @@
 ion-content {
-    --background: #ffffff;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --padding-start: 0;
+    --padding-end: 0;
   
     .top-section {
       display: flex;
-      height: 75%;
-      .left {
-        flex: 1;
+      height: 75vh; // 占据3/4的高度
+  
+      .left, .right {
         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;
-        }
+        align-items: center;
+      }
+  
+      .left {
+        width: 33.33%; // 左侧宽度1/3
+        background-color: #f0f0f0;
       }
+  
       .right {
-        flex: 2;
+        width: 66.66%; // 右侧宽度2/3
+        background-color: #e0e0e0;
+      }
+  
+      .task-time, .task-content {
         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;
-        }
+        justify-content: center;
+        align-items: center;
+        height: 33.33%; // 每项高度1/3
+        font-size: 1.2em;
       }
     }
   
@@ -46,20 +38,13 @@ ion-content {
       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;
+      height: 25vh; // 占据1/4的高度
+  
+      ion-button {
+        width: 40%; // 按钮宽度40%
+        height: 40%; // 按钮高度40%
         border-radius: 50%;
-        --padding-start: 0;
-        --padding-end: 0;
-        --inner-padding: 0;
-        --margin-top: 8px;
-        --margin-bottom: 8px;
+        font-size: 1.2em;
       }
     }
   }

src/app/home/home.page.ts

@@ -6,13 +6,19 @@ import { Component } from '@angular/core';
   styleUrls: ['home.page.scss'],
 })
 export class HomePage {
-
   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' },
+    { time: '08:00:00', content: '早间任务' },
+    { time: '12:00:00', content: '中间任务' },
+    { time: '18:00:00', content: '晚间任务' }
   ];
 
   constructor() {}
 
+  onUnfinishedClick() {
+    console.log('未完成按钮点击');
+  }
+
+  onCheckinClick() {
+    console.log('打卡按钮点击');
+  }
 }

src/app/profile/profile.page.html

@@ -1,11 +1,13 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      我的
-    </ion-title>
+    <ion-title>profile</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <p>这是我的内容</p>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">profile</ion-title>
+    </ion-toolbar>
+  </ion-header>
 </ion-content>

src/app/services/services.page.html

@@ -1,11 +1,13 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      服务
-    </ion-title>
+    <ion-title>services</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <p>这是服务内容</p>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">services</ion-title>
+    </ion-toolbar>
+  </ion-header>
 </ion-content>

src/app/tabs/tabs-routing.module.ts

@@ -12,8 +12,8 @@ const routes: Routes = [
         loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
       },
       {
-        path: 'track',
-        loadChildren: () => import('../track/track.module').then(m => m.TrackPageModule)
+        path: 'tasks',
+        loadChildren: () => import('../tasks/tasks.module').then(m => m.TasksPageModule)
       },
       {
         path: 'services',

src/app/tabs/tabs.page.html

@@ -5,9 +5,9 @@
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="track">
-      <ion-icon name="map"></ion-icon>
-      <ion-label>轨迹</ion-label>
+    <ion-tab-button tab="tasks">
+      <ion-icon name="clipboard"></ion-icon>
+      <ion-label>任务</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="services">

src/app/track/track-routing.module.ts → src/app/tasks/tasks-routing.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { TrackPage } from './track.page';
+import { TasksPage } from './tasks.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: TrackPage
+    component: TasksPage
   }
 ];
 
@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class TrackPageRoutingModule {}
+export class TasksPageRoutingModule {}

src/app/track/track.module.ts → src/app/tasks/tasks.module.ts

@@ -4,17 +4,17 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { TrackPageRoutingModule } from './track-routing.module';
+import { TasksPageRoutingModule } from './tasks-routing.module';
 
-import { TrackPage } from './track.page';
+import { TasksPage } from './tasks.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    TrackPageRoutingModule
+    TasksPageRoutingModule
   ],
-  declarations: [TrackPage]
+  declarations: [TasksPage]
 })
-export class TrackPageModule {}
+export class TasksPageModule {}

src/app/tasks/tasks.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>tasks</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">tasks</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/track/track.page.spec.ts → src/app/tasks/tasks.page.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TrackPage } from './track.page';
+import { TasksPage } from './tasks.page';
 
-describe('TrackPage', () => {
-  let component: TrackPage;
-  let fixture: ComponentFixture<TrackPage>;
+describe('TasksPage', () => {
+  let component: TasksPage;
+  let fixture: ComponentFixture<TasksPage>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrackPage);
+    fixture = TestBed.createComponent(TasksPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tasks/tasks.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tasks',
+  templateUrl: './tasks.page.html',
+  styleUrls: ['./tasks.page.scss'],
+})
+export class TasksPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/track/track.page.html

@@ -1,20 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>轨迹</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <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

@@ -1,15 +0,0 @@
-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,32 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-track',
-  templateUrl: './track.page.html',
-  styleUrls: ['./track.page.scss'],
-})
-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() {}
-}