tianheng-ui 0.0.57 → 0.0.59

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.
package/lib/index.js CHANGED
@@ -34,7 +34,7 @@ if (typeof window !== "undefined" && window.Vue) {
34
34
  }
35
35
 
36
36
  export default {
37
- version: "0.0.57",
37
+ version: "0.0.59",
38
38
  install,
39
39
  ...components
40
40
  };
@@ -27,3 +27,4 @@
27
27
  @import "./styles/row.scss";
28
28
  @import "./styles/col.scss";
29
29
  @import "./styles/button.scss";
30
+ @import "./styles/upload.scss";
@@ -0,0 +1,598 @@
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
+ // }