kingdot
Version:
A UI Components Library For Vue
1 lines • 2.91 kB
CSS
.kd-upload{color:#404040}.kd-upload .kd-upload-input{display:none}.kd-upload-list-wrap{width:350px;font-size:12px;margin-top:10px}.kd-upload-list-item{position:relative;padding:0 10px;cursor:pointer;transition:all .3s}.kd-upload-list-item:hover .kd-upload-icon{display:inline-block}.kd-upload-list-item:hover .kd-upload-icon+.kd-upload-icon{display:none}.kd-upload-list-item .iconzhengque{color:#38c482}.kd-upload-list-item .iconcuowu{color:#ff9a42}.kd-upload-item-wrap{height:30px;line-height:30px}.kd-upload-list-delete{display:none;opacity:.7}.kd-upload-list-delete:hover,.kd-upload-picture-item:hover .kd-upload-pictureitem-pop{opacity:1}.kd-upload-item-uploading .kd-upload-list-delete{display:inline-block}.kd-upload-status-icon{position:absolute;right:10px;top:0}.kd-file-icon{margin-right:8px;color:#ccc}.kd-icon-left{right:8px}.kd-upload-list-name{display:block;margin-right:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.kd-upload-add-icon,.kd-upload-picture-item{display:inline-block;height:178px;width:178px}.kd-upload-photo-icon{color:#ef4e76;font-size:16px;cursor:pointer}.kd-upload-add-icon{line-height:178px;text-align:center;border:1px solid #525c77;border-radius:4px;cursor:pointer;font-size:30px;color:#ccc}.kd-upload-list-picture{display:inline;vertical-align:top}.kd-upload-picture-item{position:relative;margin:0 8px 8px 0;border-radius:4px;border:1px solid #525c77}.kd-upload-picture-item img{width:100%;height:100%}.kd-upload-pictureitem-wrap{height:100%;border-radius:4px;overflow:hidden}.kd-upload-pictureitem-pop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;opacity:0;background:rgba(0,0,0,.5);border-radius:4px;transition:all .5s;color:#fff}.kd-upload-pop-icon{cursor:pointer}.kd-upload-popState-icon{position:absolute;top:-3px;right:-3px;z-index:1;cursor:pointer;font-size:12px;color:#38c482}.kd-upload-btn-wrap{display:inline-block}.kd-upload-drag{width:300px;height:170px;text-align:center;border:1px dashed #525c77;cursor:pointer;border-radius:4px;background:#252d45}.kd-upload-drag-icon{display:block;margin:30px 0 20px;font-size:60px;color:#4f596e}.kd-upload-drag-tip{font-size:12px;color:#fff}.kd-upload-tip{color:#8d919b;margin-top:10px;line-height:20px;overflow:hidden;text-overflow:ellipsis;font-size:12px}.kd-upload-head{width:178px;height:178px;cursor:pointer;border-radius:4px;border:1px solid #525c77}.kd-upload-progress{position:absolute;top:28px;left:35px;border-radius:4px;line-height:2px;width:calc(100% - 45px)}.kd-upload-progress-line{width:20%;background:#000;height:2px}.kd-upload-progress-wrap{position:absolute;right:10px;line-height:30px;top:-29px}.kd-upload-progress-stop{margin-right:10px}.kd-upload-progress-value{float:left;margin-right:10px}.kd-upload-photo-progress{height:100%}