FilmTraceExplore/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      首页
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" (click)="navigateToBannerPage('banner1')"><img src="assets/images/homepage/home2_1.jpg" alt="Image 1"></div>
      <div class="swiper-slide" (click)="navigateToBannerPage('banner2')"><img src="assets/images/homepage/home2_2.jpg" alt="Image 2"></div>
      <div class="swiper-slide" (click)="navigateToBannerPage('banner3')"><img src="assets/images/homepage/home2_3.jpg" alt="Image 3"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>



  <!-- 最近更新 -->
  <ion-card>
    <ion-card-header>
      最近更新
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row class="image-row" >
          <ion-col size="4" (click)="navigateToRecentPage('recent1')">
            <ion-img src="assets/images/homepage/home1_1.jpg"></ion-img>
          </ion-col>
          <ion-col size="4" (click)="navigateToRecentPage('recent2')">
            <ion-img src="assets/images/homepage/home1_2.jpg"></ion-img>
          </ion-col>
          <ion-col size="4" (click)="navigateToRecentPage('recent3')">
            <ion-img src="assets/images/homepage/home1_3.jpg"></ion-img>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content> 
  </ion-card>

  <!-- 热门电影 -->
  <ion-card>
    <ion-card-header>
      热门电影
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row class="image-row">
          <ion-col size="4"  (click)="navigateToMoviePage('hotMovie1')">
            <ion-img src="assets/images/homepage/home2_1.jpg"></ion-img>
          </ion-col>
          <ion-col size="4" (click)="navigateToMoviePage('hotMovie2')">
            <ion-img src="assets/images/homepage/home2_2.jpg"></ion-img>
          </ion-col>
          <ion-col size="4" (click)="navigateToMoviePage('hotMovie3')">
            <ion-img src="assets/images/homepage/home2_3.jpg"></ion-img>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 热门地点 -->
  <ion-card>
    <ion-card-header>
      热门地点
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row class="image-row">
          <ion-col size="6" (click)="navigateToLocationPage('location1')">
            <img src="assets/images/homepage/home3_1.jpg" alt="Location 1">
            <p class="image-description">四川九寨沟</p>
          </ion-col>
          <ion-col size="6">
            <ion-row>
              <ion-col size="12" (click)="navigateToLocationPage('location2')">
                <img src="assets/images/homepage/home3_2.jpg" alt="Location 2">
                <p class="image-description">琼台仙谷</p>
              </ion-col>
              <ion-col size="12" (click)="navigateToLocationPage('location3')">
                <img src="assets/images/homepage/home3_3.jpg" alt="Location 3">
                <p class="image-description">云南建水</p>
              </ion-col>
            </ion-row>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="light"  shape="round" (click)="navigateToBlankPage()">more ></ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 热门路线 -->
  <ion-card>
    <ion-card-header>
      热门路线
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row >
          <ion-col size="12" (click)="navigateToRoutePage('route1')">
            <img src="assets/images/homepage/home4_1.jpg" alt="Route 1">
            <p class="image-description">苏州园林，冠绝天下，与古典名著擦出火花，历经几十年而不衰。</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" (click)="navigateToRoutePage('route2')">
            <img src="assets/images/homepage/home4_2.jpg" alt="Route 2">
            <p class="image-description">在纽约有一天可以支配的时间，围绕在中央公园时代广场的电影不下百部，总是要看看的。</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 热门城市 -->
  <ion-card>
    <ion-card-header>
      城市
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="8" class="city-col" (click)="navigateToCityPage('city1')">
            <img src="assets/images/homepage/home5_1.jpg" alt="City 1">
          </ion-col>
          <ion-col size="4">
            <p class="city-name">北京</p>
            <p class="city-name">BeiJing</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="8" class="city-col" (click)="navigateToCityPage('city2')">
            <img src="assets/images/homepage/home5_2.jpg" alt="City 2">
          </ion-col>
          <ion-col size="4">
            <p class="city-name">上海</p>
            <p class="city-name">ShangHai</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="8" class="city-col" (click)="navigateToCityPage('city3')">
            <img src="assets/images/homepage/home5_3.jpg" alt="City 3">
          </ion-col>
          <ion-col size="4">
            <p class="city-name">南昌</p>
            <p class="city-name">NanChang</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>