<ion-header>
  <ion-toolbar>
    <div class="toolbar-content">
      <div class="button-container">
        <ion-button (click)="goTab1()" 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 [fullscreen]="true">

  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>热门话题</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item *ngFor="let topic of topics">
            <ion-label>
              <h2>{{ topic.title }}</h2>
              <p>{{ topic.description }}</p>
            </ion-label>
            <ion-buttons slot="end">
            <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">
              <span class="button-text">查看详情</span>
            </ion-button>
          </ion-buttons>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>

</ion-content>