完善 添加跳转

src/assets/base.css

@@ -19,6 +19,9 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  /*--vt-c-border: #555555;*/
+  --vt-c-border: #f7f7f7;
 }
 
 /* semantic color variables for this project */

src/assets/info.svg

@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.5">
-<path d="M7.99999 14.6667C4.31809 14.6667 1.33333 11.6819 1.33333 7.99999C1.33333 4.31809 4.31809 1.33333 7.99999 1.33333C11.6819 1.33333 14.6667 4.31809 14.6667 7.99999C14.6667 11.6819 11.6819 14.6667 7.99999 14.6667ZM7.99999 13.3333C10.9455 13.3333 13.3333 10.9455 13.3333 7.99999C13.3333 5.05447 10.9455 2.66666 7.99999 2.66666C5.05447 2.66666 2.66666 5.05447 2.66666 7.99999C2.66666 10.9455 5.05447 13.3333 7.99999 13.3333ZM7.33333 4.66666H8.66666V5.99999H7.33333V4.66666ZM7.33333 7.33333H8.66666V11.3333H7.33333V7.33333Z" fill="#010101"/>
+<g opacity="1">
+<path d="M7.99999 14.6667C4.31809 14.6667 1.33333 11.6819 1.33333 7.99999C1.33333 4.31809 4.31809 1.33333 7.99999 1.33333C11.6819 1.33333 14.6667 4.31809 14.6667 7.99999C14.6667 11.6819 11.6819 14.6667 7.99999 14.6667ZM7.99999 13.3333C10.9455 13.3333 13.3333 10.9455 13.3333 7.99999C13.3333 5.05447 10.9455 2.66666 7.99999 2.66666C5.05447 2.66666 2.66666 5.05447 2.66666 7.99999C2.66666 10.9455 5.05447 13.3333 7.99999 13.3333ZM7.33333 4.66666H8.66666V5.99999H7.33333V4.66666ZM7.33333 7.33333H8.66666V11.3333H7.33333V7.33333Z" fill="#808080"/>
 </g>
 </svg>

src/views/HomeView.vue

@@ -294,9 +294,12 @@ const sunAndMoon = () => {
   if (sun.value){
     document.documentElement.style.setProperty('--color-background','#181818')
     document.documentElement.style.setProperty('--color-text','#f2f2f2')
+    document.documentElement.style.setProperty('--vt-c-border','#555555')
   }else {
     document.documentElement.style.setProperty('--color-background','#f2f2f2')
     document.documentElement.style.setProperty('--color-text','#181818')
+    document.documentElement.style.setProperty('--vt-c-border','#f7f7f7')
+
   }
   sun.value = !sun.value
 
@@ -312,10 +315,23 @@ const sunAndMoon = () => {
       <div class="left">
         <img v-show="!sun" src="../assets/bitflower-white.svg" alt="bitflower">
         <img v-show="sun" src="../assets/bitflower.svg" alt="logo">
+
+        <div class="navOne">
+          Home
+<!--          <div class="line"/>-->
+        </div>
+        <div class="nav">
+          NFT
+<!--          <div class="line"/>-->
+        </div>
+        <div class="nav">
+          Query
+          <div class="line"/>
+        </div>
       </div>
-      <div class="mid">
-        Blossom your Web3 Trip ✈
-      </div>
+<!--      <div class="mid">-->
+<!--        Blossom your Web3 Trip ✈-->
+<!--      </div>-->
       <div class="right">
         <img v-show="!sun" @click="sunAndMoon" src="../assets/sun-fill.svg" alt="sun-fill">
         <img v-show="sun" @click="sunAndMoon" src="../assets/moon-clear-fill.svg" alt="moon-clear-fill">
@@ -329,6 +345,18 @@ const sunAndMoon = () => {
         </div>
       </div>
     </div>
+    <div class="chainBox">
+      <div class="item">
+        zkSync
+        <div class="line"></div>
+      </div>
+      <div class="item">
+        Layer Zero
+      </div>
+      <div class="item">
+        StarkNet
+      </div>
+    </div>
     <div class="dataColumn">
       <div class="item">
         <div class="top">
@@ -359,6 +387,9 @@ const sunAndMoon = () => {
         <div class="number">
           {{ contract }}
         </div>
+      </div>
+      <div class="line" style="left:270px">
+
       </div>
       <div class="item">
         <div class="top">
@@ -446,6 +477,9 @@ const sunAndMoon = () => {
           </div>
         </div>
 
+      </div>
+      <div class="line" style="right:370px">
+
       </div>
       <div class="item">
         <div class="top">
@@ -537,7 +571,7 @@ const sunAndMoon = () => {
   width: 1440px;
   height: 100vh;
   margin: auto;
-  border: 1px solid #f7f7f7;
+  border: 1px solid var(--vt-c-border);
   border-top: none;
   border-bottom: none;
   padding: 30px 60px;
@@ -550,6 +584,61 @@ const sunAndMoon = () => {
     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: white;
+          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: white;
+          left: 0;
+          bottom: 0;
+        }
+      }
+    }
     .mid{
       font-weight: 400;
       font-size: 15px;
@@ -595,14 +684,41 @@ const sunAndMoon = () => {
       }
     }
   }
-
+  .chainBox{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0 -60px;
+    .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: 700;
+      line-height: normal;
+      position: relative;
+      .line{
+        position: absolute;
+        width: 60px;
+        height: 4px;
+        background: white;
+        left: 0;
+        right: 0;
+        margin: auto;
+        bottom: 0;
+      }
+    }
+  }
   .dataColumn {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 75px 60px 60px 60px;
-    border-bottom: 1px solid #f7f7f7;
+    padding: 60px;
+    border-bottom: 1px solid var(--vt-c-border);
+    border-top: 1px solid var(--vt-c-border);
     margin: 0 -60px;
+    position: relative;
 
     .item {
       width: 330px;
@@ -646,6 +762,13 @@ const sunAndMoon = () => {
         //color: #010101;
       }
     }
+
+    .line {
+      width: 1px;
+      height: 100%;
+      border-right: 1px solid var(--vt-c-border);
+      position: absolute;
+    }
   }
 
   .primary {
@@ -724,11 +847,14 @@ const sunAndMoon = () => {
       width: 100%;
       height: 62vh;
       margin-right: -60px;
+      padding-bottom: 10px ;
 
       .item {
-        height: 256px;
+        height: 257px;
         width: 336px;
         cursor: pointer;
+        border: 1px solid var(--vt-c-border);
+
         .BG {
           width: 100%;
           height: 175px;
@@ -740,7 +866,6 @@ const sunAndMoon = () => {
           gap: 12px;
           padding: 0 24px;
           height: 80px;
-          border: 1px solid #010101;
           border-top: none;
           background: #FFFFFF;
 
@@ -769,18 +894,27 @@ const sunAndMoon = () => {
 
               .type {
                 width: fit-content;
-                border: 1px solid #b3b3b3;
+                //border: 1px solid #b3b3b3;
                 font-weight: 400;
                 font-size: 12px;
                 line-height: 16px;
                 color: #b3b3b3;
                 padding: 0 4px;
               }
+
+              .type::before {
+                content: "\00B7";
+                margin-right: 5px;
+              }
             }
 
           }
         }
       }
+
+      //.item:hover {
+      //  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);;
+      //}
     }
   }
 }