### File

`src/app/home/home.page.ts`

### Metadata

selector | `app-home`
styleUrls | `home.page.scss`
templateUrl | `home.page.html`

### Index

###### Properties

- tasks

###### Methods

- onCheckinClick
- onUnfinishedClick

### Constructor

`constructor()`
Defined in src/app/home/home.page.ts:13

### Methods

onCheckinClick
`onCheckinClick()`
Defined in src/app/home/home.page.ts:21
Returns : `void`

onUnfinishedClick
`onUnfinishedClick()`
Defined in src/app/home/home.page.ts:17
Returns : `void`

### Properties

tasks
Type : `[]`
Default value : `[ { time: '08:00:00', content: '早间任务' }, { time: '12:00:00', content: '中间任务' }, { time: '18:00:00', content: '晚间任务' } ]`
Defined in src/app/home/home.page.ts:9

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
      tasks = [
        { time: '08:00:00', content: '早间任务' },
        { time: '12:00:00', content: '中间任务' },
        { time: '18:00:00', content: '晚间任务' }
      ];

      constructor() {}

      onUnfinishedClick() {
        console.log('未完成按钮点击');
      }

      onCheckinClick() {
        console.log('打卡按钮点击');
      }
    }

    <ion-header>

    </ion-header>

    <ion-content>
      <div class="top-section">
        <div class="left">
          <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">早间任务</div>
          <div class="task-content">中间任务</div>
          <div class="task-content">晚间任务</div>
        </div>
      </div>
      <div class="bottom-section">
        <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>

`home.page.scss`

    ion-content {
        --padding-top: 0;
        --padding-bottom: 0;
        --padding-start: 0;
        --padding-end: 0;

        .top-section {
          display: flex;
          height: 73vh; // 占据3/4的高度

          .left, .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
          }

          .left {
            width: 33.33%; // 左侧宽度1/3
            background-color: #f0f0f0;
          }

          .right {
            width: 66.66%; // 右侧宽度2/3
            background-color: #e0e0e0;
          }

          .task-time, .task-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 33.33%; // 每项高度1/3
            font-size: 1.2em;
          }
        }

        .bottom-section {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 20vh; // 占据1/4的高度

          ion-button {
            width: 40%; // 按钮宽度40%
            height: 40%; // 按钮高度40%
            border-radius: 50%;
            font-size: 1.2em;
          }
        }
      }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""