bk-magic-vue/lib/ui/image-viewer.css

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

.bk-image-viewer-wrapper{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background:rgba(0, 0, 0, .6);
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
    }

.bk-image-viewer-mask{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
    }

.bk-image-viewer-header{
        position:absolute;
        top:0;
        left:0;
        z-index:9;
        width:100%;
        height:52px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        color:#c4c6cc;
        background:rgba(0,0,0,0.70);
    }

.bk-image-viewer-header > div{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            font-size:14px;
            padding:0 25px;
        }

.bk-image-viewer-header .quit-box{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:end;
                -ms-flex-pack:end;
                    justify-content:flex-end;
        }

.bk-image-viewer-header .quit-tips{
            font-size:14px;
            color:#979ba5;
        }

.bk-image-viewer-btn{
        position:absolute;
        z-index:1;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        border-radius:50%;
        opacity:.8;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        background-color:rgba(0, 0, 0, .3);
        color:#DCDEE5;
        -webkit-user-select:none;
           -moz-user-select:none;
            -ms-user-select:none;
                user-select:none
    }

.bk-image-viewer-btn:hover{
            background-color:rgba(0, 0, 0, .4);
            color:#fff;
        }

.bk-image-viewer-close{
        height:52px;
        line-height:48px;
        text-align:center;
        font-size:32px;
        color:#C4C6CC;
        cursor:pointer
    }

.bk-image-viewer-close:hover{
            color:#fff;
        }

.bk-image-viewer-canvas{
        width:100%;
        height:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center
    }

.bk-image-viewer-has-header{
        padding-top:52px;
    }

.bk-image-viewer-error{
        text-align:center;
        font-size:14px;
        color:#313238;
    }

.bk-image-viewer-error .bk-icon{
            font-size:85px;
            line-height:1;
            margin-bottom:15px;
        }

.bk-image-viewer-actions{
        left:50%;
        bottom:30px;
        -webkit-transform:translateX(-50%);
                transform:translateX(-50%);
        width:282px;
        height:44px;
        padding:0 23px;
        background-color:rgba(0,0,0,0.4);
        border-color:#fff;
        border-radius:22px
    }

.bk-image-viewer-actions:hover{
            background:rgba(0,0,0,.5);
        }

.bk-image-viewer-actions-inner{
            width:100%;
            height:100%;
            text-align:justify;
            font-size:23px;
            color:#c4c6cc;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -ms-flex-pack:distribute;
                justify-content:space-around;

        }

.bk-image-viewer-actions-inner .bk-icon{
                cursor:pointer
            }

.bk-image-viewer-actions-inner .bk-icon:hover{
                    color:#fff;
                }

.bk-image-viewer-next, .bk-image-viewer-prev{
        top:50%;
        width:80px;
        height:80px;
        font-size:40px;
        cursor:pointer;
    }

.bk-image-viewer-prev{
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        left:40px
    }

.bk-image-viewer-next{
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        right:40px;
        text-indent:2px
    }