.hc-global-upload-file-box { &:not(.global-uploader-single) { position: fixed; z-index: 2000; right: 10px; bottom: 0; box-sizing: border-box; } /* 隐藏上传按钮 */ .hc-global-upload-btn { position: absolute; clip: rect(0, 0, 0, 0); padding: 0; font-size: initial; line-height: initial; border: initial; border-radius: 0; } .uploader-app { width: 620px; .uploader-list { position: relative; .file-panel { background-color: #fff; border: 1px solid #e2e2e2; border-radius: 7px 7px 0 0; box-shadow: 0 0 10px #0003; .file-title { display: flex; height: 40px; line-height: 40px; padding: 0 15px; border-bottom: 1px solid #ddd; .operate { flex: 1; text-align: right; .el-button { --el-button-hover-link-text-color: #1ECC95; i { font-size: 19px; } + .el-button { margin-left: 8px; } } } } .file-list { position: relative; height: 240px; overflow-x: hidden; overflow-y: auto; background-color: #fff; transition: all .3s; font-size: 14px; .file-item { background-color: #fff; .uploader-file { position: relative; height: 49px; line-height: 49px; overflow: hidden; border-bottom: 1px solid #cdcdcd; .uploader-file-progress { position: absolute; width: 100%; height: 100%; background: #d2f5ea; transform: translate(-100%); } .uploader-file-info { position: relative; z-index: 1; height: 100%; overflow: hidden; display: flex; align-items: center; .uploader-file-actions, .uploader-file-name, .uploader-file-size, .uploader-file-status { position: relative; height: 100%; } .uploader-file-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; .uploader-file-icon { display: inline-block; vertical-align: top; margin-right: 8px; font-size: 22px; margin-left: 8px; &:before { font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; content: '' !important; } &[icon='image']:before { content: "\ee4a" !important; color: #8044de; } &[icon='audio']:before { content: "\ecf6" !important; color: #1ECC95; } &[icon='video']:before { content: "\ed20" !important; color: #e54d42; } &[icon='document']:before { content: "\ed0e" !important; color: #0081ff; } &[icon='unknown']:before { content: "\ed12" !important; color: #a5673f; } } } .uploader-file-size { width: auto; text-align: center; margin: 0 24px; } .uploader-file-status { width: auto; margin: 0 24px; text-align: center; &.text { width: 100px; } } .uploader-file-actions { width: auto; text-align: center; display: flex; align-items: center; margin-right: 5px; span { flex: 1; display: none; cursor: pointer; margin-right: 8px; font-size: 18px; &:before { font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; content: ""; transition: color 0.3s; } &:hover { color: #1ECC95; } } .uploader-file-pause:before { content: "\efd7"; } .uploader-file-resume:before { content: "\f00a"; } .uploader-file-retry:before { content: "\f064"; } .uploader-file-remove { display: block; font-size: 22px; &:before { content: "\eb98"; } } } } &.md5 .uploader-file-info .uploader-file-actions .uploader-file-resume { display: none; } } .uploader-file[status='uploading'] .uploader-file-info .uploader-file-actions .uploader-file-pause, .uploader-file[status='waiting'] .uploader-file-info .uploader-file-actions .uploader-file-pause, .uploader-file[status='paused'] .uploader-file-info .uploader-file-actions .uploader-file-resume, .uploader-file[status='error'] .uploader-file-info .uploader-file-actions .uploader-file-retry { display: block; } .uploader-file[status='error'] .uploader-file-progress { background: #f7cac6; } .uploader-file[status='success'] .uploader-file-info .uploader-file-status.text { color: #1bb886; } .uploader-file[status='error'] .uploader-file-info .uploader-file-status.text { color: #ce453b; } } } &.collapse { .file-title { background-color: #e7ecf2; } .file-list { height: 0; } } } } } .no-file { position: absolute; top: 45%; left: 50%; color: #999; font-size: 16px; transform: translate(-50%, -50%); } .custom-status { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } &.global-uploader-single { .hc-global-upload-btn { position: relative; } } }