@cw-devops/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
    }

.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{
            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:5px;
            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{
            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, 0.6)));
            background:linear-gradient(180deg, rgba(19, 64, 116, 0) 0%, rgba(8, 30, 64, 0.6) 100%);
        }

.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 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;
                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 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 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, 0.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{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center
  }

.tips{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
          -ms-flex-align:center;
              align-items:center;
      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;
    }