177 lines
3.7 KiB
Vue
177 lines
3.7 KiB
Vue
<template>
|
|
<div class="wmassageMask" v-if="dialogVisible == true" @touchmove.prevent>
|
|
<div class="messageMaskContent content">
|
|
<div class="container" v-show="msgType == 0">
|
|
<div class="title">Transfaction Failed</div>
|
|
<div class="wangning-img">
|
|
<img src="../../../assets/market/dialog/wangning.png" alt="" />
|
|
</div>
|
|
<div class="view">View in Poiygonscan</div>
|
|
<div class="confirm-btn">Confirm</div>
|
|
</div>
|
|
<div class="success-container" v-show="msgType == 1">
|
|
<div class="title">Transfaction Complete</div>
|
|
<div class="wangning-img">
|
|
<img src="../../../assets/market/dialog/success.png" alt="" />
|
|
</div>
|
|
<div class="view">View in Poiygonscan</div>
|
|
<div class="confirm-btn">Confirm</div>
|
|
</div>
|
|
<span @click="closeTip" class="close">
|
|
<img src="../../../assets/market/hero/cose.png" alt="" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
msgType: null,
|
|
};
|
|
},
|
|
methods: {
|
|
closeTip() {
|
|
// 分发自定义事件(事件名: closeTip)
|
|
// this.$emit("closeTip");
|
|
this.dialogVisible = false;
|
|
},
|
|
open(type) {
|
|
this.dialogVisible = true;
|
|
this.msgType = type;
|
|
console.log("type", type, this.dialogVisible);
|
|
},
|
|
handMessage() {},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wmassageMask {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: rgba(20, 28, 34, 0.6);
|
|
z-index: 9999;
|
|
.content {
|
|
position: relative;
|
|
.close {
|
|
width: 75px;
|
|
height: 75px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: -74px;
|
|
top: -74px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.messageMaskContent {
|
|
position: absolute;
|
|
top: 257px;
|
|
left: 109px;
|
|
width: 864px;
|
|
height: 848px;
|
|
background: url("../../../assets/market/dialog/msg-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.price-title {
|
|
margin-top: 30px;
|
|
font-size: 50px;
|
|
font-weight: bold;
|
|
padding-bottom: 29px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.title {
|
|
font-size: 43px;
|
|
margin-top: 76px;
|
|
// font-family: Bahnschrift;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.wangning-img {
|
|
width: 210px;
|
|
height: 210px;
|
|
margin-top: 85px;
|
|
margin-bottom: 65px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.view {
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
color: #ffffff;
|
|
margin-bottom: 18px;
|
|
}
|
|
.confirm-btn {
|
|
text-align: center;
|
|
width: 644px;
|
|
height: 109px;
|
|
line-height: 109px;
|
|
background: #2bcced;
|
|
border: 3px solid rgba(133, 234, 255, 0.3);
|
|
border-radius: 37px;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.success-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.title {
|
|
font-size: 43px;
|
|
margin-top: 76px;
|
|
// font-family: Bahnschrift;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.wangning-img {
|
|
width: 210px;
|
|
height: 210px;
|
|
margin-top: 85px;
|
|
margin-bottom: 65px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.view {
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
color: #ffffff;
|
|
margin-bottom: 18px;
|
|
}
|
|
.confirm-btn {
|
|
text-align: center;
|
|
width: 644px;
|
|
height: 109px;
|
|
line-height: 109px;
|
|
background: #2bcced;
|
|
border: 3px solid rgba(133, 234, 255, 0.3);
|
|
border-radius: 37px;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|