workspace/soul-app/src/app/topic-detail2/topic-detail2.component.html

<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>
  <!-- 克服抑郁的方法区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>克服抑郁的方法</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let method of methods">
        <ion-label>
          <h2>{{ method.title }}</h2>
          <p>{{ method.description }}</p>
        </ion-label>
        <ion-icon name="chevron-down" slot="end" (click)="method.expanded = !method.expanded"></ion-icon>
        <ion-item *ngIf="method.expanded">
          <ion-label>{{ method.details }}</ion-label>
        </ion-item>
      </ion-item>
    </ion-list>
  </section>

  <!-- 自助工具区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>自助工具推荐</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let tool of tools">
        <ion-label>
          <h2>{{ tool.name }}</h2>
          <p>{{ tool.description }}</p>
        </ion-label>
        <ion-button slot="end" [href]="tool.link">{{ tool.buttonText }}</ion-button>
      </ion-item>
    </ion-list>
  </section>

  <!-- 资源区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>相关文章和视频</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let resource of resources">
        <ion-label>
          <h2>{{ resource.title }}</h2>
        </ion-label>
        <ion-button slot="end" [href]="resource.link">{{ resource.buttonText }}</ion-button>
      </ion-item>
    </ion-list>
  </section>

  <!-- 社区支持区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>社区讨论</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let discussion of discussions">
        <ion-label>
          <h2>{{ discussion.title }}</h2>
        </ion-label>
        <ion-button slot="end" [href]="discussion.link">参与讨论</ion-button>
      </ion-item>
    </ion-list>
  </section>
</ion-content>