hbt-training-ui/src/components/permitPopUp.component.vue

87 lines
1.7 KiB
Vue

<!--许可证弹窗-->
<template>
<el-dialog
class="pop-up-permit"
:title="title"
append-to-body
:modal="false"
:close-on-click-modal="false"
:visible.sync="dialogVisibleForBigPop"
width="648"
top="5vh"
:before-close="handleClose">
<div slot="title">
<p class="title-style">{{title}}</p>
<el-divider></el-divider>
</div>
<slot></slot>
</el-dialog>
</template>
<script lang="ts">
import {Component, PropSync, Prop, Vue, Emit} from 'vue-property-decorator';
@Component
export default class PermitPopUpComponent extends Vue {
//传入的报警信息列表
@PropSync('dialogVisibleForBigPop', {default: false}) syncDialogVisibleForPermit!: boolean;
@Prop({default: '排污许可证'}) title!: string;
@Emit("onClose")
onCloseCallback(){
//
}
//关闭弹窗
handleClose() {
this.syncDialogVisibleForPermit = false
this.onCloseCallback()
}
}
</script>
<style lang="scss">
.pop-up-permit {
.el-dialog {
width: 648px;
height: 410px;
background: url("~@/assets/img/permitBg.png") no-repeat 50% 50%;
.el-dialog__header{
padding-bottom: 0;
padding-left: 36px;
padding-right: 36px;
}
.el-dialog__headerbtn {
top: 25px;
right: 30px;
}
.el-dialog__title,.title-style {
//font-weight: bold;
position: relative;
font-size: 16px;
top: 8px;
left: 0;
color: #FFFFFF;
}
.el-dialog__body {
padding-top: 0 !important;
padding-left: 36px;
padding-right: 36px;
}
}
.el-dialog__headerbtn .el-dialog__close {
color: #FFFFFF;
}
.el-dialog__title, .el-dialog__body, .el-form-item__label {
color: #FFFFFF;
}
}
</style>