<template>
  <div class="c-balance-graph">
    <div class="flex items-center justify-between">
      <dir>
        {{ $t('lang.address.accountBalance') }}
      </dir>
      <div class="">
        <span class="text-text-color ml-3">W1</span>
        <span class="text-footer-color font-bold ml-3">M1</span>
        <span class="text-text-color ml-3">M6</span>
        <span class="text-text-color ml-3">Y1</span>
        <span class="text-text-color ml-3">ALL</span>
      </div>
    </div>
    <div class="relative">
      <img :src="noData" alt="" />
      <div
        class="absolute text-center left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 text-text-color text-xs"
      >
        暂无数据
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import noData from '@/assets/images/blockChainBrowser/address/mobile-chart-no-data.png'
export default Vue.extend({
  data() {
    return {
      noData,
    }
  },
})
</script>
<style lang="scss" scoped>
.c-balance-graph {
  height: 140px;
  background: #ffffff;
  border-radius: 2px;
}
</style>
