crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加已购买nft列表页面

Browse Source
This commit is contained in:
zhl 2022-01-25 18:03:25 +08:00
parent da06bf2cc8
commit a37721adbf
6 changed files with 187 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/main/detail/border-attr.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

4
src/components/market/MoileTop.vue
View File

@ -4,7 +4,7 @@
<a href="/"
><img
class="logo"
src="@/assets/main/p1/icon_logo_t.png"
src="@/assets/main/p1/icon_logo_b.png"
/></a>
<label class="mobile-menu-icon" @click="toggleMenu">
<img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
@ -91,7 +91,7 @@ export default class extends Vue {
align-items: center;
}
.logo {
height: 58px;
max-width: 50vw;
}
.mobile-menu-icon {

175
src/components/market/NftInfo.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<a class="card-root" :href="data.id? '/item': 'javascript:void(0)'">
<div class="nft-id">#1231231231</div>
<nft-item :data="data" ></nft-item>
<div class="attr-div">
<div class="one-col-info nft-id-mobile">
<div class="one-info">
<div class="info-title">Token ID</div>
<div class="info-val token-color">#1231232</div>
</div>
</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Level</div>
<div class="info-val">1</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">HP</div>
<div class="info-val">100</div>
</div>
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">9</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">20</div>
</div>
<div class="one-info">
<div class="info-title">Defence</div>
<div class="info-val">13</div>
</div>
</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">999</div>
</div>
</div>
</div>
</a>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import NftItem from '@/components/market/NftItem.vue'
declare module 'vue/types/vue' {
interface Vue {
data: ISpineData
}
}
@Component({
name: 'NftInfo',
components: {
NftItem
},
props: ['data']
})
export default class extends Vue {
}
</script>
<style lang="scss" scoped>
.card-root{
font-family: 'zitic',serif;
text-decoration: none;
display: flex;
flex-direction: column;
width: 14em;
.card{
height: 18em;
width: 100%;
position: relative;
}
.nft-id {
color: #46E0F4;
}
.attr-div{
border: 10px solid #211638;
background-color: #211638;
border-image-source: url('../../assets/main/detail/border-attr.png');
border-image-slice: 10;
margin-top: 12px;
display: flex;
color: white;
flex-direction: column;
font-size: 11px;
.two-col-info {
display: flex;
flex-direction: row;
justify-content: space-between;
div {
width: 50%;
}
}
.one-col-info {
display: flex;
flex-direction: row;
width: 100%;
div{
width: 100%;
}
&.nft-id-mobile{
display: none;
}
}
.one-info{
display: flex;
flex-direction: row;
justify-content: space-between;
.info-title {
width: 60%;
}
.info-val {
color: #3CF562;
width: 40%;
}
}
}
}
@media (max-width: 767px) {
.card-root{
width: 90%;
flex-direction: row;
justify-content: space-between;
.card{
width: 40vw;
}
.nft-id{
display: none;
}
.attr-div{
width: 45vw;
margin-top: 0;
margin-left: 20px;
.two-col-info {
display: flex;
flex-direction: column;
div{
width: 100%;
}
}
.one-col-info {
&.nft-id-mobile {
display: flex;
}
}
.one-info{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
.info-title {
width: 40%;
}
.info-val {
color: #3CF562;
width: 60%;
}
}
}
}
.token-color{
color: #46E0F4!important;
}
}
</style>

4
src/components/market/NftItem.vue
View File

@ -1,5 +1,5 @@
<template>
<a class="card" :href="data.id? '/item': 'javascript:void(0)'">
<div class="card" >
<img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png">
<div v-if="data.id" class="anim-border">
<img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)" />
@ -12,7 +12,7 @@
<img :src="require('@/assets/main/card/class_'+data.class+'.png')">
</div>
</div>
</a>
</div>
</template>
<script lang="ts">

22
src/components/market/NftList.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="card-list">
<div class="grid">
<nft-item v-for="c in cardList" :key="c.id" :data="c"></nft-item>
<nft-info v-for="c in cardList" :key="c.id" :data="c"></nft-info>
</div>
</div>
</template>
@ -9,13 +9,13 @@
import { Component, Vue } from 'vue-property-decorator'
import Pagination from '@/components/market/Pagination.vue'
import Card from '@/components/market/Card.vue'
import NftItem from '@/components/market/NftItem.vue'
import NftInfo from '@/components/market/NftInfo.vue'
import { ISpineData } from '@/utils/SpineRender'
@Component({
name: 'NftList',
components: {
NftItem,
NftInfo,
Card,
Pagination
}
@ -53,12 +53,6 @@ export default class extends Vue {
row-gap: 1.3125em;
}
.card-list .grid .card {
height: 18em;
width: 14em;
position: relative;
}
.spinner {
height: 100vh;
-webkit-box-flex: 0;
@ -85,14 +79,12 @@ export default class extends Vue {
@media (max-width: 767px) {
.card-list{
margin-top: 76px;
padding: 26px 20px;
padding: 26px 0;
};
.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;
display: flex;
flex-direction: column;
align-items: center;
}
}
</style>

2
src/components/market/TopMenu.vue
View File

@ -6,7 +6,7 @@
<img
class="logo"
alt="logo"
src="@/assets/main/p1/icon_logo_t.png" />
src="@/assets/main/p1/icon_logo_b.png" />
</a>
</div>
<div class="header-menu">