coinbus/yq/src/views/liveliness/index.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>