83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- 消息通知弹框 -->
|
||
|
|
<el-dialog
|
||
|
|
:title="noticeDialog.outerTitle"
|
||
|
|
:width="noticeDialog.outerWidth"
|
||
|
|
:visible.sync="noticeDialog.outerVisible"
|
||
|
|
v-if="noticeDialog.outerVisible"
|
||
|
|
:center="true"
|
||
|
|
:height="`300px`"
|
||
|
|
append-to-body
|
||
|
|
>
|
||
|
|
<el-button class="notice-num" type="primary"
|
||
|
|
>重要通知(1/1)</el-button
|
||
|
|
>
|
||
|
|
<el-button class="notice-known" type="primary">我知道了</el-button>
|
||
|
|
<slot />
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
noticeDialog: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep .el-dialog {
|
||
|
|
height: 500px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-dialog__header {
|
||
|
|
width: 95%;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-bottom: 2px solid #999;
|
||
|
|
}
|
||
|
|
::v-deep .el-dialog__title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-dialog__headerbtn {
|
||
|
|
position: absolute;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
top: -15px;
|
||
|
|
right: -15px;
|
||
|
|
padding: 8px;
|
||
|
|
background-color: #409eff;
|
||
|
|
border-radius: 50%;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-dialog__headerbtn .el-dialog__close {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-num {
|
||
|
|
position: absolute;
|
||
|
|
top: -38px;
|
||
|
|
left: 0;
|
||
|
|
height: 38px;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-known {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -43px;
|
||
|
|
right: 0;
|
||
|
|
height: 38px;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
}
|
||
|
|
</style>
|