workspace/.history/soul-app/src/app/tab1/tab1.page_20241210113940.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 [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 consultant of consultants">
          <ion-avatar slot="start">
            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
          </ion-avatar>
          <ion-label>
            <h2>{{ consultant.name }}</h2>
            <p>{{ consultant.fields.join(', ') }}</p>
          </ion-label>
          <ion-button slot="end" (click)="clickToConsult()">点击咨询</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>
      <ion-list>
        <ion-item *ngFor="let topic of topics">
          <ion-label>
            <h2>{{ topic.title }}</h2>
            <p>{{ topic.description }}</p>
          </ion-label>
          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</section>

<section>
  <ion-card>
    <ion-card-header>
      <ion-toolbar>
      <ion-card-title>用户评价</ion-card-title>
      <ion-buttons slot="end">
        <ion-button (click)="evaluate()" color="primary" fill="solid">
          <span class="button-text">进入评价</span>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let review of reviews">
          <ion-avatar slot="start">
            <img [src]="review.avatar" alt="用户头像"/>
          </ion-avatar>
          <ion-label>
            <p>{{ review.content }}</p>
            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</section>
</ion-content>