<template>
  
 <div v-loading="tzbpEthLoading">
   <!-- 对数线性显示切换 -->

    <!-- <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-select v-model="params.zone" @change="handelZone" placeholder="请选择">
    <el-option
      v-for="item in zoneList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> -->

    <!-- 区域选择 -->
    <ul class="nationalRegion">
      <li v-for="(item,index) in zoneList" :key="item.value" @click="handelZone(item.value,index)" :class = "isactive == index ? 'addclass' : '' "> {{ item.label }} </li>
      
    </ul>

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

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

<style lang="scss" scoped>  
.nationalRegion{
  // outline: 1px solid red;
  display: flex;
  margin-bottom: 20px;
  width: 20%;
  justify-content: space-around;
  margin-left: 8%;
  font-size: 14px;
  cursor: pointer;
  li:hover{
    color: darkorange;
  }
}

.addclass{
 color : darkorange;
}
</style>