<ion-header>
  <ion-toolbar>
    <ion-title>任务管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="tasks.length === 0" class="empty-tasks">
    <ion-text color="medium">
      <h2>您的任务空空如也，来添加一些任务吧！</h2>
    </ion-text>
  </div>

  <ion-list *ngIf="tasks.length > 0">
    <ion-item-sliding *ngFor="let task of tasks; let i = index">
      <ion-item>
        <ion-button fill="outline" (click)="editTask(i)" slot="start" class="edit-button">
          <ion-icon name="create-outline"></ion-icon>
        </ion-button>
        <ion-label *ngIf="!task.editing" class="time-label">{{task.startTime}} - {{task.endTime}}</ion-label>
        <div *ngIf="task.editing" class="time-edit">
          <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span> - </span>
          <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
        </div>
        <ion-label *ngIf="!task.editing" class="content-label">{{task.content}}</ion-label>
        <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
        <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
          <ion-icon name="checkmark-outline"></ion-icon>
        </ion-button>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteTask(i)" class="delete-button">删除</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addTask()">
      <ion-icon name="add-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

./tasks.page.scss

ion-content {
  --background: #f0f0f5;

  .empty-tasks {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
  }

  ion-list {
    margin: 20px;

    ion-item {
      --background: #ffffff;
      --border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      height: 100px; /* Increased height for better touch area */
      align-items: center; /* Center content vertically */
      display: flex; /* Use flexbox for vertical alignment */
      font-size: 18px;

      .edit-button, .save-button {
        font-size: 24px;
      }

      .time-label, .content-label, .content-input, .time-input {
        flex: 1; /* Ensure content takes up available space */
        text-align: center; /* Center text horizontally */
      }

      .time-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1; /* Ensure the time-edit div takes up available space */
        font-size: 18px;

        ion-input {
          max-width: 50px;
          margin: 0 5px;
          text-align: center;
          --padding-start: 0;
          --padding-end: 0;
          --border: none; /* Remove underline */
        }

        span {
          margin: 0 5px;
        }
      }
    }
  }

  .delete-button {
    width: 100px; /* Increased width for better touch area */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure button height matches item height */
  }

  ion-fab {
    margin-bottom: 20px;

    ion-fab-button {
      --background: #3880ff;
      --color: white;
    }
  }
}