test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 9.47 kB
CSS
.nut-progress{display:flex;align-items:center;position:relative;width:100%}.nut-progress-outer{flex:auto;border-radius:var(--nutui-progress-border-radius, 2px);height:var(--nutui-progress-height, 4px);background:var(--nutui-progress-background, var(--nutui-gray-4, #f5f5f5))}.nut-progress-outer .nut-progress-active:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--nutui-progress-border-radius, 2px);animation:progressActive 2s ease-in-out infinite}.nut-progress-right-percent{min-width:var(--nutui-progress-right-percent-text-min-width, 32px);font-size:var(--nutui-progress-right-percent-text-font-size, 12px);color:var(--nutui-progress-right-percent-text-color, var(--nsui-gray-color-7, #8C8C8C));margin:var(--nutui-progress-right-percent-text-margin, 0px 0px 0px 4px);text-align:right}.nut-progress-inner-percent{font-size:var(--nutui-progress-inner-percent-text-font-size, 12px);color:var(--nutui-progress-inner-percent-text-color, var(--nsui-gray-color-1, #ffffff));text-shadow:var(--nutui-progress-inner-percent-text-shadow, 0 0 2px var(--nsui-gray-percent-color-6, rgba(0, 0, 0, .25)));margin:var(--nutui-progress-right-percent-text-margin, 0px 0px 0px 8px)}.nut-progress-inner{height:100%;display:flex;flex-direction:column;justify-content:center;transition:all .4s;border-radius:var(--nutui-progress-border-radius, 2px);background:var(--nutui-progress-color, var(--nutui-brand-color, #2C68FF))}.nut-progress-text{display:flex;align-items:center;position:absolute;top:var(--nutui-progress-text-position-top, -7px);bottom:var(--nutui-progress-text-position-bottom, -7px);transition:all .4s;transform:translate(-50%)}.nut-progress-text__inner{display:flex;align-items:center;justify-content:center;height:100%;width:100%;min-width:var(--nutui-progress-text-min-width, 44px);color:var(--nutui-progress-text-color, var(--nutui-brand-text-color, #ffffff));padding:var(--nutui-progress-text-padding, 0 8px);border-radius:var(--nutui-progress-text-border-radius, 9px);font-size:var(--nutui-progress-text-font-size, 12px);line-height:1;background:var(--nutui-progress-text-background, var(--nutui-progress-color, var(--nutui-brand-color, #2C68FF)))}@keyframes progressActive{0%{background:rgba(255,255,255,.1);width:0}20%{background:rgba(255,255,255,.5);width:0}to{background:rgba(255,255,255,0);width:100%}}.taro-img__mode-center{object-fit:cover;width:100%;height:100%}.nut-uploader{position:relative;display:flex;flex-wrap:wrap;width:auto;height:auto}.nut-uploader__slot{position:relative}.nut-uploader__tip{width:100%;color:var(--nutui-uploader-tip-color, var(--nsui-gray-color-7, #8C8C8C));margin-bottom:var(--nutui-uploader-tip-bottom, 8px);font-size:var(--nutui-uploader-tip-font-size, 14px);font-weight:var(--nutui-uploader-tip-font-weight, 400);line-height:var(--nutui-uploader-tip-line-height, 22px)}.nut-uploader__upload{position:relative;display:flex;align-items:center;justify-content:center;background:var(--nutui-uploader-background, var(--nsui-gray-color-3, #F0F0F0));width:var(--nutui-uploader-picture-width, 80px);height:var(--nutui-uploader-picture-height, 80px);border:var(--nutui-uploader-picture-border, 0px);border-radius:var(--nutui-uploader-picture-border-radius, 2px);overflow:hidden}.nut-uploader__upload--large{width:var(--nutui-uploader-picture-large-width, 80px);height:var(--nutui-uploader-picture-large-height, 80px)}.nut-uploader__upload--medium{width:var(--nutui-uploader-picture-medium-width, 64px);height:var(--nutui-uploader-picture-medium-height, 64px)}.nut-uploader__upload--small{width:var(--nutui-uploader-picture-small-width, 56px);height:var(--nutui-uploader-picture-small-height, 56px)}.nut-uploader__icon{display:flex;flex-direction:column;justify-content:center;align-items:center}.nut-uploader__icon img{width:24px;height:24px}.nut-uploader__icon i{opacity:var(--nutui-uploader-picture-icon-opacity, .7);margin-bottom:var(--nutui-uploader-picture-icon-margin-bottom, 6px)}.nut-uploader__icon-tip{font-size:var(--nutui-uploader-picture-icon-tip-font-size, 12px);transform:scale(.83);color:var(--nutui-uploader-picture-icon-tip-color, var(--nsui-gray-color-6, #BFBFBF));line-height:var(--nutui-uploader-picture-icon-tip-line-height, 16px)}.nut-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.nut-uploader__input:disabled{cursor:not-allowed}.nut-uploader__upload-disabled{background:var(--nutui-uploader-background-disabled, var(--nsui-gray-color-3, #F0F0F0))}.nut-uploader__upload-disabled .nut-uploader__icon i{opacity:var(--nutui-uploader-picture-icon-opacity-disabled, .3);margin-bottom:var(--nutui-uploader-picture-icon-margin-bottom, 6px)}.nut-uploader__preview{position:relative;margin-right:var(--nutui-uploader-preview-margin-right, 10px);margin-bottom:var(--nutui-uploader-preview-margin-bottom, 10px);box-shadow:0 2px 10px #0000001a;z-index:1}.nut-uploader__preview.draging{z-index:2}.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%;z-index:1;background:var(--nutui-uploader-preview-progress-background, rgba(0, 0, 0, .3));border-radius:var(--nutui-uploader-picture-border-radius, 2px)}.nut-uploader__preview__progress img{width:24px;height:24px}.nut-uploader__preview__progress i{margin-bottom:var(--nutui-uploader-picture-icon-margin-bottom, 6px)}.nut-uploader__preview__progress__msg{color:#fff;font-size:12px;transform:scale(.83);line-height:19px}.nut-uploader__preview.list{width:100%;margin-right:0;margin-bottom:0;margin-top:10px}.nut-uploader__preview-list{width:100%;height:32px;display:flex;flex-direction:column;position:relative;background-color:var(--nutui-gray-5, #ffffff)}.nut-uploader__preview-list .nut-uploader__preview-img__file__name{-webkit-line-clamp:1;padding:2px;height:24px}.nut-uploader__preview-list .nut-uploader__preview-img__file__del{position:absolute;right:4px;top:6px}.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}.nut-uploader__preview .close{position:absolute;right:var(--nutui-uploader-preview-close-right, 0px);top:var(--nutui-uploader-preview-close-top, 0px);width:var(--nutui-uploader-preview-close-width, 28px);height:var(--nutui-uploader-preview-close-width, 28px);z-index:2}.nut-uploader__preview .close img{position:absolute;right:0;top:0;width:var(--nutui-uploader-preview-close-icon-width, 18px);height:var(--nutui-uploader-preview-close-icon-width, 18px)}.nut-uploader__preview-img{position:relative;width:var(--nutui-uploader-picture-width, 80px);height:var(--nutui-uploader-picture-height, 80px);border-radius:var(--nutui-uploader-picture-border-radius, 2px)}.nut-uploader__preview-img--large{width:var(--nutui-uploader-picture-large-width, 80px);height:var(--nutui-uploader-picture-large-height, 80px)}.nut-uploader__preview-img--medium{width:var(--nutui-uploader-picture-medium-width, 64px);height:var(--nutui-uploader-picture-medium-height, 64px)}.nut-uploader__preview-img--small{width:var(--nutui-uploader-picture-small-width, 56px);height:var(--nutui-uploader-picture-small-height, 56px)}.nut-uploader__preview-img i{color:var(--nutui-gray-1, #595959)}.nut-uploader__preview-img .tips{position:absolute;bottom:0;left:0;font-size:12px;font-weight:400;color:var(--nutui-gray-6, #ffffff);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:var(--nutui-uploader-picture-border-radius, 2px);border-top-left-radius:0;border-top-right-radius:0;padding:var(--nutui-uploader-preview-tips-padding, 0 4px);background:var(--nutui-uploader-preview-tips-background, var(--nsui-gray-percent-color-7, rgba(0, 0, 0, .45)));width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader__preview-img .tips span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader__preview-img .tips--large{height:var(--nutui-uploader-preview-tips-large-height, 24px);line-height:var(--nutui-uploader-preview-tips-large-height, 24px)}.nut-uploader__preview-img .tips--medium{height:var(--nutui-uploader-preview-tips-medium-height, 20px);line-height:var(--nutui-uploader-preview-tips-medium-height, 20px)}.nut-uploader__preview-img .tips--small{height:var(--nutui-uploader-preview-tips-small-height, 18px);line-height:var(--nutui-uploader-preview-tips-small-height, 18px)}.nut-uploader__preview-img .tips--small span{width:120%;transform:translate(-9%) scale(.83)}.nut-uploader__preview-img__c{justify-content:center;border-radius:6px;display:flex;width:100%;height:100%}.nut-uploader__preview-img__c-touch-view{width:100%;height:100%}.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:100%;font-size:12px;color:var(--nutui-gray-2, #757575);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}.nut-uploader__preview-img__file__name.success{color:#1890ff}.nut-uploader__preview-img__file__name .nut-icon-link:before{margin-left:-25%;margin-top:-25%;transform:none}