diff --git a/src/components/home/DameplaySwiperCard.vue b/src/components/home/DameplaySwiperCard.vue
index 9d0de34..80d6d11 100644
--- a/src/components/home/DameplaySwiperCard.vue
+++ b/src/components/home/DameplaySwiperCard.vue
@@ -31,10 +31,10 @@
         /></swiper-slide>
       </swiper>
       <div class="swiper-btn-prev" @click="handSlidePrev">
-        <img src="../assets/img/home/game-swiper-card/next.png" alt="" />
+        <img src="@/assets/img/home/game-swiper-card/next.png" alt="" />
       </div>
       <div class="swiper-btn-next" @click="handSlideNext">
-        <img src="../assets/img/home/game-swiper-card/prev.png" alt="" />
+        <img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
       </div>
     </div>
   </div>
@@ -142,7 +142,7 @@ const handSlideNext = () => {
     width: 30px;
     height: 30px;
     /*图片路径*/
-    background: url("../assets/img/home/game-swiper-card/bullet.png") no-repeat
+    background: url("@/assets/img/home/game-swiper-card/bullet.png") no-repeat
       left center;
   }
   /*显示当前活动块的图片*/
@@ -150,7 +150,7 @@ const handSlideNext = () => {
     width: 30px;
     height: 30px;
     /*图片路径*/
-    background: url("../assets/img/home/game-swiper-card/bullet-active.png")
+    background: url("@/assets/img/home/game-swiper-card/bullet-active.png")
       no-repeat right center;
   }
 }
diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue
index bb52cd7..9ece45e 100644
--- a/src/components/home/GameGallerp.vue
+++ b/src/components/home/GameGallerp.vue
@@ -165,7 +165,6 @@ function handleScroll() {
     line-height: 30px;
     opacity: 0.3;
     z-index: 1;
-  
   }
   .content {
     width: 1440px;
@@ -191,11 +190,55 @@ function handleScroll() {
       margin: 59px auto;
       margin-bottom: 71px;
     }
-    .btn{
+    .btn {
       width: 100%;
       display: flex;
       justify-content: center;
     }
+    // .go-to-btn {
+    //   margin-top: 30px;
+    //   width: 196px;
+    //   height: 62px;
+    //   position: relative;
+    //   margin-right: 30px;
+    //   color: #263641;
+    //   cursor: pointer;
+    //   background-image: url("@/assets/img/home/go-to-btn.png");
+    //   background-position: center;
+    //   background-repeat: no-repeat;
+    //   background-size: cover;
+    //   overflow: hidden;
+    //   transition: background-image 0.3s;
+    // }
+    // .go-to-btn:hover {
+    //   // background-image: none;
+    // }
+    // .go-to-btn::after {
+    //   position: absolute;
+    //   left: 0;
+    //   right: 0;
+    //   top: 0;
+    //   bottom: 0;
+    //   opacity: 1;
+    //   // transition: 0.5s;
+    //   background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
+    //   background-size: 100% 100%;
+    //   transform: scaleX(1, 1);
+    //   z-index: -1;
+    //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    //   transition: all 0.3s ease-in-out;
+    // }
+    // .go-to-btn: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: all 0.3s ease-in-out;
+    //   transform: scaleX(1, 1);
+    // }
     .go-to-btn {
       margin-top: 30px;
       width: 196px;
@@ -208,29 +251,38 @@ function handleScroll() {
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
-      overflow: hidden;
-      transition: background-image 0.3s ease-in-out;
+      // border: 1px solid #333;
+      // overflow: hidden;
+      transition: background-image 0.3s;
     }
-    .go-to-btn:hover {
+    .pve-right-active:hover {
       // background-image: none;
     }
-    .go-to-btn::before {
+    .go-to-btn::after {
       content: "";
       position: absolute;
-      top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url("@/assets/img/home/go-to-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;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
+      background-size: 100% 100%;
+      transform: scaleX(1, 1);
+      opacity: 1;
+      // z-index: -1;
+      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+      transition: all 0.3s ease-in;
     }
-    .go-to-btn:hover::before {
-      transform: scaleX(1);
+    .go-to-btn: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: all 0.3s ease-in;
+      transform: scaleX(1, 1);
     }
     .slogan {
       font-size: 18px;
diff --git a/src/components/home/GameIntroduction.vue b/src/components/home/GameIntroduction.vue
index 60249b2..957965d 100644
--- a/src/components/home/GameIntroduction.vue
+++ b/src/components/home/GameIntroduction.vue
@@ -26,10 +26,6 @@
           </XyzTransitionGroup>
         </div>
       </transition>
-
-      <div class="btn">
-        <loginButton></loginButton>
-      </div>
     </div>
     <div class="game-bg">
       <img src="@/assets/img/home/weapon-bg.png" alt="" />
diff --git a/src/components/home/WhatCebg.vue b/src/components/home/WhatCebg.vue
index 76f6d54..7ed9b50 100644
--- a/src/components/home/WhatCebg.vue
+++ b/src/components/home/WhatCebg.vue
@@ -286,40 +286,37 @@ function handleScroll() {
           background-repeat: no-repeat;
           background-size: cover;
           // border: 1px solid #333;
-          overflow: hidden;
-          transition: background-image 0.3s ease-in-out;
+          // overflow: hidden;
+          transition: background-image 0.3s;
         }
         .pve-left:hover {
           // background-image: none;
         }
-        .pve-left::before {
+        .pve-left::after {
           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;
-          opacity: 0;
-          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-          transition: transform 0.3s ease-in-out;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
+          background-size: 100% 100%;
+          transform: scaleX(1,1);
+          opacity: 1;
+          // z-index: -1;
+          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+          transition: all 0.25s ease-in;
         }
-        .pve-left:hover::before {
+        .pve-left:hover:after {
           opacity: 1;
           clip-path: polygon(
-            0px 0,
-            100% 0,
-            100% calc(100% - 0px),
-            calc(100% - 0px) 100%,
-            0px 100%,
-            0 0px
+            calc(50% + 0px) calc(50% + 150px),
+            calc(50% + 150px) calc(50% + 0px),
+            calc(50% + 0px) calc(50% - 150px),
+            calc(50% - 150px) calc(50% - 0px)
           );
-          transform: scaleX(1);
+          transition: all 0.25s ease-in;
+          transform: scaleX(1,1);
         }
         .pve-left-active {
           margin-top: 30px;
@@ -333,25 +330,33 @@ function handleScroll() {
           background-repeat: no-repeat;
           background-size: cover;
           overflow: hidden;
-          transition: background-image 0.3s ease-in-out;
+          transition: background-image 1s ease-in-out;
         }
-        .pve-left-active::before {
+        .pve-left-active::after {
           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;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: url("@/assets/img/home/pve-btn.png") no-repeat;
+          background-size:100% 100%;
+          opacity: 0;
+          transform: scaleX(1.1);
+          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+        
+          transition: transform 0.25s ease-in-out;
         }
-        .pve-left-active:hover::before {
-          transform: scaleX(1);
+        .pve-left-active: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;
+          transform: scaleX(1,1);
+          transition: all 0.25s ease-in;
         }
         .pve-right {
           // margin-top: 30px;
@@ -363,59 +368,118 @@ function handleScroll() {
           background-repeat: no-repeat;
           background-size: cover;
           // border: 1px solid #333;
-          overflow: hidden;
-          transition: background-image 0.3s ease-in-out;
+          // overflow: hidden;
+          transition: background-image 1s;
         }
-        .pve-right::before {
+        .pve-right::after {
           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;
+          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::before {
-          transform: scaleX(1);
+        .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 {
+        // .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-active {
           // margin-top: 30px;
           width: 196px;
           height: 62px;
           position: relative;
+          margin-right: 30px;
+          color: #263641;
+          cursor: pointer;
           background-image: url("@/assets/img/home/pvp-btn.png");
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
-          overflow: hidden;
-          transition: background-image 0.3s ease-in-out;
+          // border: 1px solid #333;
+          // overflow: hidden;
+          transition: background-image 0.3s;
         }
-
-        .pve-right-active::before {
+        .pve-right-active:hover {
+          // background-image: none;
+        }
+        .pve-right-active::after {
           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;
+          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;
+          // z-index: -1;
+          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+          transition: all 0.3s ease-in;
         }
-        .pve-right-active:hover::before {
-          transform: scaleX(1);
+        .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: all 0.3s ease-in;
+          transform: scaleX(1,1);
         }
-      }
       .gameplay-content {
         display: flex;
         // background: #59a2d0;