修改详情默认背景颜色
This commit is contained in:
yuyongdong
parent
ba8e204044
commit
8104042a4c
@ -47,6 +47,7 @@ const imageUrl = computed(() => {
|
|||||||
height: 173.8px;
|
height: 173.8px;
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -254,7 +254,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 5px;
|
padding-bottom: 8px;
|
||||||
>div {
|
>div {
|
||||||
height: 57px;
|
height: 57px;
|
||||||
line-height: 57px;
|
line-height: 57px;
|
||||||
|
|||||||
@ -1,152 +1,154 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<div class="detail-bg"></div>
|
<div class="bg-content">
|
||||||
<div v-if="detailData" class="detail-content">
|
<div class="detail-bg"></div>
|
||||||
<div class="content">
|
<div v-if="detailData" class="detail-content">
|
||||||
<div class="top-left">
|
<div class="content">
|
||||||
<div class="top-left-img">
|
<div class="top-left">
|
||||||
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
<div class="top-left-img">
|
||||||
<ImgCard :nftData="detailData.nft" />
|
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
||||||
<!-- <img src="" alt=""> -->
|
<ImgCard :nftData="detailData.nft" />
|
||||||
</div>
|
<!-- <img src="" alt=""> -->
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="top-right">
|
||||||
<h2>Info</h2>
|
<h2>{{ detailData.nft.name }}</h2>
|
||||||
<li>
|
<div class="top-right-owner">
|
||||||
<div>Contract address</div>
|
<div>Owner:</div>
|
||||||
<div class="contract-address">
|
<div class="address">{{ detailData.nft.owner_address }}</div>
|
||||||
<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>
|
||||||
<div class="right">
|
<div class="top-right-price" v-if="detailData.event">
|
||||||
<div class="right-img">
|
<li>
|
||||||
<img src="@/assets/img/marketplace/Icon_!.png" alt="">
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -407,8 +409,13 @@ onMounted(() => {
|
|||||||
.detail {
|
.detail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
|
background: #000;
|
||||||
background-size: 100% 100%;
|
.bg-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
.detail-bg {
|
.detail-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 84px;
|
height: 84px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user