bemarket/src/components/market/MosaicChipDialog.vue
huangjinming 8b2c42708c fix
2022-12-13 11:33:11 +08:00

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>0x21cEe1a4</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>