countdown更新

src/app/countdown/countdown.page.html

@@ -2,10 +2,10 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button (click)="exit()">
-        <ion-icon name="arrow-back-outline"></ion-icon>
+        <ion-icon name="arrow-back" size="large"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>专注倒计时</ion-title>
+    <ion-title color="light">专注倒计时</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -21,10 +21,10 @@
 
     <div class="control-buttons">
       <ion-button (click)="togglePause()" fill="clear">
-        <ion-icon [name]="isRunning ? 'pause-outline' : 'play-outline'"></ion-icon>
+        <ion-icon [name]="isRunning ? 'pause' : 'play'" size="large"></ion-icon>
       </ion-button>
       <ion-button (click)="reset()" fill="clear">
-        <ion-icon name="stop-outline"></ion-icon>
+        <ion-icon name="stop" size="large"></ion-icon>
       </ion-button>
     </div>
   </div>

src/app/countdown/countdown.page.scss

@@ -2,6 +2,35 @@ ion-content {
   --background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
 }
 
+ion-header {
+  position: absolute;
+  
+  ion-toolbar {
+    --background: transparent;
+    --border-style: none;
+    --border-color: transparent;
+    --border-width: 0;
+    --padding-top: 20px;
+    
+    ion-title, ion-button, ion-icon {
+      color: white;
+    }
+    
+    ion-buttons {
+      margin-inline-start: 8px;
+    }
+    
+    ion-button::part(native) {
+      padding: 0;
+    }
+    
+    ion-icon {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
 .countdown-container {
   display: flex;
   flex-direction: column;
@@ -64,6 +93,7 @@ ion-content {
 
       ion-icon {
         font-size: 28px;
+        color: white;
       }
 
       &::part(native) {
@@ -81,20 +111,6 @@ ion-progress-bar {
   overflow: hidden;
 }
 
-ion-header ion-toolbar {
-  --background: transparent;
-  --border-width: 0;
-  
-  ion-title {
-    color: white;
-    font-weight: 500;
-  }
-
-  ion-button {
-    --color: white;
-  }
-}
-
 @keyframes pulse {
   0% {
     transform: scale(1);

src/app/countdown/countdown.page.ts

@@ -5,10 +5,10 @@ import { IonicModule } from '@ionic/angular';
 import { AlertController } from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { 
-  arrowBackOutline, 
-  pauseOutline, 
-  playOutline, 
-  stopOutline 
+  arrowBack,
+  pause, 
+  play,
+  stop
 } from 'ionicons/icons';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
@@ -41,10 +41,10 @@ export class CountdownPage implements OnInit, OnDestroy {
     private focusDataService: FocusDataService
   ) {
     addIcons({ 
-      arrowBackOutline, 
-      pauseOutline, 
-      playOutline, 
-      stopOutline 
+      arrowBack,
+      pause, 
+      play,
+      stop
     });
     this.audio = new Audio('assets/alert.mp3');
   }