<template>
  <div class="c-latestBlocks">
    <div class="top flex items-center justify-between px-3.5">
      <div class="text-darkBlue text-sm font-bold">
        {{ $t('lang.latestTx') }}
      </div>
      <div
        class="text-footer-color text-xs"
        @click="$router.push('/tradeList')"
      >
        {{ $t('lang.viewMore') }}
      </div>
    </div>
    <m-tx-item
      v-for="n in 6"
      :key="n"
      :txGroup="
        (n <= 3 && 'isGroupItem') || (n === 4 && 'isGroupItemEnd') || undefined
      "
    ></m-tx-item>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import mTxItem from './m-txItem.vue'
export default Vue.extend({
  components: { mTxItem },
})
</script>
<style lang="scss" scoped>
.c-latestBlocks {
  .top {
    height: 50px;
    background: #ffffff;
    border-radius: 2px;
  }
}
</style>
