tianheng-ui 0.0.59 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/lib/index.js +41 -3
  2. package/lib/theme-chalk/styles/upload.scss +744 -598
  3. package/lib/tianheng-ui.js +23 -38
  4. package/package.json +1 -2
  5. package/packages/Button/index.vue +4 -4
  6. package/packages/CodeEditor/index.vue +1 -1
  7. package/packages/FormMaking/GenerateForm.vue +69 -35
  8. package/packages/FormMaking/WidgetForm.vue +12 -5
  9. package/packages/FormMaking/custom/items/button.vue +2 -2
  10. package/packages/FormMaking/custom/items/input.vue +0 -3
  11. package/packages/{upload → Upload}/ajax.js +0 -0
  12. package/packages/{upload → Upload}/index.js +0 -0
  13. package/packages/{upload → Upload}/index.vue +1 -1
  14. package/packages/{upload → Upload}/upload-dragger.vue +1 -1
  15. package/packages/{upload → Upload}/upload-list.vue +12 -14
  16. package/packages/{upload → Upload}/upload.vue +18 -36
  17. package/packages/Workflow/penal/listeners/utilSelf.js +3 -1
  18. package/packages/upload/locale.js +0 -9
package/lib/theme-chalk/styles/upload.scss CHANGED
@@ -1,598 +1,744 @@
1
- // .th-upload {
2
- // display: inline-block;
3
- // text-align: center;
4
- // cursor: pointer;
5
- // outline: none;
6
- // .th-upload-list__input {
7
- // display: none;
8
- // }
9
-
10
- // .th-upload-list__tip {
11
- // font-size: 12px;
12
- // color: $color-text-regular;
13
- // margin-top: 7px;
14
- // }
15
-
16
- // iframe {
17
- // position: absolute;
18
- // z-index: -1;
19
- // top: 0;
20
- // left: 0;
21
- // opacity: 0;
22
- // filter: alpha(opacity=0);
23
- // }
24
-
25
- // /* 照片墙模式 */
26
- // .th-upload--picture-card {
27
- // background-color: #fbfdff;
28
- // border: 1px dashed #c0ccda;
29
- // border-radius: 6px;
30
- // box-sizing: border-box;
31
- // width: 148px;
32
- // height: 148px;
33
- // cursor: pointer;
34
- // line-height: 146px;
35
- // vertical-align: top;
36
-
37
- // i {
38
- // font-size: 28px;
39
- // color: #8c939d;
40
- // }
41
-
42
- // &:hover {
43
- // border-color: $color-parimary;
44
- // color: $color-parimary;
45
- // }
46
- // }
47
- // &:focus {
48
- // border-color: $color-parimary;
49
- // color: $color-parimary;
50
-
51
- // .th-upload-dragger {
52
- // border-color: $color-parimary;
53
- // }
54
- // }
55
- // }
56
-
57
- // .th-upload-dragger {
58
- // background-color: #fff;
59
- // border: 1px dashed #d9d9d9;
60
- // border-radius: 6px;
61
- // box-sizing: border-box;
62
- // width: 360px;
63
- // height: 180px;
64
- // text-align: center;
65
- // cursor: pointer;
66
- // position: relative;
67
- // overflow: hidden;
68
-
69
- // .th-icon-upload {
70
- // font-size: 67px;
71
- // color: $color-text-placeholder;
72
- // margin: 40px 0 16px;
73
- // line-height: 50px;
74
- // }
75
-
76
- // + .th-upload__tip {
77
- // text-align: center;
78
- // }
79
-
80
- // ~ .th-upload__files {
81
- // border-top: $border-color-base;
82
- // margin-top: 7px;
83
- // padding-top: 5px;
84
- // }
85
-
86
- // .th-upload__text {
87
- // color: $color-text-regular;
88
- // font-size: 14px;
89
- // text-align: center;
90
-
91
- // em {
92
- // color: $color-parimary;
93
- // font-style: normal;
94
- // }
95
- // }
96
-
97
- // &:hover {
98
- // border-color: $color-parimary;
99
- // }
100
-
101
- // .is-dragover {
102
- // background-color: rgba(32, 159, 255, .06);
103
- // border: 2px dashed $color-parimary;
104
- // }
105
- // }
106
-
107
- // .th-upload-list {
108
- // margin: 0;
109
- // padding: 0;
110
- // list-style: none;
111
-
112
- // .th-upload-list__item {
113
- // transition: all .5s cubic-bezier(.55,0,.1,1);
114
- // font-size: 14px;
115
- // color: $color-text-regular;
116
- // line-height: 1.8;
117
- // margin-top: 5px;
118
- // position: relative;
119
- // box-sizing: border-box;
120
- // border-radius: 4px;
121
- // width: 100%;
122
-
123
- // .th-progress {
124
- // position: absolute;
125
- // top: 20px;
126
- // width: 100%;
127
- // }
128
-
129
- // .th-progress__text {
130
- // position: absolute;
131
- // right: 0;
132
- // top: -13px;
133
- // }
134
-
135
- // .th-progress-bar {
136
- // margin-right: 0;
137
- // padding-right: 0;
138
- // }
139
-
140
- // &:first-child {
141
- // margin-top: 10px;
142
- // }
143
-
144
- // & .th-icon-upload-success {
145
- // color: $color-success;
146
- // }
147
-
148
- // .th-icon-close {
149
- // display: none;
150
- // position: absolute;
151
- // top: 5px;
152
- // right: 5px;
153
- // cursor: pointer;
154
- // opacity: .75;
155
- // color: $color-text-regular;
156
- // //transform: scale(.7);
157
-
158
- // &:hover {
159
- // opacity: 1;
160
- // }
161
- // }
162
-
163
- // & .th-icon-close-tip {
164
- // display: none;
165
- // position: absolute;
166
- // top: 5px;
167
- // right: 5px;
168
- // font-size: 12px;
169
- // cursor: pointer;
170
- // opacity: 1;
171
- // color: $color-parimary;
172
- // }
173
-
174
- // &:hover {
175
- // background-color: $background-color-base;
176
-
177
- // .th-icon-close {
178
- // display: inline-block;
179
- // }
180
-
181
- // .th-progress__text {
182
- // display: none;
183
- // }
184
- // }
185
-
186
- // .is-success {
187
- // .th-upload-list__item-status-label {
188
- // display: block;
189
- // }
190
-
191
- // .th-upload-list__item-name:hover, .th-upload-list__item-name:focus {
192
- // color: $color-parimary;
193
- // cursor: pointer;
194
- // }
195
-
196
- // &:focus:not(:hover) { /* 键盘focus */
197
- // .th-icon-close-tip {
198
- // display: inline-block;
199
- // }
200
- // }
201
-
202
- // &:not(.focusing):focus, &:active { /* click时 */
203
- // outline-width: 0;
204
- // .th-icon-close-tip {
205
- // display: none;
206
- // }
207
- // }
208
-
209
- // &:hover, &:focus {
210
- // .th-upload-list__item-status-label {
211
- // display: none;
212
- // }
213
- // }
214
- // }
215
- // }
216
-
217
- // .is-disabled {
218
- // .th-upload-list__item:hover .th-upload-list__item-status-label {
219
- // display: block;
220
- // }
221
- // }
222
-
223
- // .th-upload-list__item-name {
224
- // color: $color-text-regular;
225
- // display: block;
226
- // margin-right: 40px;
227
- // overflow: hidden;
228
- // padding-left: 4px;
229
- // text-overflow: ellipsis;
230
- // transition: color .3s;
231
- // white-space: nowrap;
232
-
233
- // [class^="th-icon"] {
234
- // height: 100%;
235
- // margin-right: 7px;
236
- // color: $color-text-secondary;
237
- // line-height: inherit;
238
- // }
239
- // }
240
-
241
- // .th-upload-list__item-status-label {
242
- // position: absolute;
243
- // right: 5px;
244
- // top: 0;
245
- // line-height: inherit;
246
- // display: none;
247
- // }
248
-
249
- // .th-upload-list__item-delete {
250
- // position: absolute;
251
- // right: 10px;
252
- // top: 0;
253
- // font-size: 12px;
254
- // color: $color-text-regular;
255
- // display: none;
256
-
257
- // &:hover {
258
- // color: $color-parimary;
259
- // }
260
- // }
261
-
262
- // .th-upload-list--picture-card {
263
- // margin: 0;
264
- // display: inline;
265
- // vertical-align: top;
266
-
267
- // .th-upload-list__item {
268
- // overflow: hidden;
269
- // background-color: #fff;
270
- // border: 1px solid #c0ccda;
271
- // border-radius: 6px;
272
- // box-sizing: border-box;
273
- // width: 148px;
274
- // height: 148px;
275
- // margin: 0 8px 8px 0;
276
- // display: inline-block;
277
-
278
- // .th-icon-check,
279
- // .th-icon-circle-check {
280
- // color: $background-color-white;
281
- // }
282
-
283
- // .th-icon-close {
284
- // display: none;
285
- // }
286
- // &:hover {
287
- // .th-upload-list__item-status-label {
288
- // display: none;
289
- // }
290
-
291
- // .th-progress__text {
292
- // display: block;
293
- // }
294
- // }
295
- // }
296
-
297
- // .th-upload-list__item-name {
298
- // display: none;
299
- // }
300
-
301
- // .th-upload-list__item-thumbnail {
302
- // width: 100%;
303
- // height: 100%;
304
- // }
305
-
306
- // .th-upload-list__item-status-label {
307
- // position: absolute;
308
- // right: -15px;
309
- // top: -6px;
310
- // width: 40px;
311
- // height: 24px;
312
- // background: #13ce66;
313
- // text-align: center;
314
- // transform: rotate(45deg);
315
- // box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
316
-
317
- // i {
318
- // font-size: 12px;
319
- // margin-top: 11px;
320
- // transform: rotate(-45deg);
321
- // }
322
- // }
323
-
324
- // .th-upload-list__item-actions {
325
- // position: absolute;
326
- // width: 100%;
327
- // height: 100%;
328
- // left: 0;
329
- // top: 0;
330
- // cursor: default;
331
- // text-align: center;
332
- // color: #fff;
333
- // opacity: 0;
334
- // font-size: 20px;
335
- // background-color: rgba(0, 0, 0, .5);
336
- // transition: opacity .3s;
337
- // &::after {
338
- // display: inline-block;
339
- // content: "";
340
- // height: 100%;
341
- // vertical-align: middle
342
- // }
343
-
344
- // span {
345
- // display: none;
346
- // cursor: pointer;
347
- // }
348
-
349
- // span + span {
350
- // margin-left: 15px;
351
- // }
352
-
353
- // .th-upload-list__item-delete {
354
- // position: static;
355
- // font-size: inherit;
356
- // color: inherit;
357
- // }
358
-
359
- // &:hover {
360
- // opacity: 1;
361
- // span {
362
- // display: inline-block;
363
- // }
364
- // }
365
- // }
366
-
367
- // .th-progress {
368
- // top: 50%;
369
- // left: 50%;
370
- // transform: translate(-50%, -50%);
371
- // bottom: auto;
372
- // width: 126px;
373
-
374
- // .th-progress__text {
375
- // top: 50%;
376
- // }
377
- // }
378
- // }
379
-
380
- // .th-upload--picture {
381
- // .th-upload-list__item {
382
- // overflow: hidden;
383
- // z-index: 0;
384
- // background-color: #fff;
385
- // border: 1px solid #c0ccda;
386
- // border-radius: 6px;
387
- // box-sizing: border-box;
388
- // margin-top: 10px;
389
- // padding: 10px 10px 10px 90px;
390
- // height: 92px;
391
-
392
- // .th-icon-check,
393
- // .th-icon-circle-check {
394
- // color: $background-color-white;
395
- // }
396
-
397
- // &:hover {
398
- // .th-upload-list__item-status-label {
399
- // background: transparent;
400
- // box-shadow: none;
401
- // top: -2px;
402
- // right: -12px;
403
- // }
404
-
405
- // .th-progress__text {
406
- // display: block;
407
- // }
408
- // }
409
-
410
- // &.is-success {
411
- // .th-upload-list__item-name {
412
- // line-height: 70px;
413
- // margin-top: 0;
414
- // i {
415
- // display: none;
416
- // }
417
- // }
418
- // }
419
- // }
420
-
421
- // .th-upload-list__item-thumbnail {
422
- // vertical-align: middle;
423
- // display: inline-block;
424
- // width: 70px;
425
- // height: 70px;
426
- // float: left;
427
- // position: relative;
428
- // z-index: 1;
429
- // margin-left: -80px;
430
- // background-color: $background-color-white
431
- // }
432
-
433
- // .th-upload-list__item-name {
434
- // display: block;
435
- // margin-top: 20px;
436
-
437
- // i {
438
- // font-size: 70px;
439
- // line-height: 1;
440
- // position: absolute;
441
- // left: 9px;
442
- // top: 10px;
443
- // }
444
- // }
445
-
446
- // .th-upload-list__item-status-label {
447
- // position: absolute;
448
- // right: -17px;
449
- // top: -7px;
450
- // width: 46px;
451
- // height: 26px;
452
- // background: #13ce66;
453
- // text-align: center;
454
- // transform: rotate(45deg);
455
- // box-shadow: 0 1px 1px #ccc;
456
-
457
- // i {
458
- // font-size: 12px;
459
- // margin-top: 12px;
460
- // transform: rotate(-45deg);
461
- // }
462
- // }
463
-
464
- // .th-progress {
465
- // position: relative;
466
- // top: -7px;
467
- // }
468
- // }
469
- // }
470
-
471
- // .th-upload-cover {
472
- // position: absolute;
473
- // left: 0;
474
- // top: 0;
475
- // width: 100%;
476
- // height: 100%;
477
- // overflow: hidden;
478
- // z-index: 10;
479
- // cursor: default;
480
- // // @include utils-vertical-center;
481
-
482
- // img {
483
- // display: block;
484
- // width: 100%;
485
- // height: 100%;
486
- // }
487
-
488
- // .th-upload-list__label {
489
- // position: absolute;
490
- // right: -15px;
491
- // top: -6px;
492
- // width: 40px;
493
- // height: 24px;
494
- // background: #13ce66;
495
- // text-align: center;
496
- // transform: rotate(45deg);
497
- // box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
498
-
499
- // i {
500
- // font-size: 12px;
501
- // margin-top: 11px;
502
- // transform: rotate(-45deg);
503
- // color: #fff;
504
- // }
505
- // }
506
-
507
- // .th-upload-list__progress {
508
- // display: inline-block;
509
- // vertical-align: middle;
510
- // position: static;
511
- // width: 243px;
512
-
513
- // + .th-upload__inner {
514
- // opacity: 0;
515
- // }
516
- // }
517
-
518
- // .th-upload-list__content {
519
- // position: absolute;
520
- // top: 0;
521
- // left: 0;
522
- // width: 100%;
523
- // height: 100%;
524
- // }
525
-
526
- // .th-upload-list__interact {
527
- // position: absolute;
528
- // bottom: 0;
529
- // left: 0;
530
- // width: 100%;
531
- // height: 100%;
532
- // background-color: rgba(#000, .72);
533
- // text-align: center;
534
-
535
- // .btn {
536
- // display: inline-block;
537
- // color: $background-color-white;
538
- // font-size: 14px;
539
- // cursor: pointer;
540
- // vertical-align: middle;
541
- // transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
542
- // margin-top: 60px;
543
- // i{
544
- // margin-top: 0;
545
- // }
546
-
547
- // span {
548
- // opacity: 0;
549
- // transition: opacity .15s linear;
550
- // }
551
-
552
- // &:not(:first-child) {
553
- // margin-left: 35px;
554
- // }
555
-
556
- // &:hover {
557
- // transform: translateY(-13px);
558
-
559
- // span {
560
- // opacity: 1;
561
- // }
562
- // }
563
-
564
- // i {
565
- // color: $background-color-white;
566
- // display: block;
567
- // font-size: 24px;
568
- // line-height: inherit;
569
- // margin: 0 auto 5px;
570
- // }
571
- // }
572
- // }
573
-
574
- // .th-upload-list__title {
575
- // position: absolute;
576
- // bottom: 0;
577
- // left: 0;
578
- // background-color: $background-color-white;
579
- // height: 36px;
580
- // width: 100%;
581
- // overflow: hidden;
582
- // text-overflow: ellipsis;
583
- // white-space: nowrap;
584
- // font-weight: normal;
585
- // text-align: left;
586
- // padding: 0 10px;
587
- // margin: 0;
588
- // line-height: 36px;
589
- // font-size: 14px;
590
- // color: $color-text-primary;
591
- // }
592
-
593
- // + .th-upload__inner {
594
- // opacity: 0;
595
- // position: relative;
596
- // z-index: 1;
597
- // }
598
- // }
1
+ .th-upload {
2
+ display: inline-block;
3
+ text-align: center;
4
+ cursor: pointer;
5
+ outline: none;
6
+ .th-upload__input {
7
+ display: none;
8
+ }
9
+
10
+ .th-upload-list__tip {
11
+ font-size: 12px;
12
+ color: $color-text-regular;
13
+ margin-top: 7px;
14
+ }
15
+
16
+ iframe {
17
+ position: absolute;
18
+ z-index: -1;
19
+ top: 0;
20
+ left: 0;
21
+ opacity: 0;
22
+ filter: alpha(opacity=0);
23
+ }
24
+
25
+ /* 照片墙模式 */
26
+ .th-upload--picture-card {
27
+ background-color: #fbfdff;
28
+ border: 1px dashed #c0ccda;
29
+ border-radius: 6px;
30
+ box-sizing: border-box;
31
+ width: 148px;
32
+ height: 148px;
33
+ cursor: pointer;
34
+ line-height: 146px;
35
+ vertical-align: top;
36
+
37
+ i {
38
+ font-size: 28px;
39
+ color: #8c939d;
40
+ }
41
+
42
+ &:hover {
43
+ border-color: $color-parimary;
44
+ color: $color-parimary;
45
+ }
46
+ }
47
+ &:focus {
48
+ border-color: $color-parimary;
49
+ color: $color-parimary;
50
+
51
+ .th-upload-dragger {
52
+ border-color: $color-parimary;
53
+ }
54
+ }
55
+ }
56
+
57
+ .th-upload-dragger {
58
+ background-color: #fff;
59
+ border: 1px dashed #d9d9d9;
60
+ border-radius: 6px;
61
+ box-sizing: border-box;
62
+ width: 360px;
63
+ height: 180px;
64
+ text-align: center;
65
+ cursor: pointer;
66
+ position: relative;
67
+ overflow: hidden;
68
+
69
+ .el-icon-upload {
70
+ font-size: 67px;
71
+ color: $color-text-placeholder;
72
+ margin: 40px 0 16px;
73
+ line-height: 50px;
74
+ }
75
+
76
+ + .th-upload__tip {
77
+ text-align: center;
78
+ }
79
+
80
+ ~ .th-upload__files {
81
+ border-top: $border-color-base;
82
+ margin-top: 7px;
83
+ padding-top: 5px;
84
+ }
85
+
86
+ .th-upload__text {
87
+ color: $color-text-regular;
88
+ font-size: 14px;
89
+ text-align: center;
90
+
91
+ em {
92
+ color: $color-parimary;
93
+ font-style: normal;
94
+ }
95
+ }
96
+
97
+ &:hover {
98
+ border-color: $color-parimary;
99
+ }
100
+
101
+ .is-dragover {
102
+ background-color: rgba(32, 159, 255, .06);
103
+ border: 2px dashed $color-parimary;
104
+ }
105
+ }
106
+
107
+ .th-upload-list {
108
+ margin: 0;
109
+ padding: 0;
110
+ list-style: none;
111
+ }
112
+ .th-upload-list__item {
113
+ transition: all .5s cubic-bezier(.55,0,.1,1);
114
+ font-size: 14px;
115
+ color: $color-text-regular;
116
+ line-height: 1.8;
117
+ margin-top: 5px;
118
+ position: relative;
119
+ box-sizing: border-box;
120
+ border-radius: 4px;
121
+ width: 100%;
122
+
123
+ .th-progress {
124
+ position: absolute;
125
+ top: 20px;
126
+ width: 100%;
127
+ }
128
+
129
+ .th-progress__text {
130
+ position: absolute;
131
+ right: 0;
132
+ top: -13px;
133
+ }
134
+
135
+ .th-progress-bar {
136
+ margin-right: 0;
137
+ padding-right: 0;
138
+ }
139
+
140
+ &:first-child {
141
+ margin-top: 10px;
142
+ }
143
+
144
+ & .el-icon-upload-success {
145
+ color: $color-success;
146
+ }
147
+
148
+ .el-icon-close {
149
+ display: none;
150
+ position: absolute;
151
+ top: 5px;
152
+ right: 5px;
153
+ cursor: pointer;
154
+ opacity: .75;
155
+ color: $color-text-regular;
156
+ //transform: scale(.7);
157
+
158
+ &:hover {
159
+ opacity: 1;
160
+ }
161
+ }
162
+
163
+ & .el-icon-close-tip {
164
+ display: none;
165
+ position: absolute;
166
+ top: 5px;
167
+ right: 5px;
168
+ font-size: 12px;
169
+ cursor: pointer;
170
+ opacity: 1;
171
+ color: $color-parimary;
172
+ }
173
+
174
+ &:hover {
175
+ background-color: $background-color-base;
176
+
177
+ .el-icon-close {
178
+ display: inline-block;
179
+ }
180
+
181
+ .th-progress__text {
182
+ display: none;
183
+ }
184
+ }
185
+
186
+ }
187
+ .is-success {
188
+ .th-upload-list__item-status-label {
189
+ display: block;
190
+ }
191
+
192
+ .th-upload-list__item-name:hover, .th-upload-list__item-name:focus {
193
+ color: $color-parimary;
194
+ cursor: pointer;
195
+ }
196
+
197
+ &:focus:not(:hover) { /* 键盘focus */
198
+ .el-icon-close-tip {
199
+ display: inline-block;
200
+ }
201
+ }
202
+
203
+ &:not(.focusing):focus, &:active { /* click时 */
204
+ outline-width: 0;
205
+ .el-icon-close-tip {
206
+ display: none;
207
+ }
208
+ }
209
+
210
+ &:hover, &:focus {
211
+ .th-upload-list__item-status-label {
212
+ display: none;
213
+ }
214
+ }
215
+ }
216
+
217
+ .is-disabled {
218
+ .th-upload-list__item:hover .th-upload-list__item-status-label {
219
+ display: block;
220
+ }
221
+ }
222
+
223
+ .th-upload-list__item-name {
224
+ color: $color-text-regular;
225
+ display: block;
226
+ margin-right: 40px;
227
+ overflow: hidden;
228
+ padding-left: 4px;
229
+ text-overflow: ellipsis;
230
+ transition: color .3s;
231
+ white-space: nowrap;
232
+
233
+ [class^="th-icon"] {
234
+ height: 100%;
235
+ margin-right: 7px;
236
+ color: $color-text-secondary;
237
+ line-height: inherit;
238
+ }
239
+ }
240
+
241
+ .th-upload-list__item-status-label {
242
+ position: absolute;
243
+ right: 5px;
244
+ top: 0;
245
+ line-height: inherit;
246
+ display: none;
247
+ }
248
+
249
+ .th-upload-list__item-delete {
250
+ position: absolute;
251
+ right: 10px;
252
+ top: 0;
253
+ font-size: 12px;
254
+ color: $color-text-regular;
255
+ display: none;
256
+
257
+ &:hover {
258
+ color: $color-parimary;
259
+ }
260
+ }
261
+
262
+ .th-upload-list--picture-card {
263
+ margin: 0;
264
+ display: inline;
265
+ vertical-align: top;
266
+
267
+ .th-upload-list__item {
268
+ overflow: hidden;
269
+ background-color: #fff;
270
+ border: 1px solid #c0ccda;
271
+ border-radius: 6px;
272
+ box-sizing: border-box;
273
+ width: 148px;
274
+ height: 148px;
275
+ margin: 0 8px 8px 0;
276
+ display: inline-block;
277
+
278
+ .el-icon-check,
279
+ .el-icon-circle-check {
280
+ color: $background-color-white;
281
+ }
282
+
283
+ .el-icon-close {
284
+ display: none;
285
+ }
286
+ &:hover {
287
+ .th-upload-list__item-status-label {
288
+ display: none;
289
+ }
290
+
291
+ .th-progress__text {
292
+ display: block;
293
+ }
294
+ }
295
+ }
296
+
297
+ .th-upload-list__item-name {
298
+ display: none;
299
+ }
300
+
301
+ .th-upload-list__item-thumbnail {
302
+ width: 100%;
303
+ height: 100%;
304
+ }
305
+
306
+ .th-upload-list__item-status-label {
307
+ position: absolute;
308
+ right: -15px;
309
+ top: -6px;
310
+ width: 40px;
311
+ height: 24px;
312
+ background: #13ce66;
313
+ text-align: center;
314
+ transform: rotate(45deg);
315
+ box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
316
+
317
+ i {
318
+ font-size: 12px;
319
+ margin-top: 11px;
320
+ transform: rotate(-45deg);
321
+ }
322
+ }
323
+
324
+ .th-upload-list__item-actions {
325
+ position: absolute;
326
+ width: 100%;
327
+ height: 100%;
328
+ left: 0;
329
+ top: 0;
330
+ cursor: default;
331
+ text-align: center;
332
+ color: #fff;
333
+ opacity: 0;
334
+ font-size: 20px;
335
+ background-color: rgba(0, 0, 0, .5);
336
+ transition: opacity .3s;
337
+ &::after {
338
+ display: inline-block;
339
+ content: "";
340
+ height: 100%;
341
+ vertical-align: middle
342
+ }
343
+
344
+ span {
345
+ display: none;
346
+ cursor: pointer;
347
+ }
348
+
349
+ span + span {
350
+ margin-left: 15px;
351
+ }
352
+
353
+ .th-upload-list__item-delete {
354
+ position: static;
355
+ font-size: inherit;
356
+ color: inherit;
357
+ }
358
+
359
+ &:hover {
360
+ opacity: 1;
361
+ span {
362
+ display: inline-block;
363
+ }
364
+ }
365
+ }
366
+
367
+ .th-progress {
368
+ top: 50%;
369
+ left: 50%;
370
+ transform: translate(-50%, -50%);
371
+ bottom: auto;
372
+ width: 126px;
373
+
374
+ .th-progress__text {
375
+ top: 50%;
376
+ }
377
+ }
378
+ }
379
+
380
+ .th-upload-list--picture {
381
+ .th-upload-list__item {
382
+ overflow: hidden;
383
+ z-index: 0;
384
+ background-color: #fff;
385
+ border: 1px solid #c0ccda;
386
+ border-radius: 6px;
387
+ box-sizing: border-box;
388
+ margin-top: 10px;
389
+ padding: 10px 10px 10px 90px;
390
+ height: 92px;
391
+
392
+ .el-icon-check,
393
+ .el-icon-circle-check {
394
+ color: $background-color-white;
395
+ }
396
+
397
+ .el-icon-close {
398
+ display: none;
399
+ position: absolute;
400
+ top: 5px;
401
+ right: 5px;
402
+ cursor: pointer;
403
+ opacity: .75;
404
+ color: $color-text-regular;
405
+ //transform: scale(.7);
406
+
407
+ &:hover {
408
+ opacity: 1;
409
+ }
410
+ }
411
+
412
+ & .el-icon-close-tip {
413
+ display: none;
414
+ position: absolute;
415
+ top: 5px;
416
+ right: 5px;
417
+ font-size: 12px;
418
+ cursor: pointer;
419
+ opacity: 1;
420
+ color: $color-parimary;
421
+ }
422
+
423
+ &:hover {
424
+ background-color: $background-color-base;
425
+
426
+ .el-icon-close {
427
+ display: inline-block;
428
+ }
429
+
430
+ .th-progress__text {
431
+ display: none;
432
+ }
433
+ }
434
+ }
435
+
436
+ .th-upload-list__item-name {
437
+ display: none;
438
+ }
439
+
440
+ .th-upload-list__item-thumbnail {
441
+ vertical-align: middle;
442
+ display: inline-block;
443
+ width: 70px;
444
+ height: 70px;
445
+ float: left;
446
+ position: relative;
447
+ z-index: 1;
448
+ margin-left: -80px;
449
+ background-color: #fff;
450
+ }
451
+
452
+ .th-upload-list__item-status-label {
453
+ position: absolute;
454
+ right: -15px;
455
+ top: -6px;
456
+ width: 40px;
457
+ height: 24px;
458
+ background: #13ce66;
459
+ text-align: center;
460
+ transform: rotate(45deg);
461
+ box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
462
+
463
+ i {
464
+ font-size: 12px;
465
+ margin-top: 11px;
466
+ transform: rotate(-45deg);
467
+ }
468
+ }
469
+
470
+ .th-upload-list__item-actions {
471
+ position: absolute;
472
+ width: 100%;
473
+ height: 100%;
474
+ left: 0;
475
+ top: 0;
476
+ cursor: default;
477
+ text-align: center;
478
+ color: #fff;
479
+ opacity: 0;
480
+ font-size: 20px;
481
+ background-color: rgba(0, 0, 0, .5);
482
+ transition: opacity .3s;
483
+ &::after {
484
+ display: inline-block;
485
+ content: "";
486
+ height: 100%;
487
+ vertical-align: middle
488
+ }
489
+
490
+ span {
491
+ display: none;
492
+ cursor: pointer;
493
+ }
494
+
495
+ span + span {
496
+ margin-left: 15px;
497
+ }
498
+
499
+ .th-upload-list__item-delete {
500
+ position: static;
501
+ font-size: inherit;
502
+ color: inherit;
503
+ }
504
+
505
+ &:hover {
506
+ opacity: 1;
507
+ span {
508
+ display: inline-block;
509
+ }
510
+ }
511
+ }
512
+
513
+ .th-progress {
514
+ top: 50%;
515
+ left: 50%;
516
+ transform: translate(-50%, -50%);
517
+ bottom: auto;
518
+ width: 126px;
519
+
520
+ .th-progress__text {
521
+ top: 50%;
522
+ }
523
+ }
524
+ }
525
+
526
+ .th-upload--picture {
527
+ .th-upload-list__item {
528
+ overflow: hidden;
529
+ z-index: 0;
530
+ background-color: #fff;
531
+ border: 1px solid #c0ccda;
532
+ border-radius: 6px;
533
+ box-sizing: border-box;
534
+ margin-top: 10px;
535
+ padding: 10px 10px 10px 90px;
536
+ height: 92px;
537
+
538
+ .el-icon-check,
539
+ .el-icon-circle-check {
540
+ color: $background-color-white;
541
+ }
542
+
543
+ &:hover {
544
+ .th-upload-list__item-status-label {
545
+ background: transparent;
546
+ box-shadow: none;
547
+ top: -2px;
548
+ right: -12px;
549
+ }
550
+
551
+ .th-progress__text {
552
+ display: block;
553
+ }
554
+ }
555
+
556
+ &.is-success {
557
+ .th-upload-list__item-name {
558
+ line-height: 70px;
559
+ margin-top: 0;
560
+ i {
561
+ display: none;
562
+ }
563
+ }
564
+ }
565
+ }
566
+
567
+ .th-upload-list__item-thumbnail {
568
+ vertical-align: middle;
569
+ display: inline-block;
570
+ width: 70px;
571
+ height: 70px;
572
+ float: left;
573
+ position: relative;
574
+ z-index: 1;
575
+ margin-left: -80px;
576
+ background-color: $background-color-white
577
+ }
578
+
579
+ .th-upload-list__item-name {
580
+ display: block;
581
+ margin-top: 20px;
582
+
583
+ i {
584
+ font-size: 70px;
585
+ line-height: 1;
586
+ position: absolute;
587
+ left: 9px;
588
+ top: 10px;
589
+ }
590
+ }
591
+
592
+ .th-upload-list__item-status-label {
593
+ position: absolute;
594
+ right: -17px;
595
+ top: -7px;
596
+ width: 46px;
597
+ height: 26px;
598
+ background: #13ce66;
599
+ text-align: center;
600
+ transform: rotate(45deg);
601
+ box-shadow: 0 1px 1px #ccc;
602
+
603
+ i {
604
+ font-size: 12px;
605
+ margin-top: 12px;
606
+ transform: rotate(-45deg);
607
+ }
608
+ }
609
+
610
+ .th-progress {
611
+ position: relative;
612
+ top: -7px;
613
+ }
614
+ }
615
+
616
+
617
+ .th-upload-cover {
618
+ position: absolute;
619
+ left: 0;
620
+ top: 0;
621
+ width: 100%;
622
+ height: 100%;
623
+ overflow: hidden;
624
+ z-index: 10;
625
+ cursor: default;
626
+ // @include utils-vertical-center;
627
+
628
+ img {
629
+ display: block;
630
+ width: 100%;
631
+ height: 100%;
632
+ }
633
+
634
+ .th-upload-list__label {
635
+ position: absolute;
636
+ right: -15px;
637
+ top: -6px;
638
+ width: 40px;
639
+ height: 24px;
640
+ background: #13ce66;
641
+ text-align: center;
642
+ transform: rotate(45deg);
643
+ box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
644
+
645
+ i {
646
+ font-size: 12px;
647
+ margin-top: 11px;
648
+ transform: rotate(-45deg);
649
+ color: #fff;
650
+ }
651
+ }
652
+
653
+ .th-upload-list__progress {
654
+ display: inline-block;
655
+ vertical-align: middle;
656
+ position: static;
657
+ width: 243px;
658
+
659
+ + .th-upload__inner {
660
+ opacity: 0;
661
+ }
662
+ }
663
+
664
+ .th-upload-list__content {
665
+ position: absolute;
666
+ top: 0;
667
+ left: 0;
668
+ width: 100%;
669
+ height: 100%;
670
+ }
671
+
672
+ .th-upload-list__interact {
673
+ position: absolute;
674
+ bottom: 0;
675
+ left: 0;
676
+ width: 100%;
677
+ height: 100%;
678
+ background-color: rgba(#000, .72);
679
+ text-align: center;
680
+
681
+ .btn {
682
+ display: inline-block;
683
+ color: $background-color-white;
684
+ font-size: 14px;
685
+ cursor: pointer;
686
+ vertical-align: middle;
687
+ transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
688
+ margin-top: 60px;
689
+ i{
690
+ margin-top: 0;
691
+ }
692
+
693
+ span {
694
+ opacity: 0;
695
+ transition: opacity .15s linear;
696
+ }
697
+
698
+ &:not(:first-child) {
699
+ margin-left: 35px;
700
+ }
701
+
702
+ &:hover {
703
+ transform: translateY(-13px);
704
+
705
+ span {
706
+ opacity: 1;
707
+ }
708
+ }
709
+
710
+ i {
711
+ color: $background-color-white;
712
+ display: block;
713
+ font-size: 24px;
714
+ line-height: inherit;
715
+ margin: 0 auto 5px;
716
+ }
717
+ }
718
+ }
719
+
720
+ .th-upload-list__title {
721
+ position: absolute;
722
+ bottom: 0;
723
+ left: 0;
724
+ background-color: $background-color-white;
725
+ height: 36px;
726
+ width: 100%;
727
+ overflow: hidden;
728
+ text-overflow: ellipsis;
729
+ white-space: nowrap;
730
+ font-weight: normal;
731
+ text-align: left;
732
+ padding: 0 10px;
733
+ margin: 0;
734
+ line-height: 36px;
735
+ font-size: 14px;
736
+ color: $color-text-primary;
737
+ }
738
+
739
+ + .th-upload__inner {
740
+ opacity: 0;
741
+ position: relative;
742
+ z-index: 1;
743
+ }
744
+ }