首页界面制作

src/app/tab1/tab1.page.html

@@ -10,9 +10,9 @@
 <ion-content>
   <div class="swiper-container">
     <div class="swiper-wrapper">
-      <div class="swiper-slide"><img src="assets/images/homepage/home2_1.jpg" alt="Image 1"></div>
-      <div class="swiper-slide"><img src="assets/images/homepage/home2_2.jpg" alt="Image 2"></div>
-      <div class="swiper-slide"><img src="assets/images/homepage/home2_3.jpg" alt="Image 3"></div>
+      <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>
@@ -26,17 +26,22 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row class="image-row">
-          <ion-col size="4" (click)="handleImageClick('recentUpdateImage1')">
+        <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)="handleImageClick('recentUpdateImage2')">
+          <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)="handleImageClick('recentUpdateImage3')">
+          <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="primary" (click)="navigateToBlankPage()">更多</ion-button>
+          </ion-col>
+        </ion-row>
       </ion-grid>
     </ion-card-content> 
   </ion-card>
@@ -49,16 +54,21 @@
     <ion-card-content>
       <ion-grid>
         <ion-row class="image-row">
-          <ion-col size="4">
+          <ion-col size="4"  (click)="navigateToMoviePage('hotMovie1')">
             <ion-img src="assets/images/homepage/home2_1.jpg"></ion-img>
           </ion-col>
-          <ion-col size="4">
+          <ion-col size="4" (click)="navigateToMoviePage('hotMovie2')">
             <ion-img src="assets/images/homepage/home2_2.jpg"></ion-img>
           </ion-col>
-          <ion-col size="4">
+          <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="primary" (click)="navigateToBlankPage()">更多</ion-button>
+          </ion-col>
+        </ion-row>
       </ion-grid>
     </ion-card-content>
   </ion-card>
@@ -71,14 +81,26 @@
     <ion-card-content>
       <ion-grid>
         <ion-row class="image-row">
-          <ion-col size="4">
-            <!-- 图片位置1 -->
+          <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="4">
-            <!-- 图片位置2 -->
+          <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-col size="4">
-            <!-- 图片位置3 -->
+        </ion-row>
+        <ion-row>
+          <ion-col size="12">
+            <ion-button expand="full" color="primary" (click)="navigateToBlankPage()">更多</ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -92,37 +114,64 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row class="image-row">
-          <ion-col size="4">
-            <!-- 图片位置1 -->
+        <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-col size="4">
-            <!-- 图片位置2 -->
+        </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-col size="4">
-            <!-- 图片位置3 -->
+        </ion-row>
+        <ion-row>
+          <ion-col size="12">
+            <ion-button expand="full" color="primary" (click)="navigateToBlankPage()">更多</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-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">
-            <!-- 图片位置1 -->
+            <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">
-            <!-- 图片位置2 -->
+            <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">
-            <!-- 图片位置3 -->
+            <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="primary" (click)="navigateToBlankPage()">更多</ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>

src/app/tab1/tab1.page.scss

@@ -25,4 +25,17 @@
     width: 100%;
     height: 100%;
     object-fit: fill; /* 保持图片比例并填充整个容器 */
-  }
+  }
+
+  .city-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  
+  .city-name {
+    text-align: center;
+    font-weight: bold;
+  }

src/app/tab1/tab1.page.ts

@@ -1,8 +1,9 @@
 // import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+// import { AlertController } from '@ionic/angular';
 
 import { Component, OnInit } from '@angular/core';
 import Swiper from 'swiper';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab1',
@@ -11,45 +12,42 @@ import Swiper from 'swiper';
 })
 export class Tab1Page implements OnInit {
 
-  // constructor() {}
-  
-  constructor(private alertController: AlertController) {}
+  constructor(private router: Router) {}
 
-  handleImageClick(imageId: string) {
-    // 根据不同的图片ID执行不同的交互逻辑
-    switch (imageId) {
-      case 'recentUpdateImage1':
-        this.presentAlert('最近更新图片1被点击了！');
-        break;
-      case 'recentUpdateImage2':
-        this.presentAlert('最近更新图片2被点击了！');
-        break;
-      case 'recentUpdateImage3':
-        this.presentAlert('最近更新图片3被点击了！');
-        break;
-      case 'hotMoviesImage1':
-        this.presentAlert('热门电影图片1被点击了！');
-        break;
-      case 'hotMoviesImage2':
-        this.presentAlert('热门电影图片2被点击了！');
-        break;
-      case 'hotMoviesImage3':
-        this.presentAlert('热门电影图片3被点击了！');
-        break;
-      default:
-        // 默认情况
-        break;
-    }
+  navigateToBannerPage(banner: string) {
+    // 导航到对应的Banner页面
+    console.log('Navigating to Banner page: ' + banner);
   }
 
-  async presentAlert(message: string) {
-    const alert = await this.alertController.create({
-      header: '提示',
-      message: message,
-      buttons: ['确定']
-    });
+  navigateToRecentPage(recent: string) {
+    // 导舓到对应的最近更新页面
+    console.log('Navigating to Recent page: ' + recent);
+  }
+
+  navigateToMoviePage(hotMovie: string) {
+    // 导航到对应的电影页面
+    console.log('Navigating to Movie page: ' + hotMovie);
+  }
+
+  navigateToLocationPage(location: string) {
+    // 导航到对应的热门地点页面
+    console.log('Navigating to Location page: ' + location);
+  }
+
+  navigateToRoutePage(route: string) {
+    // 导航到对应的热门路线页面
+    console.log('Navigating to Route page: ' + route);
+  }
+
+  navigateToCityPage(city: string) {
+    // 导航到对应的热门城市页面
+    console.log('Navigating to City page: ' + city);
+  }
 
-    await alert.present();
+  //点击更多时，默认跳
+  navigateToBlankPage() {
+    // 导航到空白页面
+    console.log('Navigating to Blank page');
   }
 
   ngOnInit() {