<!--
 * @Description: 提示框封装
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-10 10:44:32
 * @LastEditTime: 2022-09-01 11:11:37
 * @LastEditors: xiaofengzhou
-->
<template>
    <div>
        <a-modal :maskClosable="false" :width="433" :footer="null" centered v-model:visible="visible">
            <div class="messageBox">
                <span class="iconfont icon-ok"></span>
                <span>&nbsp;&nbsp;{{message}}</span>
            </div>
            <div class="btnGroup">
                <a-button @click="hanCancel">取消</a-button>
                <a-button @click="hanOk">确定</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script>
import '../../../static/icons2/iconfont.css'
export default {

    components: {},
    data() {

        return {
            visible:false,
            message: ''
        };
    },

    computed: {},

    watch: {},

    methods: {
        init(data) {
            this.message=data
        },
        hanCancel() {
            this.visible = false
        },
        hanOk() {
            this.visible = false

        }

    }
}
</script>
<style scoped>
.messageBox {
    width: 100px;
    height: 100px;
    margin: auto;
    line-height: 100px;

}

.btnGroup {
    text-align: right;
}

.btnGroup button:nth-child(1) {
    color: #3894ff;
}

.messageBox span:nth-child(1) {
    color: green;
    font-size: 22px;
    vertical-align: bottom;
}

.messageBox span:nth-child(2) {
    font-size: 16px;
}

.btnGroup button:nth-child(2) {
    background-color: #3894ff;
    color: white;
}
</style>