src/app/home/home.page.ts
| selector | app-home |
| styleUrls | home.page.scss |
| templateUrl | home.page.html |
Properties |
Methods |
constructor()
|
|
Defined in src/app/home/home.page.ts:13
|
| 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
|
| 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;
}
}
}