@mijadesign/mjui-react-taro/dist/esm/Uploader/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-uploader{position:relative;display:flex;flex-wrap:wrap}.nut-uploader-slot{position:relative}.nut-uploader-upload{position:relative;display:flex;align-items:center;justify-content:center;background:var(--nutui-uploader-background, #f8f8f8);width:var(--nutui-uploader-image-width, 100px);height:var(--nutui-uploader-image-height, 100px);border:var(--nutui-uploader-image-border, 0px);border-radius:8px}.nut-uploader-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--nutui-uploader-image-color, rgba(0, 0, 0, .6))}.nut-uploader-icon i,.nut-uploader-icon .nut-icon{color:var(--nutui-uploader-image-color, rgba(0, 0, 0, .6));margin-bottom:4px}.nut-uploader-icon-tip{font-size:13px}.nut-uploader-input{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;overflow:hidden;cursor:pointer;opacity:0}.nut-uploader-input:disabled{cursor:not-allowed}.nut-uploader-upload-disabled{background:var(--nutui-uploader-background-disabled, #f8f8f8);color:var(--nutui-uploader-image-disabled, rgba(0, 0, 0, .4))}.nut-uploader-upload-disabled .nut-uploader-icon i,.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon{color:var(--nutui-uploader-image-disabled, rgba(0, 0, 0, .4));margin-bottom:4px}.nut-uploader-preview{position:relative;margin-right:12px;margin-bottom:12px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.nut-uploader-preview-progress{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:var(--nutui-uploader-preview-progress-background, rgba(0, 0, 0, .7));border-radius:8px}.nut-uploader-preview-progress i{margin-bottom:4px}.nut-uploader-preview-progress-msg{color:#0009;font-size:12px}.nut-uploader-preview.list{width:100%;margin-right:0;margin-bottom:0;margin-top:10px;box-shadow:0 2px 10px #00000003}.nut-uploader-preview-list{width:100%;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background-color:#f8f8f8}.nut-uploader-preview-list .nut-uploader-preview-img-file-name{display:flex;align-items:center;-webkit-line-clamp:1;padding:2px;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-uploader-preview-list .nut-progress{position:absolute;left:0;right:0;bottom:0}.nut-uploader-preview-list .nut-progress .nut-progress-outer{height:2px!important}.nut-uploader-preview .close{position:absolute;right:var(--nutui-uploader-preview-close-right, 0px);top:var(--nutui-uploader-preview-close-top, 0px);transform:translate(50%,-50%);z-index:1}.nut-uploader-preview-img{position:relative;width:var(--nutui-uploader-image-width, 100px);height:var(--nutui-uploader-image-height, 100px);border-radius:8px;overflow:hidden}.nut-uploader-preview-img i{color:#000000f2}.nut-uploader-preview-img .tips{position:absolute;bottom:0;left:0;font-size:12px;color:#fff;text-align:center;box-sizing:border-box;height:var(--nutui-uploader-preview-tips-height, 24px);line-height:var(--nutui-uploader-preview-tips-height, 24px);border-radius:0 0 8px 8px;padding:0 4px;background:var(--nutui-uploader-preview-tips-background, var(--nutui-black-7));width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader-preview-img-c{width:100%;height:100%;position:initial;border-radius:8px}.nut-uploader-preview-img-file{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .3s}.nut-uploader-preview-img-file-name{display:flex;width:90%;font-size:12px;color:#0009;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all}.nut-uploader-preview-img-file-name.error{color:red!important}.nut-uploader-preview-img-file-name.success{color:#1890ff!important}.nut-uploader-preview-img-file-name .nut-icon-Link{flex-shrink:0}[dir=rtl] .nut-uploader-input,.nut-rtl .nut-uploader-input{left:auto;right:0}[dir=rtl] .nut-uploader-preview,.nut-rtl .nut-uploader-preview{margin-right:0;margin-left:12px}[dir=rtl] .nut-uploader-preview-progress,.nut-rtl .nut-uploader-preview-progress{left:auto;right:0}[dir=rtl] .nut-uploader-preview.list,.nut-rtl .nut-uploader-preview.list{margin-right:0;margin-left:0}[dir=rtl] .nut-uploader-preview .close,.nut-rtl .nut-uploader-preview .close{right:auto;left:var(--nutui-uploader-preview-close-right, 0px);transform:translate(-50%,-50%)}[dir=rtl] .nut-uploader-preview-img .tips,.nut-rtl .nut-uploader-preview-img .tips{left:auto;right:0}