Просмотр исходного кода

Merge branch 'master' of http://git.fmode.cn:3000/5230275/FilmTraceExplore

5230240 4 месяцев назад
Родитель
Сommit
df9b8b94e6
4 измененных файлов с 53 добавлено и 8 удалено
  1. BIN
      assets/img/shouyeImg/城市猎人.jpg
  2. 7 7
      src/app/tab1/tab1.page.html
  3. 41 1
      src/app/tab1/tab1.page.ts
  4. 5 0
      src/index.html

BIN
assets/img/shouyeImg/城市猎人.jpg


+ 7 - 7
src/app/tab1/tab1.page.html

@@ -52,14 +52,14 @@
     <ion-card-content>
       <ion-grid>
         <ion-row>
-          <ion-col size="4">
-            <!-- 图片位置1 -->
+          <ion-col size="4" (click)="handleImageClick('recentUpdateImage1')">
+            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
           </ion-col>
-          <ion-col size="4">
-            <!-- 图片位置2 -->
+          <ion-col size="4" (click)="handleImageClick('recentUpdateImage2')">
+            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
           </ion-col>
-          <ion-col size="4">
-            <!-- 图片位置3 -->
+          <ion-col size="4" (click)="handleImageClick('recentUpdateImage3')">
+            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -75,7 +75,7 @@
       <ion-grid>
         <ion-row>
           <ion-col size="4">
-            <!-- 图片位置1 -->
+            <ion-img src="assets\shouyeImg\城市猎人.jpg"></ion-img>
           </ion-col>
           <ion-col size="4">
             <!-- 图片位置2 -->

+ 41 - 1
src/app/tab1/tab1.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab1',
@@ -7,6 +8,45 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
-  constructor() {}
+  // constructor() {}
+  
+  constructor(private alertController: AlertController) {}
+
+  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;
+    }
+  }
+
+  async presentAlert(message: string) {
+    const alert = await this.alertController.create({
+      header: '提示',
+      message: message,
+      buttons: ['确定']
+    });
+
+    await alert.present();
+  }
 
 }

+ 5 - 0
src/index.html

@@ -5,6 +5,8 @@
   <meta charset="utf-8" />
   <title>影迹寻踪</title>
 
+  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/7.0.9/swiper-bundle.min.css">
+
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />
@@ -20,6 +22,9 @@
 </head>
 
 <body>
+
+  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/7.0.9/swiper-bundle.min.js"></script>
+
   <app-root></app-root>
 </body>