176 lines
3.9 KiB
Vue
176 lines
3.9 KiB
Vue
<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>
|