fix

src/components/home/Banner.vue

@@ -4,9 +4,8 @@
       <div class="content">
         <div class="sologan">
           <img src="@/assets/img/home/banner-slogan.gif" alt="" />
-          <!-- <Slogan></Slogan> -->
         </div>
-        <!-- <div class="download-center">
+        <div class="download-center">
           <div class="download-item">
             <a href="https://play.google.com/store/apps/details?id=io.metamask">
               <img src="@/assets/img/home/google.png" alt=""
@@ -22,7 +21,7 @@
               <img src="@/assets/img/home/apple.png" alt=""
             /></a>
           </div>
-        </div> -->
+        </div>
       </div>
       <div class="posters">
         <div class="poster poster-one"></div>
@@ -50,18 +49,26 @@ import Slogan from "./Slogan.vue";
   height: 937px;
   position: relative;
   .sologan {
-    margin: 0 auto;
+    padding-top: 150px;
-    width: 1600px;
+    margin: 0px auto;
-    height: 162px;
+    width: 1259px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img{
+      object-fit: cover;
+      height: 514px;
+    }
+    // height: 162px;
     padding-bottom: 25px;
   }
   .content {
-    position: absolute;
+    // position: relative;
-    top: 10px;
+    // 
-    left: 10%;
+    // z-index: 8;
-    z-index: 8;
 
     .download-center {
+      
       margin-top: 25px;
       display: flex;
       width: 566px;
@@ -130,6 +137,7 @@ import Slogan from "./Slogan.vue";
     top: 0;
     bottom: 0;
     width: 100%;
+    z-index: -1;
     height: 100%;
     img {
       width: 100%;

src/components/home/DameplaySwiperCard.vue

@@ -6,6 +6,7 @@
         :grabCursor="false"
         :centeredSlides="true"
         slidesPerView="2"
+        :autoplay="{ delay: 3500, disableOnInteraction: false }"
         :coverflowEffect="{
           rotate: 0,
           stretch: 10,
@@ -70,7 +71,7 @@ const imageList = reactive([
   { imgSrc: new URL("@/assets/img/home/game-swiper-card/04.png", import.meta.url).href },
   { imgSrc: new URL("@/assets/img/home/game-swiper-card/05.png", import.meta.url).href },
 ]);
-const modules = [EffectCoverflow, Pagination];
+const modules = [EffectCoverflow, Pagination,Autoplay];
 const boxStyle4 = computed(() => ({
   perspective: "300px",
   transition: "0s",

src/components/home/GalleryBanner.vue

@@ -4,6 +4,7 @@
       :spaceBetween="10"
       :thumbs="{ swiper: thumbsSwiper }"
       :modules="modules"
+      :autoplay="{ delay: 3500, disableOnInteraction: false }"
       class="mySwiper2"
       ref="myRef"
       :navigation="{

src/components/home/NavBar.vue

@@ -1,225 +0,0 @@
-<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" @click="login">LOGIN</div>
-      </div>
-    </div>
-    <ChainModel></ChainModel>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted ,} from "vue";
-import { useChainStore  }from '@/store/chain';
-import { useRouter, useRoute } from 'vue-router';
-import ChainModel from './ChainModel.vue'
-
-const router = useRouter();
-const chain = useChainStore();
-
-function click(event) {
-  router.push(event.key);
-  
-}
-
-async function login(event) {
-  if (!chain.logined) {
-    // 没有登录情况下执行登录
-    await chain.chainManager.login()
-    console.log("logined:", chain.chainManager.isLogined);
-    chain.logined = chain.chainManager.isLogined;
-  }
-  else{ 
-    // 已经登录过就退出登录
-    await chain.chainManager.logout();
-    console.log("logined:", chain.chainManager.isLogined);
-    chain.logined = chain.chainManager.isLogined;
-  }
-}
-
-const curentid = ref(0);
-const navList = reactive([
-  { name: "HOME", path: "/" },
-  { name: "ABOUT", path: "/about" },
-  { name: "GALLERY", path: "/gellery" },
-  { name: "MARKETPLACE", path: "/marketpalce" },
-  { name: "COMMUNITY", path: "/contact" },
-]);
-
-function handNavCurent(i) {
-  
-  curentid.value = i;
-  // router.push(i.path);
-}
-</script>
-
-<style lang="scss" scoped>
-.header {
-  position: fixed;
-  z-index: 19;
-  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;
-      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;
-    }
-    .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);
-      font-family: "Big John";
-      color: rgba(215, 68, 88, 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";
-      //
-      position: relative;
-      font-weight: 800;
-      transition-property: color;
-      transition-duration: 1s;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      color: rgba(215, 68, 88, 1);
-    }
-
-    .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: 228px;
-  height: 72px;
-  font-size: 26px;
-  line-height: 72px;
-  font-size: 22px;
-  font-family: "Big John";
-  color: #122326;
-  text-align: center;
-  cursor: pointer;
-  background: url("@/assets/svg/login-active.svg") 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: 1;
-  // transition: 0.5s;
-  background: url("@/assets/svg/login.svg") no-repeat;
-  background-size: 100% 100%;
-  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;
-  clip-path: polygon(
-    calc(50% + 0px) calc(50% + 150px),
-    calc(50% + 150px) calc(50% + 0px),
-    calc(50% + 0px) calc(50% - 150px),
-    calc(50% - 150px) calc(50% - 0px)
-  );
-
-  transition: all 0.3s ease-in-out;
-  transform: scaleX(1, 1);
-}
-.login-btn:active:after {
-  opacity: 1;
-  transform: scaleX(1);
-}
-</style>

src/components/layout/FooterBar.vue

@@ -86,7 +86,6 @@ function backTop() {
 <style lang="scss" scoped>
 .footer {
   width: 100%;
-
   .content {
     // padding-top: 133px;
     max-width: 1440px;
@@ -327,7 +326,7 @@ function backTop() {
     }
     .footer-bottom {
       display: flex;
-      padding-bottom: 150px;
+      padding-bottom: 69px;
       justify-content: space-between;
       align-items: center;
 

src/components/layout/NavBar.vue

@@ -15,7 +15,7 @@
           @click="handNavCurent(nav)"
         >
           <span> {{ nav.name }}</span>
-          <div class="dropdown">
+          <div class="dropdown" v-show="showNavMenu">
             <ul>
               <li v-for="(item, index) in nav.submenu" :key="index">
                 <a class="link-name" :href="item.link" v-if="i !== 2">
@@ -78,24 +78,12 @@ function click(event) {
 }
 
 const formatAddress = computed(() => {
-  console.log(AppModule.accountId, "AppModule.accountId");
+  const accountId = AppModule.accountId;
-  if (!AppModule.accountId) {
+  if (!accountId) return "-";
-    return "-";
+  if (accountId.length >= 10) {
-  }
+    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
-  if (AppModule.accountId.length >= 10) {
-    return (
-      AppModule.accountId.substring(0, 6) +
-      "......" +
-      AppModule.accountId.substring(AppModule.accountId.length - 4)
-    );
-  } else if (
-    AppModule.accountId.length > 0 &&
-    AppModule.accountId.length < 10
-  ) {
-    return AppModule.accountId;
-  } else {
-    return "-";
   }
+  return accountId;
 });
 async function login(event) {
   if (!chain.logined) {
@@ -112,6 +100,7 @@ const logout = async () => {
 };
 const avatarUrl = ref("https://example.com/avatar.jpg");
 const showMenu = ref(false);
+const showNavMenu = ref(false);
 const activeIndex = ref(0);
 const navList = reactive([
   { id: 0, name: "HOME", path: "/" },
@@ -144,7 +133,11 @@ const navList = reactive([
 
 function handNavCurent(nav) {
   activeIndex.value = nav.id;
-  router.push(nav.path);
+  if (nav.id > 1) {
+    showNavMenu.value = true;
+  } else {
+    router.push(nav.path);
+  }
 }
 watchEffect(() => {
   const index = navList.findIndex((navItem) => navItem.path === route.path);