更换首页图片

src/components/home/banner.vue

@@ -9,9 +9,28 @@
         />
       </video> -->
       <!-- <img src="@/assets/img/home/gameWeb_KV.png" alt=""> -->
+      <!-- :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="true" -->
+      <swiper
+        :loop="true"
+        :spaceBetween="10"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
+        :thumbs="{ swiper: thumbsSwiper }"
+        :modules="modules"
+        @slideChange="onSlideChange"
+        class="mySwiper2"
+      >
+        <swiper-slide
+          v-for="(slideContent, index) in weaponListBig"
+          :key="index"
+        >
+          <div class="weapon-name">
+            <img :src="slideContent.url" alt="" />
+          </div>
+        </swiper-slide>
+      </swiper>
     </div>
 
-    <div class="overlay">
+    <div class="overlay" v-if="selectWeaponIdenx == 0">
       <div class="game-title-img">
         <!-- <img
           src="../../assets/img/home/gameWeb_p1_slogan.png"
@@ -19,7 +38,7 @@
         /> -->
         <!-- <a href="https://mint.counterfire.games/" target="_blank" rel="noopener noreferrer"> -->
           <img
-            src="../../assets/img/home/new-img/gameWeb_p1_slogan.png"
+            src="@/assets/img/home/new-img/gameWeb_p1_slogan.png"
             alt="Game Background"
           />
         <!-- </a> -->
@@ -45,11 +64,49 @@
         <!-- <div class="poster poster-there"></div> -->
       </div>
     </div>
+
+    <div class="overlay overlay-one" v-if="selectWeaponIdenx == 1">
+      <div class="game-title-img-one">
+        <span @click="linkMedium"></span>
+        <img
+            src="@/assets/img/home/new-img/gameWeb_p1_slogan_1.png"
+            alt="Game Background"
+          />
+      </div>
+
+      <div class="download-buttons">
+        <button class="btn android-btn" @click="downloadGame('Android')">
+          <!-- Android -->
+        </button>
+        <button
+          class="btn google-play-btn"
+          @click="downloadGame('Google Play')"
+        >
+          <!-- GET IT ON Google Play -->
+        </button>
+        <button class="btn app-store-btn" @click="downloadGame('App Store')">
+          <!-- GET IT ON App Store -->
+        </button>
+      </div>
+      <div class="posters">
+        <div class="poster poster-one"></div>
+        <div class="poster poster-tow"></div>
+        <!-- <div class="poster poster-there"></div> -->
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import Weapon3dLoader from "./WeaponModelLoader.vue";
+import { FreeMode, Navigation, Thumbs, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+const modules = [FreeMode, Navigation, Thumbs, Autoplay];
 
 const downloadGame = (platform) => {
   if (platform == "Android") {
@@ -62,6 +119,32 @@ const downloadGame = (platform) => {
     window.open("https://apps.apple.com/app/counter%20fire/id6444462915");
   }
 };
+
+const linkMedium = () => {
+  window.open("https://link.medium.com/EC7a8auq3Nb");
+}
+
+const weaponListBig = ref([
+  {
+    url: new URL(
+      "@/assets/img/home/gameWeb_KV.png",
+      import.meta.url
+    ).href,
+  },
+  {
+    url: new URL(
+      "@/assets/img/home/gameWeb_KV2(1).jpg",
+      import.meta.url
+    ).href,
+  }
+]);
+
+const selectWeaponIdenx = ref(0);
+const onSlideChange = (swiper) => {
+  console.log("Slide changed to index:", swiper.realIndex);
+  selectWeaponIdenx.value = swiper.realIndex;
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -75,21 +158,26 @@ const downloadGame = (platform) => {
     // padding-top: 84px;
     height: 100%;
     // background: url('../../assets/img/home/gameWeb_KV.png') no-repeat;
-    background: url('@/assets/img/home/gameWeb_KV.png') no-repeat;
+    // background: url('@/assets/img/home/gameWeb_KV.png') no-repeat;
-    background-size: 100% 100%;
+    // background-size: 100% 100%;
     video {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+    .swiper {
+      height: 100%;
+      .weapon-name {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
         }
-  .game-title-img {
-    width: 818px;
-    height: 332px;
-    margin-bottom: 23px;
-    display: flex;
-    justify-content: center;
       }
+    }
+  }
+  
 
   .overlay {
     position: absolute;
@@ -103,24 +191,37 @@ const downloadGame = (platform) => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    z-index: 999;
 
-    .game-title {
+    .game-title-img {
-      font-size: 3rem;
+      width: 818px;
-      color: white;
+      height: 332px;
-      font-weight: bold;
+      margin-bottom: 23px;
-      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+    }
+    .game-title-img-one {
+      width: 757px;
+      height: 718px;
+      margin-bottom: 23px;
+      display: flex;
+      justify-content: center;
+      span {
+        display: inline-block;
+        position: absolute;
+        left: 50%;
+        bottom: 260px;
+        transform: translateX(-58%);
+        width: 290px;
+        height: 48px;
+        cursor: pointer;
       }
-
-    .game-tagline {
-      font-size: 2rem;
-      color: white;
-      margin-bottom: 20px;
     }
     
     .download-buttons {
       display: flex;
       gap: 50px;
-
+      z-index: 999;
       .btn {
         // padding: 10px 20px;
         border: none;
@@ -166,6 +267,7 @@ const downloadGame = (platform) => {
       // display: flex;
       // flex-direction: column;
       // justify-content: center;
+      z-index: 999;
       .poster {
         width: 50px;
         height: 30px;
@@ -208,5 +310,8 @@ const downloadGame = (platform) => {
       }
     }
   }
+  .overlay-one {
+    bottom: 4px;
+  }
 }
 </style>