137 lines
2.5 KiB
Vue
137 lines
2.5 KiB
Vue
<template>
|
|
<div class="card-list">
|
|
<div class="grid">
|
|
<nft-info v-for="c in cardList" :key="c.id" :data="c"></nft-info>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
|
import Pagination from '@/components/market/Pagination.vue'
|
|
import Card from '@/components/market/Card.vue'
|
|
import NftInfo from '@/components/market/NftInfo.vue'
|
|
import { ISpineData } from '@/utils/SpineRender'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
nftDatas?: ISpineData[]
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
name: 'NftList',
|
|
components: {
|
|
NftInfo,
|
|
Card,
|
|
Pagination
|
|
},
|
|
props: ['nftDatas']
|
|
})
|
|
export default class extends Vue {
|
|
private cardList: ISpineData[] = []
|
|
|
|
// @Watch('nftDatas')
|
|
// private onNftDataChange() {
|
|
// if (!this.nftDatas) {
|
|
// return
|
|
// }
|
|
// this.cardList.length = 0
|
|
// for (const data of this.nftDatas) {
|
|
// this.cardList.push(data)
|
|
// }
|
|
// }
|
|
|
|
created() {
|
|
for (let i = 0; i < 10; i++) {
|
|
this.cardList.push({
|
|
id: '10000000000' + i,
|
|
type: 0,
|
|
skelName: 'n_aoi',
|
|
name: 'miffy',
|
|
price: 10,
|
|
priceDiscount: 10,
|
|
decimals: 0,
|
|
currency: 'BNB',
|
|
class: 0,
|
|
repeat: false,
|
|
showBuy: false,
|
|
info: {
|
|
level: 1
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card-list {
|
|
margin-top: 2.0265em;
|
|
width: 100%;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.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)[4];
|
|
grid-template-columns: repeat(4, 1fr);
|
|
-webkit-column-gap: 1.875em;
|
|
column-gap: 1.875em;
|
|
row-gap: 1.3125em;
|
|
}
|
|
|
|
.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{
|
|
margin-top: 76px;
|
|
padding: 26px 0;
|
|
};
|
|
.card-list .grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
.card-list{
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1439px) {
|
|
.card-list{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
</style>
|