bk-vue-cec/lib/ui/sideslider.css

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

.bk-sideslider-show{
    overflow-y:hidden !important;
}

.bk-sideslider-show body{
        overflow-y:hidden !important;
    }

.bk-sideslider-show.has-sideslider-padding{
        padding-right:17px !important;
    }

.bk-sideslider{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2500;
}

.bk-sideslider-wrapper{
        position:absolute;
        top:0;
        bottom:0;
        background-color:#fff;
        overflow-y:auto
    }

.bk-sideslider-wrapper.left{
            left:0;
            -webkit-box-shadow:5px 0px 8px -5px rgba(0, 0, 0, 0.2);
                    box-shadow:5px 0px 8px -5px rgba(0, 0, 0, 0.2);
        }

.bk-sideslider-wrapper.right{
            right:0;
            -webkit-box-shadow:-5px 0px 8px -5px rgba(0, 0, 0, 0.2);
                    box-shadow:-5px 0px 8px -5px rgba(0, 0, 0, 0.2);
        }

.bk-sideslider-header{
        width:100%;
        height:60px;
        background:#FFFFFF
    }

.bk-sideslider-header:before,
        .bk-sideslider-header:after{
            content:'';
            display:table;
            line-height:0;
        }

.bk-sideslider-header:after{
            clear:both;
        }

.bk-sideslider-closer{
        width:30px;
        height:60px;
        line-height:60px;
        background-color:#006DFF;
        text-align:center;
        color:#fff;
        cursor:pointer;
        font-size:24px;
    }

.bk-sideslider-closer span{
            display:block;
            margin-top:22px;
        }

.bk-sideslider-title{
        height:60px;
        line-height:60px;
        border-bottom:1px solid #DCDEE5;
        font-size:16px;
        font-weight:bold;
        color:#666;
    }

.bk-sideslider-content{
        overflow:auto;
    }

.bk-sideslider-footer{
        width:100%;
        height:54px;
        border-top:1px solid transparent;
        background:#fff;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
    }