unika-components 1.2.5 → 1.2.6

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.
@@ -7,6 +7,16 @@
7
7
  width: 30px; /* 根据需要调整 */
8
8
  margin-right: 5px;
9
9
  }
10
+
11
+ .global-v ::v-deep .global-v-show iframe {
12
+ position: absolute;
13
+ left: 0;
14
+ top: 50%;
15
+ transform: translateY(-60%);
16
+ min-height: 45%;
17
+ max-height: 100%;
18
+ width: 100%;
19
+ }
10
20
 
11
21
  .unika-watermark {
12
22
  position: fixed;
@@ -25,63 +35,118 @@
25
35
  background-size: 220px 140px;
26
36
  opacity: 0.5;
27
37
  }
28
-
29
- .global-v ::v-deep .global-v-show iframe {
30
- position: absolute;
31
- left: 0;
32
- top: 50%;
33
- transform: translateY(-60%);
34
- min-height: 45%;
35
- max-height: 100%;
36
- width: 100%;
37
- }
38
38
 
39
- .element-video {
40
- position: absolute;
41
- overflow: hidden;
42
- background-color: transparent;
39
+ .ele-text {
40
+ position: relative;
41
+ }
42
+
43
+ .ele-text .ani-wrap {
44
+ width: 100%;
45
+ height: 100%;
46
+ }
47
+
48
+ .text-common {
49
+ padding: 5px;
50
+ text-orientation: upright;
51
+ white-space: pre-wrap;
52
+ }
53
+
54
+ /* 文本动画类 */
55
+ .text-fadeIn {
56
+ animation: fadeIn 1s ease-in-out;
57
+ }
58
+
59
+ .text-slideIn {
60
+ animation: slideIn 1s ease-in-out;
61
+ }
62
+
63
+ .text-bounceIn {
64
+ animation: bounceIn 1s ease-in-out;
65
+ }
66
+
67
+ /* 基础动画关键帧 */
68
+ @keyframes fadeIn {
69
+ from {
70
+ opacity: 0;
43
71
  }
44
-
45
- .element-video .ani-wrap, .element-video img {
46
- display: block;
47
- width: 100%;
48
- height: 100%;
72
+ to {
73
+ opacity: 1;
49
74
  }
50
-
51
- .video-container {
52
- width: 100%;
53
- height: 100%;
75
+ }
76
+
77
+ @keyframes slideIn {
78
+ from {
79
+ transform: translateY(20px);
80
+ opacity: 0;
54
81
  }
55
-
56
- .video-container iframe {
57
- width: 100%;
58
- height: 100%;
59
- border: none;
82
+ to {
83
+ transform: translateY(0);
84
+ opacity: 1;
60
85
  }
61
-
62
- .video-cover {
63
- position: relative;
64
- width: 100%;
65
- height: 100%;
66
- background-size: cover;
67
- background-position: center;
68
- cursor: pointer;
86
+ }
87
+
88
+ @keyframes bounceIn {
89
+ 0% {
90
+ transform: scale(0.3);
91
+ opacity: 0;
69
92
  }
70
-
71
- .video-cover .play-btn {
72
- position: absolute;
73
- left: 50%;
74
- top: 50%;
75
- transform: translate(-50%, -50%);
76
- width: 50px;
77
- height: 50px;
93
+ 50% {
94
+ transform: scale(1.05);
78
95
  opacity: 0.8;
79
- transition: opacity 0.2s;
80
96
  }
81
-
82
- .video-cover:hover .play-btn {
97
+ 70% {
98
+ transform: scale(0.9);
99
+ opacity: 0.9;
100
+ }
101
+ 100% {
102
+ transform: scale(1);
83
103
  opacity: 1;
84
- }.ele-img {
104
+ }
105
+ }.element-ditu .ani-wrap {
106
+ width: 100%;
107
+ height: 100%;
108
+ overflow: hidden
109
+ }
110
+
111
+ .element-ditu .map {
112
+ width: 100%;
113
+ height: 100%
114
+ }
115
+
116
+ .element-ditu .map .el-button {
117
+ width: 100%;
118
+ height: 100%;
119
+ display: -webkit-box;
120
+ display: -ms-flexbox;
121
+ display: flex;
122
+ -webkit-box-align: center;
123
+ -ms-flex-align: center;
124
+ align-items: center;
125
+ padding: 0;
126
+ -webkit-box-pack: center;
127
+ -ms-flex-pack: center;
128
+ justify-content: center;
129
+ background: inherit;
130
+ color: inherit;
131
+ border: none
132
+ }
133
+
134
+ .element-ditu .center-map {
135
+ width: 100%;
136
+ height: 100%;
137
+ background: #fff
138
+ }
139
+
140
+ .element-ditu .mask-map {
141
+ position: absolute;
142
+ width: 100%;
143
+ height: 100%;
144
+ top: 0
145
+ }
146
+ .map-iframe {
147
+ width: 100%;
148
+ height: 100%;
149
+ }.ele-img {
85
150
  position: absolute;
86
151
  overflow: hidden;
87
152
  }
@@ -130,80 +195,256 @@
130
195
  opacity: 1;
131
196
  transform: scale(1);
132
197
  }
198
+ }.ele-shape {
199
+ position: absolute;
200
+ overflow: hidden;
201
+ }
202
+
203
+ .ani-wrap {
204
+ width: 100%;
205
+ height: 100%;
206
+ box-sizing: border-box;
207
+ }
208
+
209
+ .e-shape {
210
+ width: 100%;
211
+ height: 100%;
212
+ }
213
+
214
+ .svg-container :deep(svg) {
215
+ width: 100%;
216
+ height: 100%;
217
+ display: block;
218
+ }
219
+
220
+ .svg-container {
221
+ width: 100%;
222
+ height: 100%;
223
+ display: block;
224
+ }
225
+
226
+
227
+ .svg-loading,
228
+ .svg-error {
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ width: 100%;
233
+ height: 100%;
234
+ background: rgba(0,0,0,0.05);
235
+ }
236
+
237
+ .ele-shape .svg-container svg {
238
+ width: 100%;
239
+ height: 100%;
240
+ overflow: visible;
241
+ }.button {
242
+ position: absolute;
243
+ cursor: pointer;
244
+ user-select: none;
245
+ }
246
+
247
+ .button .ani-wrap {
248
+ display: flex;
249
+ justify-content: center;
250
+ align-items: center;
251
+ width: 100%;
252
+ height: 100%;
253
+ overflow: hidden;
254
+ transition: opacity 0.2s;
255
+ }
256
+
257
+ .button .ani-wrap:hover {
258
+ opacity: 0.9;
259
+ }
260
+
261
+ .button-content {
262
+ display: flex;
263
+ align-items: center;
264
+ justify-content: center;
265
+ }
266
+
267
+ .btn-text {
268
+ margin-left: 10px;
269
+ }
270
+ .element-video {
271
+ position: absolute;
272
+ overflow: hidden;
273
+ background-color: transparent;
133
274
  }
134
- .ele-text {
275
+
276
+ .element-video .ani-wrap, .element-video img {
277
+ display: block;
278
+ width: 100%;
279
+ height: 100%;
280
+ }
281
+
282
+ .video-container {
283
+ width: 100%;
284
+ height: 100%;
285
+ }
286
+
287
+ .video-container iframe {
288
+ width: 100%;
289
+ height: 100%;
290
+ border: none;
291
+ }
292
+
293
+ .video-cover {
294
+ position: relative;
295
+ width: 100%;
296
+ height: 100%;
297
+ background-size: cover;
298
+ background-position: center;
299
+ cursor: pointer;
300
+ }
301
+
302
+ .video-cover .play-btn {
303
+ position: absolute;
304
+ left: 50%;
305
+ top: 50%;
306
+ transform: translate(-50%, -50%);
307
+ width: 50px;
308
+ height: 50px;
309
+ opacity: 0.8;
310
+ transition: opacity 0.2s;
311
+ }
312
+
313
+ .video-cover:hover .play-btn {
314
+ opacity: 1;
315
+ }.ele-effect {
316
+ will-change: transform;
317
+ }
318
+
319
+ .ele-effect .effect-wrap {
135
320
  position: relative;
321
+ width: 100%;
322
+ height: 100%;
323
+ }
324
+
325
+ .particle {
326
+ position: absolute;
327
+ background-repeat: no-repeat;
328
+ background-size: contain;
329
+ animation-name: falling;
330
+ animation-timing-function: linear;
331
+ animation-iteration-count: infinite;
332
+ will-change: transform;
333
+ }
334
+
335
+ @keyframes falling {
336
+ 0% {
337
+ transform: translateY(0) rotate(0deg);
338
+ opacity: 1;
339
+ }
340
+ 80% {
341
+ opacity: 0.8;
342
+ }
343
+ 100% {
344
+ transform: translateY(100vh) rotate(360deg);
345
+ opacity: 0;
346
+ }
347
+ }
348
+ .ele-lottie .ele-lotwrap {
349
+ overflow: hidden
350
+ }
351
+
352
+ .ele-effect .effect-wrap {
353
+ position: relative;
354
+ overflow: hidden;
355
+ width: 100%;
356
+ height: 100%
357
+ }
358
+
359
+ .ele-effect .e-small {
360
+ position: absolute;
361
+ width: 24px;
362
+ height: 24px;
363
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
364
+ background-size: cover;
365
+ background-repeat: no-repeat;
366
+ -webkit-transform-origin: center;
367
+ transform-origin: center;
368
+ -webkit-animation: snow 5s linear infinite;
369
+ animation: snow 5s linear infinite
370
+ }#audio {
371
+ position: absolute;
372
+ right: 10px;
373
+ top: 10px;
374
+ z-index: 103;
375
+ width: 30px;
376
+ height: 30px;
377
+ display: flex;
378
+ align-items: center;
136
379
  }
137
380
 
138
- .ele-text .ani-wrap {
139
- width: 100%;
140
- height: 100%;
381
+ #audio .mrotate {
382
+ animation: mrotate 5s linear infinite;
141
383
  }
142
384
 
143
- .text-common {
144
- padding: 5px;
145
- text-orientation: upright;
146
- white-space: pre-wrap;
385
+ @keyframes mrotate {
386
+ to {
387
+ transform: rotate(1turn);
388
+ }
147
389
  }
148
390
 
149
- /* 文本动画类 */
150
- .text-fadeIn {
151
- animation: fadeIn 1s ease-in-out;
391
+ #audio .audio {
392
+ width: 100%;
393
+ height: 100%;
394
+ display: flex;
395
+ align-items: center;
396
+ justify-content: center;
397
+ color: #fff;
398
+ background: #666;
399
+ border-radius: 50%;
400
+ overflow: hidden;
401
+ cursor: pointer;
402
+ transition: all 0.3s ease;
152
403
  }
153
404
 
154
- .text-slideIn {
155
- animation: slideIn 1s ease-in-out;
405
+ #audio .audio.a-border {
406
+ border: 1px solid #fff;
156
407
  }
157
408
 
158
- .text-bounceIn {
159
- animation: bounceIn 1s ease-in-out;
409
+ #audio .audio .music-icon {
410
+ display: block;
411
+ width: 60%;
412
+ height: 60%;
413
+ object-fit: contain;
160
414
  }
161
415
 
162
- /* 基础动画关键帧 */
163
- @keyframes fadeIn {
164
- from {
165
- opacity: 0;
166
- }
167
- to {
168
- opacity: 1;
169
- }
416
+ #audio .audio .iconfont {
417
+ font-size: 2opx;
418
+ line-height: 1;
170
419
  }
171
-
172
- @keyframes slideIn {
173
- from {
174
- transform: translateY(20px);
175
- opacity: 0;
176
- }
177
- to {
178
- transform: translateY(0);
179
- opacity: 1;
180
- }
420
+ #audio .icon-cancel {
421
+ position: absolute;
422
+ width: 100%;
423
+ height: 100%;
424
+ border-radius: 50%;
425
+ overflow: hidden;
426
+ padding: 15px 0;
181
427
  }
182
-
183
- @keyframes bounceIn {
184
- 0% {
185
- transform: scale(0.3);
186
- opacity: 0;
187
- }
188
- 50% {
189
- transform: scale(1.05);
190
- opacity: 0.8;
191
- }
192
- 70% {
193
- transform: scale(0.9);
194
- opacity: 0.9;
195
- }
196
- 100% {
197
- transform: scale(1);
198
- opacity: 1;
428
+ #audio .icon-cancel .icon-h {
429
+ transform: rotate(45deg);
430
+ width: 100%;
431
+ height: 2px;
432
+ background: #fff;
199
433
  }
200
- }.count-down .drag-point {
434
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
435
+ content: '';
436
+ position: absolute;
437
+ width: 100%;
438
+ height: 2px;
439
+ background: #fff;
440
+ }.count-down .drag-point {
201
441
  cursor: default!important
202
442
  }
203
443
 
204
444
  .count-down .ani-wrap {
205
445
  width: 100%;
206
- height: 100%
446
+ height: 100%;
447
+ overflow: visible;
207
448
  }
208
449
 
209
450
  .count-down .count-text,.count-down .finish-cont {
@@ -236,6 +477,20 @@
236
477
  justify-content: center
237
478
  }
238
479
 
480
+ .count-down .count-flip[data-direction="vertical"] {
481
+ -webkit-box-orient: vertical;
482
+ -webkit-box-direction: normal;
483
+ -ms-flex-direction: column;
484
+ flex-direction: column;
485
+ height: auto;
486
+ min-height: 100%;
487
+ }
488
+
489
+ .count-down .count-flip[data-direction="vertical"] .c-com {
490
+ margin: 6px 0;
491
+ width: auto;
492
+ }
493
+
239
494
  .count-down .count-flip .numscroll {
240
495
  -webkit-animation: numscroll .4s ease-in-out;
241
496
  animation: numscroll .4s ease-in-out;
@@ -342,172 +597,27 @@
342
597
  display: flex;
343
598
  -webkit-box-pack: end;
344
599
  -ms-flex-pack: end;
345
- justify-content: flex-end
346
- }
347
-
348
- .c-wrap .c-text {
349
- display: -webkit-box;
350
- display: -ms-flexbox;
351
- display: flex;
352
- width: 100%;
353
- font-size: 12px;
354
- -webkit-box-pack: center;
355
- -ms-flex-pack: center;
356
- justify-content: center;
357
- -webkit-box-align: center;
358
- -ms-flex-align: center;
359
- align-items: center;
360
- white-space: nowrap
361
- }
362
- .element-ditu .ani-wrap {
363
- width: 100%;
364
- height: 100%;
365
- overflow: hidden
366
- }
367
-
368
- .element-ditu .map {
369
- width: 100%;
370
- height: 100%
371
- }
372
-
373
- .element-ditu .map .el-button {
374
- width: 100%;
375
- height: 100%;
376
- display: -webkit-box;
377
- display: -ms-flexbox;
378
- display: flex;
379
- -webkit-box-align: center;
380
- -ms-flex-align: center;
381
- align-items: center;
382
- padding: 0;
383
- -webkit-box-pack: center;
384
- -ms-flex-pack: center;
385
- justify-content: center;
386
- background: inherit;
387
- color: inherit;
388
- border: none
389
- }
390
-
391
- .element-ditu .center-map {
392
- width: 100%;
393
- height: 100%;
394
- background: #fff
395
- }
396
-
397
- .element-ditu .mask-map {
398
- position: absolute;
399
- width: 100%;
400
- height: 100%;
401
- top: 0
402
- }
403
- .map-iframe {
404
- width: 100%;
405
- height: 100%;
406
- }.button {
407
- position: absolute;
408
- cursor: pointer;
409
- user-select: none;
410
- }
411
-
412
- .button .ani-wrap {
413
- display: flex;
414
- justify-content: center;
415
- align-items: center;
416
- width: 100%;
417
- height: 100%;
418
- overflow: hidden;
419
- transition: opacity 0.2s;
420
- }
421
-
422
- .button .ani-wrap:hover {
423
- opacity: 0.9;
424
- }
425
-
426
- .button-content {
427
- display: flex;
428
- align-items: center;
429
- justify-content: center;
430
- }
431
-
432
- .btn-text {
433
- margin-left: 10px;
434
- }.call {
435
- position: absolute;
436
- cursor: pointer;
437
- user-select: none;
438
- }
439
-
440
- .call .ani-wrap {
441
- display: flex;
442
- justify-content: center;
443
- align-items: center;
444
- width: 100%;
445
- height: 100%;
446
- overflow: hidden;
447
- transition: opacity 0.2s;
448
- }
449
-
450
- .call .ani-wrap:hover {
451
- opacity: 0.9;
452
- }
453
-
454
- .call-content {
455
- display: flex;
456
- align-items: center;
457
- justify-content: center;
458
- }
459
-
460
- .btn-text {
461
- margin-left: 10px;
462
- }
463
-
464
-
465
- .hb-tel:before {
466
- content: "\E642";
467
- }.ele-shape {
468
- position: absolute;
469
- overflow: hidden;
470
- }
471
-
472
- .ani-wrap {
473
- width: 100%;
474
- height: 100%;
475
- box-sizing: border-box;
476
- }
477
-
478
- .e-shape {
479
- width: 100%;
480
- height: 100%;
481
- }
482
-
483
- .svg-container :deep(svg) {
484
- width: 100%;
485
- height: 100%;
486
- display: block;
487
- }
488
-
489
- .svg-container {
490
- width: 100%;
491
- height: 100%;
492
- display: block;
600
+ justify-content: flex-end
493
601
  }
494
602
 
495
-
496
- .svg-loading,
497
- .svg-error {
603
+ .c-wrap .c-text {
604
+ display: -webkit-box;
605
+ display: -ms-flexbox;
498
606
  display: flex;
499
- align-items: center;
500
- justify-content: center;
501
607
  width: 100%;
502
- height: 100%;
503
- background: rgba(0,0,0,0.05);
608
+ font-size: 12px;
609
+ -webkit-box-pack: center;
610
+ -ms-flex-pack: center;
611
+ justify-content: center;
612
+ -webkit-box-align: center;
613
+ -ms-flex-align: center;
614
+ align-items: center;
615
+ white-space: nowrap
504
616
  }
505
617
 
506
- .ele-shape .svg-container svg {
507
- width: 100%;
508
- height: 100%;
509
- overflow: visible;
510
- }
618
+ .ele-lottie .ele-lotwrap {
619
+ overflow: hidden;
620
+ }
511
621
  @keyframes jumpheart {
512
622
  to {
513
623
  -webkit-transform: scale(1.2);
@@ -849,180 +959,39 @@
849
959
  }
850
960
  .icon-xingzhuangjiehe:before {
851
961
  content: "\E6A6";
852
- }#audio {
962
+ }.call {
853
963
  position: absolute;
854
- right: 10px;
855
- top: 10px;
856
- z-index: 103;
857
- width: 30px;
858
- height: 30px;
859
- display: flex;
860
- align-items: center;
861
- }
862
-
863
- #audio .mrotate {
864
- animation: mrotate 5s linear infinite;
865
- }
866
-
867
- @keyframes mrotate {
868
- to {
869
- transform: rotate(1turn);
870
- }
964
+ cursor: pointer;
965
+ user-select: none;
871
966
  }
872
967
 
873
- #audio .audio {
874
- width: 100%;
875
- height: 100%;
968
+ .call .ani-wrap {
876
969
  display: flex;
877
- align-items: center;
878
970
  justify-content: center;
879
- color: #fff;
880
- background: #666;
881
- border-radius: 50%;
882
- overflow: hidden;
883
- cursor: pointer;
884
- transition: all 0.3s ease;
885
- }
886
-
887
- #audio .audio.a-border {
888
- border: 1px solid #fff;
889
- }
890
-
891
- #audio .audio .music-icon {
892
- display: block;
893
- width: 60%;
894
- height: 60%;
895
- object-fit: contain;
896
- }
897
-
898
- #audio .audio .iconfont {
899
- font-size: 2opx;
900
- line-height: 1;
901
- }
902
- #audio .icon-cancel {
903
- position: absolute;
904
- width: 100%;
905
- height: 100%;
906
- border-radius: 50%;
907
- overflow: hidden;
908
- padding: 15px 0;
909
- }
910
- #audio .icon-cancel .icon-h {
911
- transform: rotate(45deg);
912
- width: 100%;
913
- height: 2px;
914
- background: #fff;
915
- }
916
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
917
- content: '';
918
- position: absolute;
919
- width: 100%;
920
- height: 2px;
921
- background: #fff;
922
- }.ele-effect {
923
- will-change: transform;
924
- }
925
-
926
- .ele-effect .effect-wrap {
927
- position: relative;
971
+ align-items: center;
928
972
  width: 100%;
929
973
  height: 100%;
974
+ overflow: hidden;
975
+ transition: opacity 0.2s;
930
976
  }
