<template>
  <div v-loading="NdaqBtcDayKlineLoading" class="NdaqBtcDayKline">
    <el-row>
      <el-col class="buttonBox" :span="2">
        <button @click="handelNdaqKline" :class="{type:ys1,active:ys2}">{{$t(`arh.ndaq`)}}</button>
      </el-col>
      <el-col class="buttonBox"  :span="1.5">
        <button  @click="handelBtcKline" :class="{type2:ys3,active2:ys4}" >{{$t(`arh.btc`)}}</button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div
          id="NdaqBtcDayKlineBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

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

<style lang="scss" scoped>
.NdaqBtcDayKline{
  padding: 0px 20px;
}
.type{
  
  height: 30px;
  background: #f2f2f2;  
  border: none;
  color: rgba(0,0,0,0.6);
  box-shadow: 0px 0px 2px 0px ;
   padding: 2px 10px;
   
}
.type2{
  height: 30px;
  background: #f2f2f2;  
  border: none;
  color: rgba(0,0,0,0.6);
  box-shadow: 0px 0px 2px 0px ;
   padding: 2px 10px;
}
.active {
  height: 30px;
  border: none;
  color: rgba(0,0,0,0.6);
  box-shadow: 0px 0px 2px 0px ;
   padding: 2px 10px;
  background: #9ed4e8;  
}
.active2{
  height: 30px;
  border: none;
  color: rgba(0,0,0,0.6);
  box-shadow: 0px 0px 2px 0px ;
   padding: 2px 10px;
  background: #9ed4e8; 
}
// button:hover{
//   background: rgba(255,255,255,0.5);
//   color: rgba(0,0,0,0.8);
// }
.buttonBox{
  // outline: 1px solid red;
  // margin-left: 10px;
  display: flex;
  justify-content: center;
  padding: 5px 0px;
}
</style>