workspace/.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241227181813.html

<ion-content [fullscreen]="true">
  <div class="top-image">
    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
  </div>
  
  <!-- 左边的按钮 -->
  <div class="button-container left-button" (click)="throwDriftBottleModal()">
    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
  </div>

  <div class="button-container middle-button" (click)="goMydriftbottle()">
    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
      我的漂流瓶
    </ion-button>
  </div>

  <!-- 右边的按钮 -->
  <div class="button-container right-button" (click)="catchDriftBottle()">
    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
  </div>

  <!-- 背景音乐 -->
  <audio id="backgroundAudio" loop>
    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <!-- 弹窗提示 -->
  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
</ion-content>