From fa5729e6bd61e15216af902a9ee8bea0a63c90ed Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Fri, 17 Feb 2023 15:33:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Banner.vue                     | 127 ++++++
 src/components/NavBar.vue                     |   7 +-
 .../{TestView.vue => WeaponSwiper.vue}        |   0
 src/components/WhatCebg.vue                   | 411 ++++++++++++++++++
 src/router/index.js                           |   4 +-
 src/views/{about.vue => AboutView.vue}        |   0
 src/views/ContactUsView.vue                   |  13 +
 src/views/GalleryView.vue                     |   7 +
 src/views/{home.vue => HomeView.vue}          | 181 ++------
 src/views/MarketplaceView.vue                 |  13 +
 10 files changed, 602 insertions(+), 161 deletions(-)
 create mode 100644 src/components/Banner.vue
 rename src/components/{TestView.vue => WeaponSwiper.vue} (100%)
 create mode 100644 src/components/WhatCebg.vue
 rename src/views/{about.vue => AboutView.vue} (100%)
 create mode 100644 src/views/ContactUsView.vue
 create mode 100644 src/views/GalleryView.vue
 rename src/views/{home.vue => HomeView.vue} (83%)
 create mode 100644 src/views/MarketplaceView.vue

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
new file mode 100644
index 0000000..359032e
--- /dev/null
+++ b/src/components/Banner.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div class="banner">
+      <div class="content">
+        <div class="sologan">
+          <img src="../assets/img/home/slogan.png" alt="" />
+        </div>
+        <div class="download-center">
+          <div class="download-item">
+            <img src="../assets/img/home/google.png" alt="" />
+          </div>
+          <div class="download-item">
+            <img src="../assets/img/home/andriod.png" alt="" />
+          </div>
+          <div class="download-item">
+            <img src="../assets/img/home/apple.png" alt="" />
+          </div>
+        </div>
+        <div class="posters">
+          <div class="poster poster-one"></div>
+          <div class="poster poster-tow"></div>
+          <div class="poster poster-there"></div>
+        </div>
+      </div>
+      <div class="banner-bg">
+        <img src="../assets/img/home/banner-out.jpg" alt="" />
+      </div>
+      <div class="boder-bottom">
+        <img src="../assets/img/home/banner-boder.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+  .banner {
+    width: 100%;
+    height: 100vh;
+    // height: 937px;
+    // padding-top: 60px;
+    // background: url("../assets/img/home/banner-out.jpg") no-repeat;
+    // background-size: 100% 100%;
+    // object-fit: cover;
+    position: relative;
+    .content {
+      position: absolute;
+      bottom: -100px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .sologan {
+        width: 850px;
+        img {
+          width: 100%;
+        }
+      }
+      .download-center {
+        display: flex;
+        width: 526px;
+        margin: 0 auto;
+        justify-content: space-between;
+        .download-item {
+          width: 162px;
+          height: 50px;
+          cursor: pointer;
+        }
+      }
+      .posters {
+        position: relative;
+        margin-bottom: 12px;
+        margin-top: 74px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .poster {
+          width: 100%;
+          height: 23px;
+          background-image: url("../assets/img/home/poster.png");
+          background-repeat: no-repeat;
+          background-position: center 0;
+          background-color: transparent;
+          background-size: auto;
+          -webkit-animation-name: arrow;
+          animation-name: arrow;
+          -webkit-animation-duration: 1.5s;
+          animation-duration: 1.5s;
+          -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+          -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+        }
+        .poster-one {
+          top: 0;
+          -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+        }
+        .poster-tow {
+          top: 12px;
+          -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+        }
+        .poster-there {
+          top: 24px;
+          -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+        }
+        @keyframes arrow {
+          50% {
+            opacity: 0;
+          }
+        }
+      }
+    }
+    .boder-bottom {
+      width: 100%;
+      z-index: 3;
+      position: absolute;
+      bottom: 0;
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+  }
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1c6aacf..08047c2 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -13,7 +13,6 @@
           <span> {{ nav.name }}</span></a
         >
         <div class="login-btn login-btn-active">
-          <!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
         </div>
       </div>
     </div>
@@ -21,17 +20,17 @@
 </template>
 
 <script setup>
-import { ref,       reactive, onMounted } from "vue";
+import { ref,reactive, onMounted } from "vue";
 const curentid = ref(0);
 const navList = reactive([
   { name: "HOME", path: "/home" },
-  { name: "ABOUT", path: "#/about" },
+  { name: "ABOUT", path: "/about" },
   { name: "GALLERY", path: "/news" },
   { name: "MARKETPLACE", path: "/marketpalce" },
   { name: "CONTACT US", path: "/contact" },
 ]);
 