931
977
 
932
- .particle {
933
- position: absolute;
934
- background-repeat: no-repeat;
935
- background-size: contain;
936
- animation-name: falling;
937
- animation-timing-function: linear;
938
- animation-iteration-count: infinite;
939
- will-change: transform;
940
- }
941
-
942
- @keyframes falling {
943
- 0% {
944
- transform: translateY(0) rotate(0deg);
945
- opacity: 1;
946
- }
947
- 80% {
948
- opacity: 0.8;
949
- }
950
- 100% {
951
- transform: translateY(100vh) rotate(360deg);
952
- opacity: 0;
953
- }
954
- }
955
- .ele-lottie .ele-lotwrap {
956
- overflow: hidden
957
- }
958
-
959
- .ele-effect .effect-wrap {
960
- position: relative;
961
- overflow: hidden;
962
- width: 100%;
963
- height: 100%
964
- }
965
-
966
- .ele-effect .e-small {
967
- position: absolute;
968
- width: 24px;
969
- height: 24px;
970
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
971
- background-size: cover;
972
- background-repeat: no-repeat;
973
- -webkit-transform-origin: center;
974
- transform-origin: center;
975
- -webkit-animation: snow 5s linear infinite;
976
- animation: snow 5s linear infinite
977
- }
978
- .ele-lottie .ele-lotwrap {
979
- overflow: hidden;
980
- }.form-submit {
981
- cursor: pointer;
982
- transition: all 0.2s;
983
- outline: none;
984
- border: none;
985
- }
986
-
987
- .form-submit:hover {
988
- opacity: 0.9;
989
- transform: translateY(-1px);
990
- }
991
-
992
- .form-submit:active {
993
- opacity: 0.8;
994
- transform: translateY(0);
995
- }
996
-
997
- .form-submit:disabled {
998
- opacity: 0.6;
999
- cursor: not-allowed;
1000
- transform: none !important;
978
+ .call .ani-wrap:hover {
979
+ opacity: 0.9;
1001
980
  }
1002
981
 
1003
- .f-submit {
1004
- position: relative;
1005
- display: block
982
+ .call-content {
983
+ display: flex;
984
+ align-items: center;
985
+ justify-content: center;
1006
986
  }
1007
987
 
1008
- .f-submit .ani-wrap {
1009
- width: 100%;
1010
- height: 100%;
1011
- padding: 10px;
1012
- overflow: hidden;
1013
- position: relative
988
+ .btn-text {
989
+ margin-left: 10px;
1014
990
  }
1015
991
 
1016
- .f-submit .f-ovh {
1017
- position: absolute;
1018
- left: 50%;
1019
- top: 50%;
1020
- transform: translate(-50%,-50%)
1021
- }
1022
992
 
1023
- .form-submit:disabled {
1024
- opacity: 0.7;
1025
- cursor: not-allowed;
993
+ .hb-tel:before {
994
+ content: "\E642";
1026
995
  }/* Iconfont definition */
1027
996
  .icon-danmuliebiao1:before {
1028
997
  content: "\E68A";
@@ -3522,141 +3491,60 @@ to {
3522
3491
  -webkit-transform: translate3d(0,10%,0);
3523
3492
  transform: translate3d(0,10%,0)
3524
3493
  }
3525
-
3526
- to {
3527
- -webkit-transform: translateZ(0);
3528
- transform: translateZ(0)
3529
- }
3530
- }
3531
-
3532
- .form-input {
3533
- position: absolute;
3534
- }
3535
-
3536
- .input-wrapper {
3537
- display: flex;
3538
- align-items: center;
3539
- width: 100%;
3540
- height: 100%;
3541
- padding: 0 10px;
3542
- box-sizing: border-box;
3543
- position: relative;
3544
- transition: border-color 0.3s;
3545
- }
3546
-
3547
- .required-marker {
3548
- font-size: 12px;
3549
- padding: 0 5px 0 0;
3550
- color: red;
3551
- vertical-align: middle;
3552
- }
3553
-
3554
- input {
3555
- flex: 1;
3556
- border: none;
3557
- outline: none;
3558
- background: transparent;
3559
- height: 100%;
3560
- padding: 0;
3561
- margin: 0;
3562
- }
3563
- /*
3564
- input::placeholder {
3565
- color: #ccc;
3566
- opacity: 1;
3567
- } */
3568
-
3569
- .dynamic-placeholder-input::placeholder {
3570
- color: var(--placeholder-color, #999);
3571
- opacity: 1;
3572
- }
3573
- .dynamic-placeholder-input::-webkit-input-placeholder {
3574
- color: var(--placeholder-color, #999);
3575
- }
3576
- .dynamic-placeholder-input::-moz-placeholder {
3577
- color: var(--placeholder-color, #999);
3578
- opacity: 1;
3579
- }
3580
- .dynamic-placeholder-input:-ms-input-placeholder {
3581
- color: var(--placeholder-color, #999);
3582
- }#page-list .tip-cover {
3583
- position: fixed;
3584
- left: 0;
3585
- top: 0;
3586
- width: 100%;
3587
- height: 100%;
3588
- display: -ms-flexbox;
3589
- display: flex;
3590
- -ms-flex-align: center;
3591
- align-items: center;
3592
- -ms-flex-pack: center;
3593
- justify-content: center;
3594
- z-index: 999;
3595
- background-color: rgba(0,0,0,.7)
3494
+
3495
+ to {
3496
+ -webkit-transform: translateZ(0);
3497
+ transform: translateZ(0)
3498
+ }
3596
3499
  }
3597
3500
 
3598
- #page-list .tip-cover .tip {
3599
- width: 80%;
3600
- max-width: 250px;
3601
- padding: 10px;
3602
- border-radius: 5px;
3603
- background-color: #fff
3501
+ .form-submit {
3502
+ cursor: pointer;
3503
+ transition: all 0.2s;
3504
+ outline: none;
3505
+ border: none;
3604
3506
  }
3605
3507
 
3606
- #page-list .tip-cover .tip-btn {
3607
- display: block;
3608
- margin: 25px auto;
3609
- width: 120px;
3610
- height: 30px;
3611
- color: #fff;
3612
- border-radius: 4px;
3613
- text-align: center;
3614
- font-size: 14px;
3615
- line-height: 30px;
3616
- background: #ed5566
3508
+ .form-submit:hover {
3509
+ opacity: 0.9;
3510
+ transform: translateY(-1px);
3617
3511
  }
3618
3512
 
3619
- #page-list .tip-cover .tip-content {
3620
- font-size: 14px;
3621
- padding-top: 30px;
3513
+ .form-submit:active {
3514
+ opacity: 0.8;
3515
+ transform: translateY(0);
3622
3516
  }
3623
3517
 
3624
- .tip-cover {
3625
- position: fixed;
3626
- left: 0;
3627
- top: 0;
3518
+ .form-submit:disabled {
3519
+ opacity: 0.6;
3520
+ cursor: not-allowed;
3521
+ transform: none !important;
3522
+ }
3523
+
3524
+ .f-submit {
3525
+ position: relative;
3526
+ display: block
3527
+ }
3528
+
3529
+ .f-submit .ani-wrap {
3628
3530
  width: 100%;
3629
3531
  height: 100%;
3630
- display: -ms-flexbox;
3631
- display: flex;
3632
- -ms-flex-align: center;
3633
- align-items: center;
3634
- -ms-flex-pack: center;
3635
- justify-content: center;
3636
- z-index: 999;
3637
- background-color: rgba(0,0,0,.7)
3532
+ padding: 10px;
3533
+ overflow: hidden;
3534
+ position: relative
3638
3535
  }
3639
3536
 
3640
- .tip-cover .tip {
3641
- width: 80%;
3642
- max-width: 250px;
3643
- padding: 5px;
3644
- border-radius: 3px;
3645
- background-color: #fff
3537
+ .f-submit .f-ovh {
3538
+ position: absolute;
3539
+ left: 50%;
3540
+ top: 50%;
3541
+ transform: translate(-50%,-50%)
3646
3542
  }
3647
3543
 
3648
- .tip-cover .tip-btn {
3649
- display: block;
3650
- margin: 13px auto;
3651
- width: 64px;
3652
- height: 20px;
3653
- color: #fff;
3654
- border-radius: 4px;
3655
- text-align: center;
3656
- font-size: 14px;
3657
- line-height: 20px;
3658
- background: #ed5566;
3659
- } @charset"UTF-8";.animated {
3544
+ .form-submit:disabled {
3545
+ opacity: 0.7;
3546
+ cursor: not-allowed;
3547
+ }@charset"UTF-8";.animated {
3660
3548
  animation-duration: 1s;
3661
3549
  animation-fill-mode: both
3662
3550
  }
@@ -8545,9 +8433,9 @@ to {
8545
8433
  /* .ele-form {
8546
8434
  position: absolute;
8547
8435
  user-select: none;
8548
- }
8549
- */
8550
- .f-single {
8436
+ } */
8437
+
8438
+ .f-select {
8551
8439
  cursor: pointer;
8552
8440
  }
8553
8441
 
@@ -8555,15 +8443,13 @@ to {
8555
8443
  position: relative;
8556
8444
  }
8557
8445
 
8558
- .f-single .ani-wrap .fs-tit {
8446
+ .f-select .ani-wrap .fs-tit {
8447
+ position: relative;
8559
8448
  display: flex;
8560
8449
  padding: 0 5px;
8561
- height: 40px;
8450
+ height: 35px;
8451
+ line-height: 35px;
8562
8452
  align-items: center;
8563
- white-space: nowrap;
8564
- overflow: hidden;
8565
- text-overflow: ellipsis;
8566
- border-bottom: 1px solid rgba(153, 153, 153, 1);
8567
8453
  }
8568
8454
 
8569
8455
  .require {
@@ -8572,63 +8458,69 @@ to {
8572
8458
  vertical-align: middle;
8573
8459
  }
8574
8460
 
8575
- .f-single ul {
8576
- padding: 15px;
8577
- margin: 0;
8578
- list-style: none;
8461
+ .fs-cont {
8462
+ padding-right: 15px;
8463
+ white-space: nowrap;
8464
+ overflow: hidden;
8465
+ text-overflow: ellipsis;
8466
+ flex-grow: 1;
8579
8467
  }
8580
8468
 
8581
- .f-single ul li {
8582
- display: flex;
8583
- align-items: center;
8584
- margin-top: 12px;
8585
- font-size: 0;
8469
+ .icon-bofang1 {
8470
+ font-size: 12px;
8471
+ transition: transform 0.2s ease;
8586
8472
  }
8587
8473
 
8588
- .f-single ul li:first-child {
8589
- margin-top: 0;
8474
+ .rotate-180 {
8475
+ transform: rotate(180deg) !important;
8590
8476
  }
8591
8477
 
8592
- .fs-circle {
8593
- display: inline-block;
8594
- width: 16px;
8595
- height: 16px;
8596
- border-radius: 50%;
8597
- position: relative;
8598
- transition: all 0.2s;
8478
+ .f-real {
8479
+ position: absolute;
8480
+ left: 0;
8481
+ top: 0;
8482
+ width: 100%;
8483
+ height: 100%;
8484
+ z-index: 1;
8485
+ opacity: 0;
8486
+ cursor: pointer;
8599
8487
  }
8600
8488
 
8601
- .fs-circle.selected {
8602
- background-color: #2687f1;
8603
- border-color: #2687f1 !important;
8489
+ .dropdown-menu {
8490
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
8604
8491
  }
8605
8492
 
8606
- .fs-circle.selected::after {
8607
- content: "";
8608
- position: absolute;
8609
- top: 3px;
8610
- left: 3px;
8611
- width: 8px;
8612
- height: 8px;
8613
- border-radius: 50%;
8614
- background-color: white;
8493
+ .dropdown-item {
8494
+ padding: 8px 10px;
8495
+ cursor: pointer;
8496
+ transition: background-color 0.2s;
8615
8497
  }
8616
8498
 
8617
- .fs-txt {
8618
- display: inline-block;
8619
- width: calc(100% - 16px);
8620
- padding-left: 8px;
8621
- vertical-align: top;
8622
- word-break: break-all;
8623
- font-size: 14px;
8624
- line-height: 1.2;
8499
+ .dropdown-item:hover {
8500
+ background-color: #f5f5f5;
8625
8501
  }
8626
8502
 
8627
- .has-error .fs-tit {
8628
- border-bottom-color: #ff4d4f;
8503
+ .dropdown-item.selected {
8504
+ background-color: #e6f7ff;
8505
+ color: #1890ff;
8506
+ }
8507
+
8508
+ .f-select .fs-tit .icon-bofang1 {
8509
+ position: absolute;
8510
+ right: 10px;
8511
+ font-size: 12px;
8512
+ display: inline-block;
8513
+ transform: rotate(90deg);
8514
+ }
8515
+
8516
+ .icon-bofang1:before {
8517
+ content: "\E6CF";
8518
+ }
8519
+
8520
+ .has-error {
8521
+ border-color: #ff4d4f !important;
8629
8522
  }
8630
8523
 
8631
- /* 错误提示样式 */
8632
8524
  .error-tip {
8633
8525
  position: fixed;
8634
8526
  left: 0;
@@ -8721,24 +8613,69 @@ to {
8721
8613
 
8722
8614
  .has-error .fs-tit {
8723
8615
  border-bottom-color: #ff4d4f;
8616
+ }.form-input.form-input--editing,
8617
+ .form-input.form-input--editing input {
8618
+ pointer-events: none;
8619
+ user-select: none;
8620
+ -webkit-user-select: none;
8724
8621
  }
8725
- .global.tel {
8726
- width: 35px;
8727
- height: 55px;
8728
- border-radius: 50%;
8729
- text-align: center;
8730
- margin-bottom: 15px;
8731
- border: 2px solid #fff;
8732
- cursor: pointer;
8733
- }
8734
- .icon-dianhua:before { content: "\E60E"; }
8735
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8736
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}/* .ele-form {
8622
+
8623
+ .form-input {
8737
8624
  position: absolute;
8738
- user-select: none;
8625
+ }
8626
+
8627
+ .input-wrapper {
8628
+ display: flex;
8629
+ align-items: center;
8630
+ width: 100%;
8631
+ height: 100%;
8632
+ padding: 0 10px;
8633
+ box-sizing: border-box;
8634
+ position: relative;
8635
+ transition: border-color 0.3s;
8636
+ }
8637
+
8638
+ .required-marker {
8639
+ font-size: 12px;
8640
+ padding: 0 5px 0 0;
8641
+ color: red;
8642
+ vertical-align: middle;
8643
+ }
8644
+
8645
+ input {
8646
+ flex: 1;
8647
+ border: none;
8648
+ outline: none;
8649
+ background: transparent;
8650
+ height: 100%;
8651
+ padding: 0;
8652
+ margin: 0;
8653
+ }
8654
+ /*
8655
+ input::placeholder {
8656
+ color: #ccc;
8657
+ opacity: 1;
8739
8658
  } */
8740
8659
 
8741
- .f-select {
8660
+ .dynamic-placeholder-input::placeholder {
8661
+ color: var(--placeholder-color, #999);
8662
+ opacity: 1;
8663
+ }
8664
+ .dynamic-placeholder-input::-webkit-input-placeholder {
8665
+ color: var(--placeholder-color, #999);
8666
+ }
8667
+ .dynamic-placeholder-input::-moz-placeholder {
8668
+ color: var(--placeholder-color, #999);
8669
+ opacity: 1;
8670
+ }
8671
+ .dynamic-placeholder-input:-ms-input-placeholder {
8672
+ color: var(--placeholder-color, #999);
8673
+ }/* .ele-form {
8674
+ position: absolute;
8675
+ user-select: none;
8676
+ }
8677
+ */
8678
+ .f-single {
8742
8679
  cursor: pointer;
8743
8680
  }
8744
8681
 
@@ -8746,13 +8683,15 @@ to {
8746
8683
  position: relative;
8747
8684
  }
8748
8685
 
8749
- .f-select .ani-wrap .fs-tit {
8750
- position: relative;
8686
+ .f-single .ani-wrap .fs-tit {
8751
8687
  display: flex;
8752
8688
  padding: 0 5px;
8753
- height: 35px;
8754
- line-height: 35px;
8689
+ height: 40px;
8755
8690
  align-items: center;
8691
+ white-space: nowrap;
8692
+ overflow: hidden;
8693
+ text-overflow: ellipsis;
8694
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
8756
8695
  }
8757
8696
 
8758
8697
  .require {
@@ -8761,69 +8700,63 @@ to {
8761
8700
  vertical-align: middle;
8762
8701
  }
8763
8702
 
8764
- .fs-cont {
8765
- padding-right: 15px;
8766
- white-space: nowrap;
8767
- overflow: hidden;
8768
- text-overflow: ellipsis;
8769
- flex-grow: 1;
8770
- }
8771
-
8772
- .icon-bofang1 {
8773
- font-size: 12px;
8774
- transition: transform 0.2s ease;
8775
- }
8776
-
8777
- .rotate-180 {
8778
- transform: rotate(180deg) !important;
8779
- }
8780
-
8781
- .f-real {
8782
- position: absolute;
8783
- left: 0;
8784
- top: 0;
8785
- width: 100%;
8786
- height: 100%;
8787
- z-index: 1;
8788
- opacity: 0;
8789
- cursor: pointer;
8703
+ .f-single ul {
8704
+ padding: 15px;
8705
+ margin: 0;
8706
+ list-style: none;
8790
8707
  }
8791
8708
 
8792
- .dropdown-menu {
8793
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
8709
+ .f-single ul li {
8710
+ display: flex;
8711
+ align-items: center;
8712
+ margin-top: 12px;
8713
+ font-size: 0;
8794
8714
  }
8795
8715
 
8796
- .dropdown-item {
8797
- padding: 8px 10px;
8798
- cursor: pointer;
8799
- transition: background-color 0.2s;
8716
+ .f-single ul li:first-child {
8717
+ margin-top: 0;
8800
8718
  }
8801
8719
 
8802
- .dropdown-item:hover {
8803
- background-color: #f5f5f5;
8720
+ .fs-circle {
8721
+ display: inline-block;
8722
+ width: 16px;
8723
+ height: 16px;
8724
+ border-radius: 50%;
8725
+ position: relative;
8726
+ transition: all 0.2s;
8804
8727
  }
8805
8728
 
8806
- .dropdown-item.selected {
8807
- background-color: #e6f7ff;
8808
- color: #1890ff;
8729
+ .fs-circle.selected {
8730
+ background-color: #2687f1;
8731
+ border-color: #2687f1 !important;
8809
8732
  }
8810
8733
 
8811
- .f-select .fs-tit .icon-bofang1 {
8812
- position: absolute;
8813
- right: 10px;
8814
- font-size: 12px;
8815
- display: inline-block;
8816
- transform: rotate(90deg);
8734
+ .fs-circle.selected::after {
8735
+ content: "";
8736
+ position: absolute;
8737
+ top: 3px;
8738
+ left: 3px;
8739
+ width: 8px;
8740
+ height: 8px;
8741
+ border-radius: 50%;
8742
+ background-color: white;
8817
8743
  }
8818
8744
 
8819
- .icon-bofang1:before {
8820
- content: "\E6CF";
8745
+ .fs-txt {
8746
+ display: inline-block;
8747
+ width: calc(100% - 16px);
8748
+ padding-left: 8px;
8749
+ vertical-align: top;
8750
+ word-break: break-all;
8751
+ font-size: 14px;
8752
+ line-height: 1.2;
8821
8753
  }
8822
8754
 
8823
- .has-error {
8824
- border-color: #ff4d4f !important;
8755
+ .has-error .fs-tit {
8756
+ border-bottom-color: #ff4d4f;
8825
8757
  }
8826
8758
 
8759
+ /* 错误提示样式 */
8827
8760
  .error-tip {
8828
8761
  position: fixed;
8829
8762
  left: 0;
@@ -8832,20 +8765,6 @@ to {
8832
8765
  height: 100%;
8833
8766
  z-index: 1000;
8834
8767
  }
8835
- .global.video {
8836
- width: 35px;
8837
- height: 55px;
8838
- border-radius: 50%;
8839
- text-align: center;
8840
- margin-bottom: 5px;
8841
- border: 2px solid #fff;
8842
- cursor: pointer;
8843
- }
8844
- .icon-shipin2:before { content: "\E611"; }
8845
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8846
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
8847
- }
8848
-
8849
8768
  .global.receipt {
8850
8769
  width: 35px;
8851
8770
  height: 55px;
@@ -8858,18 +8777,6 @@ to {
8858
8777
  .icon-liuyan:before { content: "\E636"; }
8859
8778
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8860
8779
  .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
8861
- .global.map {
8862
- width: 35px;
8863
- height: 55px;
8864
- border-radius: 50%;
8865
- text-align: center;
8866
- margin-bottom: 5px;
8867
- border: 2px solid #fff;
8868
- cursor: pointer;
8869
- }
8870
- .icon-daohang1:before { content: "\E612"; }
8871
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8872
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
8873
8780
  .icon-guanbi:before {
8874
8781
  content: "\E676";
8875
8782
  }
@@ -9263,6 +9170,121 @@ to {
9263
9170
  content: "\E65E";
9264
9171
  color: #F44336; /* 失败的红色 */
9265
9172
  }
9173
+ #page-list .tip-cover {
9174
+ position: fixed;
9175
+ left: 0;
9176
+ top: 0;
9177
+ width: 100%;
9178
+ height: 100%;
9179
+ display: -ms-flexbox;
9180
+ display: flex;
9181
+ -ms-flex-align: center;
9182
+ align-items: center;
9183
+ -ms-flex-pack: center;
9184
+ justify-content: center;
9185
+ z-index: 999;
9186
+ background-color: rgba(0,0,0,.7)
9187
+ }
9188
+
9189
+ #page-list .tip-cover .tip {
9190
+ width: 80%;
9191
+ max-width: 250px;
9192
+ padding: 10px;
9193
+ border-radius: 5px;
9194
+ background-color: #fff
9195
+ }
9196
+
9197
+ #page-list .tip-cover .tip-btn {
9198
+ display: block;
9199
+ margin: 25px auto;
9200
+ width: 120px;
9201
+ height: 30px;
9202
+ color: #fff;
9203
+ border-radius: 4px;
9204
+ text-align: center;
9205
+ font-size: 14px;
9206
+ line-height: 30px;
9207
+ background: #ed5566
9208
+ }
9209
+
9210
+ #page-list .tip-cover .tip-content {
9211
+ font-size: 14px;
9212
+ padding-top: 30px;
9213
+ }
9214
+
9215
+ .tip-cover {
9216
+ position: fixed;
9217
+ left: 0;
9218
+ top: 0;
9219
+ width: 100%;
9220
+ height: 100%;
9221
+ display: -ms-flexbox;
9222
+ display: flex;
9223
+ -ms-flex-align: center;
9224
+ align-items: center;
9225
+ -ms-flex-pack: center;
9226
+ justify-content: center;
9227
+ z-index: 999;
9228
+ background-color: rgba(0,0,0,.7)
9229
+ }
9230
+
9231
+ .tip-cover .tip {
9232
+ width: 80%;
9233
+ max-width: 250px;
9234
+ padding: 5px;
9235
+ border-radius: 3px;
9236
+ background-color: #fff
9237
+ }
9238
+
9239
+ .tip-cover .tip-btn {
9240
+ display: block;
9241
+ margin: 13px auto;
9242
+ width: 64px;
9243
+ height: 20px;
9244
+ color: #fff;
9245
+ border-radius: 4px;
9246
+ text-align: center;
9247
+ font-size: 14px;
9248
+ line-height: 20px;
9249
+ background: #ed5566;
9250
+ }
9251
+ .global.map {
9252
+ width: 35px;
9253
+ height: 55px;
9254
+ border-radius: 50%;
9255
+ text-align: center;
9256
+ margin-bottom: 5px;
9257
+ border: 2px solid #fff;
9258
+ cursor: pointer;
9259
+ }
9260
+ .icon-daohang1:before { content: "\E612"; }
9261
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9262
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9263
+ .global.tel {
9264
+ width: 35px;
9265
+ height: 55px;
9266
+ border-radius: 50%;
9267
+ text-align: center;
9268
+ margin-bottom: 15px;
9269
+ border: 2px solid #fff;
9270
+ cursor: pointer;
9271
+ }
9272
+ .icon-dianhua:before { content: "\E60E"; }
9273
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9274
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9275
+ .global.video {
9276
+ width: 35px;
9277
+ height: 55px;
9278
+ border-radius: 50%;
9279
+ text-align: center;
9280
+ margin-bottom: 5px;
9281
+ border: 2px solid #fff;
9282
+ cursor: pointer;
9283
+ }
9284
+ .icon-shipin2:before { content: "\E611"; }
9285
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9286
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9287
+ }
9266
9288
  /* ===== 送呈(启呈)运行时样式 ===== */
9267
9289
  #invite {
9268
9290
  position: absolute;