coinbus/yq/src/views/MoneyStockMeasures/index.vue

<template>
 <div v-loading="MoneyStockMeasuresLoading">


        <div class="rowBox">
            <el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
              <el-row type="flex" justify="left">
                <p style="font-weight:550;color:rgba(0,0,0,0.6)">MB = {{ $t(`home.cash`) }} + {{ $t(`home.deposit`) }} </p>
            </el-row>
            </el-row>

            <el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
              <el-row type="flex" justify="left">
                <p style="font-weight:550;color:rgba(0,0,0,0.6)">M1 = {{ $t(`home.cash2`) }} + {{ $t(`home.current`) }} + {{ $t(`home.check`) }} + {{ $t(`home.depositCheck`) }}</p>
            </el-row>
            </el-row>

            <el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
              <el-row type="flex" justify="left">
                <p style="font-weight:550;color:rgba(0,0,0,0.6)">M2 = M1 + {{ $t(`home.savings`) }} + {{ $t(`home.regular`) }} + {{ $t(`home.otherDeposits`) }} </p>
            </el-row>
            </el-row>
        </div>


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

    <!-- <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> -->
    <div class="choiceBox" >
      <span :class = "isactive === index ? 'addclass' : '' " v-for="item,index in choiceList" :key="item.value" @click="handelZone(item.value,index)" >{{ $t(item.label) }}</span>
    </div>
    <!-- 单位 -->
    <div style="font-size: 12px;padding-right: 9%;color: rgba(0,0,0,0.6);text-align: right;">{{ $t(`home.unit`) }}: billion</div>
    <el-row>
      <el-col :span="24">      
        <div
          id="MoneyStockMeasuresBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>

    <el-row style="font-size: 12px;padding: 20px;" >
      <div>{{ $t(`home.M1`) }}</div>
      <div>{{ $t(`home.M1_1`) }}</div>
      <div>{{ $t(`home.M1_2`) }}</div>
      <div>{{ $t(`home.M1_3`) }}</div>
      <div>{{ $t(`home.M1_4`) }}</div>
      <div>{{ $t(`home.M1_5`) }}</div>
      <div>{{ $t(`home.M1_6`) }}</div>
      <div>{{ $t(`home.M1_7`) }}</div>
      <br>
      <div>{{ $t(`home.M2`) }}</div>
      <div>{{ $t(`home.M2_1`) }}</div>
      <div>{{ $t(`home.M2_2`) }}</div>
      <div>{{ $t(`home.M2_3`) }}</div>
      <div>{{ $t(`home.M2_4`) }}</div>
      <div>{{ $t(`home.M2_5`) }}</div>
      <div>{{ $t(`home.M2_6`) }}</div>
 
    </el-row>
   

  </div>
</template>

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

<style lang="scss" scoped>
.maTillte {
  margin-left: 45%;
  color: rgba(0, 0, 0, 0.6);
}
.addclass{
 color : darkorange;
}
.formulaBox{
  width: 98.7%;
  padding: 10px 0px;
  margin-bottom: -30px;
  font-size: 18px;
  // height: 60px;
  // background: #e5e5e5;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  font-weight: 600;
  p{
    padding: 0px 10px;
  }
  div{
    padding: 0px 10px;
    span{
      font-size: 12px;
    }

  }


}
.choiceBox{
  // outline: 1px solid red;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  // display: flex;
  padding-left: 80px;
  // margin-bottom: 30px;

  span{
    margin-left: 20px;
    // color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }
  span:hover{
    color: #f7931a;
  }

 
  
}
.rowBox{
  margin-bottom: 20px;
  .el-row--flex.is-justify-center{
    height: 30px;
  }
}


</style>