workspace/.history/soul-app/src/app/tab1/tab1.page_20241228121144.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 topic of topics">
          <ion-label>
            <h2>{{ topic.title }}</h2>
            <p style="font-size: 16px;">{{ topic.description }}</p>
          </ion-label>
          <ion-buttons slot="end">
          <ion-button class="custom-button" 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-toolbar  class="button-toolbar" style="margin-top: 10px; padding: 0;">
  <ion-buttons slot="start" class="button-container">
    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
    <ion-button expand="full" (click)="goDriftbottle()">漂流瓶</ion-button>
    <ion-button expand="full" >心协</ion-button>
    <ion-button expand="full" >更多</ion-button>
  </ion-buttons>
</ion-toolbar>

<section>
  <ion-card>
    <ion-card-header>
      <ion-toolbar>
      <ion-card-title>用户评价</ion-card-title>
      <ion-buttons slot="end">
        <ion-button (click)="evaluate()" class="custom-button" 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 chatevaluate of chatevaluateList">
          <ion-avatar slot="start">
            <img [src]="chatevaluate.get('avatar') || 'https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/HZFoDv7vkk-0.png'"/>
          </ion-avatar>
          <ion-label>
            <p style="font-size: 16px;">{{ chatevaluate.get('content') }}</p>
            <ion-icon name="star" *ngFor="let star of createFilledArray(chatevaluate.get('rating')); let i = index" [attr.aria-hidden]="true"></ion-icon>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</section>
</ion-content>