<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>