164 lines
3.4 KiB
Vue
164 lines
3.4 KiB
Vue
<template>
|
|
<el-dialog :show-close="false" :visible.sync="dialogVisible">
|
|
<div class="container" v-if="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" @click="handClick">Confirm</div>
|
|
</div>
|
|
<div class="success-container" v-else-if="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" @click="handClick">Confirm</div>
|
|
</div>
|
|
<Close @closeMyself="close" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import Close from "./Close.vue";
|
|
|
|
export default {
|
|
components: { Close },
|
|
props: ["data", "isType"],
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
msgType: null,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
close(hide) {
|
|
this.dialogVisible = hide;
|
|
},
|
|
open(type) {
|
|
this.dialogVisible = true;
|
|
this.msgType = type;
|
|
},
|
|
handClick() {
|
|
this.dialogVisible = false;
|
|
console.log("handClick", "999");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
// width: 576px !important;
|
|
// height: 576px !important;
|
|
width: 732px !important;
|
|
height: 636px !important;
|
|
margin-top: 12vh !important;
|
|
background: url("../../assets/market/dialog/msg-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: -18px;
|
|
top: -20px;
|
|
}
|
|
.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: 146px;
|
|
height: 146px;
|
|
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;
|
|
cursor: pointer;
|
|
width: 438px;
|
|
height: 74px;
|
|
line-height: 74px;
|
|
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: 146px;
|
|
height: 146px;
|
|
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: 438px;
|
|
height: 74px;
|
|
line-height: 74px;
|
|
background: #2bcced;
|
|
border: 3px solid rgba(133, 234, 255, 0.3);
|
|
border-radius: 37px;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|