Bitflower/src/views/StarkNet.vue

<script setup lang="ts">
//@ts-ignore
import MetaMaskSDK from '../utils/metamask-sdk.js'
//@ts-ignore
import getZksEra from '../utils/getZksEra.js'
//@ts-ignore
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 mySwapAv from '../project/mySwap/avatar.png'
import mySwapBg from '../project/mySwap/BG.png'
import starknetIdAv from '../project/starknetId/avatar.png'
import starknetIdBg from '../project/starknetId/BG.png'
import starkGateAv from '../project/starkGate/avatar.png'
import starkGateBg from '../project/starkGate/BG.png'
import realmsAv from '../project/realms/avatar.png'
import realmsBg from '../project/realms/BG.png'
import aspectAv from '../project/aspect/avatar.png'
import aspectBg from '../project/aspect/BG.png'
import briqAv from '../project/briq/avatar.png'
import briqBg from '../project/briq/BG.png'
import sithSwapAv from '../project/sithSwap/avatar.png'
import sithSwapBg from '../project/sithSwap/BG.png'
import fibrousAv from '../project/fibrous/avatar.png'
import fibrousBg from '../project/fibrous/BG.png'

import router from "@/router";
import {useSunStore,useAddressStore} from "@/stores/sun";
import Nav from '@/components/Nav.vue'
import Footer from '@/components/Footer.vue'
//@ts-ignore
import {getAllZksSyncData} from "@/utils/getZksyncData/index.js";
import {getStark} from "@/utils/stark/main.js";
import { connect, disconnect } from "get-starknet"
import axios from 'axios';
import {Area, Bar} from '@antv/g2plot';
import moment from "moment";

const sunStore = useSunStore()
const addressStore = useAddressStore()

type EChartsOption = echarts.EChartsOption;

onMounted(() => {
  fetchData()
  fetchData2()
  connectWallet2()
})


type dataArrType = {
  name: string,
  type: string[],
  BG: string,
  avatar: string,
  url:string
}[]
let dataArr: dataArrType = [
  {
    name: 'mySwap',
    type: ['DeFi'],
    BG: mySwapBg,
    avatar: mySwapAv,
    url:'https://www.myswap.xyz/'
  },
  {
    name:'Starknet.id',
    type: ['Digitalid ID'],
    BG:starknetIdBg,
    avatar:starknetIdAv,
    url:'https://app.starknet.id/'
  },
  {
    name: 'StarkGate',
    type: ['DEFI'],
    BG: starkGateBg,
    avatar: starkGateAv,
    url:'https://starkgate.starknet.io/terms'
  },
  {
    name: 'Realms',
    type: ['GAMEFI', 'NFT'],
    BG: realmsBg,
    avatar: realmsAv,
    url:'https://realms.world/'
  },
  {
    name: 'ASPECT',
    type: ['NFT'],
    BG: aspectBg,
    avatar: aspectAv,
    url:'https://aspect.co/'
  },

  {
    name: 'briq',
    type: ['NFT'],
    BG: briqBg,
    avatar: briqAv,
    url:'https://briq.construction/'
  },
  {
    name:'SithSwap',
    type: ['DEFI','BRIDGE'],
    BG:sithSwapBg,
    avatar:sithSwapAv,
    url:'https://app.sithswap.com/'
  },
  {
    name: 'Fibrous',
    type: ['DEFI'],
    BG: fibrousBg,
    avatar: fibrousAv,
    url:'https://app.fibrous.finance/'
  }
]

//连接钱包按钮
const connectWallet2 = async () => {
  const starknet = await connect();
  addressStore.starkNetAddress = starknet.account.address
  getMoreInfo()
}

//获取更多信息
let amount = ref('-')
let fee = ref('-')
let contract = ref('-')
let tradingTimeArr = ref()
let l1Tol2Tx = ref('-')
let l2Tol1Tx = ref('-')
let tx = ref('-')

