109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<template>
|
|
<div class="card-list">
|
|
<div class="grid">
|
|
<hero-nft v-for="c in cardList" :key="c.id" :data="c" class="item"></hero-nft>
|
|
</div>
|
|
<pagination></pagination>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue } 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
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private cardList: ISpineData[] = []
|
|
|
|
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: true,
|
|
info: {
|
|
level: 1
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card-list {
|
|
margin-top: 2.0265em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.card-list .grid .item {
|
|
height: 21em;
|
|
width: 14.375em;
|
|
}
|
|
|
|
.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>
|