<template>
  <div class="" style="padding-top: 44px; padding-bottom: 24px;">
    <m-chain-search
      style="margin-top: 15px;"
      class="mx-4 mt-4"
    ></m-chain-search>
    <div class="relative flex justify-end" style="margin-top: 19px;">
      <m-chain-card
        class="ml-4 absolute top-1/2 -translate-y-1/2 transform left-0"
        :msgList="msgList"
      ></m-chain-card>
      <m-blue-intro class=""></m-blue-intro>
    </div>
    <m-num-of-on-chain-tx class="mx-4 mt-3.5"></m-num-of-on-chain-tx>
    <div class="flex justify-between mx-4 mt-3.5">
      <m-chain-price class="flex-shrink-0"></m-chain-price>
      <div style="width: 15px;"></div>
      <m-chain-perf class="flex-grow"></m-chain-perf>
    </div>
    <m-latest-blocks
      class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
      :latestBlocks="latestBlocks"
    ></m-latest-blocks>
    <m-latest-tx
      class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
    ></m-latest-tx>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'

import blockChainBrowserMixin from '@/mixin/blockChainBrowser'
import MChainSearch from '@/components/mobile/m-chainSearch.vue'
import MChainCard from '@/components/mobile/m-chainCard.vue'
import MBlueIntro from '@/components/mobile/m-blue-intro.vue'
import MNumOfOnChainTx from '@/components/mobile/map/m-numOfOnChainTx.vue'
import MChainPrice from '@/components/mobile/m-chain-price.vue'
import MChainPerf from '@/components/mobile/m-chain-perf.vue'
import MLatestBlocks from '@/components/mobile/m-latestBlocks.vue'
import MLatestTx from '@/components/mobile/m-latestTx.vue'

export default VueTypedMixins(blockChainBrowserMixin).extend({
  components: {
    MChainSearch,
    MChainCard,
    MBlueIntro,
    MNumOfOnChainTx,
    MChainPrice,
    MChainPerf,
    MLatestBlocks,
    MLatestTx,
  },
})
</script>
, MLatestBlocks
<style scoped>
.blockChain {
  padding-top: 64px;
}
.chainCard {
  position: relative;
  z-index: 1;
}
</style>