-//发送请求
+
 function handNavCurent(i) {
   curentid.value = i;
 }
diff --git a/src/components/TestView.vue b/src/components/WeaponSwiper.vue
similarity index 100%
rename from src/components/TestView.vue
rename to src/components/WeaponSwiper.vue
diff --git a/src/components/WhatCebg.vue b/src/components/WhatCebg.vue
new file mode 100644
index 0000000..1f3381d
--- /dev/null
+++ b/src/components/WhatCebg.vue
@@ -0,0 +1,411 @@
+<template>
+  <div>
+    <div class="what-cebg">
+      <div
+        class="cebg-game"
+        id="bgTest"
+        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
+      >
+        CEBG GAME
+      </div>
+      <div
+        class="gameplay-name"
+        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
+      >
+        GAMEPLAY
+      </div>
+      <div class="content">
+        <div class="content-left">
+          <img src="" alt="" />
+        </div>
+        <div class="what-content">
+          <div class="content-right">
+            <div class="title">
+              <img src="../assets/img/home/what-title.png" alt="" />
+            </div>
+            <div class="what-cebg-img">
+              <img src="../assets/img/home/what-cebg.png" alt="" />
+            </div>
+            <div class="slogan">
+              <p>CEBG stands for Crypto Elite's: BATTLEGROUNDS,</p>
+              <p>the first blockchain-based game consisting of Moba,</p>
+              <p>
+                and Battleroyal. It's funded by more than 7 institutional
+                investors,
+              </p>
+              <p>including Kucoin,Hashkey Capital,</p>
+              <p>
+                Initiate Capital, Kernel Ventures, SNZ, Betterverse DAO, etc.
+              </p>
+              <p>
+                Feel free to join the game in PVP or PVE with play-to-earn and
+                free-to-play
+              </p>
+            </div>
+          </div>
+          <div class="monster">
+            <img src="../assets/img/home/monster.png" alt="" />
+          </div>
+        </div>
+
+        <div class="gameplay">
+          <div class="title">
+            <img src="../assets/img/home/gameplay-title.png" alt="" />
+          </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'"
+              @click="handTabActive(true)"
+            >
+              <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
+                PVP
+              </div>
+            </div>
+            <div
+              :class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
+              @click="handTabActive(false)"
+            >
+              <div :class="isPveTab == false ? 'in-rect-active' : 'in-rect'">
+                PVE
+              </div>
+            </div>
+          </div>
+          <div class="gameplay-content">
+            <div class="gameplay-left">
+              <div class="pve-img">
+                <img
+                  v-if="isPveTab"
+                  src="../assets/img/home/pve-img.png"
+                  alt=""
+                />
+                <img v-else src="../assets/img/home/pve-img.png" alt="" />
+              </div>
+            </div>
+            <div class="gameplay-right">
+              <div class="pve-content">
+                <div class="slogan">
+                  Each battle contains 40 players by matching through the ELO
+                  value 2 types of PVP modes: <br />
+                  Matchmaking: no restrictions, players can earn a certain
+                  amount of Gold and in-game rewards <br />
+                  Qualifying: Matching by the monthly rank, and the top players
+                  to share the amount of CEBG token
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="what-bg">
+        <img src="../assets/img/home/what-bg.jpg" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+const Y1 = ref(0);
+const ratio = ref(0.2); //视差偏移率
+const isPveTab = ref(false);
+const positionY1 = ref(0); //背景Y轴偏移量
+const handTabActive = (isTab) => {
+  isPveTab.value = isTab;
+};
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
+  let bgTest = document.getElementById("bgTest");
+  Y1.value = bgTest.offsetTop * ratio.value;
+});
+
+function handleScroll() {
+  const scrollTop =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
+  console.log(mTab.value, "mTab");
+  console.log(positionY1.value + "-------------------3");
+}
+</script>
+
+<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;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    color: transparent;
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 0;
+      color: transparent;
+    }
+  }
+  .cebg-game {
+    font-size: 240px;
+    font-family: "BigJohn";
+    font-weight: 400;
+    color: #020304;
+    line-height: 30px;
+    opacity: 0.5;
+    position: absolute;
+    text-transform: uppercase;
+    top: 45px;
+    right: 0;
+    z-index: 1;
+
+    // line-height: 30px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .gameplay-name {
+    position: absolute;
+    text-transform: uppercase;
+    top: 400px;
+    right: 0;
+    z-index: 1;
+    font-size: 240px;
+    font-family: "BigJohn";
+    font-weight: 400;
+    color: #3e7ea6;
+    line-height: 30px;
+    opacity: 0.4;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .content {
+    width: 1440px;
+    padding-top: 152px;
+    padding-bottom: 226px;
+    margin: 0 auto;
+    display: flex;
+    // align-items: center;
+    flex-direction: column;
+
+    // justify-content: space-between;
+    position: relative;
+    .what-content {
+      display: flex;
+      .monster {
+        // position: absolute;
+        // top: 57px;
+        // left: 64px;
+        z-index: 2;
+        width: 484px;
+        height: 465px;
+      }
+      .content-right {
+        z-index: 2;
+        width: 792px;
+        // margin: 0 auto;
+        padding-bottom: 202px;
+        text-align: center;
+        .title {
+          font-size: 90px;
+          font-family: "JCuYuan";
+          font-weight: 400;
+          font-style: italic;
+          color: #e6f8ff;
+          // white-space: ;
+        }
+        .slogan {
+          width: 631px;
+          // height: 168px;
+          margin: 0 auto;
+          text-align: center;
+          font-size: 18px;
+          font-family: Arial;
+          font-weight: bold;
+          color: #daf1fa;
+        }
+        .what-cebg-img {
+          width: 100%;
+          padding-top: 23px;
+          padding-bottom: 23px;
+          img {
+            max-width: 100%;
+            height: auto;
+            object-fit: cover;
+          }
+        }
+      }
+    }
+
+    .gameplay {
+      z-index: 2;
+      display: flex;
+      // align-items: center;
+      flex-direction: column;
+      // justify-content: space-between;
+      .title {
+        width: 544px;
+        // font-size: 90px;
+        // font-family: "JCuYuan";
+        // font-weight: 400;
+        // font-style: italic;
+        // color: #263641;
+      }
+      .gameplay-img {
+        width: 100%;
+        height: 25px;
+        padding-top: 37px;
+        padding-bottom: 42px;
+        img {
+          max-width: 100%;
+          height: auto;
+        }
+      }
+      .pve {
+        display: flex;
+        justify-content: flex-end;
+        .pve-left {
+          margin-top: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: 119px;
+          height: 44px;
+          line-height: 44px;
+          cursor: pointer;
+          font-size: 28px;
+          font-family: "MEurostile";
+          font-weight: 400;
+          color: #263641;
+          padding: 2px; //边框的宽度
+          background: linear-gradient(135deg, transparent 5px, #263641 0);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+
+          .in-rect {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, transparent 4px, #67a0cb 0);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+        }
+        .pve-left-active {
+          margin-top: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          line-height: 44px;
+          width: 119px;
+          height: 44px;
+          font-size: 28px;
+          font-family: "MEurostile";
+          font-weight: 400;
+          color: #263641;
+          cursor: pointer;
+          padding: 2px; //边框的宽度
+          background: url("../assets/img/home/PVP.png") no-repeat;
+          background-size: contain;
+          background-repeat: no-repeat;
+          // .in-rect-active {
+          //   background: url('../assets/img/home/PVP.png')no-repeat;
+          //   background-size: contain;
+          // }
+        }
+        .pve-right {
+          margin-top: 30px;
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          font-size: 28px;
+          font-family: "MEurostile";
+          font-weight: 400;
+          color: #263641;
+          width: 119px;
+          height: 44px;
+          padding: 2px;
+          line-height: 44px;
+          background: linear-gradient(-135deg, transparent 5px, #263641 0) top
+            right;
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          .in-rect {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(-135deg, transparent 4px, #67a0cb 0) top
+              right;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+        }
+        .pve-right-active {
+          margin-top: 30px;
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+          font-family: "MEurostile";
+          font-weight: 400;
+          color: #263641;
+          width: 119px;
+          height: 44px;
+          padding: 2px;
+          background: url("../assets/img/home/PVE.png") no-repeat;
+          background-size: contain;
+          // transform: rotate(180deg);
+          background-repeat: no-repeat;
+        }
+      }
+      .gameplay-content {
+        display: flex;
+        background: #59a2d0;
+        .gameplay-left {
+          .pve-img {
+            width: 732px;
+            height: 336px;
+          }
+        }
+        .gameplay-right {
+          width: 767px;
+          height: 333px;
+          background: rgba(89, 162, 208, 0.6);
+          // opacity: 0.6;
+
+          .slogan {
+            width: 636px;
+            height: 164px;
+            margin: 0 auto;
+            margin-top: 54px;
+            font-size: 18px;
+            line-height: 30px;
+            font-family: Arial;
+            font-weight: bold;
+            color: #1d2931;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 83fb36a..fbd1119 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter,createWebHistory } from "vue-router";
-import Home from "../views/home.vue";
-import About from "../views/about.vue";
+import Home from "../views/HomeView.vue";
+import About from "../views/AboutView.vue";
 
 
 const routes = [
diff --git a/src/views/about.vue b/src/views/AboutView.vue
similarity index 100%
rename from src/views/about.vue
rename to src/views/AboutView.vue
diff --git a/src/views/ContactUsView.vue b/src/views/ContactUsView.vue
new file mode 100644
index 0000000..b75cfc8
--- /dev/null
+++ b/src/views/ContactUsView.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
new file mode 100644
index 0000000..677f24b
--- /dev/null
+++ b/src/views/GalleryView.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/home.vue b/src/views/HomeView.vue
similarity index 83%
rename from src/views/home.vue
rename to src/views/HomeView.vue
index b5f8158..a6ebcca 100644
--- a/src/views/home.vue
+++ b/src/views/HomeView.vue
@@ -1,143 +1,13 @@
 <template>
   <div class="home-box">
     <NavBar></NavBar>
-    <div class="banner">
-      <div class="content">
-        <div class="sologan">
-          <img src="../assets/img/home/slogan.png" alt="" />
-        </div>
-        <div class="download-center">
-          <div class="download-item">
-            <img src="../assets/img/home/google.png" alt="" />
-          </div>
-          <div class="download-item">
-            <img src="../assets/img/home/andriod.png" alt="" />
-          </div>
-          <div class="download-item">
-            <img src="../assets/img/home/apple.png" alt="" />
-          </div>
-        </div>
-        <div class="posters">
-          <div class="poster poster-one"></div>
-          <div class="poster poster-tow"></div>
-          <div class="poster poster-there"></div>
-        </div>
-      </div>
-      <div class="banner-bg">
-        <img src="../assets/img/home/banner-out.jpg" alt="" />
-      </div>
-      <div class="boder-bottom">
-        <img src="../assets/img/home/banner-boder.png" alt="" />
-      </div>
-    </div>
-    <div class="what-cebg">
-      <div
-        class="cebg-game"
-        id="bgTest"
-        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
-      >
-        CEBG GAME
-      </div>
-      <div
-        class="gameplay-name"
-        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
-      >
-        GAMEPLAY
-      </div>
-      <div class="content">
-        <div class="content-left">
-          <img src="" alt="" />
-        </div>
-        <div class="what-content">
-          <div class="content-right">
-            <div class="title">
-              <img src="../assets/img/home/what-title.png" alt="" />
-            </div>
-            <div class="what-cebg-img">
-              <img src="../assets/img/home/what-cebg.png" alt="" />
-            </div>
-            <div class="slogan">
-              <p>CEBG stands for Crypto Elite's: BATTLEGROUNDS,</p>
-              <p>the first blockchain-based game consisting of Moba,</p>
-              <p>
-                and Battleroyal. It's funded by more than 7 institutional
-                investors,
-              </p>
-              <p>including Kucoin,Hashkey Capital,</p>
-              <p>
-                Initiate Capital, Kernel Ventures, SNZ, Betterverse DAO, etc.
-              </p>
-              <p>
-                Feel free to join the game in PVP or PVE with play-to-earn and
-                free-to-play
-              </p>
-            </div>
-          </div>
-          <div class="monster">
-            <img src="../assets/img/home/monster.png" alt="" />
-          </div>
-        </div>
-
-        <div class="gameplay">
-          <div class="title">
-            <img src="../assets/img/home/gameplay-title.png" alt="" />
-          </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'"
-              @click="handTabActive(true)"
-            >
-              <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
-                PVP
-              </div>
-            </div>
-            <div
-              :class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
-              @click="handTabActive(false)"
-            >
-              <div :class="isPveTab == false ? 'in-rect-active' : 'in-rect'">
-                PVE
-              </div>
-            </div>
-          </div>
-          <div class="gameplay-content">
-            <div class="gameplay-left">
-              <div class="pve-img">
-                <img
-                  v-if="isPveTab"
-                  src="../assets/img/home/pve-img.png"
-                  alt=""
-                />
-                <img v-else src="../assets/img/home/pve-img.png" alt="" />
-              </div>
-            </div>
-            <div class="gameplay-right">
-              <div class="pve-content">
-                <div class="slogan">
-                  Each battle contains 40 players by matching through the ELO
-                  value 2 types of PVP modes: <br />
-                  Matchmaking: no restrictions, players can earn a certain
-                  amount of Gold and in-game rewards <br />
-                  Qualifying: Matching by the monthly rank, and the top players
-                  to share the amount of CEBG token
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="what-bg">
-        <img src="../assets/img/home/what-bg.jpg" alt="" />
-      </div>
-    </div>
 
+    <Banner></Banner>
+    <WhatCebg></WhatCebg>
     <div class="hero-swiper">
       <div class="centent">
         <div class="centent-left">
-          <heroSwiper></heroSwiper>
+          <HeroSwiper></HeroSwiper>
           <div
             class="hero-title"
             :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
@@ -173,7 +43,7 @@
           the right weapon, you must be a brave and wise warrior. Likewise, all
           the entry-level of weapons are free to use.
         </div>
-        <SwiperDemo></SwiperDemo>
+        <WeaponSwiper></WeaponSwiper>
       </div>
       <div class="weapon-bg">
         <img src="../assets/img/home/weapon-bg.jpg" alt="" />
@@ -317,25 +187,22 @@
         <div class="sloagn">
           CEBG is proud to work with so many DAOs and guilds to embrac
         </div>
-        <card></card>
+        <DameplaySwiperCard></DameplaySwiperCard>
       </div>
     </div>
     <FooterBar></FooterBar>
-
   </div>
 </template>
 <script setup>
 import { getCurrentInstance, ref, computed, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
-// import { useStore } from "pinia";
- import NavBar from "../components/NavBar.vue";
- import FooterBar  from "../components/FooterBar.vue";
-// import Parallax from "../components/Parallax.vue";
-// import demoSwiper from "../components/demoSwiper.vue";
-// import gameSwiper from "../components/gameSwiper.vue";
-import SwiperDemo from "../components/TestView.vue";
-import heroSwiper from "../components/heroSwiper.vue";
-import card from  "../components/DameplaySwiperCard.vue";
+import NavBar from "../components/NavBar.vue";
+import FooterBar from "../components/FooterBar.vue";
+import Banner from "../components/Banner.vue";
+import WhatCebg from "../components/WhatCebg.vue";
+import WeaponSwiper from "../components/WeaponSwiper.vue";
+import HeroSwiper from "../components/HeroSwiper.vue";
+import DameplaySwiperCard from "../components/DameplaySwiperCard.vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 // 引入swiper样式（按需导入）
 import "swiper/css";
@@ -369,7 +236,10 @@ const handTabActive = (isTab) => {
 let timer = null;
 function backTop() {
   timer = setInterval(() => {
-    const backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+    const backTop =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop;
     const speedTop = backTop / 10;
     document.documentElement.scrollTop = backTop - speedTop;
     if (backTop === 0) {
@@ -378,12 +248,16 @@ function backTop() {
   }, 10);
 }
 function scrollToTop() {
-  const pageLookHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const pageLookHeight =
+    document.documentElement.clientHeight || document.body.clientHeight;
   const scroll = document.documentElement.scrollTop;
   btnShow.value = scroll >= pageLookHeight * 0.618;
 }
 function handleScroll() {
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+  const scrollTop =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
   console.log(mTab.value, "mTab");
   console.log(positionY1.value + "-------------------3");
@@ -394,7 +268,7 @@ function handleScroll() {
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  
+
   .what-cebg {
     // background: rgba(38, 54, 67, 1);
     // background:url('../assets/img/home/what-bg.jpg') no-repeat;
@@ -584,8 +458,8 @@ function handleScroll() {
             color: #263641;
             cursor: pointer;
             padding: 2px; //边框的宽度
-            background: url('../assets/img/home/PVP.png')no-repeat;
-              background-size: contain;
+            background: url("../assets/img/home/PVP.png") no-repeat;
+            background-size: contain;
             background-repeat: no-repeat;
             // .in-rect-active {
             //   background: url('../assets/img/home/PVP.png')no-repeat;
@@ -633,12 +507,10 @@ function handleScroll() {
             width: 119px;
             height: 44px;
             padding: 2px;
-            background: url('../assets/img/home/PVE.png')no-repeat;
+            background: url("../assets/img/home/PVE.png") no-repeat;
             background-size: contain;
             // transform: rotate(180deg);
             background-repeat: no-repeat;
-
-
           }
         }
         .gameplay-content {
@@ -1186,6 +1058,5 @@ function handleScroll() {
       }
     }
   }
-  
 }
 </style>
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
new file mode 100644
index 0000000..b75cfc8
--- /dev/null
+++ b/src/views/MarketplaceView.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file