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

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

.bk-upload img{width:100%}.bk-upload .pic-item{position:relative;display:inline-block;padding:5px;height:100px;width:100px;border:1px solid #c4c6cc;border-radius:2px;vertical-align:top}.bk-upload .pic-item:not(:last-child){margin-right:10px}.bk-upload .pic-item.fail .error-image-icon{font-size:28px;color:#979ba5}.bk-upload .pic-item .uploading-status{padding:36px 10px}.bk-upload .pic-item .fail-status,.bk-upload .pic-item .uploading-status{position:absolute;top:0;left:0;width:100%;height:100%;font-size:14px;text-align:center;background:#fff}.bk-upload .pic-item .fail-status{padding:5px}.bk-upload .pic-item .fail-status .error-pic{font-size:28px;color:#979ba5}.bk-upload .pic-item .fail-status .reupload{color:#3a84ff}.bk-upload .pic-item .fail-status .delete-file{color:#ff5656}.bk-upload .pic-item .fail-status .delete-file:hover{color:#ff5656}.bk-upload .pic-item .mask{position:absolute;left:0;bottom:0;width:98px;height:30px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(rgba(19,64,116,0)),to(rgba(8,30,64,.6)));background:linear-gradient(180deg,rgba(19,64,116,0),rgba(8,30,64,.6))}.bk-upload .pic-item .mask .replace{position:absolute;bottom:5px;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:12px}.bk-upload .pic-item .mask .tip{position:absolute;bottom:-30px;color:#ea3736}.bk-upload .pic-item .mask .tip span{width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}.bk-upload .pic-item .mask .delete-file{height:16px;width:16px;right:-9px;top:-76px}.bk-upload .pic-item .delete-file{position:absolute;right:0;top:0;color:#c4c6cc;font-size:24px;cursor:pointer;z-index:11}.bk-upload .pic-item .delete-file:hover{color:#fff}.bk-upload .file-wrapper{position:relative;font-size:14px}.bk-upload .file-wrapper input[type=file]{width:100%;height:100%;position:absolute;left:0;top:0;z-index:10;cursor:pointer;opacity:0}.bk-upload.button{position:relative}.bk-upload.button .file-wrapper{width:86px;height:36px;border:1px solid #c4c6cc;opacity:1;border-radius:2px;cursor:pointer;margin-bottom:10px;position:relative}.bk-upload.button .file-wrapper :not(input){display:none}.bk-upload.button .file-wrapper:before{content:attr(bk-lableName);position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;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}.bk-upload.button p.tip{position:absolute;left:100px;top:0;margin:auto;height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bk-upload.draggable .file-wrapper{width:100%;height:80px;margin-bottom:2px;border-radius:2px;border:1px dashed #c4c6cc;text-align:center}.bk-upload.draggable .file-wrapper:hover{border-color:#3a84ff}.bk-upload.draggable .file-wrapper:hover .upload-icon{color:#3a84ff}.bk-upload.draggable .file-wrapper:focus{border-color:#3a84ff}.bk-upload.draggable .file-wrapper .upload-icon{display:inline-block;margin:14px 0 2px;font-size:28px;color:#c4c6cc}.bk-upload.draggable .file-wrapper .text-area{margin:0;font-size:12px}.bk-upload.draggable .file-wrapper .drop-upload{color:#63656e}.bk-upload.draggable .file-wrapper .click-upload{color:#3a84ff;margin-left:5px}.bk-upload.picture .file-wrapper{display:inline-block}.bk-upload.picture .file-wrapper:hover .upload-btn{color:#3a84ff;border-color:#3a84ff}.bk-upload.picture .file-wrapper:hover .upload-btn i{color:#3a84ff}.bk-upload.picture .file-wrapper:focus .upload-btn{border-color:#3a84ff}.bk-upload.picture .file-wrapper .upload-btn{padding:28px 0;width:100px;height:100px;border:1px dashed #c4c6cc;border-radius:2px;text-align:center}.bk-upload.picture .file-wrapper .upload-btn i{margin-bottom:2px;font-size:20px;color:#979ba5}.bk-upload .progress-bar-wrapper{width:calc(100% - 50px);margin-top:4px;height:2px;border-radius:1px;background:#dcdee5}.bk-upload .progress-bar-wrapper .progress-bar{height:2px;width:0;background:#2dcb56;border-radius:1px}.bk-upload .progress-bar-wrapper .uploading{background:#3a84ff}.bk-upload .progress-bar-wrapper .success{background:#2dcb56}.bk-upload .progress-bar-wrapper .fail{background:#ff5656}.bk-upload .tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px 0 10px;font-size:12px;text-align:left;color:#63656e}.bk-upload .isdrag{border:1px solid #0082ff}.bk-upload .all-file .file-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px;height:60px;padding:12px 10px;border-radius:2px;border:1px solid #cbd5e0}.bk-upload .all-file .file-item:hover{cursor:pointer;border-color:#3a84ff}.bk-upload .all-file .file-item:hover .file-name{color:#3a84ff}.bk-upload .all-file .file-item.file-item-fail .close-upload{font-size:18px}.bk-upload .all-file .file-item .file-icon{-webkit-box-flex:0;-ms-flex:0 0 36px;flex:0 0 36px;height:36px;width:36px;border-radius:2px}.bk-upload .all-file .file-item .file-icon i{font-size:36px}.bk-upload .all-file .file-item .del-icon{position:absolute;top:25px;right:20px;height:20px;width:20px;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}.bk-upload .all-file .file-item .del-icon .close-upload{height:14px;width:14px;fill:#8797aa;cursor:pointer}.bk-upload .all-file .file-item .del-icon:hover{background-color:rgba(58,132,255,.1)}.bk-upload .all-file .file-item .del-icon:hover .close-upload{fill:#3a84ff}.bk-upload .all-file .file-item .file-info{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;margin-left:10px;line-height:1;font-size:12px;overflow:hidden}.bk-upload .all-file .file-item .file-info .file-name{display:inline-block;font-size:12px;max-width:250px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-upload .all-file .file-item .file-info .file-message{position:absolute;right:25px;display:inline-block;font-size:12px;line-height:1}.bk-upload .all-file .file-item .file-info .file-message .upload-speed{padding-right:40px}.bk-upload .all-file .file-item .file-info .file-message .done{color:#2dcb56}.bk-upload .all-file .file-item .file-info .error-msg{max-width:250px;margin:0;height:18px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#ff5656}.success-icon{position:absolute;top:-1px;right:-1px;width:0;height:0;border-top:24px solid #14ab5b;border-left:24px solid transparent}.success-icon .success-upload{position:absolute;top:-25px;right:-3px;color:#fff;font-size:20px}.flex-align-center,.tips{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tips{margin-top:5px;font-size:12px;color:#14ab5b}.tips.errorMsg{color:#ea3736}.tips span{width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
/*# sourceMappingURL=upload.min.css.map */