bk-magic-vue/lib/ui/upload.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;
        overflow:hidden
    }

.bk-upload .pic-item:not(:last-child){
            margin-right:10px;
        }

.bk-upload .pic-item.fail{
            border-color:#ff5656;
        }

.bk-upload .pic-item.fail .error-image-icon{
                font-size:28px;
                color:#979ba5;
            }

.bk-upload .pic-item:hover .mask{
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
            }

.bk-upload .pic-item .uploading-status{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            padding:36px 10px;
            font-size:14px;
            text-align:center;
            background:#fff;
        }

.bk-upload .pic-item .fail-status{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            padding:26px 10px;
            font-size:14px;
            text-align:center;
            background:#fff;
        }

.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{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:98px;
            height:98px;
            -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:rgba(0, 0, 0, .6);
        }

.bk-upload .pic-item .mask .fail-tips{
                width:100%;
                height:100%;
            }

.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 rgba(196, 198, 204, 1);
            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;
            }

.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:hover .uploaded-status .mask{
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                }

.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{
        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{
        margin:5px 0 10px 0;
        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 dashed #c4c6cc;
            background:rgba(250, 251, 253, 1)
        }

.bk-upload .all-file .file-item.file-item-fail{
                border:1px solid #ff5656;
                background:rgba(254, 221, 220, 0.4);
            }

.bk-upload .all-file .file-item.file-item-fail .close-upload{
                    color:#ff5656
                }

.bk-upload .all-file .file-item.file-item-fail .close-upload:hover{
                        color:#ff5656;
                    }

.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 .close-upload{
                position:absolute;
                top:0;
                right:0;
                font-size:24px;
                color:#c4c6cc;
                cursor:pointer;
                z-index:1;
            }

.bk-upload .all-file .file-item .close-upload:hover{
                color:#63656e;
            }

.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{
                    margin:0;
                    height:18px;
                    line-height:18px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    font-size:12px;
                    color:#ff5656;
                }