|
|
@@ -288,18 +288,37 @@ const toEmail = (email:string) => {
|
|
|
|
|
|
window.open(mailtoUrl);
|
|
|
}
|
|
|
+
|
|
|
+let sun = ref(true)
|
|
|
+const sunAndMoon = () => {
|
|
|
+ if (sun.value){
|
|
|
+ document.documentElement.style.setProperty('--color-background','#181818')
|
|
|
+ document.documentElement.style.setProperty('--color-text','#f2f2f2')
|
|
|
+ }else {
|
|
|
+ document.documentElement.style.setProperty('--color-background','#f2f2f2')
|
|
|
+ document.documentElement.style.setProperty('--color-text','#181818')
|
|
|
+ }
|
|
|
+ sun.value = !sun.value
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<main class="main">
|
|
|
+ <div class="mainBG">
|
|
|
+ <img src="../assets/BG.png" alt="BG">
|
|
|
+ </div>
|
|
|
<div class="topBar">
|
|
|
<div class="left">
|
|
|
- <img src="../assets/bitflower.svg" alt="logo">
|
|
|
+ <img v-show="!sun" src="../assets/bitflower-white.svg" alt="bitflower">
|
|
|
+ <img v-show="sun" src="../assets/bitflower.svg" alt="logo">
|
|
|
</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">
|
|
|
<div class="button" v-show="!address" @click="connectWallet">
|
|
|
<img src="../assets/git-commit-line.svg" alt="commit">
|
|
|
Connect Wallet
|
|
|
@@ -314,7 +333,8 @@ const toEmail = (email:string) => {
|
|
|
<div class="item">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img src="../assets/group1.svg" alt="group1">
|
|
|
+ <img v-show="!sun" src="../assets/group1-white.svg" alt="group1">
|
|
|
+ <img v-show="sun" src="../assets/group1.svg" alt="group1">
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
Protocols lnteraction
|
|
|
@@ -343,7 +363,8 @@ const toEmail = (email:string) => {
|
|
|
<div class="item">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img class="img" src="../assets/group3.svg" alt="group2">
|
|
|
+ <img v-show="!sun" class="img" src="../assets/group3-white.svg" alt="group2">
|
|
|
+ <img v-show="sun" class="img" src="../assets/group3.svg" alt="group2">
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
Total Transactions
|
|
|
@@ -373,7 +394,8 @@ const toEmail = (email:string) => {
|
|
|
<div class="item">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img class="img" src="../assets/group2.svg" alt="group2">
|
|
|
+ <img v-show="!sun" class="img" src="../assets/group2-white.svg" alt="group2">
|
|
|
+ <img v-show="sun" class="img" src="../assets/group2.svg" alt="group2">
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
Total Transactions
|
|
|
@@ -403,17 +425,20 @@ const toEmail = (email:string) => {
|
|
|
<div class="item" style="height: 94px">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img class="img" src="../assets/official-bridge-black.svg" alt="group2">
|
|
|
+ <img v-show="!sun" class="img" src="../assets/official-bridge-white.svg" alt="group2">
|
|
|
+ <img v-show="sun" class="img" src="../assets/official-bridge-black.svg" alt="group2">
|
|
|
</div>
|
|
|
<div style="display: flex;gap:40px">
|
|
|
<div style="display: flex;flex-direction: column;gap:20px">
|
|
|
- <img src="../assets/L1-To-L2.svg" alt="To">
|
|
|
+ <img v-show="!sun" src="../assets/L1-To-L2-white.svg" alt="To">
|
|
|
+ <img v-show="sun" src="../assets/L1-To-L2.svg" alt="To">
|
|
|
<div class="number">
|
|
|
{{ l1Tol2Tx }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;flex-direction: column;gap:20px">
|
|
|
- <img src="../assets/L2-To-L1.svg" alt="To">
|
|
|
+ <img v-show="!sun" src="../assets/L2-To-L1-white.svg" alt="To">
|
|
|
+ <img v-show="sun" src="../assets/L2-To-L1.svg" alt="To">
|
|
|
<div class="number">
|
|
|
{{ l2Tol1Tx }}
|
|
|
</div>
|
|
|
@@ -460,7 +485,8 @@ const toEmail = (email:string) => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="disclaimer">
|
|
|
- <img src="../assets/disclaimer.svg" alt="disclaimer">
|
|
|
+ <img v-show="!sun" src="../assets/disclaimer-white.svg" alt="disclaimer">
|
|
|
+ <img v-show="sun" src="../assets/disclaimer.svg" alt="disclaimer">
|
|
|
<div class="description">
|
|
|
The list of dApps is for informational purposes only. It is not a testimony of the security or reliability
|
|
|
of any dApp. Furthermore, most dApps are currently in alpha stage and their code is not audited. You are
|
|
|
@@ -498,7 +524,6 @@ const toEmail = (email:string) => {
|
|
|
{{ item1 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -513,8 +538,14 @@ const toEmail = (email:string) => {
|
|
|
height: 100vh;
|
|
|
margin: auto;
|
|
|
border: 1px solid #f7f7f7;
|
|
|
+ border-top: none;
|
|
|
+ border-bottom: none;
|
|
|
padding: 30px 60px;
|
|
|
-
|
|
|
+ .mainBG{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
.topBar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -527,6 +558,11 @@ const toEmail = (email:string) => {
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
.right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:40px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
.button {
|
|
|
width: fit-content;
|
|
|
height: 44px;
|
|
|
@@ -590,7 +626,8 @@ const toEmail = (email:string) => {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
line-height: 18px;
|
|
|
- color: #010101;
|
|
|
+ //color: #010101;
|
|
|
+ font-family: 'HONOR Sans CN';
|
|
|
.popoverText{
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
@@ -606,7 +643,7 @@ const toEmail = (email:string) => {
|
|
|
font-weight: 700;
|
|
|
font-size: 26px;
|
|
|
line-height: 34px;
|
|
|
- color: #010101;
|
|
|
+ //color: #010101;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -628,7 +665,7 @@ const toEmail = (email:string) => {
|
|
|
font-weight: 700;
|
|
|
font-size: 14px;
|
|
|
line-height: 18px;
|
|
|
- color: #010101;
|
|
|
+ //color: #010101;
|
|
|
}
|
|
|
|
|
|
.echartsBox {
|
|
|
@@ -685,7 +722,7 @@ const toEmail = (email:string) => {
|
|
|
overflow: auto;
|
|
|
gap: 26px;
|
|
|
width: 100%;
|
|
|
- height: 620px;
|
|
|
+ height: 62vh;
|
|
|
margin-right: -60px;
|
|
|
|
|
|
.item {
|
|
|
@@ -705,6 +742,7 @@ const toEmail = (email:string) => {
|
|
|
height: 80px;
|
|
|
border: 1px solid #010101;
|
|
|
border-top: none;
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
|
.avatar {
|
|
|
width: 40px;
|
|
|
@@ -731,7 +769,6 @@ const toEmail = (email:string) => {
|
|
|
|
|
|
.type {
|
|
|
width: fit-content;
|
|
|
- height: 16px;
|
|
|
border: 1px solid #b3b3b3;
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
million
