完善 页面样式

src/assets/base.css

@@ -20,7 +20,7 @@
   --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: #1a1a1a;
   --vt-c-pure: #000000;
   /*--vt-c-border: #f1f1f1;*/
   /*--vt-c-pure: #ffffff;*/

src/components/Footer.vue

@@ -41,14 +41,18 @@ const toPage = (url:string) => {
         Contact us
       </div>
     </div>
+    <div class="footerBg">
+      <img src="../assets/footerBg.png" alt="footerBg">
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 
   .footer {
-  display: flex;
-  .footer-left {
+    display: flex;
+    position: relative;
+    .footer-left {
     width: 757px;
     border-right: 1px solid var(--vt-c-border);
     border-left: 1px solid var(--vt-c-border);
@@ -76,7 +80,7 @@ const toPage = (url:string) => {
 
   }
 
-  .footer-right{
+    .footer-right{
     width: 682px;
     border-right: 1px solid var(--vt-c-border);
     padding: 40px 60px;
@@ -108,6 +112,12 @@ const toPage = (url:string) => {
       line-height: normal;
     }
   }
+
+    .footerBg{
+      position: absolute;
+      left: -300px;
+      bottom: -10px;
+    }
 }
 
 </style>

src/components/Nav.vue

@@ -74,13 +74,13 @@ const toNFT = () => {
         <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 !== '/' ? 'nav':'nav1' " @click="toHome">
+      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toHome">
         Home
       </div>
-      <div :class="pathname !== '/' ? 'nav':'nav1' " @click="toNFT">
+      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toNFT">
         NFT
       </div>
-      <div :class="pathname !== '/' ? 'nav':'nav1' " @click="toAirdrop">
+      <div :class="pathname !== '/' ? 'nav1':'nav1' " @click="toAirdrop">
         Airdrop
       </div>
     </div>
@@ -113,7 +113,6 @@ const toNFT = () => {
   justify-content: space-between;
   padding: 0 60px 25px;
   margin: 0 -60px;
-  //border-bottom: 1px solid var(--vt-c-border);
 
   .left {
     display: flex;

src/views/HomeView.vue

@@ -17,13 +17,13 @@ const toPage = (url:string) => {
       <img src="../assets/navBg.png" alt="BG">
     </div>
     <div class="BG1">
-      <img src="../assets/home/BG1.png" alt="BG">
+<!--      <img src="../assets/home/BG1.png" alt="BG">-->
     </div>
     <div class="BG2">
-      <img src="../assets/home/BG2.png" alt="BG">
+<!--      <img src="../assets/home/BG2.png" alt="BG">-->
     </div>
     <div class="BG3">
-      <img src="../assets/home/BG3.png" alt="BG">
+<!--      <img src="../assets/home/BG3.png" alt="BG">-->
     </div>
     <Nav/>
     <div class="header">
@@ -301,21 +301,40 @@ const toPage = (url:string) => {
     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: -560px;
-    left: 210px;
+    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: -660px;
-    left: -370px;
+    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;
@@ -324,6 +343,11 @@ const toPage = (url:string) => {
     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% {

src/views/LayerZeroView.vue

@@ -795,7 +795,7 @@ const toEmail = (email:string) => {
         height: 80px;
         //border: 1px solid #010101;
         border-top: none;
-        background: #FFFFFF;
+        background: #141414;
 
         .avatar {
           width: 40px;
@@ -812,7 +812,7 @@ const toEmail = (email:string) => {
             font-weight: 700;
             font-size: 17px;
             line-height: 22px;
-            color: #010101;
+            color: #ffffff;
           }
 
           .typeBox {
@@ -825,7 +825,7 @@ const toEmail = (email:string) => {
               font-weight: 400;
               font-size: 12px;
               line-height: 16px;
-              color: #b3b3b3;
+              color: #898989;
               padding: 0 4px;
             }
 

src/views/StarkNet.vue

@@ -228,7 +228,7 @@ const initEcharts = () => {
     },
     series: [
       {
-        color: '#EC796B',
+        color: '#95a0a4',
         data: showMonthNumberArr.value,
         type: 'bar'
       }
@@ -357,7 +357,7 @@ const fetchData2 = async () => {
     data:result,
     xField: 'tvl',
     yField: 'name',
-    color: '#FFF',
+    color: '#95a0a4',
     yAxis: {
       label: {
         formatter: (v) => `${v}`,
@@ -912,7 +912,7 @@ const fetchData2 = async () => {
         height: 80px;
         //border: 1px solid #010101;
         border-top: none;
-        background: #FFFFFF;
+        background: #141414;
 
         .avatar {
           width: 40px;
@@ -929,7 +929,7 @@ const fetchData2 = async () => {
             font-weight: 700;
             font-size: 17px;
             line-height: 22px;
-            color: #010101;
+            color: #ffffff;
           }
 
           .typeBox {
@@ -942,7 +942,7 @@ const fetchData2 = async () => {
               font-weight: 400;
               font-size: 12px;
               line-height: 16px;
-              color: #b3b3b3;
+              color: #898989;
               padding: 0 4px;
             }
 
@@ -961,8 +961,8 @@ const fetchData2 = async () => {
     position: fixed;
     bottom: -608px;
     left: 0;
-    background: rgba(40, 40, 40, 0.96);
-    backdrop-filter: blur(34px);
+    background: rgba(0, 255, 194, 0.10);
+    backdrop-filter: blur(179px);
     display: flex;
     justify-content: center;
     transition: bottom 0.3s ease-in-out;

src/views/ZksyncView.vue

@@ -315,7 +315,7 @@ const initEcharts = () => {
     },
     series: [
       {
-        color: '#EC796B',
+        color: '#95a0a4',
         data: showMonthNumberArr.value,
         type: 'bar'
       }
@@ -444,7 +444,7 @@ const fetchData2 = async () => {
     data:result,
     xField: 'tvl',
     yField: 'name',
-    color: '#FFF',
+    color: '#95a0a3',
     yAxis: {
       label: {
         formatter: (v) => `${v}`,
@@ -1032,7 +1032,7 @@ const fetchData2 = async () => {
         height: 80px;
         //border: 1px solid #010101;
         border-top: none;
-        background: #FFFFFF;
+        background: #141414;
 
         .avatar {
           width: 40px;
@@ -1049,7 +1049,7 @@ const fetchData2 = async () => {
             font-weight: 700;
             font-size: 17px;
             line-height: 22px;
-            color: #010101;
+            color: #ffffff;
           }
 
           .typeBox {
@@ -1062,7 +1062,7 @@ const fetchData2 = async () => {
               font-weight: 400;
               font-size: 12px;
               line-height: 16px;
-              color: #b3b3b3;
+              color: #898989;
               padding: 0 4px;
             }
 
@@ -1081,8 +1081,8 @@ const fetchData2 = async () => {
     position: fixed;
     bottom: -608px;
     left: 0;
-    background: rgba(40, 40, 40, 0.96);
-    backdrop-filter: blur(34px);
+    background: rgba(0, 255, 194, 0.10);
+    backdrop-filter: blur(179px);
     display: flex;
     justify-content: center;
     transition: bottom 0.3s ease-in-out;