<template>
  <div class="container shadow-shadow1 bg-white" style="padding: 30px;">
    <div class="flex justify-between">
      <div class="text-darkBlue text-lg font-bold">
        链上交易数量
      </div>
      <div class="flex items-center">
        <div
          v-for="(filter, index) in filters"
          :key="index"
          @click="currentFilter = filter"
          class="text-text-color cursor-pointer ml-7"
          :class="{ ' text-footer-color': currentFilter === filter }"
        >
          {{ filter }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      filters: ['D1', 'W1', 'M1', 'Y1'],
      currentFilter: 'D1',
    }
  },
})
</script>

<style scoped>
.container {
  height: 280px;
}
</style>
