<template>
  <div class="card-list">
    <div class="grid">
      <hero-nft
        v-for="(s, i) in nftList"
        :key="i"
        :data="s"
        :isType="isType"
        class="item"
      ></hero-nft>
    </div>
    <pagination v-if="false"></pagination>
  </div>
</template>
<script lang="ts">
interface INftinfo {
  name: string; //英雄名
  job: string; //职业
  level: number; //等级
  quality: number; //星级
}
interface INftList {
  token_id: string;
  owner_address: string;
  owner_name: string;
  item_id: number;
  type: number;
  image: string; //nft图片地址
  state: number; //0:正常状态 1:出售中 2:出租中
  is_genesis: boolean; //是否创世nft
  info: INftinfo;
}
import { Component, Vue, Prop } from "vue-property-decorator";
import Pagination from "@/components/market/Pagination.vue";
import NftItem from "@/components/market/NftItem.vue";
import { ISpineData } from "@/utils/SpineRender";
import HeroNft from "@/components/market/nft/HeroNft.vue";

@Component({
  name: "CardList",
  components: {
    HeroNft,
    NftItem,
    Pagination,
  },
  props:['nftList','isType']
})
export default class CardList extends Vue {
  public cardList: INftList[] = [];

}
</script>
<style lang="scss" scoped>
.card-list {
  margin-top: 2.0265em;
  margin-left: 35px;
}

.card-list .grid {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [5];
  grid-template-columns: repeat(5, 1fr);
  -webkit-column-gap: 1.875em;
  column-gap: 1.875em;
  row-gap: 1.125em;
}

.card-list .grid .item {
  height: 23.375rem;
  width: 16em;
}

.spinner {
  height: 100vh;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.empty {
  padding-top: 7.375em;
}

.empty img {
  width: 14.625em;
  height: auto;
}

@media (max-width: 1023px) {
  .card-list .grid {
    -ms-grid-columns: (1fr) [2];
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .card-list .grid {
    -ms-grid-columns: (1fr) [2];
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 1.79em;
    column-gap: 1.79em;
    row-gap: 1.8em;
  }
}
</style>
