652 lines
16 KiB
Vue
652 lines
16 KiB
Vue
<template>
|
|
<div class="hero-right">
|
|
<div class="bg"></div>
|
|
<div class="container">
|
|
<div class="hero-left-info">
|
|
<div class="hero-left-info-img">
|
|
<img
|
|
v-if="data.item_id"
|
|
:src="require('@/assets/market/weapon/' + data.item_id + '.png')"
|
|
alt="aoi-hero"
|
|
/>
|
|
<img
|
|
v-if="data.c_id"
|
|
:src="require('@/assets/market/weapon/' + data.c_id + '.png')"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-right-content">
|
|
<div class="chip-left">
|
|
<div class="chip-tab-left">
|
|
<div class="chip-item">
|
|
<div
|
|
:class="chipsid == 1 ? 'active-bg' : 'bg'"
|
|
v-if="data.detail.chips_info[1].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
width="117px"
|
|
@click="handChipDetils(1)"
|
|
height="110px"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
data.detail.chips_info[1].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
<div class="chip-item">
|
|
<div
|
|
:class="chipsid == 2 ? 'active-bg' : 'bg'"
|
|
v-if="data.detail.chips_info[2].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
width="117px"
|
|
@click="handChipDetils(2)"
|
|
height="110px"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
data.detail.chips_info[2].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="left-content"></div> -->
|
|
<div class="chip-tab-right">
|
|
<div class="chip-item">
|
|
<div
|
|
:class="chipsid == 0 ? 'active-bg' : 'bg'"
|
|
v-if="data.detail.chips_info[0].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
width="117px"
|
|
height="110px"
|
|
@click="handChipDetils(0)"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
data.detail.chips_info[0].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
<div class="chip-reactor-item">
|
|
<div class="reactor-bg">
|
|
<img
|
|
v-if="data.detail.chip_core.length > 0"
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(5)"
|
|
width="169px"
|
|
src="../../assets/market/reactor-active.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/reactor-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-item">
|
|
<div
|
|
:class="chipsid == 3 ? 'active-bg' : 'bg'"
|
|
v-if="data.detail.chips_info[3].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
width="117px"
|
|
height="110px"
|
|
@click="handChipDetils(3)"
|
|
v-if="data.detail.chips_info[3].item_id"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
data.detail.chips_info[3].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chip-right">
|
|
<div class="chip-right-top" v-if="chipsid !== 5">
|
|
<div class="token-lable">TOKEN ID</div>
|
|
<div class="token-id">
|
|
#{{
|
|
chipsid == 5 ? "" : data.detail.chips_info[chipsid].token_id
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="chip-right-bottom">
|
|
<div class="chip-assult">
|
|
<div class="owner" v-if="chipsid !== 5">
|
|
<div class="owner-content">
|
|
<div>Owner :</div>
|
|
<div v-if="data.detail.chips_info[chipsid].nft_address">
|
|
{{
|
|
data.detail.chips_info[chipsid].nft_address
|
|
| formatAddress
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="owner-mint">
|
|
<div>Mint Time :</div>
|
|
<div v-if="data.detail.chips_info[chipsid].nft_address">
|
|
{{
|
|
formatSelect(data.detail.chips_info[chipsid].modifytime)
|
|
}}
|
|
UTC
|
|
</div>
|
|
</div>
|
|
<div class="owner-history">
|
|
<div>History :</div>
|
|
<div>#3006985843100103 (NFTLink)</div>
|
|
</div>
|
|
</div>
|
|
<DefContent
|
|
:chipsinfo="
|
|
chipsid == 5 ? data.detail.chip_core : data.detail.chips_info
|
|
"
|
|
:chipsid="chipsid"
|
|
></DefContent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DefContent from "./DefContent.vue";
|
|
export default {
|
|
props: ["data", "isTab", "type"],
|
|
components: { DefContent },
|
|
data() {
|
|
return {
|
|
piece: "",
|
|
chipsid: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
chips_info() {
|
|
let list = this.data.detail.chips_info.filter((el) => {
|
|
return el !== " ";
|
|
});
|
|
console.log(list, "-=-=-ooo");
|
|
return list;
|
|
},
|
|
},
|
|
created() {
|
|
let list = this.data.detail.chips_info.sort((a, b) => {
|
|
if (a == null) return -1;
|
|
if (b == null) return 1;
|
|
return (b.idx || 0) - (a.idx || 0);
|
|
});
|
|
console.log(list);
|
|
},
|
|
methods: {
|
|
closeTip() {
|
|
// 分发自定义事件(事件名: closeTip)
|
|
this.$emit("closeTip", false);
|
|
},
|
|
showTip() {
|
|
this.$emit("showTip", true);
|
|
},
|
|
closeMyself() {},
|
|
init(data) {
|
|
this.dialogVisible = true;
|
|
this.piece = data;
|
|
console.log(data, "dfgdg");
|
|
},
|
|
handChipDetils(i) {
|
|
this.chipsid = i;
|
|
},
|
|
formatSelect(value) {
|
|
console.log(value, "date");
|
|
let date = new Date(value * 1000);
|
|
console.log(date, "date");
|
|
let year = date.getUTCFullYear();
|
|
let month = date.getUTCMonth();
|
|
let day = date.getUTCDate();
|
|
let hour = date.getUTCHours();
|
|
let minute = date.getUTCMinutes();
|
|
let second = date.getUTCSeconds();
|
|
|
|
return (
|
|
year +
|
|
"-" +
|
|
month +
|
|
"-" +
|
|
day +
|
|
" " +
|
|
hour +
|
|
":" +
|
|
minute +
|
|
":" +
|
|
second
|
|
);
|
|
},
|
|
},
|
|
filters: {
|
|
formatAddress(address) {
|
|
if (address.length >= 10) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"......" +
|
|
address.substring(address.length - 4)
|
|
);
|
|
} else if (address.length > 0 && address.length < 10) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
width: 1354px !important;
|
|
height: 775px !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;
|
|
}
|
|
.hero-left-info {
|
|
width: 702px;
|
|
height: 702px;
|
|
margin-top: 32px;
|
|
margin-left: 38px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("../../assets/market/weapon/elliptical-bg.png") no-repeat;
|
|
background-size: cover;
|
|
.hero-left-info-img {
|
|
width: 668px;
|
|
height: 274px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 100%;
|
|
// opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.chip-right-content{
|
|
display: flex;
|
|
}
|
|
.chip-left {
|
|
position: relative;
|
|
margin-left: 190px;
|
|
// margin-top: 137px;
|
|
display: flex;
|
|
margin-right: 51px;
|
|
.left-content {
|
|
width: 232px;
|
|
}
|
|
.chip-tab-left {
|
|
position: absolute;
|
|
right: 198px;
|
|
margin-left: 96px;
|
|
margin-top: 129px;
|
|
.chip-item {
|
|
width: 252px;
|
|
display: flex;
|
|
height: 238px;
|
|
background: url("../../assets/market/chip-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../assets/market/chip-item-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
margin-top: 13px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../assets/market/artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
cursor: pointer;
|
|
margin-top: 13px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chip-item {
|
|
width: 252px;
|
|
height: 238px;
|
|
display: flex;
|
|
background: url("../../assets/market/chip-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../assets/market/chip-item-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
margin-top: 13px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.reactor-bg {
|
|
.hill-icon-img {
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
// margin-top: 13px;
|
|
// margin-right: 5px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../assets/market/artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
margin-top: 13px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.chip-reactor-item {
|
|
width: 252px;
|
|
height: 238px;
|
|
display: flex;
|
|
background: url("../../assets/market/chip-rector-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
// .bg {
|
|
// width: 169px;
|
|
// height: 146px;
|
|
// background: url("../../assets/market/chip-item-bg.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
// margin-left: 33px;
|
|
// margin-top: 54px;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// .hill-icon-img {
|
|
// margin-top: 13px;
|
|
// margin-right: 5px;
|
|
// }
|
|
// }
|
|
.reactor-bg {
|
|
.hill-icon-img {
|
|
margin-left: 35px;
|
|
margin-top: 38px;
|
|
// margin-top: 13px;
|
|
// margin-right: 5px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../assets/market/artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
margin-top: 13px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chip-right {
|
|
width: 431px;
|
|
margin-top: 24px;
|
|
margin-right: 52px;
|
|
}
|
|
.chip-right-top {
|
|
color: #ffffff;
|
|
// margin-left: 137px;
|
|
width: 431px;
|
|
margin: 0 auto;
|
|
.token-lable {
|
|
text-align: center;
|
|
font-size: 46px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.token-id {
|
|
font-size: 36px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
width: 398px;
|
|
height: 66px;
|
|
margin: 0 auto;
|
|
line-height: 66px;
|
|
text-align: center;
|
|
margin-bottom: 26px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 24px;
|
|
}
|
|
}
|
|
.chip-right-bottom {
|
|
width: 60%;
|
|
display: flex;
|
|
}
|
|
.chip-assult {
|
|
}
|
|
.owner {
|
|
width: 428px;
|
|
height: 147px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 14px;
|
|
padding-top: 30px;
|
|
padding-left: 25px;
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.assult-rifle {
|
|
width: 431px;
|
|
height: 263px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
background: rgba(5, 57, 68, 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-right: 25px;
|
|
}
|
|
.owner-mint {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
margin-right: 25px;
|
|
justify-content: space-between;
|
|
}
|
|
.owner-history {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
margin-right: 25px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
// .buy-price {
|
|
// position: absolute;
|
|
// right: 44px;
|
|
// bottom: -33px;
|
|
// 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;
|
|
// }
|
|
// }
|
|
// }
|
|
.left-img {
|
|
width: 802px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.img-details {
|
|
width: 802px;
|
|
height: 651px;
|
|
position: absolute;
|
|
top: -41px;
|
|
left: -40px;
|
|
// opacity: 0;
|
|
img {
|
|
width: 100%;
|
|
// opacity: 0;
|
|
}
|
|
}
|
|
.def-content {
|
|
width: 428px;
|
|
padding-top: 25px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
height: 265px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 14px;
|
|
margin-top: 25px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.def-item {
|
|
width: 369px;
|
|
height: 48px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
margin-bottom: 14px;
|
|
padding-right: 18px;
|
|
padding-left: 19px;
|
|
}
|
|
}
|
|
</style>
|