198 lines
4.2 KiB
Vue
198 lines
4.2 KiB
Vue
<template>
|
|
<div v-loading="livelinessLoading" style="width: 100%; min-height: 700px">
|
|
|
|
<!-- 公式 -->
|
|
<el-row type="flex" justify="center">
|
|
<div class="formulaBox1">
|
|
<section class="title">Liveliness</section>
|
|
|
|
<section class="right">
|
|
|
|
<div class="formula2">
|
|
<p>=</p>
|
|
<div class="right2">
|
|
<p>Cumulative CDD</p>
|
|
<p>Cumulative Total Supply</p>
|
|
</div>
|
|
</div>
|
|
<div class="formula3">
|
|
<p>=</p>
|
|
<div class="right2">
|
|
<p>value · lifespan <span style="color:rgba(0,0,0,0.4);font-size:16px">[blocks](of all outputs ever spent)</span> </p>
|
|
<p>value · lifespan <span style="color:rgba(0,0,0,0.4)">[blocks] (of all outputs ever created)</span> </p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</el-row>
|
|
<!-- 对数线性显示切换 -->
|
|
<el-row class="nav">
|
|
<el-col :span="3">
|
|
<el-button @click="handelLineSwitch"
|
|
style="margin-left:100px;height:35px;border-radius:6px;"
|
|
>{{ $t(`home.switch`)
|
|
}}<span class="according"> {{ $t(switch3) }}</span></el-button
|
|
>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div
|
|
id="livelinessBox"
|
|
style="width: 100%; min-height: 700px"
|
|
></div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 移动平均线 -->
|
|
<!-- <el-row>
|
|
<el-col :span="24">
|
|
<div
|
|
id="smaBox"
|
|
style="width: 100%; min-height: 700px"
|
|
></div>
|
|
</el-col>
|
|
</el-row> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IndexJs from "../liveliness/index";
|
|
export default {
|
|
mixins: [IndexJs],
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav{
|
|
/* outline: 1px solid red; */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-new-drop{
|
|
// background: goldenrod;
|
|
// height: 200px;
|
|
.item{
|
|
// background: red !important;
|
|
// height: 30px ;
|
|
line-height: 30px !important;
|
|
}
|
|
|
|
}
|
|
.dropdown2{
|
|
outline: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 8px 20px;
|
|
// .items{
|
|
// outline: 1px solid red;
|
|
// .item{
|
|
// outline: 1px solid red;
|
|
// }
|
|
// }
|
|
// .el-dropdown-item{
|
|
// outline: 1px solid red;
|
|
// }
|
|
}
|
|
.el-dropdown {
|
|
vertical-align: top;
|
|
// outline: 1px solid red;
|
|
}
|
|
|
|
|
|
.el-dropdown-link {
|
|
cursor: pointer;
|
|
// outline: 1px solid red;
|
|
/* color: #f7931a; */
|
|
}
|
|
.el-icon-arrow-down {
|
|
font-size: 12px;
|
|
// outline: 1px solid red;
|
|
|
|
}
|
|
|
|
.formulaBox1{
|
|
// outline: 1px solid red;
|
|
display: flex;
|
|
// margin-top: 10px;
|
|
// outline: 1px solid red;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.title{
|
|
// outline: 1px solid red;
|
|
padding-top: 15px;
|
|
}
|
|
.right{
|
|
// outline: 1px solid red;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: left;
|
|
|
|
p{
|
|
padding: 0;
|
|
|
|
}
|
|
div{
|
|
// margin-top: 5px;
|
|
// outline: 1px solid goldenrod;
|
|
}
|
|
.formula2{
|
|
padding: 0px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
p{
|
|
padding: 0;
|
|
// outline: 1px solid red;
|
|
}
|
|
|
|
.right2{
|
|
padding: 0px 5px;
|
|
p:nth-of-type(1){
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
|
margin: 0px;
|
|
}
|
|
p:nth-of-type(2){
|
|
// padding-left: 80px;
|
|
// outline: 1px solid red;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
}
|
|
.formula3{
|
|
padding: 0px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
p{
|
|
padding: 0;
|
|
}
|
|
|
|
.right2{
|
|
padding: 0px 5px;
|
|
p:nth-of-type(1){
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
|
margin: 0px;
|
|
span{
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
span:nth-of-type(1){
|
|
font-size: 12px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
p:nth-of-type(2){
|
|
// padding-left: 80px;
|
|
margin: 0px;
|
|
span{
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |