workspace/.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241228114506.html

<ion-header>
  <ion-toolbar>
    <div class="toolbar-content">
      <div class="button-container">
        <ion-button (click)="goDriftbottle()" fill="clear">
          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
        </ion-button>
      </div>
      <ion-title class="title-text">
        我的漂流瓶
      </ion-title>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
        <h2>我扔出的漂流瓶</h2>
      </ion-label>
    </ion-item>
    
    <section *ngIf="filteredDriftbottles.length > 0">
      <ion-card *ngFor="let bottle of filteredDriftbottles">
        <ion-card-header>
          <ion-card-title>{{ bottle.get('content') }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p>扔出时间: {{ bottle.get('throwtime') }}</p>
        </ion-card-content>
      </ion-card>
    </section>

    <ion-item>
      <ion-label>
        <h2>我捞上的漂流瓶</h2>
      </ion-label>
    </ion-item>
    
    <section *ngIf="filteredDriftbottles2.length > 0">
      <ion-card *ngFor="let bottle of filteredDriftbottles2">
        <ion-card-header>
          <ion-card-title>{{ bottle.get('content') }}</ion-card-title>
        </ion-card-header>
        <ion-card-content class="card-content-with-button">
          <div class="content-section">
            <p>打捞时间: {{ bottle.get('catchtime') }}</p>
          </div>
          <div class="button-section">
            <ion-button (click)="rethrowBottle(bottle)" color="rgb(69, 166, 180)">扔回</ion-button>
          </div>
        </ion-card-content>
      </ion-card>
    </section>
  </ion-list>

  <div style="display: flex; justify-content: center; margin-top: auto;">
    <ion-button (click)="gothrowNewDriftbottle()" expand="full">
      投掷新的漂流瓶
    </ion-button>
  </div>
</ion-content>