2

src/app/tab1/tab1.page.html

@@ -1,26 +1,25 @@
 <ion-header>
-  <ion-toolbar>
-    <ion-title>任务管理</ion-title>
+  <ion-toolbar color="light">
+    <ion-title>番茄任务</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="openAddTaskModal()">
-        <ion-icon name="add-outline"></ion-icon>
-        新建任务
+        <ion-icon slot="icon-only" name="add-outline"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-list>
+  <ion-list lines="none">
     <ion-item-sliding *ngFor="let task of tasks">
-      <ion-item>
-        <ion-checkbox [(ngModel)]="task.completed" (ionChange)="toggleTaskCompletion(task)"></ion-checkbox>
+      <ion-item class="task-item">
+        <ion-checkbox slot="start" [(ngModel)]="task.completed" (ionChange)="toggleTaskCompletion(task)"></ion-checkbox>
         <ion-label class="task-label">
           <h2 [class.strikethrough]="task.completed">{{ task.title }}</h2>
           <p>开始: {{ task.startTime | date:'yyyy-MM-dd HH:mm' }}</p>
           <p>截止: {{ task.endTime | date:'yyyy-MM-dd HH:mm' }}</p>
         </ion-label>
-        <ion-badge [color]="getTaskStatus(task)">{{ getTaskStatusText(task) }}</ion-badge>
+        <ion-badge slot="end" [color]="getTaskStatus(task)">{{ getTaskStatusText(task) }}</ion-badge>
       </ion-item>
       
       <ion-item-options side="end">
@@ -40,7 +39,7 @@
 <ion-modal [isOpen]="isModalOpen">
   <ng-template>
     <ion-header>
-      <ion-toolbar>
+      <ion-toolbar color="light">
         <ion-title>新建任务</ion-title>
         <ion-buttons slot="end">
           <ion-button (click)="cancelModal()">取消</ion-button>

src/app/tab1/tab1.page.scss

@@ -1,103 +1,31 @@
-// 设置整体背景色
-ion-content {
-  --background: #f0f5ff;
+.task-item {
+  --background: var(--ion-color-light);
+  border-radius: 8px;
+  margin: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-// 美化任务卡片
-ion-item {
-  --background: rgba(255, 255, 255, 0.9);
-  margin: 8px 12px;
-  border-radius: 12px;
-  --border-radius: 12px;
-  --padding-start: 12px;
-  --inner-padding-end: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+.task-label h2 {
+  font-weight: bold;
+  margin: 0;
+  color: var(--ion-color-dark);
 }
 
-// 美化复选框
-ion-checkbox {
-  --size: 22px;
-  --checkbox-background-checked: var(--ion-color-primary);
-  --border-radius: 6px;
-  --border-color: #d1d1d1;
-  --border-color-checked: var(--ion-color-primary);
+.task-label p {
+  margin: 0;
+  color: var(--ion-color-medium);
 }
 
-// 任务标签样式
-.task-label {
-  margin-left: 12px;
-  
-  h2 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 500;
-    color: #2c3e50;
-  }
-  
-  p {
-    margin: 4px 0;
-    font-size: 13px;
-    color: #7f8c8d;
-  }
-}
-
-// 已完成任务样式
 .strikethrough {
   text-decoration: line-through;
-  color: #bdc3c7;
+  color: var(--ion-color-medium);
 }
 
-// 状态标签样式
 ion-badge {
-  margin-left: 8px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-weight: normal;
-  font-size: 12px;
-}
-
-// 空状态提示样式
-.ion-text-center {
-  margin-top: 40px;
-  
-  p {
-    color: #7f8c8d;
-    font-size: 15px;
-  }
-}
-
-// 模态框样式
-ion-modal {
-  ion-datetime {
-    margin: 8px 0;
-  }
-  
-  ion-input {
-    margin-top: 4px;
-  }
-  
-  ion-button {
-    margin: 20px 0;
-  }
+  font-size: 0.8em;
 }
 
-// 顶部工具栏样式
 ion-toolbar {
-  --background: rgba(255, 255, 255, 0.95);
-  
-  ion-title {
-    font-weight: 600;
-    color: #2c3e50;
-  }
-}
-
-// 列表容器样式
-ion-list {
-  background: transparent;
-  padding: 8px 0;
-}
-
-// 滑动删除按钮样式
-ion-item-option {
-  --background: #ff6b6b;
+  --background: var(--ion-color-light);
+  --color: var(--ion-color-dark);
 }