修改详情默认背景颜色
This commit is contained in:
yuyongdong
parent
ba8e204044
commit
8104042a4c
@ -47,6 +47,7 @@ const imageUrl = computed(() => {
|
||||
height: 173.8px;
|
||||
margin-right: 25px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -254,7 +254,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 8px;
|
||||
>div {
|
||||
height: 57px;
|
||||
line-height: 57px;
|
||||
|
||||
@ -1,152 +1,154 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="detail-bg"></div>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<div class="content">
|
||||
<div class="top-left">
|
||||
<div class="top-left-img">
|
||||
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
||||
<ImgCard :nftData="detailData.nft" />
|
||||
<!-- <img src="" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<h2>{{ detailData.nft.name }}</h2>
|
||||
<div class="top-right-owner">
|
||||
<div>Owner:</div>
|
||||
<div class="address">{{ detailData.nft.owner_address }}</div>
|
||||
</div>
|
||||
<div class="top-right-price" v-if="detailData.event">
|
||||
<li>
|
||||
<div>Price</div>
|
||||
<div class="time">
|
||||
<img src="@/assets/img/marketplace/time.png" alt="图片">
|
||||
<div>Time remaining: <StarTimer :getAddress="detailData.event.data.end_at" /></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="price">
|
||||
<span class="bold">{{ price }} </span>
|
||||
<img :src="icon" alt="ICON">
|
||||
<span>( $ {{ usd }} )</span>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="top-right-btns">
|
||||
<!--
|
||||
1、添加购物车
|
||||
2、移除购物车
|
||||
3、购买
|
||||
4、
|
||||
-->
|
||||
<div v-if="(myAddress != detailData.nft.owner_address) && detailData.event">
|
||||
<div class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
|
||||
<div class="add" v-if="detailData.in_shopcart == 0" @click="localWalletStore.token == '' ? cardLogin() : addCart()">
|
||||
<span>Add to cart </span>
|
||||
<img src="@/assets/img/marketplace/Add_shopping_cart.png" alt="">
|
||||
</div>
|
||||
<div class="remove" v-if="detailData.in_shopcart == 1" @click="localWalletStore.token == '' ? cardLogin() : clearCart()">
|
||||
<span>Remove from cart</span>
|
||||
<img src="@/assets/img/marketplace/Move_out.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
1、上架
|
||||
2、下架
|
||||
3、使用
|
||||
-->
|
||||
<div v-else>
|
||||
<div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0">List</div>
|
||||
<div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
|
||||
<div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 1">Convert</div>
|
||||
<div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 0">Redeem</div>
|
||||
<div class="bg-content">
|
||||
<div class="detail-bg"></div>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<div class="content">
|
||||
<div class="top-left">
|
||||
<div class="top-left-img">
|
||||
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
||||
<ImgCard :nftData="detailData.nft" />
|
||||
<!-- <img src="" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2>Info</h2>
|
||||
<li>
|
||||
<div>Contract address</div>
|
||||
<div class="contract-address">
|
||||
<div>{{ detailData.nft.contract_address}}</div>
|
||||
<span><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Token ID</div>
|
||||
<div>{{ detailData.nft.token_id }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Blockchain</div>
|
||||
<div>lmmutascan</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Metadata</div>
|
||||
<div><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Royalties</div>
|
||||
<div>2%</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="detailData.nft.type == 1" class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="btm-detail">
|
||||
<li v-for="(item, val, index) in nftAbilities" :key="index">
|
||||
<div v-show="val == 'quality'">
|
||||
<h5>Tier</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'max_mining_days'">
|
||||
<h5>Active Days</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'wealth'">
|
||||
<h5>Wealth Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'lucky'">
|
||||
<h5>Luck Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'hp'">
|
||||
<h5>HP</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'atk'">
|
||||
<h5>Attack</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'def'">
|
||||
<h5>Defense</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'block'">
|
||||
<h5>Block Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'crit'">
|
||||
<h5>Crit Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="gold-content">
|
||||
<div class="left">
|
||||
<h4>Gold coins</h4>
|
||||
<p>1000</p>
|
||||
<div class="top-right">
|
||||
<h2>{{ detailData.nft.name }}</h2>
|
||||
<div class="top-right-owner">
|
||||
<div>Owner:</div>
|
||||
<div class="address">{{ detailData.nft.owner_address }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-img">
|
||||
<img src="@/assets/img/marketplace/Icon_!.png" alt="">
|
||||
<div class="top-right-price" v-if="detailData.event">
|
||||
<li>
|
||||
<div>Price</div>
|
||||
<div class="time">
|
||||
<img src="@/assets/img/marketplace/time.png" alt="图片">
|
||||
<div>Time remaining: <StarTimer :getAddress="detailData.event.data.end_at" /></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="price">
|
||||
<span class="bold">{{ price }} </span>
|
||||
<img :src="icon" alt="ICON">
|
||||
<span>( $ {{ usd }} )</span>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="top-right-btns">
|
||||
<!--
|
||||
1、添加购物车
|
||||
2、移除购物车
|
||||
3、购买
|
||||
4、
|
||||
-->
|
||||
<div v-if="(myAddress != detailData.nft.owner_address) && detailData.event">
|
||||
<div class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
|
||||
<div class="add" v-if="detailData.in_shopcart == 0" @click="localWalletStore.token == '' ? cardLogin() : addCart()">
|
||||
<span>Add to cart </span>
|
||||
<img src="@/assets/img/marketplace/Add_shopping_cart.png" alt="">
|
||||
</div>
|
||||
<div class="remove" v-if="detailData.in_shopcart == 1" @click="localWalletStore.token == '' ? cardLogin() : clearCart()">
|
||||
<span>Remove from cart</span>
|
||||
<img src="@/assets/img/marketplace/Move_out.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-tips">
|
||||
It can be enabled on your home page and you will receive 100,000 gold coins in counter Fire.
|
||||
<!--
|
||||
1、上架
|
||||
2、下架
|
||||
3、使用
|
||||
-->
|
||||
<div v-else>
|
||||
<div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0">List</div>
|
||||
<div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
|
||||
<div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 1">Convert</div>
|
||||
<div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 0">Redeem</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2>Info</h2>
|
||||
<li>
|
||||
<div>Contract address</div>
|
||||
<div class="contract-address">
|
||||
<div>{{ detailData.nft.contract_address}}</div>
|
||||
<span><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Token ID</div>
|
||||
<div>{{ detailData.nft.token_id }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Blockchain</div>
|
||||
<div>lmmutascan</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Metadata</div>
|
||||
<div><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
|
||||
</li>
|
||||
<li>
|
||||
<div>Royalties</div>
|
||||
<div>2%</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="detailData.nft.type == 1" class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="btm-detail">
|
||||
<li v-for="(item, val, index) in nftAbilities" :key="index">
|
||||
<div v-show="val == 'quality'">
|
||||
<h5>Tier</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'max_mining_days'">
|
||||
<h5>Active Days</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'wealth'">
|
||||
<h5>Wealth Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'lucky'">
|
||||
<h5>Luck Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'hp'">
|
||||
<h5>HP</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'atk'">
|
||||
<h5>Attack</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'def'">
|
||||
<h5>Defense</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'block'">
|
||||
<h5>Block Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'crit'">
|
||||
<h5>Crit Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="gold-content">
|
||||
<div class="left">
|
||||
<h4>Gold coins</h4>
|
||||
<p>1000</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-img">
|
||||
<img src="@/assets/img/marketplace/Icon_!.png" alt="">
|
||||
</div>
|
||||
<div class="right-tips">
|
||||
It can be enabled on your home page and you will receive 100,000 gold coins in counter Fire.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -407,8 +409,13 @@ onMounted(() => {
|
||||
.detail {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background: #000;
|
||||
.bg-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.detail-bg {
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user