114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<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>
|