const getMoreInfo = () => {
  getStark(addressStore.starkNetAddress).then((res:any)=>{
    if(res.result === "error"){
      return
    }
    amount.value = res.Vol
    fee.value = res.fee
    contract.value = res.activity.contractActivity
    tradingTimeArr.value = res.transactions
    l1Tol2Tx.value = res.bridge.DepositTx
    l2Tol1Tx.value = res.bridge.WithdrawTx
    tx.value = res.tx
    processTime()
  })
}
//处理时间数据
const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
let showMonthNumberArr = ref([0,0,0,0,0,0,0,0,0,0,0,0])
let showMonthArr = ref()
const processTime = () => {
  let nowDate = new Date().toString()
  let nowDateArr = nowDate.split(' ')
  let nowMonth = nowDateArr[1]
  showMonthArr.value = []
  showMonthArr.value.push(nowMonth)
  let nowMonthIndex = monthArr.indexOf(nowMonth)
  const forLoop = () => {
    for (let i = 11; i !== nowMonthIndex ; i--) {
      showMonthArr.value.unshift(monthArr[i])
    }
  }
  for (let i = nowMonthIndex; i !== 0 ; i--) {
    showMonthArr.value.unshift(monthArr[i-1])
    if (i === 1) {
      forLoop()
    }
  }
  if (tradingTimeArr.value){
    tradingTimeArr.value.forEach((item:any) => {
      // if(item.balanceChanges[0].from && item.balanceChanges[0].from.toLowerCase() === addressStore.address.toLowerCase()){
      let receivedAt = timestampToCtime(item.timestamp)
      // console.log(receivedAt);
      let strArr = receivedAt.split(' ')
      let month = strArr[1]
      let index = showMonthArr.value.indexOf(month)
      showMonthNumberArr.value[index]++
      // }
    })
  }

  initEcharts()

}
function timestampToCtime(timestamp) {
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  const date = new Date(timestamp * 1000); // JavaScript使用毫秒为单位的时间戳，所以需要乘以1000
  const day = days[date.getUTCDay()];
  const month = months[date.getUTCMonth()];
  const dayOfMonth = date.getUTCDate();
  const time = date.getUTCHours() + ':' + ('0' + date.getUTCMinutes()).slice(-2) + ':' + ('0' + date.getUTCSeconds()).slice(-2);
  const year = date.getUTCFullYear();

  return `${day} ${month} ${dayOfMonth} ${time} UTC ${year}`;
}
//初始化echarts
const initEcharts = () => {
  let chartDom = document.getElementById('echartsBox1')!
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: showMonthArr.value
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        color: '#EC796B',
        data: showMonthNumberArr.value,
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);
}

//跳转网页
const toLink = (url:string) => {
  window.open(url)
}

