UAW/src/components/errorDialog/errorDialog.vue
2024-05-27 16:39:19 +08:00

91 lines
1.9 KiB
Vue

<template>
<el-dialog
title
:visible="dialogVisible"
@cancel="handleClose"
:closable="false"
:show-close="false"
>
<div class="top">
<div class="top-title"></div>
<div class="top-close" @click="handleClose">
<img src="@/assets/common/CloseButton.png" alt />
</div>
</div>
<div class="confirm-box">
<div class="confirm-context" v-html="message">{{}}</div>
</div>
<div class="btn" @click="handleClose">Confirm</div>
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="handleClose" type="primary">Confirm</el-button>
</div>-->
</el-dialog>
</template>
<script>
export default {
name: "iErrorMessage",
data() {
return {};
},
methods: {
handleClose() {
this.nextAction && this.nextAction()
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
border: 1px solid #924df2;
background: #1a1821;
border-radius: 80px;
padding: 0px 50px;
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
.top {
display: flex;
height: 10px;
.top-title {
color: #fff;
font-size: 28px;
font-family: "Anton-Regular";
}
.top-close {
position: absolute;
top: -15%;
right: -2%;
width: 100px;
height: 100px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.confirm-context {
min-height: 120px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
padding-left: 21px;
}
.btn {
width: 200px;
height: 50px;
line-height: 50px;
margin: 0 auto;
color: #000;
background: url("./../../assets/home/explore map button.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
}
}
</style>