<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-avatar src="assets/logo.png" alt="灵思剧境"></ion-avatar>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content>


<h1>推荐剧本</h1>
  <!-- 推荐剧本区域 -->
  <ion-list>
    <ion-item-sliding *ngFor="let script of scripts">
      <ion-item>
        <ion-thumbnail slot="start">
          <img [src]="script.coverImage" alt="{{ script.title }}">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ script.title }}</h2>
          <p>{{ script.description }}</p>
        </ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option (click)="startExperience(script)">立即体验</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
<h1>用户评价</h1>
  <!-- 用户评价区域 -->
  <ion-list>
    <ion-item *ngFor="let review of reviews">
      <ion-avatar slot="start">
        <img [src]="review.avatar" alt="{{ review.username }}">
      </ion-avatar>
      <ion-label>
        <h2>{{ review.username }}</h2>
        <p>{{ review.content }}</p>
        <p>{{review.rating}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

  <!-- 底部区域 -->
  <ion-footer>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button routerLink="/about">关于我们</ion-button>
        <ion-button routerLink="/contact">联系我们</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-icon name="logo-wechat"></ion-icon>
        <ion-icon name="logo-weibo"></ion-icon>
      </ion-buttons>
      <div class="copyright">© 2024 灵思剧境. 保留所有权利.</div>
    </ion-toolbar>
  </ion-footer>
</ion-content>
                         