|
|
@@ -1,44 +1,804 @@
|
|
|
<template>
|
|
|
<div class="dashboard-container">
|
|
|
- <div class="dashboard-text">
|
|
|
- name:
|
|
|
- {{
|
|
|
- this.nickname ? this.nickname : this.email ? this.email : this.username
|
|
|
- }}
|
|
|
+ <div class="head">
|
|
|
+ <div class="left">
|
|
|
+ <div class="item">
|
|
|
+ <div class="number">
|
|
|
+ 85
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ 支出/气体
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="verticalLine"/>
|
|
|
+ <div class="item">
|
|
|
+ <div class="number">
|
|
|
+ 8.811k
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ 剩余本金
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="verticalLine"/>
|
|
|
+ <div class="item">
|
|
|
+ <div class="number">
|
|
|
+ 85
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ 预计支出总费用
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="verticalLine"/>
|
|
|
+ <div class="item">
|
|
|
+ <div class="number">
|
|
|
+ 88222
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ 预计空投价值
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="../../assets/dashboard/upload.svg" alt="upload">
|
|
|
+ 导出财务报表
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="left">
|
|
|
+ <div class="expenseAndInput">
|
|
|
+ <div class="expense">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">
|
|
|
+ 支出趋势
|
|
|
+ </div>
|
|
|
+ <div style="width: 300px;display: flex;justify-content: space-between;z-index: 10">
|
|
|
+ <div @click='changeActive(index)' :class='isActive === index ? "myWallet-text2" : "myWallet-text3"'
|
|
|
+ v-for="(item,index) in day">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ <el-popover placement="right" trigger="click">
|
|
|
+ <div slot="reference" class="myWallet-text4">
|
|
|
+ Custom
|
|
|
+ </div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="datePicker"
|
|
|
+ type="daterange"
|
|
|
+ align="center"
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ @change="datePickerChange"
|
|
|
+ />
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="emissionBonus" id="expense">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <div class="title">
|
|
|
+ 预计投入/USDT
|
|
|
+ </div>
|
|
|
+ <div class="emissionBonus" id="input">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="expected">
|
|
|
+ <div class="text">
|
|
|
+ 预期投入
|
|
|
+ </div>
|
|
|
+ <div class="amount">
|
|
|
+ 888232
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ 共7项
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ 总支出:234112
|
|
|
+ </div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="missionAndAddress">
|
|
|
+ <div class="mission">
|
|
|
+ <div class="title">
|
|
|
+ 交互任务进度
|
|
|
+ </div>
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="item" v-for="(item,index) in progressData">
|
|
|
+ <div class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress" :style="{width:item.progress}"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address">
|
|
|
+ <div class="title">
|
|
|
+ 地址统计
|
|
|
+ </div>
|
|
|
+ <div class="emissionBonus" id="address">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">
|
|
|
+ 燃气报价(单位:元)
|
|
|
+ </div>
|
|
|
+ <div class="base">
|
|
|
+ 当前基数:38基于以太坊交易内存池预测
|
|
|
+ </div>
|
|
|
+ <div class="gasBox">
|
|
|
+ <div class="top">
|
|
|
+ <div class="item">
|
|
|
+ <img src="../../assets/dashboard/Vector.svg" alt="Vector">
|
|
|
+ <div class="info">
|
|
|
+ <div class="speed">
|
|
|
+ Top 40
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $1.57 | for 15 seconds
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="high">
|
|
|
+ <div class="item">
|
|
|
+ <img src="../../assets/dashboard/Vector-1.svg" alt="Vector">
|
|
|
+ <div class="info">
|
|
|
+ <div class="speed">
|
|
|
+ High speed 40
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $1.53 | 1 minute
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="general">
|
|
|
+ <div class="item">
|
|
|
+ <img src="../../assets/dashboard/Vector-2.svg" alt="Vector">
|
|
|
+ <div class="info">
|
|
|
+ <div class="speed">
|
|
|
+ General 40
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $1.49 | 3 minutes
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="slow">
|
|
|
+ <div class="item">
|
|
|
+ <img src="../../assets/dashboard/Vector-3.svg" alt="Vector">
|
|
|
+ <div class="info">
|
|
|
+ <div class="speed">
|
|
|
+ Slow 40
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $1.49 | > 10 minutes
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="logo">
|
|
|
+ <img src="../../assets/dashboard/image.svg" alt="image">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Cookies from "js-cookie";
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
export default {
|
|
|
name: "Dashboard",
|
|
|
data() {
|
|
|
return {
|
|
|
- email: undefined,
|
|
|
- username: undefined,
|
|
|
- nickname: undefined,
|
|
|
+ progressData: [
|
|
|
+ {
|
|
|
+ name: '任务名称',
|
|
|
+ progress: '30%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '任务名称',
|
|
|
+ progress: '20%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '任务名称',
|
|
|
+ progress: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '任务名称',
|
|
|
+ progress: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '任务名称',
|
|
|
+ progress: '0',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isActive: 0,
|
|
|
+ day: ['7D', '30D', 'All'],
|
|
|
+ visible: false,
|
|
|
+ datePicker: []
|
|
|
};
|
|
|
},
|
|
|
- created() {
|
|
|
- this.getCookie();
|
|
|
+ mounted() {
|
|
|
+ this.initEchartsAddress()
|
|
|
+ this.initEchartsInput()
|
|
|
+ this.initEchartsExpense()
|
|
|
},
|
|
|
methods: {
|
|
|
- getCookie() {
|
|
|
- this.email = Cookies.get("email");
|
|
|
- this.username = Cookies.get("username");
|
|
|
- this.nickname = Cookies.get("nickname");
|
|
|
+ initEchartsAddress() {
|
|
|
+ let chartDom = document.getElementById('address');
|
|
|
+ let myChart = echarts.init(chartDom, undefined, {
|
|
|
+ renderer: 'svg'
|
|
|
+ });
|
|
|
+ let option;
|
|
|
+ option = {
|
|
|
+ textStyle: {
|
|
|
+ fontFamily: 'Quicksand'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ offset: 20,
|
|
|
+ type: 'category',
|
|
|
+ data: ['钱包名称', '钱包名称', '钱包名称', '钱包名称', '钱包名称', '钱包名称'],
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ABABAB'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ offset: 20,
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ABABAB'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [30, 25, 18, 40, 26, 40],
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '15%',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#27AE60',
|
|
|
+ borderRadius: [30, 30, 0, 0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ initEchartsInput() {
|
|
|
+ let chartDom = document.getElementById('input');
|
|
|
+ let myChart = echarts.init(chartDom, undefined, {
|
|
|
+ renderer: 'svg'
|
|
|
+ });
|
|
|
+ let option;
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {value: 1048, name: '1'},
|
|
|
+ {value: 735, name: '2'},
|
|
|
+ {value: 580, name: '3'},
|
|
|
+ {value: 484, name: '4'},
|
|
|
+ {value: 300, name: '5'},
|
|
|
+ {value: 300, name: '6'},
|
|
|
+ {value: 300, name: '7'},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
},
|
|
|
+ initEchartsExpense(){
|
|
|
+ let chartDom = document.getElementById('expense');
|
|
|
+ let myChart = echarts.init(chartDom, undefined, {
|
|
|
+ renderer: 'svg'
|
|
|
+ });
|
|
|
+ let option;
|
|
|
+ option = {
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ icon: 'circle',
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ offset: 10,
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ABABAB',
|
|
|
+ fontWeight: 500
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: ['08-05','08-06','08-07','08-08','08-09','08-10']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ offset: 10,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#181818',
|
|
|
+ fontWeight: 700
|
|
|
+ },
|
|
|
+ type: 'value'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Gas',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Total',
|
|
|
+ color: '#2980FF',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [12,9,6,12,10,12]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本金',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Total',
|
|
|
+ color: '#FFD428',
|
|
|
+ barWidth: '25%',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [100, 100, 0, 0]
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [12,9,6,12,10,12]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+ changeActive(index) {
|
|
|
+ this.isActive = index
|
|
|
+ },
|
|
|
+ changeInitCalendarPage() {
|
|
|
+ let element = document.querySelector(".el-picker-panel__icon-btn.arrow-left");
|
|
|
+ if (element) {
|
|
|
+ element.click()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now()
|
|
|
+ },
|
|
|
+ datePickerChange() {
|
|
|
+ this.visible = false
|
|
|
+ if (this.datePicker) {
|
|
|
+ console.log(this.datePicker);
|
|
|
+ } else {
|
|
|
+ // changeActive(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.dashboard {
|
|
|
- &-text {
|
|
|
- font-size: 30px;
|
|
|
- line-height: 46px;
|
|
|
+.dashboard-container {
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ gap: 60px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #8e8f91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .verticalLine {
|
|
|
+ width: 1px;
|
|
|
+ height: 50px;
|
|
|
+ border-right: 1px solid #e4e6ea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 178px;
|
|
|
+ height: 52px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ border: 1px solid #2980FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 40px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 40px;
|
|
|
+
|
|
|
+ .expenseAndInput {
|
|
|
+ display: flex;
|
|
|
+ gap: 28px;
|
|
|
+
|
|
|
+ .expense {
|
|
|
+ width: 736px;
|
|
|
+ height: 342px;
|
|
|
+ background: #fcfdff;
|
|
|
+ border: 1px solid #F1F2F6;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 36px;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .myWallet-text2 {
|
|
|
+ width: 50px;
|
|
|
+ height: 34px;
|
|
|
+ background: #F1F1F1;
|
|
|
+ border: 1px solid #F1F1F1;
|
|
|
+ border-radius: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #2A2E39;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .myWallet-text3 {
|
|
|
+ width: 50px;
|
|
|
+ height: 34px;
|
|
|
+ color: #8F9297;
|
|
|
+ border-radius: 36px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .myWallet-text4 {
|
|
|
+ width: 84px;
|
|
|
+ height: 34px;
|
|
|
+ background: linear-gradient(135deg, #FEF380 0%, #E8FFC7 100%);
|
|
|
+ border-radius: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #2A2E39;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .emissionBonus{
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 300px;
|
|
|
+ height: 342px;
|
|
|
+ background: #fcfdff;
|
|
|
+ border: 1px solid #F1F2F6;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 36px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .emissionBonus {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expected {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: 136px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #7e7f80;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ width: 100%;
|
|
|
+ height: 6px;
|
|
|
+ background: #d2e4ff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ width: 70%;
|
|
|
+ height: 6px;
|
|
|
+ background: #6FCF97;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .missionAndAddress {
|
|
|
+ display: flex;
|
|
|
+ gap: 40px;
|
|
|
+
|
|
|
+ .mission {
|
|
|
+ width: 335px;
|
|
|
+ height: 338px;
|
|
|
+ background: #fcfdff;
|
|
|
+ border: 1px solid #F1F2F6;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 36px;
|
|
|
+
|
|
|
+ .progressBox {
|
|
|
+ margin-top: 28px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 24px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ width: 180px;
|
|
|
+ height: 20px;
|
|
|
+ background: #222222;
|
|
|
+ border-radius: 0 20px 20px 0;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ height: 20px;
|
|
|
+ background: #6FCF97;
|
|
|
+ border-radius: 0 20px 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ width: 689px;
|
|
|
+ height: 338px;
|
|
|
+ background: #fcfdff;
|
|
|
+ border: 1px solid #F1F2F6;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 36px;
|
|
|
+
|
|
|
+ .emissionBonus {
|
|
|
+ width: 689px;
|
|
|
+ height: 280px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 348px;
|
|
|
+ height: 720px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 28px;
|
|
|
+
|
|
|
+ .base {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #ABABAB;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gasBox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 28px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24px;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .speed {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #919191;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: 104px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #EB5757;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .high {
|
|
|
+ width: 100%;
|
|
|
+ height: 104px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #2980FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .general {
|
|
|
+ width: 100%;
|
|
|
+ height: 104px;
|
|
|
+ background: #6FCF97;
|
|
|
+ border: 1px solid #6FCF97;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slow {
|
|
|
+ width: 100%;
|
|
|
+ height: 104px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #F2C94C;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ margin-top: 72px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
million
