@cw-devops/bk-magic-vue/lib/ui/sideslider.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.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:#3a84ff;
        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;
        color:#313238;
    }

.bk-sideslider-title .title-content{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

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

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