图片修改和banner设置

package-lock.json

@@ -24,6 +24,7 @@
         "@ionic/angular": "^8.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15482,6 +15483,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -29,6 +29,7 @@
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/place/place.page.html

@@ -21,7 +21,7 @@
       地图
     </ion-card-header>
     <ion-card-content>
-      <img src="assets/images/map.jpg" alt="地图">
+      <img src="assets/images/place/place1.jpg" alt="地图">
     </ion-card-content>
   </ion-card>
 

src/app/tab1/tab1.page.html

@@ -8,41 +8,16 @@
 
 
 <ion-content>
-
-
-   <!-- Swiper轮播图 -->
-   <div class="swiper-container">
+  <div class="swiper-container">
     <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
+      <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>
-    <!-- Add Pagination -->
     <div class="swiper-pagination"></div>
   </div>
 
-  <script>        
-    var mySwiper = new Swiper ('.swiper', {
-      direction: 'vertical', // 垂直切换选项
-      loop: true, // 循环模式选项
-      
-      // 如果需要分页器
-      pagination: {
-        el: '.swiper-pagination',
-      },
-      
-      // 如果需要前进后退按钮
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-      
-      // 如果需要滚动条
-      scrollbar: {
-        el: '.swiper-scrollbar',
-      },
-    })        
-    </script>
+
 
   <!-- 最近更新 -->
   <ion-card>
@@ -51,19 +26,19 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row>
+        <ion-row class="image-row">
           <ion-col size="4" (click)="handleImageClick('recentUpdateImage1')">
-            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
+            <ion-img src="assets/images/homepage/home1_1.jpg"></ion-img>
           </ion-col>
           <ion-col size="4" (click)="handleImageClick('recentUpdateImage2')">
-            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
+            <ion-img src="assets/images/homepage/home1_2.jpg"></ion-img>
           </ion-col>
           <ion-col size="4" (click)="handleImageClick('recentUpdateImage3')">
-            <ion-img src="assets\img\shouyeImg\城市猎人.jpg"></ion-img>
+            <ion-img src="assets/images/homepage/home1_3.jpg"></ion-img>
           </ion-col>
         </ion-row>
       </ion-grid>
-    </ion-card-content>
+    </ion-card-content> 
   </ion-card>
 
   <!-- 热门电影 -->
@@ -73,15 +48,15 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row>
+        <ion-row class="image-row">
           <ion-col size="4">
-            <ion-img src="assets\shouyeImg\城市猎人.jpg"></ion-img>
+            <ion-img src="assets/images/homepage/home2_1.jpg"></ion-img>
           </ion-col>
           <ion-col size="4">
-            <!-- 图片位置2 -->
+            <ion-img src="assets/images/homepage/home2_2.jpg"></ion-img>
           </ion-col>
           <ion-col size="4">
-            <!-- 图片位置3 -->
+            <ion-img src="assets/images/homepage/home2_3.jpg"></ion-img>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -95,7 +70,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row>
+        <ion-row class="image-row">
           <ion-col size="4">
             <!-- 图片位置1 -->
           </ion-col>
@@ -117,7 +92,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row>
+        <ion-row class="image-row">
           <ion-col size="4">
             <!-- 图片位置1 -->
           </ion-col>
@@ -139,7 +114,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-grid>
-        <ion-row>
+        <ion-row class="image-row">
           <ion-col size="4">
             <!-- 图片位置1 -->
           </ion-col>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,28 @@
+.swiper-container {
+    width: 100%;
+    height: 200px; /* 设置轮播图高度 */
+  }
+  
+  .swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 图片填充方式 */
+  }
+
+
+.image-row {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .image-row ion-col {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .image-row img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 保持图片比例并填充整个容器 */
+  }

src/app/tab1/tab1.page.ts

@@ -1,12 +1,15 @@
-import { Component } from '@angular/core';
+// import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 
+import { Component, OnInit } from '@angular/core';
+import Swiper from 'swiper';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
 
   // constructor() {}
   
@@ -49,4 +52,18 @@ export class Tab1Page {
     await alert.present();
   }
 
+  ngOnInit() {
+    const swiper = new Swiper('.swiper-container', {
+      loop: true,
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,  
+      },
+      autoplay: {
+        delay: 2000, // 设置轮播时间为2秒
+      },
+      speed: 1000, // 设置过渡速度为1000ms
+    });
+  }
+
 }

src/app/tab2/tab2.page.html

@@ -14,7 +14,7 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/movie1.jpg">
+            <img src="assets/images/movie/movie1.jpg">
           </ion-thumbnail>
           <ion-label>
             <h2>隐秘的角落</h2>
@@ -26,7 +26,7 @@
         <!-- 其他推荐电影 -->
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/movie2.jpg">
+            <img src="assets/images/movie/movie2.jpg">
           </ion-thumbnail>
           <ion-label>
             <h2>周处除三害</h2>
@@ -69,7 +69,7 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/movie3.jpg">
+            <img src="assets/images/movie/movie3.jpg">
           </ion-thumbnail>
           <ion-label>
             <h2>龙兄虎弟</h2>
@@ -81,7 +81,7 @@
         <!-- 其他热门电影 -->
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/movie4.jpg">
+            <img src="assets/images/movie/movie4.jpg">
           </ion-thumbnail>
           <ion-label>
             <h2>你的名字</h2>

src/app/tab3/tab3.page.html

@@ -24,7 +24,7 @@
       <ion-list>
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="assets/images/beijing.jpg">
+            <img src="assets/images/city/beijing.jpg">
           </ion-thumbnail>
           <ion-label>
             北京

src/index.html

@@ -6,6 +6,8 @@
   <title>影迹寻踪</title>
 
   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/7.0.9/swiper-bundle.min.css">
+<!-- swiper -->
+
 
   <base href="/" />