bk-magic-vue/lib/ui/image-viewer.min.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,.7)}.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,.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{left:40px}.bk-image-viewer-next,.bk-image-viewer-prev{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.bk-image-viewer-next{right:40px;text-indent:2px}
/*# sourceMappingURL=image-viewer.min.css.map */