This commit is contained in:
huangjinming 2022-12-16 10:36:02 +08:00
parent de066a9cc6
commit c480e684a4
4 changed files with 39 additions and 34 deletions

View File

@ -1,39 +1,44 @@
<template> <template>
<div class="card-list"> <div class="card-list">
<div class="grid"> <div class="grid">
<nft-info v-for="c in nftDatas" :key="c.id" :nft-data="c" @activate-clicked="onActivateClick"></nft-info> <nft-info
v-for="c in nftDatas"
:key="c.id"
:nft-data="c"
@activate-clicked="onActivateClick"
></nft-info>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator' import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Pagination from '@/components/market/Pagination.vue' import Pagination from "@/components/market/Pagination.vue";
import Card from '@/components/market/Card.vue' import Card from "@/components/market/Card.vue";
import NftInfo from '@/components/market/NftInfo.vue' import NftInfo from "@/components/market/NftInfo.vue";
import { INftData } from '@/types/Nft' import { INftData } from "@/types/Nft";
@Component({ @Component({
name: 'NftList', name: "NftList",
components: { components: {
NftInfo, NftInfo,
Card, Card,
Pagination Pagination,
} },
}) })
export default class extends Vue { export default class extends Vue {
@Prop() private nftDatas: INftData[] @Prop() private nftDatas: INftData[];
private cardList: INftData[] = [] private cardList: INftData[] = [];
@Watch('nftDatas') @Watch("nftDatas")
private onNftDataChange() { private onNftDataChange() {
if (!this.nftDatas) { if (!this.nftDatas) {
return return;
} }
this.cardList.length = 0 this.cardList.length = 0;
console.log('nftDatas change') console.log("nftDatas change");
console.log(this.nftDatas) console.log(this.nftDatas);
for (const data of this.nftDatas) { for (const data of this.nftDatas) {
this.cardList.push(data) this.cardList.push(data);
} }
} }
@ -58,8 +63,8 @@ export default class extends Vue {
// } // }
} }
onActivateClick(data: {tokenId: string, type: number}) { onActivateClick(data: { tokenId: string; type: number }) {
this.$emit('activate-clicked', data) this.$emit("activate-clicked", data);
} }
} }
</script> </script>
@ -80,7 +85,7 @@ export default class extends Vue {
justify-content: center; justify-content: center;
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
-ms-grid-columns: (1fr)[4]; -ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
-webkit-column-gap: 1.875em; -webkit-column-gap: 1.875em;
column-gap: 1.875em; column-gap: 1.875em;
@ -105,16 +110,16 @@ export default class extends Vue {
@media (max-width: 1023px) { @media (max-width: 1023px) {
.card-list .grid { .card-list .grid {
-ms-grid-columns: (1fr)[2]; -ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.card-list{ .card-list {
margin-top: 76px; margin-top: 76px;
padding: 26px 0; padding: 26px 0;
}; }
.card-list .grid { .card-list .grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -122,15 +127,14 @@ export default class extends Vue {
} }
} }
@media (min-width: 1024px) and (max-width: 1439px) { @media (min-width: 1024px) and (max-width: 1439px) {
.card-list{ .card-list {
font-size: 15px; font-size: 15px;
} }
} }
@media (min-width: 1439px) { @media (min-width: 1439px) {
.card-list{ .card-list {
font-size: 16px; font-size: 16px;
} }
} }
</style> </style>

View File

@ -18,7 +18,7 @@
v-model="value" v-model="value"
:popper-append-to-body="false" :popper-append-to-body="false"
@change="handSortSelect" @change="handSortSelect"
placeholder="请选择" placeholder=""
popper-class="select-popper" popper-class="select-popper"
> >
<el-option <el-option
@ -38,7 +38,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
@Component({ @Component({
name: "NftTypeBar", name: "NftTypeBar",
components: {}, components: {},
props:['sortOptions','selectIdx'] props: ["sortOptions", "selectIdx"],
}) })
export default class NftTypeBar extends Vue { export default class NftTypeBar extends Vue {
// @Prop() private selectIdx: number; // @Prop() private selectIdx: number;
@ -105,7 +105,7 @@ $item-size: 20px;
::v-deep .el-input--suffix .el-input__inner { ::v-deep .el-input--suffix .el-input__inner {
width: 159px; width: 159px;
height: 36px; height: 36px;
font-size: 23px; font-size: 20px;
border: none; border: none;
text-align: center; text-align: center;
color: #fff; color: #fff;

View File

@ -30,7 +30,9 @@
<!-- <div class="level-lv"> <!-- <div class="level-lv">
Lv <span class="level-number">{{ piece.level }}</span> Lv <span class="level-number">{{ piece.level }}</span>
</div> --> </div> -->
<div class="tree-guard">Tree guard</div> <div class="tree-guard">
{{ piece.c_name ? piece.c_name : "Tree guard" }}
</div>
</div> </div>
<div class="lease-listing" v-if="isType == 'mynft'"> <div class="lease-listing" v-if="isType == 'mynft'">
<div class="rent"></div> <div class="rent"></div>

View File

@ -579,7 +579,7 @@ export default class Market extends Vue {
page_size: pageNo, page_size: pageNo,
type: this.nftType == 4 ? 5 : this.nftType, type: this.nftType == 4 ? 5 : this.nftType,
account: "0x9a4d9dd2bfcad659975f0f5a480625c7929e9385", account: "0x9a4d9dd2bfcad659975f0f5a480625c7929e9385",
job_filters:this.nftType == 2 ||this.nftType == 5? null: this.jobFilters, job_filters:this.nftType == 2 ? null: this.jobFilters,
search_filters: this.searchFilters, search_filters: this.searchFilters,
quality_filter: this.qualityFilter, quality_filter: this.qualityFilter,
durability_filter: this.durabilityFilter, durability_filter: this.durabilityFilter,
@ -589,7 +589,6 @@ export default class Market extends Vue {
price_filter: this.priceFilter, price_filter: this.priceFilter,
}; };
const res: any = await queryShellNftList(reqData); const res: any = await queryShellNftList(reqData);
console.log(res, "MAKET");
if (res.nfts) { if (res.nfts) {
// this.nftList = res.nfts; // this.nftList = res.nfts;
let list = res.nfts; let list = res.nfts;