202226701045/src/app/tab1/card-detail/card-detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ content.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h2>{{ content.title }}</h2>
  <h3>编者: {{ content.editor }}</h3>
  <p>{{ content.detail }}</p>
  <p>日期: {{ content.date }} - {{ content.issue }}</p>

  <ion-list>
    <ion-item *ngFor="let image of content.images">
      <ion-thumbnail slot="start">
        <img [src]="image" />
      </ion-thumbnail>
    </ion-item>

    <ion-item *ngIf="content.video">
      <video controls [src]="content.video"></video>
    </ion-item>

    <ion-item *ngIf="content.audio">
      <audio controls [src]="content.audio"></audio>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="prevContent()">
      <ion-button>前一期</ion-button>
    </ion-buttons>
    <ion-buttons slot="end" (click)="nextContent()">
      <ion-button>后一期</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>