<template>
<Layout-Child>
        <div class="nft-cardBox w-11/12 mx-auto mt-6">
            <div class="nft-card w-full bg-font-red  text-font-white px-5 py-3  rounded-md">
                <div class="w-full flex items-start justify-between mb-12">
                    <div>我的NFT(个）</div>
                    <div></div>
                </div>
                <div class='flex items-end justify-between flex-wrap'>
                    <div class=' text-3xl'>30</div>
                    <div>sidfhuoisdufsdjufosdfjosdi</div>
                </div>
            </div>
        </div>
        <div class="container-view w-11/12 mx-auto">
            <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
          <div>
            <app-collectionCard></app-collectionCard>
         
          </div>
        </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    data(){
        return{
            categoryTypes:[] as any[]
        }
    },
    async created(){
        this.categoryTypes = await this.$service.nftService.getCategory()
    },
    methods: {
      getDataByCategory(item:any){
        console.log(item);
        
      }
    },
  components:{
      'Layout-Child':()=>import('@/layout/Child.vue'),
      'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
      'app-collectionCard':()=>import('@/components/CollectionCard.vue')
  },

});
</script>
