397 lines
8.9 KiB
Vue
397 lines
8.9 KiB
Vue
<template>
|
|
<div class="hero-right">
|
|
<div class="bg"></div>
|
|
<div class="container">
|
|
<div class="left-img">
|
|
<img src="" alt="" />
|
|
</div>
|
|
<div class="chip-left">
|
|
<div class="chip-tab-left">
|
|
<div class="chip-item">
|
|
<div class="bg">
|
|
<img
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/chip-item-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-item">
|
|
<div class="bg">
|
|
<img
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/chip-item-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="left-content"></div> -->
|
|
<div class="chip-tab-right">
|
|
<div class="chip-item">
|
|
<div class="bg">
|
|
<img
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/chip-item-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-item">
|
|
<div class="bg">
|
|
<img
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/chip-item-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-item">
|
|
<div class="bg">
|
|
<img
|
|
class="hill-icon-img"
|
|
width="169px"
|
|
src="../../assets/market/chip-item-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chip-right">
|
|
<div class="chip-right-top">
|
|
<div class="token-lable">TOKEN ID</div>
|
|
<div class="token-id">#3006985843100103</div>
|
|
</div>
|
|
<div class="chip-right-bottom">
|
|
<div class="chip-assult">
|
|
<div class="owner">
|
|
<div class="owner-content">
|
|
<div>Owner :</div>
|
|
<div>0x21cE………e1a4</div>
|
|
</div>
|
|
<div class="owner-mint">
|
|
<div>Mint Time :</div>
|
|
<div>2022-12-31 23:59:59 UTC</div>
|
|
</div>
|
|
<div class="owner-history">
|
|
<div>History :</div>
|
|
<div>#3006985843100103 (NFTLink)</div>
|
|
</div>
|
|
</div>
|
|
<div class="def-content">
|
|
<div class="def-item">
|
|
<div>DEF PCT</div>
|
|
<div>+8%</div>
|
|
</div>
|
|
<div class="def-item">
|
|
<div>DEF PCT</div>
|
|
<div>+7.2%</div>
|
|
</div>
|
|
<div class="def-item" style="justify-content: center">
|
|
Unlocked at Lv.5
|
|
</div>
|
|
<div class="def-item">LUCKY Unlocked at Lv.5</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="buy-price">
|
|
<div class="price"><span class="price-number">9999.99</span></div>
|
|
<div>
|
|
<a href="javascript:void(0)">
|
|
<img
|
|
width="263px"
|
|
height="71px"
|
|
src="../../assets/market/hero/buy.png"
|
|
alt="aoi-hero"
|
|
/></a>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- <span @click="closeTip" class="close">
|
|
<img
|
|
src="../../assets/market/hero/cose.png"
|
|
width="56px"
|
|
height="56px"
|
|
alt=""
|
|
/></span> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["hero", "isTab"],
|
|
components: {},
|
|
data() {
|
|
return {
|
|
piece: "",
|
|
};
|
|
},
|
|
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");
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
|
|
.chip-left {
|
|
position: relative;
|
|
margin-left: 88px;
|
|
// 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 {
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
}
|
|
}
|
|
}
|
|
.chip-item {
|
|
width: 252px;
|
|
height: 238px;
|
|
display: flex;
|
|
background: url("../../assets/market/chip-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bg {
|
|
margin-left: 33px;
|
|
margin-top: 53px;
|
|
}
|
|
}
|
|
}
|
|
.chip-right {
|
|
width: 431px;
|
|
margin-top: 24px;
|
|
}
|
|
.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 {
|
|
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;
|
|
}
|
|
.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>
|