|
|
@@ -1,9 +1,412 @@
|
|
|
<script setup lang="ts">
|
|
|
-import TheWelcome from '../components/TheWelcome.vue'
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import {onMounted} from 'vue';
|
|
|
+import balancerBg from '../project/balancer/balancerBg.png'
|
|
|
+import balancerAv from '../project/balancer/balancerAv.png'
|
|
|
+import argentBg from '../project/argent/argentBg.png'
|
|
|
+import argentAv from '../project/argent/argentAv.png'
|
|
|
+import ontoBg from '../project/onto/ontoBg.png'
|
|
|
+import ontoAv from '../project/onto/ontoAv.png'
|
|
|
+import zerionBg from '../project/zerion/zerionBg.png'
|
|
|
+import zerionAv from '../project/zerion/zerionAv.png'
|
|
|
+
|
|
|
+type EChartsOption = echarts.EChartsOption;
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ initEcharts()
|
|
|
+})
|
|
|
+
|
|
|
+const initEcharts = () => {
|
|
|
+ let chartDom = document.getElementById('echartsBox')!
|
|
|
+ let myChart = echarts.init(chartDom);
|
|
|
+ let option: EChartsOption;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ color: '#000000',
|
|
|
+ data: [120, 200, 150, 80, 130, 120, 200, 150, 80, 70, 110, 130],
|
|
|
+ type: 'bar'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+}
|
|
|
+type dataArrType = {
|
|
|
+ name:string,
|
|
|
+ type:string[],
|
|
|
+ BG:string,
|
|
|
+ avatar:string
|
|
|
+}[]
|
|
|
+
|
|
|
+let dataArr:dataArrType = [
|
|
|
+ {
|
|
|
+ name:'Balancer',
|
|
|
+ type:['DEFI'],
|
|
|
+ BG:balancerBg,
|
|
|
+ avatar:balancerAv
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'Argent',
|
|
|
+ type:['WALLET'],
|
|
|
+ BG:argentBg,
|
|
|
+ avatar:argentAv
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'ONTO Wallet',
|
|
|
+ type:['DIGITAL ID','WALLET'],
|
|
|
+ BG:ontoBg,
|
|
|
+ avatar:ontoAv
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'Zerion',
|
|
|
+ type:['WALLET','SOCIAL'],
|
|
|
+ BG:zerionBg,
|
|
|
+ avatar:zerionAv
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'Zerion',
|
|
|
+ type:['WALLET','SOCIAL'],
|
|
|
+ BG:zerionBg,
|
|
|
+ avatar:zerionAv
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <main>
|
|
|
- <TheWelcome />
|
|
|
+ <main class="main">
|
|
|
+ <div class="topBar">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../assets/logo.svg" alt="logo">
|
|
|
+ </div>
|
|
|
+ <div class="mid">
|
|
|
+ <img src="../assets/Pin.svg" alt="Pin">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="button">
|
|
|
+ <img src="../assets/git-commit-line.svg" alt="commit">
|
|
|
+ Connect Wallet
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dataColumn">
|
|
|
+ <div class="item">
|
|
|
+ <div class="top">
|
|
|
+ <div class="img">
|
|
|
+ <img src="../assets/group1.svg" alt="group1">
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ Protocols lnteraction
|
|
|
+ <img src="../assets/info.svg" alt="info">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ 1
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="top">
|
|
|
+ <div class="img">
|
|
|
+ <img class="img" src="../assets/group2.svg" alt="group2">
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ Total Transactions
|
|
|
+ <img src="../assets/info.svg" alt="info">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ 22
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="top">
|
|
|
+ <div class="img">
|
|
|
+ <img class="img" src="../assets/group3.svg" alt="group2">
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ Total Transactions
|
|
|
+ <img src="../assets/info.svg" alt="info">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ 22
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="top">
|
|
|
+ <div class="img">
|
|
|
+ <img class="img" src="../assets/group4.svg" alt="group2">
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ Total fees
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ 22 USDT
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="primary">
|
|
|
+ <div class="left">
|
|
|
+ <div class="echarts">
|
|
|
+ <div class="title">
|
|
|
+ Transactions Over Time
|
|
|
+ <img src="../assets/info.svg" alt="info">
|
|
|
+ </div>
|
|
|
+ <div class="echartsBox" id="echartsBox">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="disclaimer">
|
|
|
+ <img src="../assets/disclaimer.svg" alt="disclaimer">
|
|
|
+ <div class="description">
|
|
|
+ The list of dApps is for informational purposes only. t is not a testimony of the security or reliability of any dApp.Furthermore, most dApps arecurrently in alpha stage and their code is not audited.You are encouraged to do your own research (DYOR) before interacting with,or investingin any dApps.This should not be considered financial or investment advice.
|
|
|
+ </div>
|
|
|
+ <div class="contact">
|
|
|
+ <img src="../assets/remote-control-line.svg" alt="remote">
|
|
|
+ Contact us
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="item" v-for="item in dataArr">
|
|
|
+ <div class="BG">
|
|
|
+ <img class="BG" :src="item.BG" alt="BG">
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <div class="avatar">
|
|
|
+ <img class="avatar" :src="item.avatar" alt="avatar">
|
|
|
+ </div>
|
|
|
+ <div class="nameAndType">
|
|
|
+ <div class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="typeBox">
|
|
|
+ <div class="type" v-for="item1 in item.type">
|
|
|
+ {{ item1 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.main {
|
|
|
+ width: 1440px;
|
|
|
+ height: 100vh;
|
|
|
+ margin: auto;
|
|
|
+ border: 1px solid #f7f7f7;
|
|
|
+ padding: 30px 60px;
|
|
|
+ .topBar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .right{
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dataColumn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 75px 60px 60px 60px;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ margin: 0 -60px;
|
|
|
+ .item{
|
|
|
+ width: 330px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:20px;
|
|
|
+ .top{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:6px;
|
|
|
+ .img{
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:8px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #010101;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .number{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:8px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #010101;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .primary{
|
|
|
+ display: flex;
|
|
|
+ gap: 60px;
|
|
|
+ margin-top: 60px;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .echarts{
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:8px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #010101;
|
|
|
+ }
|
|
|
+ .echartsBox{
|
|
|
+ height: 360px;
|
|
|
+ width: 560px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .disclaimer{
|
|
|
+ width: 558px;
|
|
|
+ height: 246px;
|
|
|
+ border: 1px solid #010101;
|
|
|
+ padding: 24px;
|
|
|
+ .description{
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ .contact{
|
|
|
+ width: fit-content;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:6px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #010101;
|
|
|
+ padding: 0 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ gap: 26px;
|
|
|
+ width: 100%;
|
|
|
+ height: 620px;
|
|
|
+ margin-right: -60px;
|
|
|
+ .item{
|
|
|
+ height: 256px;
|
|
|
+ width: 336px;
|
|
|
+
|
|
|
+ .BG{
|
|
|
+ width: 100%;
|
|
|
+ height: 175px;
|
|
|
+ }
|
|
|
+ .infoBox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:12px;
|
|
|
+ padding: 0 24px;
|
|
|
+ height: 80px;
|
|
|
+ border: 1px solid #010101;
|
|
|
+ border-top: none ;
|
|
|
+ .avatar{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .nameAndType{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:2px;
|
|
|
+ .name{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #010101;
|
|
|
+ }
|
|
|
+ .typeBox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:10px;
|
|
|
+ .type{
|
|
|
+ width: fit-content;
|
|
|
+ height: 16px;
|
|
|
+ border: 1px solid #b3b3b3;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #b3b3b3;
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 4px; /* 滚动条宽度 */
|
|
|
+}
|
|
|
+
|
|
|
+// /* 滚动条轨道 */
|
|
|
+// ::-webkit-scrollbar-track {
|
|
|
+// background: #f1f1f1; /* 轨道背景色 */
|
|
|
+// }
|
|
|
+
|
|
|
+/* 滚动条滑块 */
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background: #888; /* 滑块背景色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动条滑块悬停状态 */
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #555; /* 悬停状态下滑块背景色 */
|
|
|
+}
|
|
|
+</style>
|
million
