s202226701008/scene-app/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-avatar src="assets/logo.png" alt="灵思剧境"></ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button routerLink="/home">首页</ion-button>
      <ion-button routerLink="/script-creation">剧本创作</ion-button>
      <ion-button routerLink="/ip-creation">IP打造</ion-button>
      <ion-button routerLink="/game-experience">游戏体验</ion-button>
      <ion-button routerLink="/user-center">用户中心</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 轮播图区域 -->
  <!-- <ion-slides pager>
    <ion-slide>
      <img src="assets/images/landscape.jpg" alt="探索历史，体验沉浸式剧本杀">
      <div class="caption">探索历史，体验沉浸式剧本杀</div>
    </ion-slide>
    <ion-slide>
      <img src="assets/images/game_scene.jpg" alt="与朋友一起解谜，享受乐趣">
      <div class="caption">与朋友一起解谜，享受乐趣</div>
    </ion-slide>
    <ion-slide>
      <img src="assets/images/character.jpg" alt="独特角色，带你走进故事">
      <div class="caption">独特角色，带你走进故事</div>
    </ion-slide>
  </ion-slides> -->

  <!-- 功能介绍区域 -->
  <ion-grid>
    <ion-row>
      <ion-col size="4" *ngFor="let feature of features">
        <ion-card>
          <ion-card-header>
            <ion-icon [name]="feature.icon" slot="start"></ion-icon>
            <ion-card-title>{{ feature.title }}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>{{ feature.description }}</p>
            <ion-button expand="full" routerLink="{{ feature.link }}">了解更多</ion-button>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 推荐剧本区域 -->
  <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>

  <!-- 用户评价区域 -->
  <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>