workspace/soul-app/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-item lines="none">
      <!-- 图片 -->
      <ion-avatar slot="start" class="image-container">
        <img src="/assets/img/3.png" alt="Your Image" class="header-image">
      </ion-avatar>
      <!-- 搜索框 -->
      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 智能陪聊区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>智能陪聊</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>以下是一些专业性的的智能心理陪聊师：</p>
        <ion-list>
          <ion-item *ngFor="let chatpartner of chatpartnerList">
            <ion-avatar slot="start">
              <img [src]="chatpartner.get('avatar') || '/assets/img/2.png'" [alt]="chatpartner.get('name')"/>
            </ion-avatar>
            <ion-label>
              <h2>{{ chatpartner.get('name') }}</h2>
              <p>专业领域：{{ chatpartner.get('expertise') }}</p>
            </ion-label>
            <ion-button slot="end" (click)="clickToConsult(chatpartner)">开始陪聊</ion-button>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 陪聊服务区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>普通聊天</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>在这里，无论是生活上的开心，还是工作上的糟糕，你都可以跟我分享，这里是属于你一个人的空间，你可以大胆放心的使用。</p>
        <ion-button expand="full" (click)="goChat()">开始聊天</ion-button>
      </ion-card-content>
    </ion-card>
  </section>

  <!--普通心理问题的小贴心建议建议区-->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>小贴心建议</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item *ngFor="let question of questions" (click)="question.expanded = !question.expanded">
            <ion-label>
              <h2>{{ question.title }}</h2>
              <p *ngIf="question.expanded">{{ question.advice }}</p>
            </ion-label>
            <ion-icon name="chevron-down" slot="end" *ngIf="!question.expanded"></ion-icon>
            <ion-icon name="chevron-up" slot="end" *ngIf="question.expanded"></ion-icon>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>
</ion-content>