bemarket/src/components/market/CardList.vue
huangjinming cffbdf189b fix
2022-12-09 11:57:43 +08:00

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>