diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b28a5d8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..da87841
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/DameplaySwiperCard.vue b/src/components/DameplaySwiperCard.vue
index 7346c04..d58311e 100644
--- a/src/components/DameplaySwiperCard.vue
+++ b/src/components/DameplaySwiperCard.vue
@@ -93,12 +93,10 @@ const boxStyle4 = computed(() => ({
 }));
 const handSlidePrev = () => {
   myRef.value?.$el.swiper.slidePrev();
-  // activeIndex.value = myRef.value?.$el.swiper.activeIndex;
 };
 const handSlideNext = () => {
   myRef.value?.$el.swiper.slideNext();
-  // activeIndex.value = myRef.value?.$el.swiper.activeIndex;
-  // console.log(activeIndex.value, "activeIndex.value01");
+  
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/FooterBar.vue b/src/components/FooterBar.vue
new file mode 100644
index 0000000..946dba5
--- /dev/null
+++ b/src/components/FooterBar.vue
@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <div class="footer">
+      <div class="content">
+        <div class="cooperation-logo">
+          <a href="#" class="hashkey">
+            <img src="../assets/img/home/logo/hashkey.png" alt=""
+          /></a>
+          <a href="#" class="snz">
+            <img src="../assets/img/home/logo/snz.png" alt=""
+          /></a>
+          <a href="#" class="initiate">
+            <img src="../assets/img/home/logo/initiate-catital.png" alt=""
+          /></a>
+          <a href="#" class="kernel">
+            <img src="../assets/img/home/logo/kernel.png" alt=""
+          /></a>
+          <a href="#" class="betterversedao">
+            <img src="../assets/img/home/logo/betterversedao.png" alt=""
+          /></a>
+          <a href="#" class="youbiocapital">
+            <img src="../assets/img/home/logo/youbiocapital.png" alt=""
+          /></a>
+          <a href="#" class="kucoin">
+            <img src="../assets/img/home/logo/kucoin.png" alt=""
+          /></a>
+          <a href="#" class="capltal">
+            <img src="../assets/img/home/logo/capltal.png" alt=""
+          /></a>
+          <a href="#" class="grs">
+            <img src="../assets/img/home/logo/grs.png" alt=""
+          /></a>
+        </div>
+        <div class="footer-logo">
+          <div class="go-start"></div>
+          <div class="go-content">
+            <!-- <img src="../assets/img/home/logo.png" alt="" /> -->
+          </div>
+          <div class="go-top">
+            <div class="rise-top" @click="backTop">
+              <div class="rise-title">RISE TO THE TOP</div>
+              <div><img src="../assets/img/home/rise.jpg" alt="" /></div>
+            </div>
+          </div>
+        </div>
+        <div class="content-img-top">
+          <div class="center">
+            <img src="../assets/img/home/footer-boder.png" alt="" />
+          </div>
+        </div>
+        <div class="footer-about">
+          <div class="about-lable-child">
+            <div class="child-item">
+              <a href="#" class="about-item-title">PRODUCT</a>
+              <a href="#" class="about-item">Home</a>
+              <a href="#/about" class="about-item">Gameplay</a>
+              <a href="#" class="about-item">Tokenomic</a>
+              <a href="#" class="about-item">NFT</a>
+              <a href="#" class="about-item">Marketplace</a>
+            </div>
+            <div class="child-item">
+              <a href="/about" class="about-item-title">RESOURCES</a>
+              <a href="#" class="about-item">Whitepaper</a>
+            </div>
+            <div class="child-item">
+              <a href="#" class="about-item-title">ABOUT</a>
+              <a href="#" class="about-item">Team</a>
+              <a href="#" class="about-item">Roadmp</a>
+            </div>
+            <div class="child-item">
+              <a href="#" class="about-item-title">POLICIES</a>
+              <a href="#" class="about-item">Terms of use</a>
+              <a href="#" class="about-item">Privacy Policy</a>
+            </div>
+            <div class="child-item">
+              <a href="#" class="about-item-title">CONTACT US</a>
+              <a href="#" class="about-item">contact@cebg,games</a>
+            </div>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
+          <div class="follow">
+            <a href="#" class="twiter">
+              <img src="../assets/img/home/logo/twiter.png" alt=""
+            /></a>
+            <a href="#" class="telegram">
+              <img src="../assets/img/home/logo/telegram.png" alt=""
+            /></a>
+            <a href="#" class="dosccord">
+              <img src="../assets/img/home/logo/doscord.png" alt=""
+            /></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  let timer = null;
+function backTop() {
+  timer = setInterval(() => {
+    const backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+    const speedTop = backTop / 10;
+    document.documentElement.scrollTop = backTop - speedTop;
+    if (backTop === 0) {
+      clearInterval(timer);
+    }
+  }, 10);
+}
+</script>
+
+<style lang="scss" scoped>
+  .footer {
+    width: 100%;
+
+    .content {
+      padding-top: 133px;
+      max-width: 1440px;
+      margin: 0 auto;
+      .cooperation-logo {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+        .hashkey {
+          width: 112px;
+          height: 18px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .snz {
+          width: 67px;
+          height: 37px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .initiate {
+          width: 116px;
+          height: 38px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .kernel {
+          width: 113px;
+          height: 39px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .betterversedao {
+          width: 119px;
+          height: 29px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .youbiocapital {
+          width: 93px;
+          height: 55px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .capltal {
+          width: 137px;
+          height: 35px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .kucoin {
+          width: 95px;
+          height: 29px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+        .grs {
+          width: 95px;
+          height: 29px;
+          img {
+            max-width: 100%;
+            height: auto;
+          }
+        }
+      }
+      .content-img-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 36px;
+        .center {
+          width: 100%;
+          height: 26px;
+          img {
+            width: 100%;
+            height: auto;
+          }
+        }
+      }
+      .footer-logo {
+        padding-top: 75px;
+        display: flex;
+        justify-content: stretch;
+        .go-start {
+          flex: 1;
+        }
+        .go-content {
+          flex: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img {
+            width: 132px;
+            height: 127px;
+          }
+        }
+        .go-top {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          .rise-top {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            font-size: 18px;
+            font-family: Arial;
+            font-weight: bold;
+            color: #000000;
+            .rise-title {
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+
+      .footer-about {
+        padding-top: 40px;
+        .about-lable {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: 40px;
+          border-bottom: 1px solid #d0d0d0;
+          a {
+            font-size: 20px;
+            font-family: Arial;
+            font-weight: bold;
+            color: #000000;
+            font-weight: 900;
+            text-transform: uppercase;
+            transition-property: color;
+            transition-duration: 0.15s;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          }
+          a:hover {
+            font-size: 20px;
+            font-family: Arial;
+            font-weight: 900;
+            text-transform: uppercase;
+            transition-property: color;
+            transition-duration: 0.15s;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            color: #1fc8ff;
+          }
+          .about-item {
+            flex: 1;
+          }
+        }
+        .about-lable-child {
+          display: flex;
+          position: relative;
+          justify-content: space-evenly;
+          // align-items: center;
+          padding-bottom: 24px;
+          margin-top: 40px;
+
+          .child-item {
+            flex: 1;
+            display: flex;
+            // justify-content: space-between;
+            // align-items: center;
+
+            flex-direction: column;
+            a {
+              font-size: 18px;
+              margin-bottom: 46px;
+              font-family: Arial;
+              font-weight: bold;
+              color: #6a6d74;
+              transition-property: color;
+              transition-duration: 0.15s;
+              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            a:hover {
+              font-size: 18px;
+              margin-bottom: 46px;
+              font-family: Arial;
+              font-weight: bold;
+              color: #1fc8ff;
+              transition-property: color;
+              transition-duration: 0.15s;
+              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            .about-item-title {
+              font-size: 20px;
+              font-family: Arial;
+              font-weight: bold;
+              color: #000000;
+              font-weight: 900;
+              padding-bottom: 14px;
+              // text-transform: uppercase;
+              transition-property: color;
+              transition-duration: 0.15s;
+              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            .about-item-title:hover {
+              font-size: 20px;
+              font-family: Arial;
+              font-weight: 900;
+              // text-transform: uppercase;
+              transition-property: color;
+              transition-duration: 0.15s;
+              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+              color: #1fc8ff;
+            }
+          }
+        }
+      }
+      .about-lable-child::after {
+        content: "";
+        height: 1px;
+        overflow: hidden;
+        display: block;
+        left: 0;
+        top: 46px;
+        position: absolute;
+        width: 100%;
+        background: #d0d0d0;
+      }
+      .footer-bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 46px;
+        .mailbox {
+          font-size: 18px;
+          font-family: Arial;
+          font-weight: bold;
+          color: #797979;
+        }
+        .follow {
+          display: flex;
+          a {
+            margin-left: 29px;
+          }
+          .twiter {
+            img {
+              width: 47px;
+              height: 34px;
+            }
+          }
+          .dosccord {
+            img {
+              width: 47px;
+              height: 34px;
+            }
+          }
+          .telegram {
+            img {
+              width: 37px;
+              height: 37px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..1c6aacf
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div class="header header-top">
+      <div class="nav">
+        <a
+          :href="nav.path"
+          class="nav-item duration-200"
+          v-for="(nav, i) in navList"
+          :class="i == curentid ? 'active-nav-item' : ''"
+          :key="i"
+          @click="handNavCurent(i)"
+        >
+          <span> {{ nav.name }}</span></a
+        >
+        <div class="login-btn login-btn-active">
+          <!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref,       reactive, onMounted } from "vue";
+const curentid = ref(0);
+const navList = reactive([
+  { name: "HOME", path: "/home" },
+  { name: "ABOUT", path: "#/about" },
+  { name: "GALLERY", path: "/news" },
+  { name: "MARKETPLACE", path: "/marketpalce" },
+  { name: "CONTACT US", path: "/contact" },
+]);
+
+//发送请求
+function handNavCurent(i) {
+  curentid.value = i;
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  background-color: rgb(255, 255, 255);
+  width: 100%;
+  // height: 60px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+  .nav {
+    padding-left: 252px;
+    display: flex;
+    justify-content: space-between;
+    width: 1130px;
+    // position: relative;
+    a {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+    .nav-item {
+      font-size: 16px;
+      font-family: "JCuYuan";
+      // font-weight: 400;
+      position: relative;
+      font-weight: 800;
+      transition-property: color;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      color: #ccc;
+    }
+    .duration-200 {
+      transition-duration: 0.2s;
+    }
+    .nav-item:hover {
+      transition-property: color;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      color: rgba(31, 200, 255, 1);
+    }
+    .nav-item::after {
+      content: "";
+      height: 7px;
+      overflow: hidden;
+      display: block;
+      left: -7%;
+      bottom: 0;
+      position: absolute;
+      width: 120%;
+      // background: #1fc8ff;
+      background: url("../assets/img/home/nav-boder.png") no-repeat;
+      background-size: 100% 100%;
+      transform: scaleX(0);
+      transition: all 1s;
+    }
+    .nav-item:hover::after {
+      transform: scaleX(1);
+    }
+
+    .active-nav-item {
+      font-size: 16px;
+      font-family: "JCuYuan";
+      // font-weight: 400;
+      position: relative;
+      font-weight: 800;
+      transition-property: color;
+      transition-duration: 1s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      color: #1fc8ff;
+    }
+
+    .active-nav-item::after {
+      content: "";
+      height: 8px;
+      overflow: hidden;
+      display: block;
+      left: -7%;
+      bottom: 0;
+      position: absolute;
+      width: 120%;
+      // background: #1fc8ff;
+      background: url("../assets/img/home/nav-boder.png") no-repeat;
+      background-size: 100% 100%;
+      transform: scaleX(0);
+      transition: all 1s;
+    }
+    .active-nav-item::after {
+      transform: scaleX(1);
+    }
+  }
+}
+// .header-top {
+//   position: relative;
+// }
+.login-btn-active {
+  position: relative;
+}
+.login-btn {
+  position: absolute;
+  right: 0;
+  width: 170px;
+  height: 69px;
+  cursor: pointer;
+  background: url("../assets/img/home/login-btn.png") no-repeat;
+  background-size: 100% 100%;
+  z-index: 0;
+  transition: background-image 1s;
+  // transition:background-image 1s linear;
+  // transform: scaleX(1);
+  // transition: all 0.15s;
+  // transition-property: background;
+  // transition-duration: 0.15s;
+  // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.login-btn::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  // 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;
+  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);
+}
+.login-btn:active:after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 9befa5e..9a3f742 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,18 +5,6 @@ import 'normalize.css';
 import { createPinia } from "pinia";
 import router from "./router/index";
 import App from './App.vue'
-// if (process.env.NODE_ENV === 'development') {
-//     const devConfig = await import('./config/dev')
-//     // 使用开发环境的配置
-//     app.config.globalProperties.$config = devConfig.default
-//   } else if (process.env.NODE_ENV === 'testing') {
-//     const testConfig = await import('./config/test')
-//     // 使用测试环境的配置
-//     app.config.globalProperties.$config = testConfig.default
-//   } else if (process.env.NODE_ENV === 'production') {
-//     const prodConfig = await import('./config/prod')
-//     // 使用生产环境的配置
-//     app.config.globalProperties.$config = prodConfig.default
-//   }
+
 const app = createApp(App);
 app.use(createPinia()).use(router).mount('#app')
diff --git a/src/views/home.vue b/src/views/home.vue
index ca004a6..b5f8158 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,23 +1,6 @@
 <template>
   <div class="home-box">
-    <div class="header header-top">
-      <div class="nav">
-        <a
-          :href="nav.path"
-          
-          class="nav-item duration-200"
-          v-for="(nav, i) in navList"
-          :class="i == curentid ? 'active-nav-item' : ''"
-          :key="i"
-          @click="handNavCurent(i)"
-        >
-          <span> {{ nav.name }}</span></a
-        >
-        <div class="login-btn login-btn-active">
-          <!-- <img src="../assets/img/home/login-btn.png" alt="" /> -->
-        </div>
-      </div>
-    </div>
+    <NavBar></NavBar>
     <div class="banner">
       <div class="content">
         <div class="sologan">
@@ -337,113 +320,22 @@
         <card></card>
       </div>
     </div>
-    <div class="footer">
-      <div class="content">
-        <div class="cooperation-logo">
-          <a href="#" class="hashkey">
-            <img src="../assets/img/home/logo/hashkey.png" alt=""
-          /></a>
-          <a href="#" class="snz">
-            <img src="../assets/img/home/logo/snz.png" alt=""
-          /></a>
-          <a href="#" class="initiate">
-            <img src="../assets/img/home/logo/initiate-catital.png" alt=""
-          /></a>
-          <a href="#" class="kernel">
-            <img src="../assets/img/home/logo/kernel.png" alt=""
-          /></a>
-          <a href="#" class="betterversedao">
-            <img src="../assets/img/home/logo/betterversedao.png" alt=""
-          /></a>
-          <a href="#" class="youbiocapital">
-            <img src="../assets/img/home/logo/youbiocapital.png" alt=""
-          /></a>
-          <a href="#" class="kucoin">
-            <img src="../assets/img/home/logo/kucoin.png" alt=""
-          /></a>
-          <a href="#" class="capltal">
-            <img src="../assets/img/home/logo/capltal.png" alt=""
-          /></a>
-          <a href="#" class="grs">
-            <img src="../assets/img/home/logo/grs.png" alt=""
-          /></a>
-        </div>
-        <div class="footer-logo">
-          <div class="go-start"></div>
-          <div class="go-content">
-            <!-- <img src="../assets/img/home/logo.png" alt="" /> -->
-          </div>
-          <div class="go-top">
-            <div class="rise-top" @click="backTop">
-              <div class="rise-title">RISE TO THE TOP</div>
-              <div><img src="../assets/img/home/rise.jpg" alt="" /></div>
-            </div>
-          </div>
-        </div>
-        <div class="content-img-top">
-          <div class="center">
-            <img src="../assets/img/home/footer-boder.png" alt="" />
-          </div>
-        </div>
-        <div class="footer-about">
-          <div class="about-lable-child">
-            <div class="child-item">
-              <a href="#" class="about-item-title">PRODUCT</a>
-              <a href="#" class="about-item">Home</a>
-              <a href="#/about" class="about-item">Gameplay</a>
-              <a href="#" class="about-item">Tokenomic</a>
-              <a href="#" class="about-item">NFT</a>
-              <a href="#" class="about-item">Marketplace</a>
-            </div>
-            <div class="child-item">
-              <a href="/about" class="about-item-title">RESOURCES</a>
-              <a href="#" class="about-item">Whitepaper</a>
-            </div>
-            <div class="child-item">
-              <a href="#" class="about-item-title">ABOUT</a>
-              <a href="#" class="about-item">Team</a>
-              <a href="#" class="about-item">Roadmp</a>
-            </div>
-            <div class="child-item">
-              <a href="#" class="about-item-title">POLICIES</a>
-              <a href="#" class="about-item">Terms of use</a>
-              <a href="#" class="about-item">Privacy Policy</a>
-            </div>
-            <div class="child-item">
-              <a href="#" class="about-item-title">CONTACT US</a>
-              <a href="#" class="about-item">contact@cebg,games</a>
-            </div>
-          </div>
-        </div>
-        <div class="footer-bottom">
-          <div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
-          <div class="follow">
-            <a href="#" class="twiter">
-              <img src="../assets/img/home/logo/twiter.png" alt=""
-            /></a>
-            <a href="#" class="telegram">
-              <img src="../assets/img/home/logo/telegram.png" alt=""
-            /></a>
-            <a href="#" class="dosccord">
-              <img src="../assets/img/home/logo/doscord.png" alt=""
-            /></a>
-          </div>
-        </div>
-      </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";
-// 引入swiper组件
 import { Swiper, SwiperSlide } from "swiper/vue";
 // 引入swiper样式（按需导入）
 import "swiper/css";
@@ -453,28 +345,10 @@ import "swiper/css/scrollbar"; // 轮播图的滚动条
 // 引入swiper核心和所需模块
 import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
 
-// 在modules加入要使用的模块
-// import { httpGet } from "@/api/http.js";
-
 const modules = [Autoplay, Pagination, Navigation, Scrollbar];
 const rotate = ref(0);
-
 const router = useRouter();
 // const store = useStore();
-
-
-const navList = reactive([
-  { name: "HOME", path: "/home" },
-  { name: "ABOUT", path: "#/about" },
-  { name: "GALLERY", path: "/news" },
-  { name: "MARKETPLACE", path: "/marketpalce" },
-  { name: "CONTACT US", path: "/contact" },
-]);
-const curentid = ref(0);
-//发送请求
-function handNavCurent(i) {
-  curentid.value = i;
-}
 const btnShow = ref(false);
 const positionY1 = ref(0); //背景Y轴偏移量
 const Y1 = ref(0);
@@ -487,36 +361,7 @@ onMounted(() => {
   let bgTest = document.getElementById("bgTest");
   Y1.value = bgTest.offsetTop * ratio.value;
 });
-// let timer = null;
-// function backTop() {
-//   timer = setInterval(function () {
-//     let backTop =
-//       window.pageYOffset ||
-//       document.documentElement.scrollTop ||
-//       document.body.scrollTop;
-//     let speedTop = backTop / 10;
-//     document.documentElement.scrollTop = backTop - speedTop;
-//     if (backTop === 0) {
-//       clearInterval(timer);
-//     }
-//   }, 10);
-// }
-// function scrollToTop() {
-//   let pageLookHeight =
-//     document.documentElement.clientHeight || document.body.clientHeight;
-//   let scroll = document.documentElement.scrollTop;
-//   btnShow.value = scroll >= pageLookHeight * 0.618;
-// }
 
-// function handleScroll() {
-//   let 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");
-// }
 const handTabActive = (isTab) => {
   isPveTab.value = isTab;
 };
@@ -549,148 +394,7 @@ function handleScroll() {
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  .header {
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    background-color: rgb(255, 255, 255);
-    width: 100%;
-    // height: 60px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -2px rgba(0, 0, 0, 0.1);
-
-    .nav {
-      padding-left: 252px;
-      display: flex;
-      justify-content: space-between;
-      width: 1130px;
-      // position: relative;
-      a {
-        padding-top: 20px;
-        padding-bottom: 20px;
-      }
-      .nav-item {
-        font-size: 16px;
-        font-family: "JCuYuan";
-        // font-weight: 400;
-        position: relative;
-        font-weight: 800;
-        transition-property: color;
-        transition-duration: 0.15s;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        color: #ccc;
-      }
-      .duration-200 {
-        transition-duration: 0.2s;
-      }
-      .nav-item:hover {
-        transition-property: color;
-        transition-duration: 0.15s;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        color: rgba(31, 200, 255, 1);
-      }
-      .nav-item::after {
-        content: "";
-        height: 7px;
-        overflow: hidden;
-        display: block;
-        left: -7%;
-        bottom: 0;
-        position: absolute;
-        width: 120%;
-        // background: #1fc8ff;
-        background: url("../assets/img/home/nav-boder.png") no-repeat;
-        background-size: 100% 100%;
-        transform: scaleX(0);
-        transition: all 1s;
-      }
-      .nav-item:hover::after {
-        transform: scaleX(1);
-      }
-
-      .active-nav-item {
-        font-size: 16px;
-        font-family: "JCuYuan";
-        // font-weight: 400;
-        position: relative;
-        font-weight: 800;
-        transition-property: color;
-        transition-duration: 1s;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        color: #1fc8ff;
-      }
-
-      .active-nav-item::after {
-        content: "";
-        height: 8px;
-        overflow: hidden;
-        display: block;
-        left: -7%;
-        bottom: 0;
-        position: absolute;
-        width: 120%;
-        // background: #1fc8ff;
-        background: url("../assets/img/home/nav-boder.png") no-repeat;
-        background-size: 100% 100%;
-        transform: scaleX(0);
-        transition: all 1s;
-      }
-      .active-nav-item::after {
-        transform: scaleX(1);
-      }
-    }
-  }
-  // .header-top {
-  //   position: relative;
-  // }
-  .login-btn-active {
-    position: relative;
-  }
-  .login-btn {
-    position: absolute;
-    right: 0;
-    width: 170px;
-    height: 69px;
-    cursor: pointer;
-    background: url("../assets/img/home/login-btn.png") no-repeat;
-    background-size: 100% 100%;
-    z-index: 0;
-    transition: background-image 1s;
-    // transition:background-image 1s linear;
-    // transform: scaleX(1);
-    // transition: all 0.15s;
-    // transition-property: background;
-    // transition-duration: 0.15s;
-    // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .login-btn::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    opacity: 0;
-    // 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;
-    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);
-  }
-  .login-btn:active:after {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-
+  
   .what-cebg {
     // background: rgba(38, 54, 67, 1);
     // background:url('../assets/img/home/what-bg.jpg') no-repeat;
@@ -1482,284 +1186,6 @@ function handleScroll() {
       }
     }
   }
-  .footer {
-    width: 100%;
-
-    .content {
-      padding-top: 133px;
-      max-width: 1440px;
-      margin: 0 auto;
-      .cooperation-logo {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        -webkit-filter: grayscale(100%);
-        filter: grayscale(100%);
-        .hashkey {
-          width: 112px;
-          height: 18px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .snz {
-          width: 67px;
-          height: 37px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .initiate {
-          width: 116px;
-          height: 38px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .kernel {
-          width: 113px;
-          height: 39px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .betterversedao {
-          width: 119px;
-          height: 29px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .youbiocapital {
-          width: 93px;
-          height: 55px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .capltal {
-          width: 137px;
-          height: 35px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .kucoin {
-          width: 95px;
-          height: 29px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-        .grs {
-          width: 95px;
-          height: 29px;
-          img {
-            max-width: 100%;
-            height: auto;
-          }
-        }
-      }
-      .content-img-top {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-top: 36px;
-        .center {
-          width: 100%;
-          height: 26px;
-          img {
-            width: 100%;
-            height: auto;
-          }
-        }
-      }
-      .footer-logo {
-        padding-top: 75px;
-        display: flex;
-        justify-content: stretch;
-        .go-start {
-          flex: 1;
-        }
-        .go-content {
-          flex: 1;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          img {
-            width: 132px;
-            height: 127px;
-          }
-        }
-        .go-top {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          .rise-top {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            font-size: 18px;
-            font-family: Arial;
-            font-weight: bold;
-            color: #000000;
-            .rise-title {
-              margin-right: 5px;
-            }
-          }
-        }
-      }
-
-      .footer-about {
-        padding-top: 40px;
-        .about-lable {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-bottom: 40px;
-          border-bottom: 1px solid #d0d0d0;
-          a {
-            font-size: 20px;
-            font-family: Arial;
-            font-weight: bold;
-            color: #000000;
-            font-weight: 900;
-            text-transform: uppercase;
-            transition-property: color;
-            transition-duration: 0.15s;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          }
-          a:hover {
-            font-size: 20px;
-            font-family: Arial;
-            font-weight: 900;
-            text-transform: uppercase;
-            transition-property: color;
-            transition-duration: 0.15s;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            color: #1fc8ff;
-          }
-          .about-item {
-            flex: 1;
-          }
-        }
-        .about-lable-child {
-          display: flex;
-          position: relative;
-          justify-content: space-evenly;
-          // align-items: center;
-          padding-bottom: 24px;
-          margin-top: 40px;
-
-          .child-item {
-            flex: 1;
-            display: flex;
-            // justify-content: space-between;
-            // align-items: center;
-
-            flex-direction: column;
-            a {
-              font-size: 18px;
-              margin-bottom: 46px;
-              font-family: Arial;
-              font-weight: bold;
-              color: #6a6d74;
-              transition-property: color;
-              transition-duration: 0.15s;
-              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            }
-            a:hover {
-              font-size: 18px;
-              margin-bottom: 46px;
-              font-family: Arial;
-              font-weight: bold;
-              color: #1fc8ff;
-              transition-property: color;
-              transition-duration: 0.15s;
-              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            }
-            .about-item-title {
-              font-size: 20px;
-              font-family: Arial;
-              font-weight: bold;
-              color: #000000;
-              font-weight: 900;
-              padding-bottom: 14px;
-              // text-transform: uppercase;
-              transition-property: color;
-              transition-duration: 0.15s;
-              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            }
-            .about-item-title:hover {
-              font-size: 20px;
-              font-family: Arial;
-              font-weight: 900;
-              // text-transform: uppercase;
-              transition-property: color;
-              transition-duration: 0.15s;
-              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-              color: #1fc8ff;
-            }
-          }
-        }
-      }
-      .about-lable-child::after {
-        content: "";
-        height: 1px;
-        overflow: hidden;
-        display: block;
-        left: 0;
-        top: 46px;
-        position: absolute;
-        width: 100%;
-        background: #d0d0d0;
-      }
-      .footer-bottom {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 46px;
-        .mailbox {
-          font-size: 18px;
-          font-family: Arial;
-          font-weight: bold;
-          color: #797979;
-        }
-        .follow {
-          display: flex;
-          a {
-            margin-left: 29px;
-          }
-          .twiter {
-            img {
-              width: 47px;
-              height: 34px;
-            }
-          }
-          .dosccord {
-            img {
-              width: 47px;
-              height: 34px;
-            }
-          }
-          .telegram {
-            img {
-              width: 37px;
-              height: 37px;
-            }
-          }
-        }
-      }
-    }
-  }
+  
 }
 </style>