From 0b082dfcd1103f36259c2331bf8525ac0fff2e5c Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Mon, 27 Feb 2023 10:15:50 +0800
Subject: [PATCH] newcebg

---
 src/components/home/FooterBar.vue        |  4 +-
 src/components/home/GameGallerp.vue      |  2 +-
 src/components/home/GameIntroduction.vue | 14 ++++++-
 src/components/home/HeroSwiper.vue       | 14 +++----
 src/components/home/NavBar.vue           | 35 ++++++++++++----
 src/components/home/WhatCebg.vue         | 52 +++++++++++++++---------
 src/components/home/loginButton.vue      | 48 ++++++++++++++++++++++
 7 files changed, 130 insertions(+), 39 deletions(-)
 create mode 100644 src/components/home/loginButton.vue

diff --git a/src/components/home/FooterBar.vue b/src/components/home/FooterBar.vue
index c71d22b..d248088 100644
--- a/src/components/home/FooterBar.vue
+++ b/src/components/home/FooterBar.vue
@@ -289,13 +289,13 @@ function backTop() {
       .about-lable-child {
         display: flex;
         position: relative;
-        justify-content: space-evenly;
+        justify-content: space-between;
         // align-items: center;
         padding-bottom: 24px;
         margin-top: 40px;
 
         .child-item {
-          flex: 1;
+          // flex: 1;
           display: flex;
           // justify-content: space-between;
           // align-items: center;
diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue
index 688880d..bb52cd7 100644
--- a/src/components/home/GameGallerp.vue
+++ b/src/components/home/GameGallerp.vue
@@ -157,7 +157,7 @@ function handleScroll() {
   .title {
     position: absolute;
     right: 0%;
-    top: -750px;
+    top: -342px;
     text-align: center;
     font-size: 190px;
     font-family: "Big John";
diff --git a/src/components/home/GameIntroduction.vue b/src/components/home/GameIntroduction.vue
index 6098e38..60249b2 100644
--- a/src/components/home/GameIntroduction.vue
+++ b/src/components/home/GameIntroduction.vue
@@ -26,6 +26,10 @@
           </XyzTransitionGroup>
         </div>
       </transition>
+
+      <div class="btn">
+        <loginButton></loginButton>
+      </div>
     </div>
     <div class="game-bg">
       <img src="@/assets/img/home/weapon-bg.png" alt="" />
@@ -38,6 +42,7 @@ import TabBar from "./TabBar.vue";
 import HeroCard from "./HeroCard.vue";
 import WeaponCard from "./WeaponCard.vue";
 import ChipCard from "./ChipCard.vue";
+import loginButton from "./loginButton.vue";
 import { ref, computed } from "vue";
 
 const listred = [
@@ -57,11 +62,13 @@ const getTabIcon = (index) =>
 function handactiveTab(index) {
   activeTab.value = index;
 }
+
+
 </script>
 <style lang="scss" scoped>
 .container {
   position: relative;
-  height: 1200px;
+  height: 1480px;
   .tabs {
     width: 1440px;
     margin: 0 auto;
@@ -95,6 +102,11 @@ function handactiveTab(index) {
     }
   }
 }
+.btn{
+  width: 300px;
+  height: 100px;
+  margin: 0 auto;
+}
 .tabs {
   display: flex;
 }
diff --git a/src/components/home/HeroSwiper.vue b/src/components/home/HeroSwiper.vue
index f4fdcc6..5f78ef9 100644
--- a/src/components/home/HeroSwiper.vue
+++ b/src/components/home/HeroSwiper.vue
@@ -198,12 +198,12 @@ function test(index, sc) {
       height: 2px;
       background-color: #ff3030;
       opacity: 0.2;
-      top: 606px;
+      top: 335px;
       position: absolute;
     }
     .hero-slogan {
-      width: 617px;
-      height: 82px;
+      // width: 617px;
+      // height: 82px;
     }
 
     .miffy-container {
@@ -215,7 +215,7 @@ function test(index, sc) {
     }
     .miffy-container-active {
       opacity: 1;
-      top: 690px;
+      top: 408px;
       width: 695px;
       height: 220px;
       display: flex;
@@ -279,7 +279,7 @@ function test(index, sc) {
 }
 .hero_big_image {
   width: 820px;
-  padding-top: 110px;
+  // padding-top: 110px;
   padding-left: 120px;
   height: 820px;
 }
@@ -305,9 +305,9 @@ function test(index, sc) {
   user-select: none;
   position: absolute;
   left: -42px;
-  top: 240px;
+  top: 51px;
   // padding: 0 40px;
-  width: 730px;
+  width: 766px;
   height: 200px;
   .swiper-button-prev::after {
     display: none;
diff --git a/src/components/home/NavBar.vue b/src/components/home/NavBar.vue
index 959bb04..c7eff05 100644
--- a/src/components/home/NavBar.vue
+++ b/src/components/home/NavBar.vue
@@ -57,15 +57,15 @@ function handNavCurent(i) {
       padding-bottom: 20px;
     }
     .nav-item {
-      font-size: 16px;      
+      font-size: 16px;
       position: relative;
       font-weight: 800;
       transition-property: color;
       transition-duration: 0.15s;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       font-family: "Big John";
-              
-      color: #CCCCCC;
+
+      color: #cccccc;
     }
     .duration-200 {
       transition-duration: 0.2s;
@@ -90,6 +90,7 @@ function handNavCurent(i) {
       background: url("@/assets/img/home/nav-boder.png") no-repeat;
       background-size: 100% 100%;
       transform: scaleX(0);
+
       transition: all 1s;
     }
     .nav-item:hover::after {
@@ -99,7 +100,7 @@ function handNavCurent(i) {
     .active-nav-item {
       font-size: 16px;
       font-family: "JCuYuan";
-      //         
+      //
       position: relative;
       font-weight: 800;
       transition-property: color;
@@ -158,20 +159,36 @@ function handNavCurent(i) {
   right: 0;
   top: 0;
   bottom: 0;
-  opacity: 0;
+  opacity: 1;
   // transition: 0.5s;
   background: url("@/assets/img/home/login-active.png") no-repeat;
   background-size: 100% 100%;
-  transform: scaleX(0);
-  transition: all 0.5s ease-in-out;
+  transform: scaleX(1, 1);
+  clip-path: polygon(50% 50%, 50% 50% ,50% 50%, 50% 50%);
+  transition: all 0.3s ease-in-out;
   z-index: -1;
   // transition:background-image 1s linear;
   // transform: scaleX(0.98);
 }
 .login-btn:hover:after {
   opacity: 1;
-  transition: all 0.5s ease-in-out;
-  transform: scaleX(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)
+  );
+  // clip-path: polygon(
+  //   0px 0,
+  //   100% 0,
+  //   100% calc(100% - 0px),
+  //   calc(100% - 0px) 100%,
+  //   0px 100%,
+  //   0 0px
+  // );
+
+  transition: all 0.3s ease-in-out;
+  transform: scaleX(1, 1);
 }
 .login-btn:active:after {
   opacity: 1;
diff --git a/src/components/home/WhatCebg.vue b/src/components/home/WhatCebg.vue
index 0ef4152..76f6d54 100644
--- a/src/components/home/WhatCebg.vue
+++ b/src/components/home/WhatCebg.vue
@@ -41,13 +41,12 @@
         </div>
 
         <div class="gameplay">
-          <div class="title">GAMEPLAY</div>
-          <div class="gameplay-img">
-            <img src="@/assets/img/home/gameplay.png" alt="" />
-          </div>
-
           <div class="gameplay-content">
             <div class="gameplay-right">
+              <div class="title">GAMEPLAY</div>
+              <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'"
@@ -198,13 +197,13 @@ function handleScroll() {
       .monster {
         position: absolute;
         top: 20px;
-        left: -220px;
+        left: -210px;
         z-index: 2;
-        width: 522px;
+        width: 521px;
         height: 482px;
         img {
-          width: 100%;
-          height: auto;
+          width: 521px;
+          height: 482px;
         }
       }
       .content-right {
@@ -249,21 +248,25 @@ function handleScroll() {
       z-index: 2;
       display: flex;
       flex-direction: column;
+      position: relative;
       .title {
         // width: 544px;
         font-size: 44px;
         font-family: "Big John";
         font-weight: 400;
         color: #010001;
+        padding-bottom: 111px;
       }
       .gameplay-img {
-        width: 50%;
-        height: 25px;
-        padding-top: 37px;
-        padding-bottom: 42px;
+        width: 721px;
+        height: 71px;
+        left: -80px;
+        top: 70px;
+        position: absolute;
+        padding-bottom: 40px;
         img {
-          width: 100%;
-          height: auto;
+          width: 721px;
+          height: 71px;
         }
       }
       .pve {
@@ -271,7 +274,7 @@ function handleScroll() {
         margin-left: 92px;
         // justify-content: flex-end;
         .pve-left {
-          margin-top: 30px;
+          // margin-top: 30px;
           width: 196px;
           height: 62px;
           position: relative;
@@ -302,9 +305,20 @@ function handleScroll() {
           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;
         }
         .pve-left:hover::before {
+          opacity: 1;
+          clip-path: polygon(
+            0px 0,
+            100% 0,
+            100% calc(100% - 0px),
+            calc(100% - 0px) 100%,
+            0px 100%,
+            0 0px
+          );
           transform: scaleX(1);
         }
         .pve-left-active {
@@ -340,7 +354,7 @@ function handleScroll() {
           transform: scaleX(1);
         }
         .pve-right {
-          margin-top: 30px;
+          // margin-top: 30px;
           width: 196px;
           height: 62px;
           position: relative;
@@ -371,7 +385,7 @@ function handleScroll() {
           transform: scaleX(1);
         }
         .pve-right-active {
-          margin-top: 30px;
+          // margin-top: 30px;
           width: 196px;
           height: 62px;
           position: relative;
@@ -419,7 +433,7 @@ function handleScroll() {
             width: 636px;
             height: 164px;
             margin: 0 auto;
-            margin-top: 54px;
+            margin-top: 38px;
             font-size: 18px;
             line-height: 30px;
             font-family: Arial;
diff --git a/src/components/home/loginButton.vue b/src/components/home/loginButton.vue
new file mode 100644
index 0000000..48437ce
--- /dev/null
+++ b/src/components/home/loginButton.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="buttons">
+      <span>Click Me!</span>
+      <div class="background"></div>
+    </div>
+  </template>
+  
+  <style scoped>
+  .buttons {
+    position: relative;
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 18px;
+    color: #fff;
+    width: 180px;
+    height: 72px;
+    text-align: center;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
+  
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../../assets/img/home/login-btn.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    transition: all 1s ease-out;
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    z-index: -1;
+  }
+  
+  .button:hover .background {
+    background-image: url('../../assets/img/home/login-active.png');
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+  
+  span {
+    z-index: 1;
+  }
+  </style>
+  
\ No newline at end of file