platformFront/src/components/base/LtModal.vue

<!----通用弹窗组件---->
<template>
    <div class="modal-container">
        <div class="cover"></div>
        <div class="modal-box">
            <div class="modal-title">
                <a class="close" @click="close()">×</a>
            </div>
            <div class="modal-body">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <a class="confirm btn" @click="confirm()">确定</a>
                <a class="cancel btn" @click="close()">取消</a>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'lt-modal',
        data:function(){
            return{
            }
        },
        methods:{
            close(){
                this.$emit("close");
            },
            confirm(){
                this.$emit("confirm");
            }
        }
    }
</script>
<style lang="less" scoped>
.modal-container{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
    .cover{
        background: #000;
        opacity: .2;
        width: 100%;
        height: 100%;
    }
    .modal-box{
        width: 860px;
        height: 564px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        margin-left: -430px;
        margin-top: -282px;
        .modal-title{
            height: 40px;
            background: #E3EAF4;
            .close{
                float: right;
                margin:3px 13px 0 0;
                font-size: 22px;
                color: #979797;
                cursor: pointer;
            }
        }
        .btn{
            display: inline-block;
            width: 70px;
            height: 34px;
            line-height: 34px;
            background: #48C5D7;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        .cancel{
            background: #fff;
            color: #48C5D7;
            border:1px #48C5D7 solid;
            margin-left: 40px;
        }
        .modal-body{
            padding:20px 22px ;
        }
        .modal-footer{
            /*position: absolute;
            bottom: 32px;*/
            width: 100%;
            text-align: center;
        }
    }
}
</style>