From df23eee7f00367834c8522869b898194a6e600b1 Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Thu, 16 Mar 2023 19:50:16 +0800
Subject: [PATCH] fix

---
 .../components/about/IntroductionBanner.vue   |   4 +-
 mobile/src/components/global/YouTubeVideo.vue |   2 +-
 mobile/src/components/home/Banner.vue         |   8 +-
 mobile/src/components/home/Gameplay.vue       | 244 +++++++-----------
 mobile/src/components/home/HeroSweiper.vue    |  12 +-
 mobile/src/views/HomeView.vue                 |   6 -
 6 files changed, 103 insertions(+), 173 deletions(-)

diff --git a/mobile/src/components/about/IntroductionBanner.vue b/mobile/src/components/about/IntroductionBanner.vue
index 1755437..fc5e7c4 100644
--- a/mobile/src/components/about/IntroductionBanner.vue
+++ b/mobile/src/components/about/IntroductionBanner.vue
@@ -39,7 +39,7 @@
 <style lang="scss" scoped>
 .container {
   padding-top: 120px;
-  background-color: #265d90;
+  background: linear-gradient(180deg, #286397, #17385F);
   padding-bottom: 317px;
   position: relative;
   .banner-boder {
@@ -59,7 +59,7 @@
     right: 0;
     width: 100%;
     height: 100%;
-    z-index: -10;
+    // z-index: -10;
     img {
       width: 100%;
       height: 100%;
diff --git a/mobile/src/components/global/YouTubeVideo.vue b/mobile/src/components/global/YouTubeVideo.vue
index 27db5f5..949d4a9 100644
--- a/mobile/src/components/global/YouTubeVideo.vue
+++ b/mobile/src/components/global/YouTubeVideo.vue
@@ -23,7 +23,7 @@ onBeforeUnmount(() => {
 const getVideoId = () => {
   try {
     const url = new URL(props.src);
-    console.log(url,'urlurlurl');
+    // console.log(url,'urlurlurl');
     return url.searchParams.get("v") || "";
   } catch (error) {
     return "";
diff --git a/mobile/src/components/home/Banner.vue b/mobile/src/components/home/Banner.vue
index f9c156f..4002ac2 100644
--- a/mobile/src/components/home/Banner.vue
+++ b/mobile/src/components/home/Banner.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="banner">
     <div class="content">
-      <div class="title"><img src="../../assets/img/mobile-home/banner-slogan.png" alt=""></div>
+      <div class="title"><img src="@/assets/img/mobile-home/banner-slogan.png" alt=""></div>
       <div class="download-btns">
         <div class="andriod">
-          <img src="../../assets/img/mobile-home/andriod.png" alt="" />
+          <img src="@/assets/img/mobile-home/andriod.png" alt="" />
         </div>
         <div class="apple">
-          <img src="../../assets/img/mobile-home/apple.png" alt="" />
+          <img src="@/assets/img/mobile-home/apple.png" alt="" />
         </div>
         <div class="google">
-          <img src="../../assets/img/mobile-home/google.png" alt="" />
+          <img src="@/assets/img/mobile-home/google.png" alt="" />
         </div>
       </div>
     </div>
diff --git a/mobile/src/components/home/Gameplay.vue b/mobile/src/components/home/Gameplay.vue
index a60326a..d4fce8b 100644
--- a/mobile/src/components/home/Gameplay.vue
+++ b/mobile/src/components/home/Gameplay.vue
@@ -11,7 +11,7 @@
         </div>
         <div class="pve">
           <div
-            :class="isPveTab == true ? 'pve-left' : 'pve-left-active'"
+            :class="isPveTab == true ? 'pvp-left' : 'pvp-left-active'"
             @click="handTabActive(true)"
           >
             <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
@@ -110,167 +110,99 @@ const handTabActive = (isTab) => {
     margin-top: 70px;
     margin-left: 75px;
     // justify-content: flex-end;
-    .pve-left {
-      // margin-top: 30px;
-      width: 274px;
-      height: 86px;
-      position: relative;
-      margin-right: 30px;
-      color: #263641;
-      cursor: pointer;
-      background-image: url("@/assets/img/home/pve-btn.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      // border: 1px solid #333;
-      // overflow: hidden;
-      transition: background-image 0.3s;
-    }
-    .pve-left:hover {
-      // background-image: none;
-    }
-    .pve-left::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      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:after {
-      opacity: 1;
-      clip-path: polygon(
+   
+   
+  }
+
+  .pvp-left {
+    // margin-top: 30px;
+    width: 274px;
+    height: 86px;
+    position: relative;
+    margin-right: 30px;
+    color: #263641;
+    cursor: pointer;
+    background-image: url("@/assets/img/mobile-home/pve-btn.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    // border: 1px solid #333;
+    // overflow: hidden;
+    transition: background-image 0.3s;
+  }
+  .pvp-left:hover {
+    // background-image: none;
+  }
+  .pvp-left::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;
+    // z-index: -1;
+    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    transition: all 0.3s ease-in;
+  }
+  .pvp-left:hover:after {
+    opacity: 1;
+    clip-path: polygon(
       calc(50% + 0px) calc(50% + 250px),
       calc(50% + 250px) calc(50% + 0px),
       calc(50% + 0px) calc(50% - 250px),
       calc(50% - 250px) calc(50% - 0px)
     );
-      transition: all 0.25s ease-in;
-      transform: scaleX(1, 1);
-    }
-    .pve-left-active {
-      // margin-top: 30px;
-      width: 274px;
-      height: 86px;
-      margin-right: 30px;
-      position: relative;
-      cursor: pointer;
-      background-image: url("@/assets/img/home/pve-btn-active.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      overflow: hidden;
-      transition: background-image 1s ease-in-out;
-    }
-    .pve-left-active::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      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::after {
-      clip-path: polygon(
+    transition: all 0.3s ease-in;
+    transform: scaleX(1, 1);
+  }
+  .pvp-left-active {
+    // margin-top: 30px;
+    width: 274px;
+    height: 86px;
+    position: relative;
+    margin-right: 30px;
+    color: #263641;
+    cursor: pointer;
+    background-image: url("@/assets/img/home/pvp-btn-active.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    // border: 1px solid #333;
+    // overflow: hidden;
+    transition: background-image 0.3s;
+  }
+  .pvp-left-active:hover {
+    // background-image: none;
+  }
+  .pvp-left-active::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: url("@/assets/img/mobile-home/pve-btn.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;
+  }
+  .pvp-left-active:hover:after {
+    opacity: 1;
+    clip-path: polygon(
       calc(50% + 0px) calc(50% + 250px),
       calc(50% + 250px) calc(50% + 0px),
       calc(50% + 0px) calc(50% - 250px),
       calc(50% - 250px) calc(50% - 0px)
     );
-      opacity: 1;
-      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);
-    // }
+    transition: all 0.3s ease-in;
+    transform: scaleX(1, 1);
   }
   .pve-right {
     // margin-top: 30px;
@@ -280,7 +212,7 @@ const handTabActive = (isTab) => {
     margin-right: 30px;
     color: #263641;
     cursor: pointer;
-    background-image: url("@/assets/img/home/pvp-btn.png");
+    background-image: url("@/assets/img/home/pve-btn.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -298,7 +230,7 @@ const handTabActive = (isTab) => {
     right: 0;
     top: 0;
     bottom: 0;
-    background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
+    background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
     background-size: 100% 100%;
     transform: scaleX(1, 1);
     opacity: 1;
@@ -325,7 +257,7 @@ const handTabActive = (isTab) => {
     margin-right: 30px;
     color: #263641;
     cursor: pointer;
-    background-image: url("@/assets/img/home/pvp-btn-active.png");
+    background-image: url("@/assets/img/home/pve-btn-active.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -343,7 +275,7 @@ const handTabActive = (isTab) => {
     right: 0;
     top: 0;
     bottom: 0;
-    background: url("@/assets/img/home/pvp-btn.png") no-repeat;
+    background: url("@/assets/img/home/pve-btn.png") no-repeat;
     background-size: 100% 100%;
     transform: scaleX(1, 1);
     opacity: 1;
diff --git a/mobile/src/components/home/HeroSweiper.vue b/mobile/src/components/home/HeroSweiper.vue
index 73b7f63..6040f1e 100644
--- a/mobile/src/components/home/HeroSweiper.vue
+++ b/mobile/src/components/home/HeroSweiper.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="hero">
-    <div class="hero-bg"><img src="@/assets/img/mobile-home/hero-bg.png" alt="" /></div>
+    <div class="hero-bg">
+      <img src="@/assets/img/mobile-home/hero-bg.png" alt="" />
+    </div>
     <div class="title">hero</div>
     <div class="hero-content">
       <swiper
         :modules="modules"
-        class="mySwiper"
+         class="mySwiper"
         :autoplay="{ delay: 4000, disableOnInteraction: false }"
         @swiper="setHeroSwiper"
         :navigation="{
@@ -43,8 +45,8 @@ import { ref, onMounted } from "vue";
 import { HeroList } from "@/configs/information";
 import "swiper/css";
 import "swiper/css/navigation";
-import { Navigation, Autoplay} from "swiper";
-const modules = ref([Navigation,Autoplay]);
+import { Navigation, Autoplay } from "swiper";
+const modules = ref([Navigation, Autoplay]);
 const heroAnimationActive = ref(false);
 const swiperIndex = ref(null);
 const activeIndex = ref(0);
@@ -86,6 +88,8 @@ onMounted(() => {
     }
   }
   .hero-content {
+    width: 707px;
+    margin: 0 auto;
     // // height: 918px;
     // background: #90e2e9;
   }
diff --git a/mobile/src/views/HomeView.vue b/mobile/src/views/HomeView.vue
index 29cc498..e5490da 100644
--- a/mobile/src/views/HomeView.vue
+++ b/mobile/src/views/HomeView.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="container">
-    <!-- <NavBar></NavBar> -->
     <div class="content">
       <Banner></Banner>
       <WhatCebg></WhatCebg>
@@ -9,13 +8,10 @@
       <WeaponSwiper></WeaponSwiper>
       <Chip></Chip>
       <GameGallerp></GameGallerp>
-      <!-- <Grid9Panel></Grid9Panel> -->
     </div>
-    <!-- <FooterBar></FooterBar> -->
   </div>
 </template>
 <script setup>
-import NavBar from "@/components/layout/NavBar.vue";
 import Banner from "@/components/home/Banner.vue";
 import WhatCebg from "@/components/home/WhatCebg.vue";
 import Gameplay from "@/components/home/Gameplay.vue";
@@ -23,8 +19,6 @@ import Chip from "@/components/home/Chip.vue";
 import WeaponSwiper from "@/components/home/WeaponSwiper.vue";
 import HeroSweiper from "@/components/home/HeroSweiper.vue";
 import GameGallerp from "@/components/home/GameGallerp.vue";
-import FooterBar from "@/components/layout/FooterBar.vue";
-import Grid9Panel from "@/components/Grid9Panel.vue";
 </script>
 <style lang="scss" scoped>
 .container {