完成 新版

package.json

@@ -18,6 +18,7 @@
     "ethers": "^6.6.0",
     "get-starknet": "^3.0.1",
     "idb": "^7.1.1",
+    "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "pinia": "^2.1.3",
     "sass": "^1.63.4",

src/App.vue

@@ -1,72 +1,127 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+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>
-  <RouterView />
+  <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>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
+<style scoped lang="scss">
+.main{
+  width: 1440px;
+  //height: 100%;
+  margin: auto;
+  padding-top: 30px;
 
-@media (min-width: 1024px) {
-  header {
+  .mainBG {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    left: 0;
+    right: 0;
     display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    justify-content: center;
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
+  .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;
   }
-
-  header .wrapper {
+  .BG2 {
+    position: absolute;
+    top: -300px;
+    left: -70px;
     display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+    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;
 
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
+    .left {
+      user-select: none;
+      -webkit-user-drag: none;
+    }
 
-    padding: 1rem 0;
-    margin-top: 1rem;
+    .right {
+      //user-select: none;
+      //-webkit-user-drag: none;
+      //width: 320px;
+      //height: 180px;
+    }
   }
 }
+
 </style>

src/components/Nav.vue

@@ -1,22 +1,16 @@
 <script setup lang="ts">
-import {onMounted, ref} from 'vue';
+import {onMounted, ref } from 'vue';
 import {useSunStore,useAddressStore} from "@/stores/sun";
 import router from "@/router";
+import eventBus from '../libs/eventBus'
 
 const sunStore = useSunStore()
 const addressStore = useAddressStore()
 
-let pathname = ref('')
-
-const emit = defineEmits(["doSth"]);
-
-const doSth = () => {
-  emit('doSth')
-}
+let pathname = ref(window.location.pathname)
 
 onMounted(() => {
-  pathname.value = window.location.pathname
-  // console.log(window.location.pathname);
+
 })
 
 const sunAndMoon = () => {
@@ -35,36 +29,42 @@ const sunAndMoon = () => {
 }
 
 const connectWallet = () => {
-  doSth()
-}
-
-const toHome = () => {
-  router.push('/')
-}
-
-const toAirdrop = () => {
-  router.push('/zksync')
-}
-
-let lod = false
-
-const toNFT = () => {
-  if (lod){
-    return
+  if (pathname.value === '/'){
+    eventBus.emit('zksConnectWallet')
+  }else if(pathname.value === '/starkNet'){
+    eventBus.emit('starkConnectWallet')
+  }else if(pathname.value === '/layerZero'){
+    eventBus.emit('layerConnectWallet')
   }
-  lod = true
-  router.push('/')
-  setTimeout(function (){
-    let NFT = document.querySelector('#NFT')
-    if(NFT){
-      NFT.scrollIntoView({
-        behavior: "smooth"
-      })
-      lod = false
-    }
-  },200)
-
 }
+
+// const toHome = () => {
+//   router.push('/')
+// }
+
+// const toAirdrop = () => {
+//   router.push('/zksync')
+// }
+//
+// let lod = false
+//
+// const toNFT = () => {
+//   if (lod){
+//     return
+//   }
+//   lod = true
+//   router.push('/')
+//   setTimeout(function (){
+//     let NFT = document.querySelector('#NFT')
+//     if(NFT){
+//       NFT.scrollIntoView({
+//         behavior: "smooth"
+//       })
+//       lod = false
+//     }
+//   },200)
+//
+// }
 </script>
 
 <template>
@@ -72,22 +72,22 @@ const toNFT = () => {
     <div class="left">
       <div style="z-index: 1;" class="img">
         <img  v-show="!sunStore.sun" src="../assets/bitflower-white.svg" alt="bitflower">
-        <img  v-show="sunStore.sun" src="../assets/bitflower.svg" alt="logo">
-      </div>
-      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toHome">
-        Home
-      </div>
-      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toNFT">
-        NFT
-      </div>
-      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toAirdrop">
-        Airdrop
+<!--        <img  v-show="sunStore.sun" src="../assets/bitflower.svg" alt="logo">-->
       </div>
+<!--      <div class="nav1" @click="toHome">-->
+<!--        Home-->
+<!--      </div>-->
+<!--      <div class="nav1" @click="toNFT">-->
+<!--        NFT-->
+<!--      </div>-->
+<!--      <div class="nav1" @click="toAirdrop">-->
+<!--        Airdrop-->
+<!--      </div>-->
     </div>
     <div class="right">
 <!--      <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 v-show="pathname !== '/'">
+      <div>
         <div class="button" v-show="(!addressStore.address && pathname !== '/starkNet') || (!addressStore.starkNetAddress && pathname === '/starkNet')" @click="connectWallet">
           <img src="../assets/git-commit-line.svg" alt="commit">
           Connect Wallet
@@ -112,7 +112,7 @@ const toNFT = () => {
   align-items: center;
   justify-content: space-between;
   padding: 0 60px 25px;
-  margin: 0 -60px;
+  //margin: 0 -60px;
 
   .left {
     display: flex;

src/libs/eventBus.ts

@@ -0,0 +1,2 @@
+import mitt from 'mitt'
+export default mitt()

src/router/index.ts

@@ -7,13 +7,13 @@ import StarkNet from '../views/StarkNet.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    // {
+    //   path: '/',
+    //   name: 'home',
+    //   component: HomeView
+    // },
     {
       path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/zksync',
       name: 'zksync',
       component: ZksyncView
     },

src/views/HomeView.vue

@@ -29,23 +29,17 @@ const vanillaTilt = () => {
     <div class="mainBG">
       <img src="../assets/navBg.png" alt="BG">
     </div>
-    <div class="BG1">
-<!--      <img src="../assets/home/BG1.png" alt="BG">-->
-    </div>
-    <div class="BG2">
-<!--      <img src="../assets/home/BG2.png" alt="BG">-->
-    </div>
-    <div class="BG3">
-<!--      <img src="../assets/home/BG3.png" alt="BG">-->
-    </div>
+    <div class="BG1"/>
+    <div class="BG2"/>
+    <div class="BG3"/>
     <Nav/>
     <div class="header">
       <div class="left" style="z-index: 2">
-        <img class="left" v-show="!sunStore.sun" src="../assets/home/header-white.svg" alt="header">
+        <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="640" height="640" src="../media/0727(7).mp4">
+        <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>-->
@@ -376,7 +370,7 @@ const vanillaTilt = () => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 100px 0;
+    //padding: 100px 0;
 
     .left {
       user-select: none;

src/views/LayerZeroView.vue

@@ -10,7 +10,7 @@ import getZkSyncBridge from '../utils/getZkSyncBridge.js'
 //@ts-ignore
 import getLayerData from '../utils/getLayerData.js'
 import * as echarts from 'echarts';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref,onBeforeUnmount} from 'vue';
 import aptosAv from '../project/layer0/aptosAv.png'
 import aptosBg from '../project/layer0/aptosBg.png'
 import stargateAv from '../project/layer0/stargateAv.png'
@@ -26,10 +26,11 @@ import omniBg from '../project/layer0/omniBg.png'
 import omniteAv from '../project/layer0/omniteAv.png'
 import omniteBg from '../project/layer0/omniteBg.png'
 import router from "@/router";
-import Nav from '@/components/Nav.vue'
 import Footer from '@/components/Footer.vue'
 import {useSunStore,useAddressStore} from "@/stores/sun";
-
+import eventBus from "@/libs/eventBus";
+import { inject } from "vue";
+const refresh = inject("reload");
 type EChartsOption = echarts.EChartsOption;
 
 const sunStore = useSunStore()
@@ -38,8 +39,11 @@ const addressStore = useAddressStore()
 onMounted(() => {
   checkWalletAddress()
   listeningDisconnect()
+  refresh()
+})
+onBeforeUnmount(() => {
+  eventBus.off('layerConnectWallet',connectWallet)
 })
-
 
 type dataArrType = {
   name: string,
@@ -167,6 +171,8 @@ const connectWallet = async () => {
   // await addChain()
   // await switchEthereumChain()
 }
+eventBus.on('layerConnectWallet',connectWallet)
+
 //获取主网交易次数
 let mainTx = ref(0)
 const getMainTx = () => {
@@ -353,9 +359,9 @@ const toEmail = (email:string) => {
     <div class="mainBG">
       <img src="../assets/navBg.png" alt="BG">
     </div>
-    <Nav @doSth="connectWallet"/>
+<!--    <Nav @doSth="connectWallet"/>-->
     <div class="chainBox">
-      <div class="item" @click="toPage('/zksync')">
+      <div class="item" @click="toPage('/')">
         zkSync
       </div>
       <div class="item" >
@@ -531,6 +537,7 @@ const toEmail = (email:string) => {
         </div>
       </div>
     </div>
+    <div class="dividingLine"/>
     <Footer/>
   </main>
 </template>
@@ -540,7 +547,7 @@ const toEmail = (email:string) => {
   width: 1440px;
   height: 100%;
   margin: auto;
-  border: 1px solid var(--vt-c-border);
+  //border: 1px solid var(--vt-c-border);
   border-top: none;
   border-bottom: none;
   padding: 30px 60px 0;
@@ -553,110 +560,6 @@ const toEmail = (email:string) => {
     display: flex;
     justify-content: center;
   }
-  .topBar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 60px 25px;
-    margin: 0 -60px;
-    border-bottom: 1px solid var(--vt-c-border);
-    .left{
-      display: flex;
-      align-items: center;
-      .nav{
-        font-family: HONOR Sans CN;
-        font-size: 21px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        padding: 0 60px;
-        height: 100px;
-        display: flex;
-        align-items: center;
-        margin-bottom: -25px;
-        margin-top: -30px;
-        border-right: 1px solid var(--vt-c-border);
-        position: relative;
-        .line{
-          position: absolute;
-          width: 100%;
-          height: 10px;
-          background: var(--color-text);
-          left: 0;
-          bottom: 0;
-        }
-      }
-      .navOne{
-        font-family: HONOR Sans CN;
-        font-size: 21px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        padding: 0 60px;
-        height: 100px;
-        display: flex;
-        align-items: center;
-        margin-bottom: -25px;
-        margin-top: -30px;
-        border-right: 1px solid var(--vt-c-border);
-        margin-left: 57px;
-        border-left: 1px solid var(--vt-c-border);
-        position: relative;
-        .line{
-          position: absolute;
-          width: 100%;
-          height: 10px;
-          background: var(--color-text);
-          left: 0;
-          bottom: 0;
-        }
-      }
-    }
-    .mid{
-      font-weight: 400;
-      font-size: 15px;
-      line-height: 21px;
-      font-family: 'Chillax';
-      text-transform: uppercase;
-    }
-    .right {
-      display: flex;
-      align-items: center;
-      gap:40px;
-      cursor: pointer;
-
-      .button {
-        width: fit-content;
-        height: 44px;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        background: #010101;
-        padding: 0 24px;
-        font-weight: 500;
-        font-size: 15px;
-        line-height: 20px;
-        color: #FFFFFF;
-        cursor: pointer;
-      }
-
-      .connect {
-        width: fit-content;
-        height: 44px;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        background: #FFFFFF;
-        border: 1px solid #010101;
-        border-radius: 30px;
-        padding: 0 24px;
-        font-weight: 500;
-        font-size: 15px;
-        line-height: 20px;
-        color: #010101;
-      }
-    }
-  }
   .chainBox {
     width: 100%;
     display: flex;
@@ -664,7 +567,7 @@ const toEmail = (email:string) => {
     margin: 0 -60px;
     .item{
       padding: 24px 65px;
-      border-right: 1px solid var(--vt-c-border);
+      //border-right: 1px solid var(--vt-c-border);
       font-family: HONOR Sans CN;
       font-size: 15px;
       font-style: normal;
@@ -687,10 +590,12 @@ const toEmail = (email:string) => {
   .dataBox {
     height: 365px;
     margin: 0 -60px;
-    border-bottom: 1px solid var(--vt-c-border);
-    border-top: 1px solid var(--vt-c-border);
+    //border-bottom: 1px solid var(--vt-c-border);
+    //border-top: 1px solid var(--vt-c-border);
     display: flex;
     align-items: center;
+    border: 1px solid var(--vt-c-border);
+
     .left {
       width: 845px;
       height: 100%;
@@ -776,7 +681,8 @@ const toEmail = (email:string) => {
     height: 585px;
     margin: 0px -60px;
     padding: 20px 0;
-    border-bottom: 1px solid var(--vt-c-border);
+    //border-bottom: 1px solid var(--vt-c-border);
+    border: 1px solid var(--vt-c-border);
 
     .item {
       height: 256px;
@@ -839,6 +745,14 @@ const toEmail = (email:string) => {
       }
     }
   }
+  .dividingLine {
+    width: 100vw;
+    height: 1px;
+    border-bottom: 1px solid var(--vt-c-border);
+    position: absolute;
+    left: 0;
+  }
+
 }
 
 ::-webkit-scrollbar {

src/views/StarkNet.vue

@@ -8,7 +8,7 @@ import getZksLite from '../utils/getZksLite.js'
 //@ts-ignore
 import getZkSyncBridge from '../utils/getZkSyncBridge.js'
 import * as echarts from 'echarts';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref,onBeforeUnmount} from 'vue';
 
 import mySwapAv from '../project/mySwap/avatar.png'
 import mySwapBg from '../project/mySwap/BG.png'
@@ -39,7 +39,9 @@ import { connect, disconnect } from "get-starknet"
 import axios from 'axios';
 import {Area, Bar} from '@antv/g2plot';
 import moment from "moment";
-
+import eventBus from "@/libs/eventBus";
+import { inject } from "vue";
+const refresh = inject("reload");
 const sunStore = useSunStore()
 const addressStore = useAddressStore()
 
@@ -49,8 +51,11 @@ onMounted(() => {
   fetchData()
   fetchData2()
   connectWallet2()
+  refresh()
+})
+onBeforeUnmount(() => {
+  eventBus.off('starkConnectWallet',connectWallet2)
 })
-
 
 type dataArrType = {
   name: string,
@@ -127,7 +132,7 @@ const connectWallet2 = async () => {
     getMoreInfo()
   }
 }
-
+eventBus.on('starkConnectWallet',connectWallet2)
 //获取更多信息
 let amount = ref('-')
 let fee = ref('-')
@@ -387,10 +392,10 @@ const fetchData2 = async () => {
     <div class="mainBG">
       <img src="../assets/navBg.png" alt="BG">
     </div>
-    <Nav @doSth="connectWallet2"/>
+<!--    <Nav @doSth="connectWallet2"/>-->
 
     <div class="chainBox">
-      <div class="item" @click="toPage('/zkSync')">
+      <div class="item" @click="toPage('/')">
         zkSync
       </div>
       <div class="item" @click="toPage('/layerZero')">
@@ -643,7 +648,7 @@ const fetchData2 = async () => {
   width: 1440px;
   height: 100%;
   margin: auto;
-  border: 1px solid var(--vt-c-border);
+  //border: 1px solid var(--vt-c-border);
   border-top: none;
   border-bottom: none;
   padding: 30px 60px 0;
@@ -774,7 +779,7 @@ const fetchData2 = async () => {
     margin: 0 -60px;
     .item{
       padding: 24px 65px;
-      border-right: 1px solid var(--vt-c-border);
+      //border-right: 1px solid var(--vt-c-border);
       font-family: HONOR Sans CN;
       font-size: 15px;
       font-style: normal;
@@ -797,10 +802,12 @@ const fetchData2 = async () => {
   .dataBox {
     height: 365px;
     margin: 0 -60px;
-    border-bottom: 1px solid var(--vt-c-border);
-    border-top: 1px solid var(--vt-c-border);
+    //border-bottom: 1px solid var(--vt-c-border);
+    //border-top: 1px solid var(--vt-c-border);
     display: flex;
     align-items: center;
+    border: 1px solid var(--vt-c-border);
+
     .left {
       width: 845px;
       height: 100%;
@@ -893,7 +900,8 @@ const fetchData2 = async () => {
     height: 585px;
     margin: 0px -60px;
     padding: 20px 0;
-    border-bottom: 1px solid var(--vt-c-border);
+    //border-bottom: 1px solid var(--vt-c-border);
+    border: 1px solid var(--vt-c-border);
 
     .item {
       height: 256px;

src/views/ZksyncView.vue

@@ -8,7 +8,7 @@ import getZksLite from '../utils/getZksLite.js'
 //@ts-ignore
 import getZkSyncBridge from '../utils/getZkSyncBridge.js'
 import * as echarts from 'echarts';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref,onBeforeUnmount} from 'vue';
 import balancerBg from '../project/balancer/balancerBg.png'
 import balancerAv from '../project/balancer/balancerAv.png'
 import argentBg from '../project/argent/argentBg.png'
@@ -45,7 +45,9 @@ import { connect, disconnect } from "get-starknet"
 import axios from 'axios';
 import {Area, Bar} from '@antv/g2plot';
 import moment from "moment";
-
+import eventBus from '../libs/eventBus'
+import { inject } from "vue";
+const refresh = inject("reload");
 const sunStore = useSunStore()
 const addressStore = useAddressStore()
 
@@ -56,8 +58,11 @@ onMounted(() => {
   listeningDisconnect()
   fetchData()
   fetchData2()
+  refresh()
+})
+onBeforeUnmount(() => {
+  eventBus.off('zksConnectWallet',connectWallet)
 })
-
 
 type dataArrType = {
   name: string,
@@ -198,7 +203,7 @@ const connectWallet = async () => {
   await addChain()
   await switchEthereumChain()
 }
-
+eventBus.on('zksConnectWallet',connectWallet)
 //获取主网交易次数
 let mainTx = ref('-')
 const getMainTx = () => {
@@ -471,11 +476,10 @@ const fetchData2 = async () => {
 
 <template>
   <main class="main">
-    <div class="mainBG">
-      <img src="../assets/navBg.png" alt="BG">
-    </div>
-    <Nav @doSth="connectWallet"/>
-
+<!--    <div class="mainBG">-->
+<!--      <img src="../assets/navBg.png" alt="BG">-->
+<!--    </div>-->
+<!--    <Nav @doSth="connectWallet"/>-->
     <div class="chainBox">
       <div class="item">
         zkSync
@@ -764,9 +768,9 @@ const fetchData2 = async () => {
   width: 1440px;
   height: 100%;
   margin: auto;
-  border: 1px solid var(--vt-c-border);
-  border-top: none;
-  border-bottom: none;
+  //border: 1px solid var(--vt-c-border);
+  //border-top: none;
+  //border-bottom: none;
   padding: 30px 60px 0;
   .dividingLine {
     width: 100vw;
@@ -895,7 +899,7 @@ const fetchData2 = async () => {
     margin: 0 -60px;
     .item{
       padding: 24px 65px;
-      border-right: 1px solid var(--vt-c-border);
+      //border-right: 1px solid var(--vt-c-border);
       font-family: HONOR Sans CN;
       font-size: 15px;
       font-style: normal;
@@ -918,10 +922,11 @@ const fetchData2 = async () => {
   .dataBox {
     height: 365px;
     margin: 0 -60px;
-    border-bottom: 1px solid var(--vt-c-border);
-    border-top: 1px solid var(--vt-c-border);
+    //border-bottom: 1px solid var(--vt-c-border);
+    //border-top: 1px solid var(--vt-c-border);
     display: flex;
     align-items: center;
+    border: 1px solid var(--vt-c-border);
     .left {
       width: 845px;
       height: 100%;
@@ -1013,8 +1018,8 @@ const fetchData2 = async () => {
     height: 585px;
     margin: 0px -60px;
     padding: 20px 0;
-    border-bottom: 1px solid var(--vt-c-border);
-
+    //border-bottom: 1px solid var(--vt-c-border);
+    border: 1px solid var(--vt-c-border);
     .item {
       height: 256px;
       width: 336px;