完善 改变页面切换方式

src/App.vue

@@ -1,127 +1,10 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import {useSunStore} from "@/stores/sun";
-import Nav from '@/components/Nav.vue'
-import {ref,nextTick,provide,onMounted} from "vue";
-const sunStore = useSunStore()
-
-const isRouterAlive = ref(true);
-const reload = () => {
-  isRouterAlive.value = false;
-  nextTick(() => {
-    isRouterAlive.value = true;
-  });
-};
-provide("reload", reload);
-
 </script>
 
 <template>
-  <div class="main">
-<!--    <div class="mainBG">-->
-<!--      <img src="./assets/navBg.png" alt="BG">-->
-<!--    </div>-->
-    <div class="BG1"/>
-    <div class="BG2"/>
-    <div class="BG3"/>
-    <Nav v-if="isRouterAlive"/>
-    <div class="header">
-      <div class="left" style="z-index: 2">
-        <img class="left" v-show="!sunStore.sun" src="./assets/header-text.svg" alt="header">
-        <!--        <img class="left" v-show="sunStore.sun" src="../assets/home/header.svg" alt="header">-->
-      </div>
-      <div class="right">
-        <video v-show="!sunStore.sun" autoplay muted width="342" height="342" src="./media/0727(7).mp4">
-        </video>
-        <!--        <video v-show="sunStore.sun" autoplay muted width="640" height="640" src="../media/0727(12).mp4">-->
-        <!--        </video>-->
-      </div>
-    </div>
     <RouterView />
-  </div>
 </template>
 
 <style scoped lang="scss">
-.main{
-  width: 1440px;
-  //height: 100%;
-  margin: auto;
-  padding-top: 30px;
-
-  .mainBG {
-    position: absolute;
-    top: 0;
-    z-index: -1;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-  }
-  .BG1 {
-    position: absolute;
-    top: -400px;
-    left: 260px;
-    display: flex;
-    justify-content: center;
-    animation: rotateAnimation 10s linear infinite;
-    border-radius: 50%;
-    background: rgba(74, 55, 225, 0.80);
-    filter: blur(90px);
-    width: 994px;
-    height: 994px;
-  }
-  .BG2 {
-    position: absolute;
-    top: -300px;
-    left: -70px;
-    display: flex;
-    justify-content: center;
-    animation: rotateAnimation 15s linear infinite;
-    border-radius: 874px;
-    background: rgba(186, 85, 214, 0.80);
-    filter: blur(90px);
-    width: 694px;
-    height: 874px;
-  }
-  .BG3 {
-    position: absolute;
-    top: 300px;
-    left: 700px;
-    display: flex;
-    justify-content: center;
-    animation: rotateAnimation 10s linear infinite;
-    border-radius: 447.606px;
-    background: rgba(255, 232, 186, 0.80);
-    filter: blur(120px);
-    width: 329px;
-    height: 447px;
-  }
-  @keyframes rotateAnimation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(-360deg);
-    }
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 60px;
-
-    .left {
-      user-select: none;
-      -webkit-user-drag: none;
-    }
-
-    .right {
-      //user-select: none;
-      //-webkit-user-drag: none;
-      //width: 320px;
-      //height: 180px;
-    }
-  }
-}
-
 </style>

src/components/Nav.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import {onMounted, ref } from 'vue';
-import {useSunStore,useAddressStore} from "@/stores/sun";
-import router from "@/router";
+import {onMounted} from 'vue';
+import {useSunStore, useAddressStore, useNavIndexStore} from "@/stores/sun";
 import eventBus from '../libs/eventBus'
 
 const sunStore = useSunStore()
 const addressStore = useAddressStore()
