<ion-header>
  <ion-toolbar>
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>
  <!-- 搜索 -->
  <ion-searchbar></ion-searchbar>

<ion-content>
      <!-- 图片轮播 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" *ngFor="let attraction of attractions">
              <ion-card style="height: 120px;">
                <ion-img [src]="attraction.image" style="width: 100%; height: 100%; object-fit: cover;"></ion-img>
              </ion-card>
            </div>
          </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        
      </div>
      <!-- 图标卡片 -->
      <div class="middle-section">
        <ng-container *ngFor="let chunk of chunkedCards">
          <div class="row">
            <ion-card *ngFor="let card of chunk" class="order-card">
              <ion-card-header class="centered-header">
                <ion-icon [name]="card.icon" class="large-icon"></ion-icon>
                <ion-card-subtitle>{{ card.title }}</ion-card-subtitle>
              </ion-card-header>
            </ion-card>
          </div>
        </ng-container>
      </div>

      <ion-card *ngFor="let item of items" (click)="navigateToShouyeViewPage()">
        <ion-card-header>
          {{ item.title }}
        </ion-card-header>
        <ion-card-content>
          {{ item.description }}
        </ion-card-content>
        <ion-img [src]="item.image"></ion-img>
      </ion-card>

</ion-content>