diff --git a/src/components/home/GalleryBanner.vue b/src/components/home/GalleryBanner.vue
index 3cc8bac..4197b58 100644
--- a/src/components/home/GalleryBanner.vue
+++ b/src/components/home/GalleryBanner.vue
@@ -29,7 +29,7 @@
       class="mySwiper"
     >
       <swiper-slide v-for="(item, index) of imageList" :key="index">
-        <div :class="activeIndex !== index?'img-container':''">
+        <div >
           <img class="img" :src="item.imgSrc" />
         </div>
       </swiper-slide>
@@ -209,7 +209,7 @@ const handSlideNext = () => {
   text-align: center;
   font-size: 18px;
   background: #fff;
-
+ 
   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
@@ -311,6 +311,7 @@ const handSlideNext = () => {
 .mySwiper .swiper-slide-thumb-active {
   opacity: 1;
   // border-radius: 12px;
+  border-radius: 12px;
    filter: grayscale(0%);
 }
 
@@ -318,12 +319,12 @@ const handSlideNext = () => {
   display: block;
   width: 100%;
   height: 100%;
-  // border-radius: 12px;
+   border-radius: 12px;
   object-fit: cover;
 }
 .swiper-slide {
   position: relative;
-  // border-radius: 12px;
+ border-radius: 12px;
   display: inline-block;
 }
 
@@ -334,6 +335,7 @@ const handSlideNext = () => {
   left: 0;
   right: 0;
   bottom: 0;
+  border-radius: 12px;
   background-color: rgba(0, 0, 0, 0.5); /* 黑色遮罩，0.5 为透明度 */
   pointer-events: none; /* 让遮罩层不影响图片的鼠标交互 */
 }
diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue
index 363ca2c..ce4befc 100644
--- a/src/components/home/GameGallerp.vue
+++ b/src/components/home/GameGallerp.vue
@@ -23,8 +23,9 @@
         <div class="slogan">
           <div class="slogan-text">
             <ScrollAnimatedText>
-            Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
-          </ScrollAnimatedText>
+              Come to be COMMENDER! Enjoy 3D CEBG and fight against other
+              players!
+            </ScrollAnimatedText>
           </div>
         </div>
 
@@ -51,9 +52,9 @@
         </div>
         <div class="sloagn">
           <ScrollAnimatedText>
-          Undefinable pattern, incredible gaming experience and excited NFT in
-          CEBG!
-        </ScrollAnimatedText>
+            Undefinable pattern, incredible gaming experience and excited NFT in
+            CEBG!
+          </ScrollAnimatedText>
         </div>
         <DameplaySwiperCard></DameplaySwiperCard>
       </div>
@@ -83,7 +84,6 @@ const ratio = ref(0.2); //视差偏移率
 
 const positionY1 = ref(0); //背景Y轴偏移量
 
-
 const videoModal = ref(null);
 onMounted(() => {
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
@@ -98,7 +98,6 @@ function handleScroll() {
     document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -285,7 +284,7 @@ function handleScroll() {
       }
       .slogan-text {
         font-size: 16px;
-        font-family: 'Poppins';
+        font-family: "Poppins";
         font-weight: 400;
         color: #ffffff;
       }
@@ -316,8 +315,6 @@ function handleScroll() {
     .gallery-img:hover {
       transform: scale(1.05);
     }
-
-    
   }
 }
 .gameplay-bottom {
@@ -389,7 +386,7 @@ function handleScroll() {
     .sloagn {
       text-align: center;
       font-size: 18px;
-      font-family: 'Poppins';
+      font-family: "Poppins";
       color: #e6f8ff;
       line-height: 32px;
       margin-bottom: 71px;
diff --git a/src/components/home/Text.vue b/src/components/home/Text.vue
index 57c5e4c..9668888 100644
--- a/src/components/home/Text.vue
+++ b/src/components/home/Text.vue
@@ -67,6 +67,7 @@ p {
   // color: transparent;
 }
 .bottom-top {
+  text-align: center;
   background-size: 100% 0%;
   background-position: bottom right;
 }
diff --git a/src/components/home/WeaponSwiper.vue b/src/components/home/WeaponSwiper.vue
index 50b2784..791e86b 100644
--- a/src/components/home/WeaponSwiper.vue
+++ b/src/components/home/WeaponSwiper.vue
@@ -267,8 +267,21 @@ function test(index, sc) {
   background: url("@/assets/img/home/weapon/weapon-bg.png") no-repeat;
   height: 115px;
   width: 220px;
+  position: relative;
   background-size: contain;
 }
+.weapon-moss-active-bg:hover{
+  background: url("@/assets/img/home/weapon/weapon-active-bg.png") no-repeat;
+}
+.weapon-moss-active-bg ::before{
+  width: 100%;
+  height: 8px;
+  position: absolute;
+  left: 0;
+  top: 100px;
+  background: url("@/assets/img/home/weapon/weapon-bottom-boder.png") no-repeat;
+  background-size: 100% 100%;
+}
 .weapon-moss-bg ::before {
   width: 100%;
   height: 8px;
diff --git a/src/components/home/WhatCebg.vue b/src/components/home/WhatCebg.vue
index b05b5fd..a28fce7 100644
--- a/src/components/home/WhatCebg.vue
+++ b/src/components/home/WhatCebg.vue
@@ -87,7 +87,7 @@
                 </div>
               </div>
             </div>
-            <div class="gameplay-left">
+            <div class="gameplay-left" ref="gameplayLeft">
               <div class="pve-img">
                 <img
                   v-if="isPveTab"
@@ -121,7 +121,9 @@ const isPveTab = ref(false);
 const positionY1 = ref(0); //背景Y轴偏移量
 
 const animatedElement = ref(null);
+const gameplayLeft = ref(null);
 let animationPlayed = false;
+let animationgameplay = false;
 
 function onScroll(event) {
   const scrollTop = window.scrollY;
@@ -139,6 +141,22 @@ function onScroll(event) {
     });
   }
 }
+function onGamePlayScroll(event) {
+  const scrollTop = window.scrollY;
+  const windowHeight = window.innerHeight;
+
+  const boxRect = gameplayLeft.value.getBoundingClientRect();
+  const boxTop = boxRect.bottom;
+
+  if (boxTop <= windowHeight && !animationgameplay) {
+    animationgameplay = true;
+    gsap.to(gameplayLeft.value, {
+      x: -950,
+      opacity: 1,
+      duration: 1,
+    });
+  }
+}
 const handTabActive = (isTab) => {
   isPveTab.value = !isPveTab.value;
 };
@@ -151,6 +169,7 @@ function handleScroll() {
 }
 onMounted(() => {
   window.addEventListener("scroll", onScroll);
+  window.addEventListener("scroll", onGamePlayScroll);
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
 
@@ -163,8 +182,6 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .what-cebg {
-  // background: rgba(38, 54, 67, 1);
-  // background:url('@/assets/img/home/what-bg.jpg') no-repeat;
   position: relative;
   .what-bg {
     position: absolute;
@@ -230,16 +247,7 @@ onBeforeUnmount(() => {
     position: relative;
     .what-content {
       display: flex;
-      // .slogan-center {
-      //   font-size: 16px;
-      //   font-family: Arial;
-      //   font-weight: bold;
-      //   width: 683px;
-      //   letter-spacing: 1.5px;
-      //   height: 100px;
-      //   color: #ffffff;
-      //   line-height: 28px;
-      // }
+
       .monster {
         position: absolute;
         top: 20px;
@@ -253,10 +261,6 @@ onBeforeUnmount(() => {
           height: 482px;
         }
       }
-      // .monster.animate {
-      //   left: -190px;
-      //   opacity: 1;
-      // }
 
       .content-right {
         z-index: 2;
@@ -410,82 +414,6 @@ onBeforeUnmount(() => {
           transform: scaleX(1, 1);
           transition: all 0.25s ease-in;
         }
-        // .pve-right {
-        //   // margin-top: 30px;
-        //   width: 196px;
-        //   height: 62px;
-        //   position: relative;
-        //   background-image: url("@/assets/img/home/pvp-btn.png");
-        //   background-position: center;
-        //   background-repeat: no-repeat;
-        //   background-size: cover;
-        //   // border: 1px solid #333;
-        //   // overflow: hidden;
-        //   transition: background-image 1s;
-        // }
-        // .pve-right::after {
-        //   content: "";
-        //   position: absolute;
-        //   left: 0;
-        //   right: 0;
-        //   top: 0;
-        //   bottom: 0;
-        //   background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
-        //   background-size: 100% 100%;
-        //   opacity: 1;
-        //   transform: scaleX(1, 1);
-        //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-        //   transition: all 0.3s ease-in;
-        // }
-        // .pve-right:hover:after {
-        //   clip-path: polygon(
-        //     calc(50% + 0px) calc(50% + 150px),
-        //     calc(50% + 150px) calc(50% + 0px),
-        //     calc(50% + 0px) calc(50% - 150px),
-        //     calc(50% - 150px) calc(50% - 0px)
-        //   );
-        //   opacity: 1;
-        //   transition: all 0.25s ease-in;
-        //   transform: scaleX(1, 1);
-        // }
-        // .pve-right-active {
-        //   // margin-top: 30px;
-        //   width: 196px;
-        //   height: 62px;
-        //   position: relative;
-        //   background-image: url("@/assets/img/home/pvp-btn.png") ;
-        //   background-position: center;
-        //   background-repeat: no-repeat;
-        //   background-size: cover;
-        //   transition: background-image 1s;
-        // }
-
-        // .pve-right-active::after {
-        //   content: "";
-        //   position: absolute;
-        //   left: 0;
-        //   right: 0;
-        //   top: 0;
-        //   bottom: 0;
-        //   background: url("@/assets/img/home/pvp-btn-active.png")no-repeat;
-        //   background-size:100% 100%;
-        //   transform: scaleX(1,1);
-        //   opacity: 1;
-        //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-        //   // transform-origin: center;
-        //   transition: transform 0.3s ease-in;
-        // }
-        // .pve-right-active:hover::after {
-        //   opacity: 1;
-        //   clip-path: polygon(
-        //     calc(50% + 0px) calc(50% + 150px),
-        //     calc(50% + 150px) calc(50% + 0px),
-        //     calc(50% + 0px) calc(50% - 150px),
-        //     calc(50% - 150px) calc(50% - 0px)
-        //   );
-        //   transition: transform 0.3s ease-in;
-        //   transform: scaleX(1,1);
-        // }
       }
       .pve-right {
         // margin-top: 30px;
@@ -581,6 +509,8 @@ onBeforeUnmount(() => {
         display: flex;
         // background: #59a2d0;
         .gameplay-left {
+          position: absolute;
+          right: -950px;
           .pve-img {
             width: 710px;
             height: 400px;