-
-let pathname = ref(window.location.pathname)
+const navIndexStore = useNavIndexStore()
 
 onMounted(() => {
 
@@ -29,12 +27,12 @@ const sunAndMoon = () => {
 }
 
 const connectWallet = () => {
-  if (pathname.value === '/'){
+  if (navIndexStore.index === 0){
     eventBus.emit('zksConnectWallet')
-  }else if(pathname.value === '/starkNet'){
-    eventBus.emit('starkConnectWallet')
-  }else if(pathname.value === '/layerZero'){
+  }else if(navIndexStore.index === 1){
     eventBus.emit('layerConnectWallet')
+  }else if(navIndexStore.index === 2){
+    eventBus.emit('starkConnectWallet')
   }
 }
 
@@ -88,15 +86,15 @@ const connectWallet = () => {
 <!--      <img v-show="!sunStore.sun" @click="sunAndMoon" src="../assets/sun-fill.svg" alt="sun-fill">-->
 <!--      <img v-show="sunStore.sun" @click="sunAndMoon" src="../assets/moon-clear-fill.svg" alt="moon-clear-fill">-->
       <div>
-        <div class="button" v-show="(!addressStore.address && pathname !== '/starkNet') || (!addressStore.starkNetAddress && pathname === '/starkNet')" @click="connectWallet">
+        <div class="button" v-show="(!addressStore.address && navIndexStore.index !== 2) || (!addressStore.starkNetAddress && navIndexStore.index === 2)" @click="connectWallet">
           <img src="../assets/git-commit-line.svg" alt="commit">
           Connect Wallet
         </div>
-        <div class="connect" v-if="addressStore.address && pathname !== '/starkNet'">
+        <div class="connect" v-if="addressStore.address && navIndexStore.index !== 2">
           <img src="../assets/git-commit-line-black.svg" alt="commit">
           {{  addressStore.address.slice(0, 8) }}...{{ addressStore.address.slice(-4) }}
         </div>
-        <div class="connect" v-if="addressStore.starkNetAddress && pathname === '/starkNet'">
+        <div class="connect" v-if="addressStore.starkNetAddress && navIndexStore.index === 2">
           <img src="../assets/git-commit-line-black.svg" alt="commit">
           {{ addressStore.starkNetAddress.slice(0, 8) }}...{{ addressStore.starkNetAddress.slice(-4) }}
         </div>

src/router/index.ts

@@ -1,32 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import ZksyncView from '../views/ZksyncView.vue'
-import LayerZero from '../views/LayerZeroView.vue'
-import StarkNet from '../views/StarkNet.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    // {
-    //   path: '/',
-    //   name: 'home',
-    //   component: HomeView
-    // },
     {
       path: '/',
-      name: 'zksync',
-      component: ZksyncView
+      name: 'HomeView',
+      component: HomeView
     },
-    {
-      path: '/layerZero',
-      name: 'layerZero',
-      component: LayerZero
-    },
-    {
-      path: '/starkNet',
-      name: 'starkNet',
-      component: StarkNet
-    }
   ]
 })
 

src/stores/sun.ts

@@ -16,3 +16,12 @@ export const useAddressStore = defineStore('address', () => {
 
   return { address,starkNetAddress }
 })
+
+export const useNavIndexStore = defineStore('index', () => {
+  let index = ref(0)
+
+  function changeIndex(number) {
+    index.value = number
+  }
+  return { index, changeIndex}
+})

src/views/HomeView.vue

@@ -1,305 +1,67 @@
 <script setup lang="ts">
-import './tilt.js'
+import {useSunStore,useNavIndexStore} from "@/stores/sun";
 import Nav from '@/components/Nav.vue'
-import Footer from '@/components/Footer.vue'
-import {useSunStore} from "@/stores/sun";
-import {onMounted} from "vue";
+import {ref,nextTick,provide} from "vue";
+import ZksyncView from '@/views/ZksyncView.vue'
+import LayerZero from '@/views/LayerZeroView.vue'
+import StarkNet from '@/views/StarkNet.vue'
 
 const sunStore = useSunStore()
+const navIndexStore = useNavIndexStore()
 
-onMounted(()=>{
-  vanillaTilt()
-})
-const toPage = (url:string) => {
-  window.open(url)
-}
-
-//添加卡片3d拖拽效果
-const vanillaTilt = () => {
-  // @ts-ignore
-  VanillaTilt.init(document.getElementById("NFTBG"), {
-    max: 25,
-    speed: 400
+const isRouterAlive = ref(true);
+const reload = () => {
+  isRouterAlive.value = false;
+  nextTick(() => {
+    isRouterAlive.value = true;
   });
+};
+provide("reload", reload);
+const toPage = (page:number) => {
+  navIndexStore.changeIndex(page)
 }
 </script>
 
 <template>
-  <main class="main">
-    <div class="mainBG">
-      <img src="../assets/navBg.png" alt="BG">
-    </div>
+  <div class="homeMain">
     <div class="BG1"/>
     <div class="BG2"/>
     <div class="BG3"/>
-    <Nav/>
+    <Nav v-if="isRouterAlive"/>
     <div class="header">
       <div class="left" style="z-index: 2">
         <img class="left" v-show="!sunStore.sun" src="../assets/header-text.svg" alt="header">
-<!--        <img class="left" v-show="sunStore.sun" src="../assets/home/header.svg" alt="header">-->
       </div>
       <div class="right">
         <video v-show="!sunStore.sun" autoplay muted width="342" height="342" src="../media/0727(7).mp4">
         </video>
-<!--        <video v-show="sunStore.sun" autoplay muted width="640" height="640" src="../media/0727(12).mp4">-->
-<!--        </video>-->
       </div>
     </div>
-    <div class="airdrop">
-      <div class="title">
-        <div class="left">
-          <img v-show="!sunStore.sun" src="../assets/home/airdrop.svg" alt="airdrop">
-<!--          <img v-show="sunStore.sun" src="../assets/home/airdrop-black.svg" alt="airdrop">-->
-        </div>
-        <div class="right">
-          <div class="text1">
-            Airdrop
-          </div>
-          <div class="text2">
-            Chain transaction data query platform
-          </div>
-        </div>
+    <div class="chainBox">
+      <div class="item" @click="toPage(0)">
+        zkSync
+        <div class="line" v-show="navIndexStore.index===0"></div>
       </div>
-      <div class="description">
-        <div class="left">
-          <img src="../assets/home/airdrop-1.svg" alt="airdrop-1">
-          <div class="text1">
-            Transaction data
-          </div>
-          <div class="text2">
-            View the count of interactions on the public chain
-          </div>
-          <div class="shadow"/>
-        </div>
-        <div class="right">
-          <div class="item1">
-            <div class="item1Left">
-              <div class="text1">
-                View the count of Dapps
-              </div>
-              <div class="text1">
-                you have interacted with historically.
-              </div>
-              <div class="text2">
-                *Specific Dapp names are supported later
-              </div>
-            </div>
-            <div class="item1Right">
-              <img src="../assets/home/airdrop-2.svg" alt="airdrop-2">
-            </div>
-            <div class="shadow"/>
-          </div>
-          <div class="item1">
-            <div class="item1Left">
-              <div class="text1">
-                Display the historical count of
-              </div>
-              <div class="text1">
-                interactions in a histogram format.
-              </div>
-            </div>
-            <div class="item1Right">
-              <img src="../assets/home/airdrop-3.svg" alt="airdrop-2">
-            </div>
-            <div class="shadow"/>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="dividingLine"/>
-    <div class="NFT" id="NFT">
-      <div class="NFT-left">
-        <div class="box1">
-          <div class="text1">
-            Bloosm Flower
-          </div>
-        </div>
-        <div class="box2">
-          <div class="frame">
-            <div class="text4">
-              zkSync
-            </div>
-          </div>
-          <div class="frame">
-            <div class="text4">
-              ERC 721
-            </div>
-          </div>
-        </div>
-        <div class="box3">
-        <span class="text2">
-          Created by
-        </span>
-          <span class="text3">
-          @Bitflower
-        </span>
-<!--          <span class="text2">-->
-<!--          on zkSync Era-->
-<!--        </span>-->
-        </div>
-<!--        <div class="box4">-->
-<!--          <div class="text2">-->
-<!--            Mint starts July 12 at 5:00 AM GMT+8-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="box5">-->
-<!--          <div class="progress"/>-->
-<!--        </div>-->
-<!--        <div class="box6">-->
-<!--          <div class="text2">-->
-<!--            42.1% minted-->
-<!--          </div>-->
-<!--          <div class="text5">-->
-<!--            100/222-->
-<!--          </div>-->
-<!--        </div>-->
-        <div class="button">
-          <img src="../assets/home/button-1.svg" alt="button">
-          <div class="text2" style="color: white">
-            Coming soon...
-          </div>
-          <img src="../assets/home/button-2.svg" alt="button">
-        </div>
-        <img v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync.svg" alt="zksync">
-<!--        <img v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync-black.svg" alt="zksync">-->
+      <div class="item" @click="toPage(1)">
+        Layer Zero
+        <div class="line" v-show="navIndexStore.index===1"></div>
       </div>
-      <div class="NfT-right">
-<!--        <img v-show="!sunStore.sun" src="../assets/home/NFT-1-white.svg" alt="NFT">-->
-<!--        <img v-show="sunStore.sun" src="../assets/home/NFT-1.svg" alt="NFT">-->
-<!--        <img class="bitflower" src="../assets/home/NFT-2.svg" alt="NFT">-->
-        <img class="bitflower" style="left: -150px;" src="../assets/home/NFTBG1.png" alt="NFTBG1">
-        <img id="NFTBG" class="bitflower" src="../assets/home/NFTBG2.png" alt="NFTBG2">
+      <div class="item" @click="toPage(2)">
+        StarkNet
+        <div class="line" v-show="navIndexStore.index===2"></div>
       </div>
     </div>
-    <div class="dividingLine"/>
-    <div class="roadMap">
-      <div class="left">
-        <img v-show="!sunStore.sun" style="width: 128px;height: 128px" src="../assets/home/roadmap-white.svg"
-             alt="roadmap">
-<!--        <img v-show="sunStore.sun" style="width: 128px;height: 128px" src="../assets/home/roadmap.svg" alt="roadmap">-->
-        <div class="text1">
-          Road map
-        </div>
-        <div class="text2">
-          Chain transaction data query platform
-        </div>
-      </div>
-      <el-scrollbar>
-        <div class="right">
-          <div class="horizontalLine">
-            <div class="greenHorizontalLine">
-
-            </div>
-          </div>
-          <div class="greenCircle"/>
-          <div class="year">
-            2023
-          </div>
-          <div class="item" style="left: 145px">
-            <div class="itemUp">
-              Q1
-              <div class="greenVerticalLine"/>
-              <div class="greenCircle"/>
-              <div class="info">
-                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync.svg" alt="zksync">
-<!--                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync-black.svg" alt="zksync">-->
-
-                <div class="text">
-                  Online zkS transaction data statistics
-                </div>
-                <div class="text">
-                  Dapp quick entry
-                </div>
-                <div class="text">
-                  .....
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="item" style="left: 395px">
-            <div class="itemDown">
-              Q2
-              <div class="greenVerticalLine"/>
-              <div class="greenCircle"/>
-              <div class="info">
-                <div class="text">
-                  Online Layer Zero transaction data statistics
-                </div>
-                <div class="text">
-                  Cross-chain transaction statistics
-                </div>
-                <div class="text">
-                  Dapp quick entry
-                </div>
-                <div class="text">
-                  .....
-                </div>
-                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/layerZero-white.svg" alt="zksync">
-<!--                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/layerZero.svg" alt="zksync">-->
-              </div>
-            </div>
-          </div>
-
-          <div class="item" style="left: 640px">
-            <div class="itemUp">
-              Q3
-              <div class="greenVerticalLine"/>
-              <div class="greenCircle"/>
-              <div class="info">
-                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/bitflower-white.svg" alt="zksync">
-<!--                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/bitflower.svg" alt="zksync">-->
-
-                <div class="text">
-                  Deploy the NFT on the zkSync network
-                </div>
-                <div class="text">
-                  Pin for the Weber 3.0
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="item" style="left: 880px">
-            <div class="itemDown" style="border: 1px solid #4C4C4C;">
-              Q4
-              <div class="greenVerticalLine" style="border-right: 1px solid #4c4c4c;"/>
-              <div class="greenCircle" style="background: #4c4c4c"/>
-              <div class="info">
-                <div class="text">
-                  Coming soon...
-                </div>
-                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/starknet-white.svg" alt="zksync">
-<!--                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/starknet.svg" alt="zksync">-->
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </el-scrollbar>
-    </div>
-    <div class="dividingLine"/>
-    <Footer/>
-  </main>
+    <ZksyncView v-if="navIndexStore.index===0"/>
+    <LayerZero v-if="navIndexStore.index===1"/>
+    <StarkNet v-if="navIndexStore.index===2"/>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.main {
+.homeMain{
   width: 1440px;
-  height: 100%;
   margin: auto;
-  //border: 1px solid var(--vt-c-border);
-  border-top: none;
-  border-bottom: none;
-  padding: 30px 60px 0;
-
-  .dividingLine {
-    width: 100vw;
-    height: 1px;
-    border-bottom: 1px solid var(--vt-c-border);
-    position: absolute;
-    left: 0;
-  }
+  padding-top: 30px;
 
   .mainBG {
     position: absolute;
@@ -310,15 +72,6 @@ const vanillaTilt = () => {
     display: flex;
     justify-content: center;
   }
-  .footerBg{
-    position: absolute;
-    bottom: 0;
-    z-index: -1;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-  }
   .BG1 {
     position: absolute;
     top: -400px;
@@ -370,7 +123,7 @@ const vanillaTilt = () => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    //padding: 100px 0;
+    padding: 0 60px;
 
     .left {
       user-select: none;
@@ -384,536 +137,32 @@ const vanillaTilt = () => {
       //height: 180px;
     }
   }
-
-  .airdrop {
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
-
-    .title {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-
-      .right {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        .text1 {
-          font-family: HONOR Sans CN;
-          font-size: 32px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: normal;
-        }
-
-        .text2 {
-          font-family: HONOR Sans CN;
-          font-size: 15px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: normal;
-          opacity: 0.5;
-        }
-      }
-    }
-
-    .description {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 110px;
-
-      .left {
-        width: 618px;
-        height: 490px;
-        border: 1px solid #4C4C4C;
-        background: var(--vt-c-pure);
-        box-shadow: 2px 2px 24px 0 rgba(255, 255, 255, 0.20);
-        position: relative;
-        padding: 60px;
-
-        .text1 {
-          font-family: HONOR Sans CN;
-          font-size: 32px;
-          font-style: normal;
-          font-weight: 300;
-          line-height: normal;
-          margin-top: 46px;
-          margin-bottom: 16px;
-        }
-
-        .text2 {
-          font-family: HONOR Sans CN;
-          font-size: 20px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: normal;
-          opacity: 0.5;
-        }
-
-        .shadow {
-          width: 618px;
-          height: 490px;
-          border: 1px solid #4C4C4C;
-          background: #000;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-          z-index: -1;
-        }
-      }
-
-      .right {
-        display: flex;
-        flex-direction: column;
-        gap: 50px;
-
-        .item1 {
-          width: 640px;
-          height: 220px;
-          border: 1px solid #4C4C4C;
-          background: var(--vt-c-pure);
-          position: relative;
-          padding: 38px 60px;
-          display: flex;
-          align-items: center;
-          gap: 54px;
-
-          .item1Left {
-            .text1 {
-              font-family: HONOR Sans CN;
-              font-size: 19px;
-              font-style: normal;
-              font-weight: 300;
-              line-height: normal;
-            }
-
-            .text2 {
-              font-family: HONOR Sans CN;
-              font-size: 14px;
-              font-style: normal;
-              font-weight: 400;
-              line-height: normal;
-              opacity: 0.5;
-              margin-top: 12px;
-            }
-          }
-
-          .shadow {
-            width: 640px;
-            height: 220px;
-            border: 1px solid #4C4C4C;
-            background: #000;
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            z-index: -1;
-          }
-        }
-      }
-    }
-  }
-
-  .NFT {
-    padding: 40px 140px;
+  .chainBox{
+    width: 100%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-
-    .NFT-left {
-      .text1 {
-        font-family: HONOR Sans CN;
-        font-size: 32px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-      }
-
-      .text2 {
-        font-family: HONOR Sans CN;
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-      }
-
-      .text3 {
-        font-family: HONOR Sans CN;
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        color: #0075FF;
-      }
-
-      .text4 {
-        font-family: HONOR Sans CN;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        color: #FFF;
-      }
-
-      .text5 {
-        font-family: HONOR Sans CN;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        opacity: 0.5;
-      }
-
-      .box1 {
-        margin-bottom: 8px;
-      }
-
-      .box2 {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-        gap: 12px;
-
-        .frame {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 6px 12px;
-          width: fit-content;
-          border: 1px solid #4C4C4C;
-          background: #010101;
-        }
-      }
-
-      .box3 {
-        margin-bottom: 28px;
-      }
-
-      .box4 {
-        margin-bottom: 16px;
-      }
-
-      .box5 {
-        width: 400px;
-        height: 8px;
-        background: #caccc8;
-        position: relative;
-        margin-bottom: 12px;
-
-        .progress {
-          position: absolute;
-          width: 145px;
-          height: 8px;
-          background: #00FFC2;
-        }
-      }
-
-      .box6 {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 24px;
-      }
-
-      .button {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        width: 240px;
-        padding: 12px 24px;
-        justify-content: center;
-        border: 1px solid #4C4C4C;
-        background: #010101;
-      }
-    }
-
-    .NfT-right {
-      position: relative;
-      width: 388px;
-      height: 352px;
-      .bitflower {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        margin: auto;
-      }
-    }
-  }
-
-  .roadMap {
-    height: 650px;
-    display: flex;
-    align-items: center;
-    margin-right: -60px;
-
-    .text1 {
-      font-family: HONOR Sans CN;
-      font-size: 32px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: normal;
-      margin-top: 16px;
-      margin-bottom: 12px;
-    }
-
-    .text2 {
+    .item{
+      padding: 24px 65px;
+      //border-right: 1px solid var(--vt-c-border);
       font-family: HONOR Sans CN;
       font-size: 15px;
       font-style: normal;
-      font-weight: 400;
+      font-weight: 700;
       line-height: normal;
-      opacity: 0.5;
-    }
-
-    .left {
-      width: 476px;
-      padding: 0 60px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      border-right: 1px solid var(--vt-c-border);
-    }
-
-    .right {
-      width: 1200px;
-      height: 650px;
-      display: flex;
-      align-items: center;
-      padding-left: 25px;
       position: relative;
-
-      .greenCircle {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #00FFC2;
+      cursor: pointer;
+      .line{
         position: absolute;
-      }
-
-      .horizontalLine {
-        width: 1200px;
-        height: 1px;
-        border-bottom: 1px solid #4c4c4c;
-        position: relative;
-
-        .greenHorizontalLine {
-          width: 630px;
-          height: 1px;
-          border-bottom: 1px solid #00FFC2;
-          position: absolute;
-        }
-      }
-
-      .year {
-        font-family: HONOR Sans CN;
-        font-size: 27px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        position: absolute;
-        top: 260px
-      }
-
-      .item {
-        position: absolute;
-
-        .itemUp {
-          display: inline-flex;
-          padding: 12px 24px;
-          align-items: center;
-          gap: 6px;
-          border: 1px solid #00FFC2;
-          background: #010101;
-          color: #FFF;
-          font-family: HONOR Sans CN;
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: normal;
-          position: relative;
-          .greenVerticalLine {
-            width: 1px;
-            height: 120px;
-            border-right: 1px solid #00FFC2;
-            position: absolute;
-            left: 0;
-            right: 0;
-            margin: auto;
-            top:-120px;
-          }
-          .greenCircle {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #00FFC2;
-            position: absolute;
-            left: 0;
-            right: 0;
-            margin: auto;
-            top:-120px;
-          }
-          .info {
-            display: flex;
-            flex-direction: column;
-            gap:12px;
-            position: absolute;
-            top:-140px;
-            right: -250px;
-            width: 250px;
-            .img{
-              width: 68px;
-              height: 16px;
-            }
-            .text{
-              font-family: HONOR Sans CN;
-              font-size: 12px;
-              font-style: normal;
-              font-weight: 500;
-              line-height: normal;
-              opacity: 0.5;
-              color: var(--color-text);
-            }
-            .text::before {
-              content: "\00B7";
-              margin-right: 5px;
-            }
-          }
-        }
-        .itemDown {
-          display: inline-flex;
-          padding: 12px 24px;
-          align-items: center;
-          gap: 6px;
-          border: 1px solid #00FFC2;
-          background: #010101;
-          color: #FFF;
-          font-family: HONOR Sans CN;
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: normal;
-          position: relative;
-
-          .greenVerticalLine {
-            width: 1px;
-            height: 150px;
-            border-right: 1px solid #00FFC2;
-            position: absolute;
-            left: 0;
-            right: 0;
-            margin: auto;
-            bottom:-150px;
-          }
-          .greenCircle {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #00FFC2;
-            position: absolute;
-            left: 0;
-            right: 0;
-            margin: auto;
-            bottom:-150px;
-          }
-          .info {
-            display: flex;
-            flex-direction: column;
-            gap:12px;
-            position: absolute;
-            bottom:-155px;
-            right: -300px;
-            width: 300px;
-            .img{
-              width: 68px;
-              height: 16px;
-            }
-            .text{
-              font-family: HONOR Sans CN;
-              font-size: 12px;
-              font-style: normal;
-              font-weight: 500;
-              line-height: normal;
-              opacity: 0.5;
-              color: var(--color-text);
-            }
-            .text::before {
-              content: "\00B7";
-              margin-right: 5px;
-            }
-          }
-        }
-      }
-
-    }
-
-  }
-
-  .footer {
-    display: flex;
-
-    .footer-left {
-      width: 757px;
-      height: 275px;
-      border-right: 1px solid var(--vt-c-border);
-      margin-left: -60px;
-
-      .logoBox {
-        padding: 40px 60px 66px 60px;
-        border-bottom: 1px solid var(--vt-c-border);
-
-        .logo {
-          display: flex;
-          flex-direction: column;
-          gap:24px;
-          width: 218px;
-        }
-      }
-
-      .officeLink {
-        display: flex;
-        align-items: center;
-        gap:28px;
-        height: 100px;
-        padding-left: 60px;
-      }
-
-    }
-
-    .footer-right{
-      width: 680px;
-      padding: 40px 60px;
-      .descriptive{
-        font-family: HONOR Sans CN;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 24px;
-        opacity: 0.5;
-        margin-top: 9px;
-        margin-bottom: 24px;
-      }
-      .button{
-        width: fit-content;
-        display: flex;
-        padding: 12px 24px;
-        align-items: center;
-        gap: 6px;
-        border: 1px solid var(--vt-c-border);
-        background: #010101;
-        cursor: pointer;
-        color: #FFF;
-        font-family: HONOR Sans CN;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
+        width: 60px;
+        height: 4px;
+        background: var(--color-text);
+        left: 0;
+        right: 0;
+        margin: auto;
+        bottom: 0;
       }
     }
   }
 }
+
 </style>

src/views/LayerZeroView.vue

@@ -360,18 +360,18 @@ const toEmail = (email:string) => {
       <img src="../assets/navBg.png" alt="BG">
     </div>
 <!--    <Nav @doSth="connectWallet"/>-->
-    <div class="chainBox">
-      <div class="item" @click="toPage('/')">
-        zkSync
-      </div>
-      <div class="item" >
-        Layer Zero
-        <div class="line"></div>
-      </div>
-      <div class="item" @click="toPage('/starkNet')">
-        StarkNet
-      </div>
-    </div>
+<!--    <div class="chainBox">-->
+<!--      <div class="item" @click="toPage('/')">-->
+<!--        zkSync-->
+<!--      </div>-->
+<!--      <div class="item" >-->
+<!--        Layer Zero-->
+<!--        <div class="line"></div>-->
+<!--      </div>-->
+<!--      <div class="item" @click="toPage('/starkNet')">-->
+<!--        StarkNet-->
+<!--      </div>-->
+<!--    </div>-->
     <div class="dataBox">
       <div class="left">
         <div class="leftTop">
@@ -550,7 +550,7 @@ const toEmail = (email:string) => {
   //border: 1px solid var(--vt-c-border);
   border-top: none;
   border-bottom: none;
-  padding: 30px 60px 0;
+  padding: 0 60px 0;
   .mainBG {
     position: absolute;
     top: 0;

src/views/StarkNet.vue

@@ -393,19 +393,18 @@ const fetchData2 = async () => {
       <img src="../assets/navBg.png" alt="BG">
     </div>
 <!--    <Nav @doSth="connectWallet2"/>-->
-
-    <div class="chainBox">
-      <div class="item" @click="toPage('/')">
-        zkSync
-      </div>
-      <div class="item" @click="toPage('/layerZero')">
-        Layer Zero
-      </div>
-      <div class="item">
-        StarkNet
-        <div class="line"></div>
-      </div>
-    </div>
+<!--    <div class="chainBox">-->
+<!--      <div class="item" @click="toPage('/')">-->
+<!--        zkSync-->
+<!--      </div>-->
+<!--      <div class="item" @click="toPage('/layerZero')">-->
+<!--        Layer Zero-->
+<!--      </div>-->
+<!--      <div class="item">-->
+<!--        StarkNet-->
+<!--        <div class="line"></div>-->
+<!--      </div>-->
+<!--    </div>-->
     <div class="dataBox">
       <div class="left">
         <div class="leftTop">
@@ -651,7 +650,7 @@ const fetchData2 = async () => {
   //border: 1px solid var(--vt-c-border);
   border-top: none;
   border-bottom: none;
-  padding: 30px 60px 0;
+  padding: 0 60px 0;
   .dividingLine {
     width: 100vw;
     height: 1px;

src/views/ZksyncView.vue

@@ -37,11 +37,9 @@ import karatDAOAv from '../project/karatDAO/karatDAOAv.png'
 import karatDAOBg from '../project/karatDAO/karatDAOBg.png'
 import router from "@/router";
 import {useSunStore,useAddressStore} from "@/stores/sun";
-import Nav from '@/components/Nav.vue'
 import Footer from '@/components/Footer.vue'
 //@ts-ignore
 import {getAllZksSyncData} from "@/utils/getZksyncData/index.js";
-import { connect, disconnect } from "get-starknet"
 import axios from 'axios';
 import {Area, Bar} from '@antv/g2plot';
 import moment from "moment";
@@ -480,18 +478,6 @@ const fetchData2 = async () => {
 <!--      <img src="../assets/navBg.png" alt="BG">-->
 <!--    </div>-->
 <!--    <Nav @doSth="connectWallet"/>-->
-    <div class="chainBox">
-      <div class="item">
-        zkSync
-        <div class="line"></div>
-      </div>
-      <div class="item" @click="toPage('/layerZero')">
-        Layer Zero
-      </div>
-      <div class="item" @click="toPage('/starkNet')">
-        StarkNet
-      </div>
-    </div>
     <div class="dataBox">
       <div class="left">
         <div class="leftTop">
@@ -771,7 +757,7 @@ const fetchData2 = async () => {
   //border: 1px solid var(--vt-c-border);
   //border-top: none;
   //border-bottom: none;
-  padding: 30px 60px 0;
+  padding: 0 60px 0;
   .dividingLine {
     width: 100vw;
     height: 1px;