328 lines
8.0 KiB
Vue
328 lines
8.0 KiB
Vue
<template>
|
|
<div class="card-info-outlet">
|
|
<div class="card-root">
|
|
<hero-nft :nft-data="nftData" class="item" @activate-clicked="onActivateClick"></hero-nft>
|
|
<div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 1">
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Level</div>
|
|
<div class="info-val">{{nftData.level}}</div>
|
|
</div>
|
|
<div class="one-info"></div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">HP</div>
|
|
<div class="info-val">{{attr('hp')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Speed</div>
|
|
<div class="info-val">{{attr('speed')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Attack</div>
|
|
<div class="info-val">{{attr('atk')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Defence</div>
|
|
<div class="info-val">{{attr('def')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Advanced</div>
|
|
<div class="info-val">{{attr('advanced_count')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Lucky</div>
|
|
<div class="info-val">{{attr('lucky')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attr-div weapon" v-if="!nftData.hideAttr && nftData.type === 2">
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Level</div>
|
|
<div class="info-val">{{nftData.level}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Attack</div>
|
|
<div class="info-val">{{attr('atk')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Clip</div>
|
|
<div class="info-val">{{attr('clip_volume')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Reload</div>
|
|
<div class="info-val">{{attr('reload_time')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Rate</div>
|
|
<div class="info-val">{{attr('fire_rate')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Speed</div>
|
|
<div class="info-val">{{attr('bullet_speed')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Range</div>
|
|
<div class="info-val">{{attr('range')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Advanced</div>
|
|
<div class="info-val">{{attr('advanced_count') || 0}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Lucky</div>
|
|
<div class="info-val">{{attr('lucky')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attr-div" v-if="nftData.hideAttr">
|
|
<div class="coming">-- COMING SOON --</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import NftItem from '@/components/market/NftItem.vue'
|
|
import HeroNft from '@/components/market/nft/HeroNft.vue'
|
|
import { INftData } from '@/types/Nft'
|
|
|
|
@Component({
|
|
name: 'NftInfo',
|
|
components: {
|
|
HeroNft,
|
|
NftItem
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
@Prop() private nftData: INftData
|
|
|
|
attr(key: string) {
|
|
return this.nftData.attrMap.get(key)
|
|
}
|
|
|
|
hasAttr(key: string) {
|
|
return this.nftData?.attrMap?.has(key)
|
|
}
|
|
|
|
onActivateClick(nftId: string) {
|
|
this.$emit('activate-clicked', nftId)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-info-outlet{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
.nft-id {
|
|
//display: none;
|
|
}
|
|
}
|
|
.card-root{
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 14em;
|
|
.card{
|
|
height: 18em;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.nft-id {
|
|
color: #46E0F4;
|
|
display: unset;
|
|
}
|
|
.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;
|
|
box-sizing: border-box;
|
|
.coming{
|
|
width: 100%;
|
|
height: 55px;
|
|
color: #6B6E91;
|
|
text-align: center;
|
|
line-height: 55px;
|
|
font-size: 1.5em;
|
|
}
|
|
.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%;
|
|
.one-info{
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
.info-title{
|
|
width: auto;
|
|
text-transform: capitalize;
|
|
}
|
|
.info-val{
|
|
width: auto;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
&.nft-id-mobile{
|
|
display: none;
|
|
}
|
|
}
|
|
.one-info{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.info-title {
|
|
width: 60%;
|
|
text-transform: capitalize;
|
|
}
|
|
.info-val {
|
|
color: #3CF562;
|
|
width: 40%;
|
|
text-align: right;
|
|
padding-right: 14px;
|
|
}
|
|
}
|
|
.all-col-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.half-info{
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.info-title{
|
|
width: 60%;
|
|
text-transform: capitalize;
|
|
}
|
|
.info-val{
|
|
width: 40%;
|
|
margin-left: 10px;
|
|
color: #3CF562;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.card-info-outlet{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100vw;
|
|
.nft-id {
|
|
width: 100%;
|
|
color: #46E0F4;
|
|
text-decoration: none;
|
|
margin-bottom: 5px;
|
|
display: unset;
|
|
}
|
|
}
|
|
.card-root{
|
|
width: 85vw;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.card{
|
|
width: 50vw;
|
|
}
|
|
.nft-id{
|
|
display: none;
|
|
}
|
|
.attr-div{
|
|
width: 35vw;
|
|
margin-top: 16px;
|
|
margin-left: 0;
|
|
.two-col-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
div{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.one-col-info {
|
|
&.nft-id-mobile {
|
|
display: flex;
|
|
}
|
|
}
|
|
.all-col-info {
|
|
.half-info{
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
.info-title{
|
|
width: 60%;
|
|
}
|
|
.info-val{
|
|
width: 40%;
|
|
}
|
|
}
|
|
}
|
|
.coming{
|
|
color: #6B6E91;
|
|
text-align: center;
|
|
line-height: 55px;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
.one-info{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.info-title {
|
|
width: 40%;
|
|
margin-bottom: 8px
|
|
}
|
|
.info-val {
|
|
color: #3CF562;
|
|
width: 60%;
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
&.weapon{
|
|
.one-info {
|
|
.info-title{
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.token-color{
|
|
color: #46E0F4!important;
|
|
}
|
|
}
|
|
.w50 {
|
|
width: 50%!important;
|
|
}
|
|
</style>
|