newcebg

src/components/BgSwitchButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    class="background-switch-button"
+    :style="buttonStyle"
+    @mouseover="handleMouseOver"
+    @mouseleave="handleMouseLeave"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from "vue";
+
+const props = defineProps({
+  defaultImage: {
+    type: String,
+    required: true,
+  },
+  hoverImage: {
+    type: String,
+    required: true,
+  },
+});
+
+const isHover = ref(false);
+
+const buttonStyle = computed(() => {
+  return {
+    backgroundImage: isHover.value
+      ? `url(${props.hoverImage})`
+      : `url(${props.defaultImage})`,
+  };
+});
+
+const handleMouseOver = () => {
+  isHover.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHover.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.background-switch-button {
+  position: relative;
+  padding: 10px 20px;
+  width: 170px;
+  height: 60px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: 1px solid #333;
+  overflow: hidden;
+  transition: background-image 0.3s ease-in-out;
+}
+
+.background-switch-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transform: scaleX(0);
+  z-index: 0;
+  transform-origin: center;
+  transition: transform 0.3s ease-in-out;
+}
+
+.background-switch-button:hover {
+  background-color: transparent;
+}
+
+.background-switch-button:hover::before {
+  transform: scaleX(1);
+}
+</style>

src/components/ChipCard.vue

@@ -46,7 +46,7 @@
         <!-- <div class="chip-top"></div> -->
       </div>
       <div class="chip-bg">
-        <img src="../assets/img/home/chip/chip-bg.jpg" alt="" />
+        <img src="../assets/img/home/weapon-bg.png" alt="" />
       </div>
     </div>
   </div>

src/components/HeroCard.vue

@@ -12,7 +12,7 @@
             HERO
           </div>
           <div class="hero-bg">
-            <img src="../assets/img/home/hero-bg.jpg" alt="" />
+            <img src="../assets/img/home/weapon-bg.png" alt="" />
           </div>
         </div>
         <div class="centent-right"></div>

src/components/Weapon3dLoader.vue

@@ -2,7 +2,7 @@
 <vue3dLoader 
   :filePath="filePath" 
   height="400" 
-  width="550"
+  width="1250"
   :controlsOptions="{
     enablePan:false,
     enableZoom:false,

src/components/WeaponCard.vue

@@ -23,7 +23,7 @@
         <WeaponSwiper></WeaponSwiper>
       </div>
       <div class="weapon-bg">
-        <img src="../assets/img/home/weapon-bg.jpg" alt="" />
+        <img src="../assets/img/home/weapon-bg.png" alt="" />
       </div>
     </div>
   </div>

src/components/WeaponSwiper.vue

@@ -13,8 +13,8 @@
         }"
      
       >
-        <SwiperSlide v-for="(slideContent, index) in weaponList" :key="index">
+        <SwiperSlide v-for="(slideContent, index) in weaponListBig" :key="index">
-          <img class="weapon_big_image" :src="slideContent.img" />
+          <Weapon3dLoader :filePath="slideContent.url"></Weapon3dLoader>
         </SwiperSlide>
       </swiper>
     </div>
@@ -56,6 +56,7 @@
 import { ref, reactive } from "vue";
 import { Thumbs, FreeMode, Navigation } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
+import Weapon3dLoader from "./Weapon3dLoader.vue";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/thumbs";
@@ -70,7 +71,15 @@ const weaponList = reactive([
   { id: 6, img: require("../assets/img/home/weapon/006.png") },
   { id: 7, img: require("../assets/img/home/weapon/007.png") },
 ]);
-
+const weaponListBig = reactive([
+  { id: 1, url: '/70001.gltf' },
+  { id: 2, url: '/70002.gltf' },
+  { id: 3, url: '/70003.gltf' },
+  { id: 4, url: '/70004.gltf' },
+  { id: 5, url: '/70005.gltf' },
+  { id: 6, url: '/70006.gltf' },
+  { id: 7, url: '/70007.gltf' },
+]);
 const modules = [FreeMode, Navigation, Thumbs];
 const weaponSwiper = ref(null);
 const weaponThumbsSwiper = ref(null);

src/components/WhatCebg.vue

@@ -53,26 +53,29 @@
           <div class="gameplay-img">
             <img src="../assets/img/home/gameplay.png" alt="" />
           </div>
-          <div class="pve">
+
-            <div
-              :class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
-              @click="handTabActive(true)"
-            >
-              <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
-                <!-- PVP -->
-              </div>
-            </div>
-            <div
-              :class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
-              @click="handTabActive(false)"
-            >
-              <div :class="isPveTab == false ? 'in-rect-active' : 'in-rect'">
-                <!-- PVE -->
-              </div>
-            </div>
-          </div>
           <div class="gameplay-content">
             <div class="gameplay-right">
