@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
1 lines • 3.24 kB
CSS
.nut-choose-image{position:relative;display:flex;flex-wrap:wrap}.nut-choose-image__slot{position:relative}.nut-choose-image__upload{position:relative;background:var(--nut-uploader-background, #f7f8fa);width:var(--nut-uploader-picture-width, 100px);height:var(--nut-uploader-picture-height, 100px);display:flex;align-items:center;justify-content:center}.nut-choose-image__input{position:absolute ;top:0;left:0;width:100% ;height:100% ;overflow:hidden;cursor:pointer ;opacity:0}.nut-choose-image__input:disabled,.nut-choose-image__input.disabled{cursor:not-allowed !important}.nut-choose-image__preview{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-bottom:10px;box-shadow:0 2px 10px 0 rgba(0,0,0,.1)}.nut-choose-image__preview__progress{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-choose-image__preview__progress__msg{color:var(--nut-white, #fff);font-size:12px;margin-top:6px}.nut-choose-image__preview.list{width:100%;margin-right:0px;margin-bottom:0px;margin-top:10px}.nut-choose-image__preview-list{width:100%;height:32px;display:flex;flex-direction:column;position:relative}.nut-choose-image__preview-list .nut-choose-image__preview-img__file__name{padding:2px 4px;display:flex;align-items:center;height:100%}.nut-choose-image__preview-list .nut-choose-image__preview-img__file__name .file__name_tips{margin-left:4px;padding:0 20px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-choose-image__preview-list .nut-choose-image__preview-img__file__del{position:absolute;right:6px;top:6px}.nut-choose-image__preview-list .nut-choose-image__preview-img__file__link{position:absolute;left:6px;top:8px}.nut-choose-image__preview-list .nut-progress{position:absolute;left:0;right:0;bottom:0}.nut-choose-image__preview-list .nut-progress .nut-progress-outer{height:2px }.nut-choose-image__preview-img{position:relative;width:var(--nut-uploader-picture-width, 100px);height:var(--nut-uploader-picture-height, 100px);display:flex;align-items:center;justify-content:center;border-radius:6px}.nut-choose-image__preview-img .close{position:absolute;right:0;top:0;color:rgba(0,0,0,.6);transform:translate(50%, -50%)}.nut-choose-image__preview-img .tips{position:absolute;bottom:0;left:0;right:0;text-align:center;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--nut-white, #fff);height:0px;transition:height .3s;background:rgba(0,0,0,.54);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-choose-image__preview-img__c{max-width:100%;max-height:100%;border-radius:6px;cursor:pointer}.nut-choose-image__preview-img__file{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .3s}.nut-choose-image__preview-img__file__name{display:flex;width:100%;font-size:12px;color:var(--nut-text-color, #808080);padding:10px;height:100%;overflow:hidden;box-sizing:border-box;align-items:center}.nut-choose-image__preview-img__file__name.error{color:red }.nut-choose-image__preview-img__file__name.success{color:#1890ff }