fix

src/components/home/ChipCard.vue

@@ -1,8 +1,9 @@
 <template>
-  <div>
   <div class="chip-container">
     <div class="chip-content">
-        <div class="title"> <img src="../../assets/img/home/chip/chip-title.png" alt=""></div>
+      <div class="title">
+        <img src="../../assets/img/home/chip/chip-title.png" alt="" />
+      </div>
       <div class="container">
         <div class="grid">
           <div class="grid-item-red"></div>
@@ -26,6 +27,14 @@
         </div>
       </div>
     </div>
+    <div class="chip-itm-bg">
+      <img src="../../assets/img/home/chip/chip-bg.png" alt="" />
+    </div>
+    <div class="chip-left">
+      <img src="../../assets/img/home/chip/chip-left.png" alt="" />
+    </div>
+    <div class="chip-right">
+      <img src="../../assets/img/home/chip/chip-right.png" alt="" />
     </div>
   </div>
 </template>
@@ -37,11 +46,37 @@ let ma;
 <style lang="scss" scoped>
 .chip-container {
   position: relative;
-   
+  .chip-itm-bg {
+    position: absolute;
+    z-index: -1;
+    left: 150px;
+    top: 115px;
+    width: 1637px;
+    height: 609px;
+    img {
+      max-width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+  .chip-left {
+    position: absolute;
+    z-index: -1;
+    left: 0px;
+    top: 60px;
+  }
+  .chip-right {
+    position: absolute;
+    z-index: -1;
+    right: 40px;
+    top: -66px;
+  }
   .chip-content {
     width: 1440px;
     margin: 0 auto;
+    position: relative;
     // margin-top: 102px;
+
     .title {
       padding-top: 78px;
       display: flex;
@@ -49,6 +84,7 @@ let ma;
       justify-content: center;
     }
     .container {
+      // position: ;
       width: 85%;
       margin: 0 auto;
       display: flex;
@@ -65,15 +101,15 @@ let ma;
       margin-bottom: 20px;
     }
     .grid-item-red {
-       background:url('@/assets/img/home/chip/red-bg.png') no-repeat;
+      background: url("@/assets/img/home/chip/red-bg.png") no-repeat;
       height: 200px;
     }
     .grid-item-yellow {
-       background:url('@/assets/img/home/chip/yellow-bg.png') no-repeat;
+      background: url("@/assets/img/home/chip/yellow-bg.png") no-repeat;
       height: 200px;
     }
     .grid-item-blue {
-       background:url('@/assets/img/home/chip/blue-bg.png') no-repeat;
+      background: url("@/assets/img/home/chip/blue-bg.png") no-repeat;
       height: 200px;
     }
   }

src/components/home/GameGallerp.vue

@@ -239,7 +239,7 @@ const handleClick = (item) => {
   .title {
     position: absolute;
     right: 0%;
-    top: -342px;
+    top: 302px;
     text-align: center;
     font-size: 190px;
     font-family: "Big John";

src/components/home/GameIntroduction.vue

@@ -99,7 +99,7 @@ function handactiveTab(index) {
       top: 0;
       right: 0;
       bottom: 0;
-      z-index: -1;
+      z-index: -3;
       color: transparent;
     }
   }

src/components/home/HeroCard.vue

@@ -5,13 +5,13 @@
         <TabBar></TabBar>
         <div class="centent-left">
           <HeroSwiper></HeroSwiper>
-          <div
+          <!-- <div
             class="hero-title"
             id="heroTest"
             :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
           >
             HERO
-          </div>
+          </div> -->
           <!-- <div class="hero-bg">
             <img src="@/assets/img/home/weapon-bg.png" alt="" />
           </div> -->

src/components/home/HeroSwiper.vue

@@ -45,7 +45,6 @@
                 <div class="hero-big-img" :class="index >= 7 ?  'man-bg' :'woman-bg'">
                   <img
                     class="hero_big_image"
-                    v-if="activeIndex == index"
                     :src="item.img"
                   />
                 </div>