+              <div class="pve">
+                <div
+                  :class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
+                  @click="handTabActive(true)"
+                >
+                  <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
+                    <!-- PVP -->
+                  </div>
+                </div>
+                <div
+                  :class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
+                  @click="handTabActive(false)"
+                >
+                  <div
+                    :class="isPveTab == false ? 'in-rect-active' : 'in-rect'"
+                  >
+                    <!-- PVE -->
+                  </div>
+                </div>
+              </div>
               <div class="pve-content">
                 <div class="slogan">
                   Each battle contains 40 players by matching through the ELO
@@ -106,7 +109,7 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-
+import BgSwitchButton from "../components/BgSwitchButton.vue";
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
 const isPveTab = ref(false);
@@ -159,15 +162,14 @@ function handleScroll() {
     }
   }
   .cebg-game {
-    font-size: 240px;
+    font-size: 180px;
-    font-family: "BigJohn";
+    font-family: "Big John";
-
+    font-weight: 400;
-    color: #020304;
+    color: #16252d;
-    line-height: 30px;
     opacity: 0.5;
     position: absolute;
     text-transform: uppercase;
-    top: 45px;
+    top: -85px;
     right: 0;
     z-index: 1;
 
@@ -180,12 +182,11 @@ function handleScroll() {
   .gameplay-name {
     position: absolute;
     text-transform: uppercase;
-    top: 400px;
+    top: 500px;
-    right: 0;
+    left: 0;
     z-index: 1;
-    font-size: 240px;
+    font-size: 180px;
     font-family: "BigJohn";
-
     color: #3e7ea6;
     line-height: 30px;
     opacity: 0.4;
@@ -197,8 +198,8 @@ function handleScroll() {
 
   .content {
     width: 1440px;
-    padding-top: 152px;
+    padding-top: 62px;
-    padding-bottom: 226px;
+    padding-bottom:168px;
     margin: 0 auto;
     display: flex;
     // align-items: center;
@@ -210,7 +211,7 @@ function handleScroll() {
       display: flex;
       .monster {
         position: absolute;
-        top: 157px;
+        top: 20px;
         left: -220px;
         z-index: 2;
         width: 584px;
@@ -223,8 +224,8 @@ function handleScroll() {
       .content-right {
         z-index: 2;
         width: 792px;
-        padding-left: 484px;
+        // padding-left: 484px;
-        // margin: 0 auto;
+        margin: 0 auto;
         padding-bottom: 202px;
         text-align: center;
         .title {
@@ -244,10 +245,10 @@ function handleScroll() {
           // height: 168px;
           margin: 0 auto;
           text-align: center;
-          font-size: 18px;
+          font-size: 16px;
           font-family: Arial;
           font-weight: bold;
-          color: #daf1fa;
+          color: #ffffff;
         }
         .what-cebg-img {
           width: 100%;
@@ -269,13 +270,11 @@ function handleScroll() {
       flex-direction: column;
       // justify-content: space-between;
       .title {
-        width: 544px;
+        // width: 544px;
-        // width: 221px;
+        font-size: 44px;
-        // height: 29px;
-        font-size: 88px;
         font-family: "Big John";
-
+        font-weight: 400;
-        color: #1c3045;
+        color: #010001;
       }
       .gameplay-img {
         width: 50%;
@@ -293,81 +292,134 @@ function handleScroll() {
         // justify-content: flex-end;
         .pve-left {
           margin-top: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          line-height: 44px;
           width: 196px;
           height: 62px;
-          font-size: 28px;
+          position: relative;
-          font-family: "MEurostile";
           margin-right: 30px;
           color: #263641;
           cursor: pointer;
-          padding: 2px; //边框的宽度
+          background-image: url("../assets/img/home/pve-btn.png");
-          background: url("../assets/img/home/pve-btn.png") no-repeat;
+          background-position: center;
-          background-size: contain;
           background-repeat: no-repeat;
+          background-size: cover;
+          // border: 1px solid #333;
+          overflow: hidden;
+          transition: background-image 0.3s ease-in-out;
+        }
+        .pve-left:hover {
+          // background-image: none;
+        }
+        .pve-left::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url("../assets/img/home/pve-btn-active.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+          transform: scaleX(0);
+          transform-origin: center;
+          transition: transform 0.3s ease-in-out;
+        }
+        .pve-left:hover::before {
+          transform: scaleX(1);
         }
         .pve-left-active {
           margin-top: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          line-height: 44px;
           width: 196px;
           height: 62px;
-          font-size: 28px;
-          font-family: "MEurostile";
           margin-right: 30px;
-          color: #263641;
+          position: relative;
           cursor: pointer;
-          padding: 2px; //边框的宽度
+          background-image: url("../assets/img/home/pve-btn-active.png");
-          background: url("../assets/img/home/pve-btn-active.png") no-repeat;
+          background-position: center;
-          background-size: contain;
           background-repeat: no-repeat;
-          // .in-rect-active {
+          background-size: cover;
-          //   background: url('../assets/img/home/PVP.png')no-repeat;
+          overflow: hidden;
-          //   background-size: contain;
+          transition: background-image 0.3s ease-in-out;
-          // }
+        }
+        .pve-left-active::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url("../assets/img/home/pve-btn.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+          transform: scaleX(0);
+          transform-origin: center;
+          transition: transform 0.3s ease-in-out;
+        }
+        .pve-left-active:hover::before {
+          transform: scaleX(1);
         }
         .pve-right {
           margin-top: 30px;
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          justify-content: center;
-          font-size: 28px;
-          font-family: "MEurostile";
-
-          color: #263641;
           width: 196px;
           height: 62px;
-          padding: 2px;
+          position: relative;
-          background: url("../assets/img/home/pvp-btn.png") no-repeat;
+          background-image: url("../assets/img/home/pvp-btn.png");
-          background-size: contain;
+          background-position: center;
-          // transform: rotate(180deg);
           background-repeat: no-repeat;
+          background-size: cover;
+          // border: 1px solid #333;
+          overflow: hidden;
+          transition: background-image 0.3s ease-in-out;
+        }
+        .pve-right::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url("../assets/img/home/pvp-btn-active.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+          transform: scaleX(0);
+          transform-origin: center;
+          transition: transform 0.3s ease-in-out;
+        }
+        .pve-right:hover::before {
+          transform: scaleX(1);
         }
         .pve-right-active {
           margin-top: 30px;
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          justify-content: center;
-          font-size: 28px;
-          font-family: "MEurostile";
-
-          color: #263641;
           width: 196px;
           height: 62px;
-          padding: 2px;
+          position: relative;
-          background: url("../assets/img/home/pvp-btn-active.png") no-repeat;
+          background-image: url("../assets/img/home/pvp-btn.png");
-          background-size: contain;
+          background-position: center;
-          // transform: rotate(180deg);
           background-repeat: no-repeat;
+          background-size: cover;
+          overflow: hidden;
+          transition: background-image 0.3s ease-in-out;
+        }
+
+        .pve-right-active::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url("../assets/img/home/pvp-btn-active.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+          transform: scaleX(0);
+          transform-origin: center;
+          transition: transform 0.3s ease-in-out;
+        }
+        .pve-right-active:hover::before {
+          transform: scaleX(1);
         }
       }
       .gameplay-content {
@@ -375,8 +427,8 @@ function handleScroll() {
         // background: #59a2d0;
         .gameplay-left {
           .pve-img {
-            width: 732px;
+            width: 710px;
-            height: 336px;
+            height: 400px;
           }
         }
         .gameplay-right {

src/components/heroSwiper.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="container">
     <div class="hero-left">
-      <div class="hero-name">HERO</div>
+      <!-- <div class="hero-name">HERO</div> -->
       <div class="hero-boder">
-        <img src="../assets/img/home/hero/hero-boder.png" alt="" />
+        <!-- <img src="../assets/img/home/hero/hero-boder.png" alt="" /> -->
       </div>
       <div class="hero-slogan">
-        CEBG has more than 8 heroes for players to choose, and each of them has
+        <!-- CEBG has more than 8 heroes for players to choose, and each of them has
         a distinguishing design, skills, and gameplay. All the entry-level
         heroes are free for all the players, so there is no threshold to this
-        game.
+        game. -->
         <XyzTransitionGroup class="item-group" xyz="fade down-100% back-5">
           <div
             :class="
@@ -165,12 +165,12 @@
               <img class="hero_big_image" :src="slideContent.img" />
             </SwiperSlide>
           </swiper>
-          <div
+          <!-- <div
             class="hero-bg"
             :style="{ transform: 'rotate(' + rotate + 'deg)' }"
           >
             <img src="../assets/img/home/hero-swiper-bg.png" alt="" />
-          </div>
+          </div> -->
           <div
             class="swiper-btn2-prev"
             :class="activeIndex == 0 ? 'swiper-button-disabled' : ''"
@@ -301,33 +301,33 @@ function test(index, sc) {
       color: #1c3045;
     }
     .hero-boder {
-      padding-top: 28px;
+      // padding-top: 28px;
-      padding-bottom: 29px;
+      // padding-bottom: 29px;
-      width: 649px;
+      // width: 649px;
-      height: 25px;
+      // height: 25px;
     }
     .hero-slogan {
-      width: 617px;
+      // width: 617px;
-      height: 82px;
+      // height: 82px;
-      margin-left: 20px;
+      // margin-left: 20px;
-      font-size: 18px;
+      // font-size: 18px;
-      font-family: Arial;
+      // font-family: Arial;
-      font-weight: bold;
+      // font-weight: bold;
-      color: #1d2931;
+      // color: #1d2931;
-      line-height: 32px;
+      // line-height: 32px;
       // padding-bottom: 244px;
     }
     .miffy-container {
       background: url("../assets/img/home/miffy-bg.png") no-repeat;
       background-size: contain;
       opacity: 0;
-      top: 890px;
+      top: 590px;
       position: absolute;
       // transform: translateY(100px) translateZ(0px);
     }
     .miffy-container-active {
       opacity: 1;
-      top: 890px;
+      top: 590px;
       position: absolute;
       transform: none;
     }