<ion-header>
  <ion-toolbar>
    <ion-title>提升自信心的技巧</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 提升自信心的技巧区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>提升自信心的技巧</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let tip of tips">
        <ion-label>
          <h2>{{ tip.title }}</h2>
          <p>{{ tip.description }}</p>
        </ion-label>
        <ion-icon name="chevron-down" slot="end" (click)="tip.expanded = !tip.expanded"></ion-icon>
        <ion-item *ngIf="tip.expanded">
          <ion-label>{{ tip.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>