380 lines
8.6 KiB
Vue
380 lines
8.6 KiB
Vue
<template>
|
||
<el-dialog :show-close="false" :visible.sync="isShow">
|
||
<div class="bg"></div>
|
||
<div class="container">
|
||
<div class="chip-left">
|
||
<img
|
||
width="214px"
|
||
:src="
|
||
require('@/assets/market/piece/details/details_' + '01' + '.png')
|
||
"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="chip-right">
|
||
<div class="chip-right-top">
|
||
<div class="token-lable">TOKEN ID</div>
|
||
<div class="token-id">#{{ piece.token_id }}</div>
|
||
</div>
|
||
<div class="chip-right-bottom">
|
||
<div class="chip-assult">
|
||
<div class="assult-rifle">
|
||
<div class="assult-rifle-content">
|
||
<div class="assult-rifle-name">Assult Rifle</div>
|
||
<div class="hill-icon">
|
||
<img
|
||
class="hill-icon-img"
|
||
width="30px"
|
||
src="../../assets/market/hero/hill-icon.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="level">
|
||
<div>
|
||
<span class="level-name">Amount：</span>
|
||
<!-- <span class="level-number">04</span> -->
|
||
</div>
|
||
<div class="piece-number" v-if="isType == 'mynft'">
|
||
{{ piece.balance }}
|
||
</div>
|
||
<div class="piece-number" v-else>
|
||
<span> {{ balance }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="owner">
|
||
<div class="owner-content">
|
||
<div>Owner :</div>
|
||
<div>{{ owner }}</div>
|
||
</div>
|
||
<div class="owner-mint">
|
||
<div>Mint Time :</div>
|
||
<div>{{ time }} UTC</div>
|
||
</div>
|
||
<div class="owner-history">
|
||
<div>History :</div>
|
||
<div>#3006985843100103 (NFTLink)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="buy-price">
|
||
<div class="mynft" v-if="isType === 'mynft'">
|
||
<div class="rent"></div>
|
||
<div class="sell" @click="handPutShow">Sell</div>
|
||
</div>
|
||
<div class="maeket" v-else>
|
||
<div class="price">
|
||
<span class="price-number">{{
|
||
piece.s_price ? piece.s_price : " "
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<a href="javascript:void(0)">
|
||
<img
|
||
@click="handBuyShow"
|
||
width="263px"
|
||
height="71px"
|
||
src="../../assets/market/hero/buy.png"
|
||
alt="aoi-hero"
|
||
/></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span @click="closeTip" class="close">
|
||
<img
|
||
src="../../assets/market/hero/cose.png"
|
||
width="45px"
|
||
height="45px"
|
||
alt=""
|
||
/></span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { formatSelect } from "@/utils/UTCTime";
|
||
import { formatAddress } from "@/utils/formatAddress";
|
||
export default {
|
||
props: ["isType", "isShow"],
|
||
components: {},
|
||
data() {
|
||
return {
|
||
piece: "",
|
||
dialogVisible: false,
|
||
};
|
||
},
|
||
created() {
|
||
console.log(this.isShow, "sgdfdsgsd");
|
||
},
|
||
computed: {
|
||
time() {
|
||
if (this.piece.modifytime) {
|
||
return formatSelect(this.piece.modifytime);
|
||
}
|
||
},
|
||
owner() {
|
||
if (this.piece.owner_address) {
|
||
return formatAddress(this.piece.owner_address);
|
||
}
|
||
},
|
||
balance() {
|
||
if (this.piece.detail) {
|
||
return this.piece.detail.balance;
|
||
} else {
|
||
return this.piece.balance;
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
closeTip() {
|
||
// 分发自定义事件(事件名: closeTip)
|
||
this.$emit("closeTip", false);
|
||
},
|
||
closeMyself(data) {
|
||
this.dialogVisible = false;
|
||
},
|
||
init(data) {
|
||
this.dialogVisible = true;
|
||
this.piece = data;
|
||
console.log(data, "dfgdg");
|
||
console.log(this.piece.detail.balance, "this.piece.detail.balance");
|
||
},
|
||
handPutShow() {
|
||
this.$emit("handPutShow");
|
||
console.log("ppwowerw");
|
||
},
|
||
showTip() {
|
||
// 分发自定义事件(事件名: closeTip)
|
||
this.$emit("showTip");
|
||
},
|
||
handBuyShow() {
|
||
this.$emit("handBuyShow");
|
||
console.log("handBuyShow");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-dialog,
|
||
.el-pager li {
|
||
position: relative;
|
||
width: 753px !important;
|
||
height: 479px !important;
|
||
background: url("../../assets/market/piece/details/bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
box-shadow: none;
|
||
}
|
||
::v-deep .el-dialog__body {
|
||
padding: 0px 0px !important;
|
||
}
|
||
::v-deep .el-dialog__header {
|
||
padding: 0px 0px 0px;
|
||
}
|
||
.contaier {
|
||
display: flex;
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
right: -46px;
|
||
top: -31px;
|
||
}
|
||
.container {
|
||
display: flex;
|
||
.chip-left {
|
||
margin-left: 88px;
|
||
margin-top: 137px;
|
||
margin-right: 51px;
|
||
}
|
||
.chip-right {
|
||
width: 343px;
|
||
margin-top: 14px;
|
||
}
|
||
.chip-right-top {
|
||
color: #ffffff;
|
||
// margin-left: 137px;
|
||
width: 343px;
|
||
.token-lable {
|
||
text-align: center;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.token-id {
|
||
font-size: 30px;
|
||
font-family: "Bahnschrift";
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
width: 335px;
|
||
height: 41px;
|
||
line-height: 49px;
|
||
text-align: center;
|
||
margin-bottom: 26px;
|
||
background: #28c1ed;
|
||
border: 4px solid rgba(91, 211, 246, 0.4);
|
||
border-radius: 24px;
|
||
}
|
||
}
|
||
.chip-right-bottom {
|
||
display: flex;
|
||
}
|
||
.chip-assult {
|
||
}
|
||
.owner {
|
||
width: 340px;
|
||
height: 111px;
|
||
padding-top: 15px;
|
||
background: rgba(5, 57, 68, 0.3);
|
||
border-radius: 14px;
|
||
margin-top: 19px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.assult-rifle {
|
||
width: 340px;
|
||
height: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: space-between;
|
||
background: rgba(26, 58, 175, 0.3);
|
||
border-radius: 20px;
|
||
}
|
||
.assult-rifle-name {
|
||
margin-top: 20px;
|
||
margin-left: 20px;
|
||
height: 26px;
|
||
font-size: 37px;
|
||
// font-family: "SairaStencilOne";
|
||
color: #ffffff;
|
||
}
|
||
|
||
.hill-icon {
|
||
margin-top: 14px;
|
||
margin-right: 14px;
|
||
.hill-icon-img {
|
||
}
|
||
}
|
||
.assult-rifle-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.level {
|
||
margin-top: 23px;
|
||
margin-left: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.level-number {
|
||
font-size: 41px;
|
||
font-style: italic;
|
||
margin-left: 4px;
|
||
color: #ffffff;
|
||
}
|
||
.piece-number {
|
||
font-size: 29px;
|
||
margin-right: 24px;
|
||
font-family: "Bahnschrift";
|
||
font-weight: bold;
|
||
line-height: 52px;
|
||
color: #ffffff;
|
||
}
|
||
.level-name {
|
||
font-size: 31px;
|
||
font-family: "Bahnschrift";
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
}
|
||
.owner-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 13px;
|
||
margin-right: 13px;
|
||
}
|
||
.owner-mint {
|
||
display: flex;
|
||
margin-top: 16px;
|
||
margin-right: 13px;
|
||
justify-content: space-between;
|
||
margin-left: 13px;
|
||
}
|
||
.owner-history {
|
||
display: flex;
|
||
margin-top: 15px;
|
||
margin-right: 13px;
|
||
justify-content: space-between;
|
||
margin-left: 13px;
|
||
}
|
||
.def-item {
|
||
width: 202px;
|
||
height: 43px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
margin-bottom: 14px;
|
||
padding-right: 7px;
|
||
padding-left: 13px;
|
||
}
|
||
.buy-price {
|
||
position: absolute;
|
||
right: 44px;
|
||
bottom: -33px;
|
||
display: flex;
|
||
.maeket {
|
||
display: flex;
|
||
}
|
||
.price {
|
||
width: 201px;
|
||
height: 71px;
|
||
font-size: 32px;
|
||
position: relative;
|
||
font-family: "Arciform";
|
||
margin-right: 20px;
|
||
color: #ffffff;
|
||
background: url("../../assets/market/hero/price.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.price-number {
|
||
position: absolute;
|
||
right: 19px;
|
||
top: 13px;
|
||
font-size: 34px;
|
||
// right: 82px;
|
||
// bottom: -41px;
|
||
}
|
||
}
|
||
.mynft {
|
||
display: flex;
|
||
}
|
||
.rent {
|
||
width: 229px;
|
||
height: 72px;
|
||
// cursor: pointer;
|
||
// text-align: center;
|
||
// font-size: 44px;
|
||
// line-height: 72px;
|
||
// color: #ffffff;
|
||
// background: url("../../assets/market/chip/sell-btn.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
}
|
||
.sell {
|
||
width: 229px;
|
||
height: 72px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
font-size: 44px;
|
||
line-height: 72px;
|
||
color: #ffffff;
|
||
background: url("../../assets/market/chip/sell-btn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
</style>
|