<template>
  <!-- 已花费输出盈利比 -->
  <div
    v-loading="soprLoading"
    style="width: 100%; min-height: 700px"
  >
  <div class="formulasBOXS">
  <el-row type="flex" justify="center"  >

      <section class="formulas">
          <div>SOPR =</div>
          <div>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Spent</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs)</span></span>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Created</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs)</span>   </span>
          </div>
      </section>
   </el-row>
   <el-row type="flex" justify="center">
      <section class="formulas">
          <div>LTH-SOPR =</div>
          <div>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Spent</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs where age ≥ 155 days)</span></span>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Created</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs where age ≥ 155 days)</span></span>
          </div>
      </section>
   </el-row>
   <el-row type="flex" justify="center">
      <section class="formulas">
          <div>STH-SOPR =</div>
          <div>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Spent</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs where age ＜ 155 days)</span></span>
            <span>value · price <span style="font-size:12px;color:rgba(0,0,0,0.5);border:none">Created</span> <span style="color:rgba(0,0,0,0.4)"> [USD] (of all spent outputs where age ＜ 155 days)</span></span>
          </div>
      </section>
   </el-row>

  </div>

  <Dropdown
          :dataSelection="dataSelection"
          :onSelect="handleSelect"
          :realTimeData="realTimeData"
          style="margin: 10px 0px;"
        ></Dropdown>



    <!-- 对数线性显示切换 -->
    <!-- <el-row>
      <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="soprBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>


  </div>
</template>

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

<style lang="scss" scoped>
.formula{
  width: 98.7%;
    padding: 10px 0px;
    margin-bottom: -30px;
    // height: 60px;
    background: #e5e5e5;
    color: rgba(0, 0, 0, 0.7);
    p{
      padding: 0px 10px;
      // font-weight: 600;
      span{
        font-weight: 500;
        font-size: 12px;
      }
      
    }
}
.formulasBOXS{
  // outline: 1px solid red;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: flex-start;
 padding-left: 28%;
 .formulas{
  margin-top: 10px;
 }
}

  .formulaBox1{
    // outline: 1px solid red;
    display: flex;
    padding: 0px 10px;
    align-items: center;
    
    div{
      // outline: 1px solid red;
    }
    div:nth-of-type(1){
      font-size: 18px;
      // font-weight: 600;
      span{
        font-size: 12px;
        font-weight: normal;
        // outline: 1px solid red;
      

      }
    }
    div:nth-of-type(2){
      display: flex;
      flex-direction: column;
      margin-left: 5px;
      p{
        margin: 0px;
        // outline: 1px solid red;
      }
      p:nth-of-type(1){
        border-bottom: 1px solid rgba(0, 0, 0, 0.7);
      }

      // p:nth-of-type(2){
      //   padding-left: 90px;
      // }
      span{
        font-size: 12px;
      }
    
    }
  }
</style>