<template>
 <div v-loading="lthNUPLEthLoading">
    <!-- 公式 -->   
    <el-row type="flex" justify="center">
      <div class="formulaBox1">
        <section>LTH-NUPL</section>
        
        <section class="right">              
          <div> &nbsp; = LTH-Relative Unrealized Profit - LTH-Relative Unrealized Loss</div>
          <div class="formula2">
            <p>=</p>          
           <div class="right2">          
            <p>LTH-Market Cap - LTH-Realized Cap</p>
            <p>LTH-Market Cap</p>
           </div>           
          </div>
          <div class="formula3">
            <p>=</p>
           <div class="right2">
            <p>value · (price <span style="color:rgba(0,0,0,0.4);font-size:16px">[USD]</span> - price <span style="font-size:12px">Created</span> <span style="color:rgba(0,0,0,0.4)">[USD]</span> ) <span>(of all UTXOs where age ≥ 155 days)</span> </p>
            <p>value · price <span style="color:rgba(0,0,0,0.4)">[USD]</span> <span>(of all UTXOs where age ≥ 155 days)</span> </p>
           </div>           
          </div>
        </section>
    </div>
  </el-row>
    



   <!-- 对数线性显示切换 -->

    <!-- <el-row class="switch">
      <el-col>
         <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="lthNUPLEthBox"
         style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>

     <!-- 公式 -->

     <!-- <section class="formulaBox">
      <p>{{  $t(`home.formula`) }}</p>
      <div class="formulaBox1">
        <section>LTH-NUPL</section>
        <section class="right">          
          <div>= LTH-Relative Unrealized Profit - LTH-Relative Unrealized Loss</div>
          <div class="formula2">
            <p>=</p>
           <div class="right2">
            <p>LTH-Market Cap - LTH-Realized Cap</p>
            <p>LTH-Market Cap</p>
           </div>           
          </div>
          <div class="formula3">
            <p>=</p>
           <div class="right2">
            <p>value . (price [USD] - price<span style="font-size:12px">created</span> [USD]) <span>(of all UTXOs where age ≥ 155 day)</span> </p>
            <p>value . price [USD] <span>(of all UTXOs where age ≥ 155 days)</span> </p>
           </div>           
          </div>
        </section>
    </div>
    </section> -->
  </div>
</template>

<script>
import IndexJs from "../lthNUPLEth/index"
export default {
  mixins:[IndexJs]
}
</script>

<style lang="scss" scoped>
.formulaBox {
  width: 98.7%;
  padding: 10px 0px;
  margin-bottom: -30px;
  font-size: 18px;
  // height: 60px;
  background: #e5e5e5;
  color: rgba(0, 0, 0, 0.7);
  div{
    // outline: 1px solid red;
    padding: 0px 10px;
  }
  p{
    margin: 0;
    padding: 0px 10px;
  }

}
.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;
  .section{
    outline: 1px solid red;
  }
  .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>