614 lines
16 KiB
Vue
614 lines
16 KiB
Vue
<template>
|
|
<div class="info-root">
|
|
<div class="container">
|
|
<div class="left-part">
|
|
<div class="back-btn" @click="back">
|
|
<img class="icon" src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e" alt="">
|
|
<span>Back</span>
|
|
</div>
|
|
<div class="base-info">
|
|
<div class="nft-id-mobile">#{{nftData.id}}</div>
|
|
<div class="class-info">
|
|
<img v-if="nftData.job" :src="require('@/assets/main/card/class_'+nftData.job+'.png')" alt="">
|
|
<span class="name-label">{{nftData.name}}</span>
|
|
</div>
|
|
<div class="level-comp">
|
|
LV.{{nftData.level}}
|
|
</div>
|
|
<level-star :level="nftQuality"></level-star>
|
|
<div class="owner-container">
|
|
<div class="owner-border"></div>
|
|
<div class="owner-info">
|
|
<div class="owner">
|
|
<div>Owner: </div>
|
|
<div>{{addressShow}}</div>
|
|
</div>
|
|
<div class="mint">
|
|
<div>Mint Time: </div>
|
|
<div>{{mintTime}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="right-part">
|
|
<div class="nft-id-desktop">#{{nftData.id}}</div>
|
|
<div class="card-container" v-if="nftData.type === 1">
|
|
<div class="card-border"></div>
|
|
<div class="border">
|
|
<div class="title">
|
|
Basic Data
|
|
</div>
|
|
<div class="info">
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">HP</div>
|
|
<div class="info-val">{{nftData.attrMap.get('hp')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Speed</div>
|
|
<div class="info-val">{{nftData.attrMap.get('speed')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Attack</div>
|
|
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Defence</div>
|
|
<div class="info-val">{{nftData.attrMap.get('def')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="one-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Advanced Count</div>
|
|
<div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
</div>
|
|
<div class="card-container" v-if="nftData.type === 2">
|
|
<div class="card-border"></div>
|
|
<div class="border">
|
|
<div class="title">
|
|
Basic Data
|
|
</div>
|
|
<div class="info">
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Attack</div>
|
|
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Clip</div>
|
|
<div class="info-val">{{nftData.attrMap.get('clip_volume')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Reload</div>
|
|
<div class="info-val">{{nftData.attrMap.get('reload_time')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Rate</div>
|
|
<div class="info-val">{{nftData.attrMap.get('fire_rate')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Speed</div>
|
|
<div class="info-val">{{nftData.attrMap.get('bullet_speed')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title">Range</div>
|
|
<div class="info-val">{{nftData.attrMap.get('range')}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="one-col-info" v-if="nftData.attrMap.has('advanced_count')">
|
|
<div class="one-info">
|
|
<div class="info-title">Advanced Count</div>
|
|
<div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
</div>
|
|
|
|
<div class="card-container" v-if="nftData.type === 1">
|
|
<div class="card-border"></div>
|
|
<div class="border special-data">
|
|
<div class="title">
|
|
Special Data
|
|
</div>
|
|
<div class="info">
|
|
<div class="two-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title">Lucky</div>
|
|
<div class="info-val">{{nftData.attrMap.get('lucky')}}</div>
|
|
</div>
|
|
<div class="one-info">
|
|
<div class="info-title font14">Success Rate</div>
|
|
<div class="info-val">{{nftData.attrMap.get('success_rate')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
</div>
|
|
|
|
<div class="card-container" v-if="nftData.extAttrList.length>0">
|
|
<div class="card-border"></div>
|
|
<div class="border special-data">
|
|
<div class="title">
|
|
More Data
|
|
</div>
|
|
<div class="ext-info">
|
|
<div class="one-info" v-for="(data, index) in nftData.extAttrList" :key="data.key+index">
|
|
<div class="info-title">{{data.key.replace(/_/g, ' ')}}</div>
|
|
<div class="info-val">{{data.value}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
</div>
|
|
|
|
<div class="card-container" v-if="nftData.priceInfo">
|
|
<div class="card-border"></div>
|
|
<div class="border price-data">
|
|
<div class="title">
|
|
Price
|
|
</div>
|
|
<div class="info">
|
|
<div class="one-col-info">
|
|
<div class="one-info">
|
|
<div class="info-title price">{{nftData.priceInfo.currency}}</div>
|
|
<div class="info-val price">{{nftData.priceInfo.priceDiscount}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
</div>
|
|
|
|
<div class="btn-div" v-if="nftData.priceInfo">
|
|
<div class="buy-btn">
|
|
<img v-if="canBuy" src="@/assets/main/detail/btn_buy.png" alt="btn-buy">
|
|
<img v-if="!canBuy" src="@/assets/main/detail/btn_buy_d.png" alt="btn-buy">
|
|
<span>BUY</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-part">
|
|
<img v-if="nftData.image" class="main-img" :src="nftData.image" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import LevelStar from '@/components/market/LevelStar.vue'
|
|
import { INftData } from '@/types/Nft'
|
|
|
|
@Component({
|
|
name: 'NftDetail',
|
|
components: { LevelStar }
|
|
})
|
|
export default class extends Vue {
|
|
@Prop() private nftData:INftData
|
|
canBuy = true
|
|
|
|
get nftQuality() {
|
|
return this.nftData.quality
|
|
}
|
|
|
|
get mintTime() {
|
|
const time = this.nftData.mintTime || 0
|
|
if (!time) {
|
|
return '-'
|
|
}
|
|
const date = new Date(time * 1000)
|
|
return date.toUTCString()
|
|
}
|
|
|
|
get addressShow() {
|
|
const address = this.nftData.owner || ''
|
|
if (address.length >= 10) {
|
|
return address.substring(0, 8) + '...' + address.substring(address.length - 8)
|
|
} else if (address.length > 0 && address.length < 10) {
|
|
return address
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
back() {
|
|
this.$router.go(-1)
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '../../scss/breakpoints.scss';
|
|
@import '../../scss/tooltip.scss';
|
|
.info-root{
|
|
position: relative;
|
|
}
|
|
.container{
|
|
color: white;
|
|
width: 100vw;
|
|
max-width: 1920px;
|
|
max-height: 910px;
|
|
height: calc(100vh - 84px);
|
|
display: flex;
|
|
background-color: #141623;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
.left-part{
|
|
width: 35%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 20px;
|
|
padding-top: 20px;
|
|
z-index: 2;
|
|
.base-info {
|
|
margin-bottom: 24%;
|
|
.nft-id-mobile{
|
|
display: none;
|
|
}
|
|
img{
|
|
width: 55px;
|
|
height: 55px;
|
|
}
|
|
.name-label{
|
|
font-size: 60px;
|
|
margin-left: 10px;
|
|
}
|
|
.level-comp {
|
|
font-size: 21px;
|
|
color: #FFCF49;
|
|
}
|
|
}
|
|
.owner-container{
|
|
width: 448px;
|
|
position: relative;
|
|
.owner-border{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #24E0C8;
|
|
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 60px, 100% 100%, 0 100%, 0 2px,
|
|
2px 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 60px, calc(100% - 40px) 2px, 2px 2px
|
|
);
|
|
}
|
|
.owner-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30px 60px 20px 30px;
|
|
font-size: 20px;
|
|
div{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
}
|
|
.owner {
|
|
color: #FFC359
|
|
}
|
|
.mint{
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.back-btn {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
.icon {
|
|
display: flex;
|
|
transform: rotate(90deg);
|
|
height: 25px;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
font-weight: bold;
|
|
font-size: 35px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.right-part{
|
|
width: 35%;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: end;
|
|
padding-bottom: 60px;
|
|
margin-right: 20px;
|
|
.nft-id-desktop{
|
|
color: #46E0F4;
|
|
font-size: 26px;
|
|
}
|
|
.card-container{
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 20px;
|
|
.card-border{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #24E0C8;
|
|
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 14px,
|
|
2px 12px, 2px calc(100% - 14px), 14px calc(100% - 2px), calc(100% - 14px) calc(100% - 2px), calc(100% - 2px) calc(100% - 14px),
|
|
calc(100% - 2px) 14px, calc(100% - 14px) 2px, 14px 2px, 2px 14px, 0 14px
|
|
);
|
|
}
|
|
.top-left{
|
|
position: absolute;
|
|
left: 6px;
|
|
top: 6px;
|
|
width: 9px;
|
|
height: 9px;
|
|
background: #24E0C8;
|
|
clip-path: polygon(9px 0, 9px 9px, 0 9px);
|
|
}
|
|
.top-right{
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 6px;
|
|
width: 9px;
|
|
height: 9px;
|
|
background: #24E0C8;
|
|
clip-path: polygon(0 0, 9px 9px, 0 9px);
|
|
}
|
|
}
|
|
|
|
.border {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 60px;
|
|
background-color: #0C1737;
|
|
.title {
|
|
clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) 100%, 2px 100%, 2px 14px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 20px;
|
|
font-size: 30px;
|
|
color: #E3AE50;
|
|
background-color: #070912;
|
|
border: 20px solid #070912;
|
|
}
|
|
.info{
|
|
margin-top: -20px;
|
|
padding: 20px;
|
|
.font14 {
|
|
font-size: 14px!important;
|
|
}
|
|
}
|
|
.two-col-info {
|
|
width: 100%;
|
|
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%;
|
|
}
|
|
}
|
|
.one-info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.info-title {
|
|
font-size: 20px;
|
|
width: 60%;
|
|
text-transform: capitalize;
|
|
}
|
|
.info-val {
|
|
color: #3CF562;
|
|
font-size: 22px;
|
|
width: 40%;
|
|
}
|
|
}
|
|
.ext-info{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20px;
|
|
.one-info{
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.basic-data {
|
|
}
|
|
.special-data {
|
|
}
|
|
.price-data {
|
|
.info-title{
|
|
color:#49E5FA;
|
|
}
|
|
.info-val{
|
|
color:#49E5FA!important;
|
|
}
|
|
}
|
|
.btn-div {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
.buy-btn {
|
|
position: relative;
|
|
width: 336px;
|
|
height: 106px;
|
|
img{
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
}
|
|
span{
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 36px;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: 36px;
|
|
color: #282828;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.center-part {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 40%;
|
|
overflow: hidden;
|
|
img{
|
|
width: 90%;
|
|
margin-bottom: -120px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.info-root {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
}
|
|
.container{
|
|
flex-direction: column;
|
|
margin-top: 76px;
|
|
height: auto;
|
|
max-height: unset;
|
|
.left-part{
|
|
padding-top: 0;
|
|
width: 100%;
|
|
.back-btn{
|
|
.icon{
|
|
height: 10px;
|
|
}
|
|
span{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.base-info{
|
|
margin-top: 100px;
|
|
margin-bottom: 20px;
|
|
.nft-id-mobile{
|
|
color: #46E0F4;
|
|
font-size: 20px;
|
|
display: block;
|
|
}
|
|
.class-info{
|
|
img{
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
.name-label{
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
.owner-container{
|
|
width: 91vw;
|
|
.owner-info{
|
|
padding: 0 40px 20px 20px;
|
|
font-size: 15px;
|
|
width: 76vw;
|
|
height: 29vw;
|
|
.mint{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-part{
|
|
width: 100vw;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.nft-id-desktop{
|
|
display: none;
|
|
}
|
|
.card-container{
|
|
width: 91%;
|
|
}
|
|
.border{
|
|
.title {
|
|
font-size: 24px;
|
|
}
|
|
.one-info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.info-title {
|
|
font-size: 16px;
|
|
width: 60%;
|
|
text-transform: capitalize;
|
|
}
|
|
.info-val {
|
|
color: #3CF562;
|
|
font-size: 16px;
|
|
width: 40%;
|
|
}
|
|
.font14{
|
|
font-size: 12px!important;
|
|
}
|
|
}
|
|
}
|
|
.btn-div{
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
.center-part {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 40%;
|
|
overflow: hidden;
|
|
top: 76px;
|
|
margin-right: 0;
|
|
img{
|
|
width: 90%;
|
|
margin-bottom: -120px;
|
|
z-index: 3;
|
|
}
|
|
}
|
|
}
|
|
</style>
|