const toPage = (url:string) => {
  router.push(url)
}
const toEmail = (email:string) => {
  const emailAddress = email; // 替换为你想发送邮件的收件人地址
  const subject = 'Hello'; // 替换为你想在邮件中设置的主题
  const body = 'This is the email body.'; // 替换为你想在邮件中设置的内容

  const mailtoUrl = `mailto:${emailAddress}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

  window.open(mailtoUrl);
}

let affix = ref(false)
let chart = ref(false)

const affixMouseenter = () => {
  const slideDiv = document.getElementById("slideDiv");
  slideDiv.style.bottom = "0";
}

const affixMouseleave = () => {
  const slideDiv = document.getElementById("slideDiv");
  slideDiv.style.bottom = "-608px";
}


const getStarkTvl = async () => {
  const url = 'https://api.llama.fi/v2/historicalChainTvl/Starknet';
  const response = await axios.get(url);
  return response.data;
}

const getZkTvlDetail = async () => {
  const url = "https://api.llama.fi/protocols";
  const response = await axios.get(url);
  let result = [];
  response.data.forEach((item) => {
    if (item['chains'].includes("Starknet") && item.category !== "CEX") {
      result.push({
        name: item.name,
        tvl: item['chainTvls']['Starknet'] / 1000000,
      });
    }
  });
  result.sort((a, b) => b.tvl - a.tvl);
  result = result.slice(0, 10);
  return result;
}

let change = ref(0)
let change24h = ref('-')
let nowTvl = ref('-')

const fetchData = async () => {
  const result = await getStarkTvl();
  change.value = ((result[result.length - 1].tvl - result[result.length - 2].tvl) / result[result.length - 2].tvl) * 100;
  change24h.value = change.value.toFixed(2) + '%'
  nowTvl.value = (result[result.length - 1].tvl / 1000000).toFixed(2) + 'M'

  let VolData = [];
  result.forEach(item => {
    VolData.push({
      date: new Date(item.date * 1000).toLocaleDateString(),
      tvl: item.tvl / 1000000,
    });
  });
  const max = Math.max(...VolData.map(item => item.tvl));
  const chart = new Area('TVLBox',{
    data: VolData,
    xField: 'date',
    yField: 'tvl',
    smooth: true,
    isStack: true,
    padding:[60],
    color: '#FFF',
    // label: {
    //   style:{
    //     fill:'#FFF'
    //   },
    //   content: (originData) => {
    //     return `${originData.tvl.toFixed(0)}`;
    //   },
    // },
    slider: {
      start: 0,
      end: 1,
      formatter: (v) => moment(v).format('YYYY-MM-DD'),
      textStyle:{
        fill:'#FFF'
      }
    },
    meta: {
      tvl: {
        alias: 'TVL(M)',
        min: 0,
        max: max * 1.1,

      }
    }
  });
  chart.render();
}

let TVLTopData = ref()
const fetchData2 = async () => {
  let result = await getZkTvlDetail();
  TVLTopData.value = result.slice(0,5)

  const max = Math.max(...result.map(item => item.tvl));
  const chart = new Bar('TVLTop', {
    data:result,
    xField: 'tvl',
    yField: 'name',
    color: '#FFF',
    yAxis: {
      label: {
        formatter: (v) => `${v}`,
      }
    },
    label: {
      position: 'right',
      style:{
        fill:'#FFF'
      },
      formatter: (v) => `${v.tvl.toFixed(2)}`,
    },
    meta: {
      tvl: {
        alias: 'TVL(M)',
        max: max * 1.1,
      }
    }
  });
  chart.render();
}

</script>

<template>
  <main class="main">
    <div class="mainBG">
      <img src="../assets/navBg.png" alt="BG">
    </div>
    <Nav @doSth="connectWallet2"/>

    <div class="chainBox">
      <div class="item" @click="toPage('/zkSync')">
        zkSync
      </div>
      <div class="item" @click="toPage('/layerZero')">
        Layer Zero
      </div>
      <div class="item">
        StarkNet
        <div class="line"></div>
      </div>
    </div>
    <div class="dataBox">
      <div class="left">
        <div class="leftTop">
          <div class="item">
            <div class="top">
              <div class="img">
                <img src="../assets/starkNet/STARKNET.svg" alt="STARKNET">
              </div>
              <div class="title">
                Protocols lnteraction
                <el-popover
                    placement="bottom"
                    :width="230"
                    trigger="hover"
                    effect="dark"
                >
                  <template #reference>
                    <img src="../assets/info.svg" alt="info">
                  </template>
                  <div class="popoverText">
                    Number of protocolsinteracted
                  </div>
                  <div class="popoverText">
                    with out of allavailable protocols
                  </div>
                </el-popover>
              </div>
            </div>
            <div class="number">
              {{ contract }}
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div class="img">
                <img class="img" src="../assets/group4.svg" alt="group2">USDT
              </div>
              <div class="title">
                <span style="width: 150px">vol</span>
                <span>fee</span>
              </div>
            </div>
            <div class="number">
              <span class="number" style="width: 150px">
                {{ amount }}
              </span>
              <span class="number">
                {{fee}}
              </span>
            </div>
          </div>
          <img width="175" src="../assets/starkNet/starkNet.png" alt="starkNet">
        </div>
        <div class="leftBottom">
          <div class="item">
            <div class="top">
              <div class="img">
                <img src="../assets/starkNet/STARKNET.svg" alt="STARKNET">
              </div>
              <div class="title">
                Total Transactions
                <el-popover
                    placement="bottom"
                    :width="250"
                    trigger="hover"
                    effect="dark"
                >
                  <template #reference>
                    <img src="../assets/info.svg" alt="info">
                  </template>
                  <div class="popoverText">
                    Total StarkNet
                  </div>
                  <div class="popoverText">
                    transactions issuedfrom the account
                  </div>
                </el-popover>
              </div>
            </div>
            <div class="number">
              {{ tx }}
            </div>
          </div>
          <div class="item" style="height: 94px">
            <div class="top">
              <div class="img">
                <img v-show="!sunStore.sun" class="img" src="../assets/official-bridge-white.svg" alt="group2">
                <img v-show="sunStore.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 v-show="!sunStore.sun" src="../assets/L1-To-L2-white.svg" alt="To">
                  <img v-show="sunStore.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 v-show="!sunStore.sun" src="../assets/L2-To-L1-white.svg" alt="To">
                  <img v-show="sunStore.sun" src="../assets/L2-To-L1.svg" alt="To">
                  <div class="number">
                    {{ l2Tol1Tx }}
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div style="position: relative">
        <div style="display: flex;align-items: center;position: absolute;left: 40px;top:10px;z-index: 10;gap:4px">
          Transactions Over Time
          <el-popover
              placement="right"
              :width="240"
              trigger="hover"
              effect="dark"
          >
            <template #reference>
              <img src="../assets/info.svg" alt="info">
            </template>
            <div class="popoverText">
              Number of transactions permonth
            </div>
          </el-popover>
        </div>
        <div class="right" id="echartsBox1">

        </div>
      </div>

    </div>
    <div class="projectBox">
      <div class="item" @click="toLink(item.url)" 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 class="dividingLine"/>
    <Footer/>
    <div class="dividingLine"/>
    <div style="height: 61px;" @mouseenter="affixMouseenter" @mouseleave="affixMouseleave">
      <div class="dataChart" id="slideDiv">
        <div class="box">
          <div class="titleBox">
            <div class="title">
              <img src="../assets/title.svg" alt="title">
              starkNet info
            </div>
            <!--            <div class="exit" v-show="chart" @click="chart = false">-->
            <!--              <img src="../assets/exit.svg" alt="exit">-->
            <!--              Exit-->
            <!--            </div>-->
          </div>
          <div class="data" >
            <div class="dataGroup">
              <div class="dataGroupTitle">
                <img src="../assets/TVL.svg" alt="TVL">
                TVL(M)
              </div>
              <div class="itemBox">
                <div class="item">
                  <div class="text1">
                    {{nowTvl}}
                  </div>

                  <div class="text2">
                    Now
                  </div>
                </div>
                <div class="item">
                  <div class="text3" v-show="change>=0">
                    {{change24h}}
                  </div>
                  <div class="text3" style="color: red" v-show="change<0">
                    {{change24h}}
                  </div>
                  <div class="text2">
                    24h
                  </div>
                </div>
              </div>
            </div>
            <div class="verticalLine"/>
            <div class="dataGroup">
              <div class="dataGroupTitle">
                <img src="../assets/tag.svg" alt="TVL">
                Top 5 TVL(M)
              </div>
              <div class="itemBox">
                <div class="item" v-for="(item,index) in TVLTopData">
                  <div class="text1">
                    {{ item.tvl.toFixed(2) }}M
                  </div>
                  <div class="text2">
                    {{ item.name }}
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!--          <div class="viewMore" v-show="affix" @click="chart = true">-->
          <!--            <img src="../assets/viewMore.svg" alt="viewMore">-->
          <!--            view more-->
          <!--          </div>-->
          <div class="chartBox">
            <div class="TVLBox" id="TVLBox">

            </div>
            <div class="TVLTop" id="TVLTop">

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main {
  width: 1440px;
  height: 100%;
  margin: auto;
  border: 1px solid var(--vt-c-border);
  border-top: none;
  border-bottom: none;
  padding: 30px 60px 0;
  .dividingLine {
    width: 100vw;
    height: 1px;
    border-bottom: 1px solid var(--vt-c-border);
    position: absolute;
    left: 0;
  }
  .mainBG{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: -1;
  }
  .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;
    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;
      cursor: pointer;
      .line{
        position: absolute;
        width: 60px;
        height: 4px;
        background: var(--color-text);
        left: 0;
        right: 0;
        margin: auto;
        bottom: 0;
      }
    }
  }
  .dataBox {
    height: 365px;
    margin: 0 -60px;
    border-bottom: 1px solid var(--vt-c-border);
    border-top: 1px solid var(--vt-c-border);
    display: flex;
    align-items: center;
    .left {
      width: 845px;
      height: 100%;
      border-right: 1px solid var(--vt-c-border);
      .item {
        width: 260px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .top {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .img {
            height: 16px;
          }
        }
        .publicChainBox{
          display: flex;
          align-items: center;
          gap:40px;
          .publicChainItem{
            display: flex;
            flex-direction: column;
            gap:20px;
          }
        }
        .title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          //color: #010101;
          font-family: 'HONOR Sans CN';
          .popoverText{
            font-weight: 400;
            font-size: 12px;
            line-height: 24px;
          }
        }

        .number {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 700;
          font-size: 26px;
          line-height: 34px;
          //color: #010101;
        }
      }
      .leftTop {
        height: 175px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 60px;
        padding-right: 60px;
        border-bottom: 1px solid var(--vt-c-border);
        .img{
          display: flex;
          align-items: center;
          font-weight: 700;
          gap:4px
        }
      }
      .leftBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 175px;
        padding-left: 60px;
      }
    }
    .right {
      height: 365px;
      width: 596px;
    }
  }
  .projectBox{
    display: flex;
    flex-wrap: wrap;
    overflow:auto;
    gap: 28px;
    height: 585px;
    margin: 0px -60px;
    padding: 20px 0;
    border-bottom: 1px solid var(--vt-c-border);

    .item {
      height: 256px;
      width: 336px;
      cursor: pointer;
      .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;
        background: #FFFFFF;

        .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;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              color: #b3b3b3;
              padding: 0 4px;
            }

            .type::before {
              content: "\00B7";
              margin-right: 5px;
            }
          }

        }
      }
    }
  }
  .dataChart{
    width: 100vw;
    position: fixed;
    bottom: -608px;
    left: 0;
    background: rgba(40, 40, 40, 0.96);
    backdrop-filter: blur(34px);
    display: flex;
    justify-content: center;
    transition: bottom 0.3s ease-in-out;
    .box{
      width: 1440px;
      height: 100%;
      .titleBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        .title{
          display: flex;
          color: #FFF;
          font-family: HONOR Sans CN;
          font-size: 15px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          gap:8px;
          opacity: 0.5;
        }

        .exit{
          color: #FFF73F;
          font-family: Space Grotesk;
          font-size: 15px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          display: flex;
          gap:8px;
          cursor: pointer;

        }
      }
      .data{
        display: flex;
        gap:80px;
        align-items: center;
        padding: 24px 0;
        border-bottom: 1px solid #4C4C4C;
        border-top: 1px solid #4C4C4C;

        .dataGroup{
          display: flex;
          flex-direction: column;
          gap:16px;
          .dataGroupTitle{
            display: flex;
            color: #FFF;
            font-family: HONOR Sans CN;
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            gap:8px;
            opacity: 0.5;

          }
          .itemBox{
            display: flex;
            align-items: center;
            gap:80px;
            .item{
              display: flex;
              flex-direction: column;
              gap:8px;
              .text1{
                color: #FFF;
                font-family: HONOR Sans CN;
                font-size: 21px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
              }
              .text2{
                color: #FFF;
                font-family: HONOR Sans CN;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                opacity: 0.5;
              }
              .text3{
                color: #57EB92;
                font-family: HONOR Sans CN;
                font-size: 21px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
              }
            }
          }
        }
        .verticalLine{
          width: 1px;
          height: 88px;
          border-right: 1px solid #4c4c4c;
        }
      }
      .viewMore{
        width: 100%;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        gap:8px;
        color: #FFF73F;
        font-family: Space Grotesk;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        cursor: pointer;
      }
      .chartBox{
        width: 100%;
        height: 468px;
        display: flex;
        .TVLBox{
          width: 840px;
          height: 100%;
          border-right: 1px solid #4c4c4c;
          border-left: 1px solid #4c4c4c;
        }
        .TVLTop{
          width: 600px;
          height: 100%;
          border-right: 1px solid #4c4c4c;
          padding: 60px
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 4px; /* 滚动条宽度 */
}

// /* 滚动条轨道 */
// ::-webkit-scrollbar-track {
//   background: #f1f1f1; /* 轨道背景色 */
// }

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块背景色 */
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停状态下滑块背景色 */
}
</style>