unika-components 1.1.112 → 1.1.113

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.
@@ -8,7 +8,120 @@
8
8
  max-height: 100%;
9
9
  width: 100%;
10
10
  }
11
- .count-down .drag-point {
11
+
12
+ .ele-text {
13
+ position: relative;
14
+ }
15
+
16
+ .ele-text .ani-wrap {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+
21
+ .text-common {
22
+ padding: 5px;
23
+ text-orientation: upright;
24
+ white-space: pre-wrap;
25
+ }
26
+
27
+ /* 文本动画类 */
28
+ .text-fadeIn {
29
+ animation: fadeIn 1s ease-in-out;
30
+ }
31
+
32
+ .text-slideIn {
33
+ animation: slideIn 1s ease-in-out;
34
+ }
35
+
36
+ .text-bounceIn {
37
+ animation: bounceIn 1s ease-in-out;
38
+ }
39
+
40
+ /* 基础动画关键帧 */
41
+ @keyframes fadeIn {
42
+ from {
43
+ opacity: 0;
44
+ }
45
+ to {
46
+ opacity: 1;
47
+ }
48
+ }
49
+
50
+ @keyframes slideIn {
51
+ from {
52
+ transform: translateY(20px);
53
+ opacity: 0;
54
+ }
55
+ to {
56
+ transform: translateY(0);
57
+ opacity: 1;
58
+ }
59
+ }
60
+
61
+ @keyframes bounceIn {
62
+ 0% {
63
+ transform: scale(0.3);
64
+ opacity: 0;
65
+ }
66
+ 50% {
67
+ transform: scale(1.05);
68
+ opacity: 0.8;
69
+ }
70
+ 70% {
71
+ transform: scale(0.9);
72
+ opacity: 0.9;
73
+ }
74
+ 100% {
75
+ transform: scale(1);
76
+ opacity: 1;
77
+ }
78
+ }
79
+ .element-video {
80
+ position: absolute;
81
+ overflow: hidden;
82
+ background-color: transparent;
83
+ }
84
+
85
+ .element-video .ani-wrap, .element-video img {
86
+ display: block;
87
+ width: 100%;
88
+ height: 100%;
89
+ }
90
+
91
+ .video-container {
92
+ width: 100%;
93
+ height: 100%;
94
+ }
95
+
96
+ .video-container iframe {
97
+ width: 100%;
98
+ height: 100%;
99
+ border: none;
100
+ }
101
+
102
+ .video-cover {
103
+ position: relative;
104
+ width: 100%;
105
+ height: 100%;
106
+ background-size: cover;
107
+ background-position: center;
108
+ cursor: pointer;
109
+ }
110
+
111
+ .video-cover .play-btn {
112
+ position: absolute;
113
+ left: 50%;
114
+ top: 50%;
115
+ transform: translate(-50%, -50%);
116
+ width: 50px;
117
+ height: 50px;
118
+ opacity: 0.8;
119
+ transition: opacity 0.2s;
120
+ }
121
+
122
+ .video-cover:hover .play-btn {
123
+ opacity: 1;
124
+ }.count-down .drag-point {
12
125
  cursor: default!important
13
126
  }
14
127
 
@@ -170,124 +283,130 @@
170
283
  align-items: center;
171
284
  white-space: nowrap
172
285
  }
173
-
174
- .element-video {
286
+ .ele-img {
175
287
  position: absolute;
176
288
  overflow: hidden;
177
- background-color: transparent;
178
- }
179
-
180
- .element-video .ani-wrap, .element-video img {
181
- display: block;
182
- width: 100%;
183
- height: 100%;
184
289
  }
185
290
 
186
- .video-container {
291
+ .ele-img .ani-wrap {
187
292
  width: 100%;
188
293
  height: 100%;
189
294
  }
190
295
 
191
- .video-container iframe {
296
+ .ele-img .ele-image {
297
+ position: relative;
298
+ display: block;
299
+ }
300
+
301
+ .ele-img .rotate-wrap {
302
+ position: absolute;
303
+ left: 0;
304
+ right: 0;
305
+ top: 0;
306
+ bottom: 0;
307
+ }
308
+
309
+ .ele-img .ele-img-bg,
310
+ .ele-img .rotate-wrap .img-wrap {
192
311
  width: 100%;
193
312
  height: 100%;
194
- border: none;
313
+ overflow: hidden;
195
314
  }
196
315
 
197
- .video-cover {
198
- position: relative;
316
+ .ele-img .ele-bg-wrap {
199
317
  width: 100%;
200
318
  height: 100%;
201
319
  background-size: cover;
202
- background-position: center;
203
- cursor: pointer;
204
- }
205
-
206
- .video-cover .play-btn {
207
- position: absolute;
208
- left: 50%;
209
- top: 50%;
210
- transform: translate(-50%, -50%);
211
- width: 50px;
212
- height: 50px;
213
- opacity: 0.8;
214
- transition: opacity 0.2s;
320
+ background-position: 50% 50%;
321
+ background-repeat: no-repeat;
322
+ background-clip: border-box;
215
323
  }
216
324
 
217
- .video-cover:hover .play-btn {
218
- opacity: 1;
325
+ /* 动画关键帧 */
326
+ @keyframes zoomIn {
327
+ from {
328
+ opacity: 0;
329
+ transform: scale(0.5);
330
+ }
331
+ to {
332
+ opacity: 1;
333
+ transform: scale(1);
334
+ }
335
+ }#audio {
336
+ position: absolute;
337
+ right: 10px;
338
+ top: 10px;
339
+ z-index: 103;
340
+ width: 30px;
341
+ height: 30px;
342
+ display: flex;
343
+ align-items: center;
344
+ }
345
+
346
+ #audio .mrotate {
347
+ animation: mrotate 5s linear infinite;
348
+ }
349
+
350
+ @keyframes mrotate {
351
+ to {
352
+ transform: rotate(1turn);
219
353
  }
220
- .ele-text {
221
- position: relative;
222
354
  }
223
355
 
224
- .ele-text .ani-wrap {
356
+ #audio .audio {
225
357
  width: 100%;
226
358
  height: 100%;
359
+ display: flex;
360
+ align-items: center;
361
+ justify-content: center;
362
+ color: #fff;
363
+ background: #666;
364
+ border-radius: 50%;
365
+ overflow: hidden;
366
+ cursor: pointer;
367
+ transition: all 0.3s ease;
227
368
  }
228
369
 
229
- .text-common {
230
- padding: 5px;
231
- text-orientation: upright;
232
- white-space: pre-wrap;
370
+ #audio .audio.a-border {
371
+ border: 1px solid #fff;
233
372
  }
234
373
 
235
- /* 文本动画类 */
236
- .text-fadeIn {
237
- animation: fadeIn 1s ease-in-out;
374
+ #audio .audio .music-icon {
375
+ display: block;
376
+ width: 60%;
377
+ height: 60%;
378
+ object-fit: contain;
238
379
  }
239
380
 
240
- .text-slideIn {
241
- animation: slideIn 1s ease-in-out;
381
+ #audio .audio .iconfont {
382
+ font-size: 2opx;
383
+ line-height: 1;
242
384
  }
243
-
244
- .text-bounceIn {
245
- animation: bounceIn 1s ease-in-out;
385
+ #audio .icon-cancel {
386
+ position: absolute;
387
+ width: 100%;
388
+ height: 100%;
389
+ border-radius: 50%;
390
+ overflow: hidden;
391
+ padding: 15px 0;
246
392
  }
247
-
248
- /* 基础动画关键帧 */
249
- @keyframes fadeIn {
250
- from {
251
- opacity: 0;
393
+ #audio .icon-cancel .icon-h {
394
+ transform: rotate(45deg);
395
+ width: 100%;
396
+ height: 2px;
397
+ background: #fff;
398
+ }
399
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
400
+ content: '';
401
+ position: absolute;
402
+ width: 100%;
403
+ height: 2px;
404
+ background: #fff;
252
405
  }
406
+ @keyframes jumpheart {
253
407
  to {
254
- opacity: 1;
255
- }
256
- }
257
-
258
- @keyframes slideIn {
259
- from {
260
- transform: translateY(20px);
261
- opacity: 0;
262
- }
263
- to {
264
- transform: translateY(0);
265
- opacity: 1;
266
- }
267
- }
268
-
269
- @keyframes bounceIn {
270
- 0% {
271
- transform: scale(0.3);
272
- opacity: 0;
273
- }
274
- 50% {
275
- transform: scale(1.05);
276
- opacity: 0.8;
277
- }
278
- 70% {
279
- transform: scale(0.9);
280
- opacity: 0.9;
281
- }
282
- 100% {
283
- transform: scale(1);
284
- opacity: 1;
285
- }
286
- }
287
- @keyframes jumpheart {
288
- to {
289
- -webkit-transform: scale(1.2);
290
- transform: scale(1.2)
408
+ -webkit-transform: scale(1.2);
409
+ transform: scale(1.2)
291
410
  }
292
411
  }
293
412
  .ele-calendar {
@@ -625,133 +744,35 @@
625
744
  }
626
745
  .icon-xingzhuangjiehe:before {
627
746
  content: "\E6A6";
628
- }.element-ditu .ani-wrap {
629
- width: 100%;
630
- height: 100%;
631
- overflow: hidden
632
- }
633
-
634
- .element-ditu .map {
635
- width: 100%;
636
- height: 100%
747
+ }.button {
748
+ position: absolute;
749
+ cursor: pointer;
750
+ user-select: none;
637
751
  }
638
-
639
- .element-ditu .map .el-button {
640
- width: 100%;
641
- height: 100%;
642
- display: -webkit-box;
643
- display: -ms-flexbox;
752
+
753
+ .button .ani-wrap {
644
754
  display: flex;
645
- -webkit-box-align: center;
646
- -ms-flex-align: center;
647
- align-items: center;
648
- padding: 0;
649
- -webkit-box-pack: center;
650
- -ms-flex-pack: center;
651
755
  justify-content: center;
652
- background: inherit;
653
- color: inherit;
654
- border: none
655
- }
656
-
657
- .element-ditu .center-map {
658
- width: 100%;
659
- height: 100%;
660
- background: #fff
661
- }
662
-
663
- .element-ditu .mask-map {
664
- position: absolute;
665
- width: 100%;
666
- height: 100%;
667
- top: 0
668
- }
669
- .map-iframe {
756
+ align-items: center;
670
757
  width: 100%;
671
758
  height: 100%;
672
- }.ele-shape {
673
- position: absolute;
674
759
  overflow: hidden;
760
+ transition: opacity 0.2s;
675
761
  }
676
-
677
- .ani-wrap {
678
- width: 100%;
679
- height: 100%;
680
- box-sizing: border-box;
681
- }
682
-
683
- .e-shape {
684
- width: 100%;
685
- height: 100%;
686
- }
687
-
688
- .svg-container :deep(svg) {
689
- width: 100%;
690
- height: 100%;
691
- display: block;
762
+
763
+ .button .ani-wrap:hover {
764
+ opacity: 0.9;
692
765
  }
693
766
 
694
- .svg-loading,
695
- .svg-error {
767
+ .button-content {
696
768
  display: flex;
697
769
  align-items: center;
698
770
  justify-content: center;
699
- width: 100%;
700
- height: 100%;
701
- background: rgba(0,0,0,0.05);
702
- }.ele-img {
703
- position: absolute;
704
- overflow: hidden;
705
- }
706
-
707
- .ele-img .ani-wrap {
708
- width: 100%;
709
- height: 100%;
710
- }
711
-
712
- .ele-img .ele-image {
713
- position: relative;
714
- display: block;
715
- }
716
-
717
- .ele-img .rotate-wrap {
718
- position: absolute;
719
- left: 0;
720
- right: 0;
721
- top: 0;
722
- bottom: 0;
723
- }
724
-
725
- .ele-img .ele-img-bg,
726
- .ele-img .rotate-wrap .img-wrap {
727
- width: 100%;
728
- height: 100%;
729
- overflow: hidden;
730
- }
731
-
732
- .ele-img .ele-bg-wrap {
733
- width: 100%;
734
- height: 100%;
735
- background-size: cover;
736
- background-position: 50% 50%;
737
- background-repeat: no-repeat;
738
- background-clip: border-box;
739
- }
740
-
741
- /* 动画关键帧 */
742
- @keyframes zoomIn {
743
- from {
744
- opacity: 0;
745
- transform: scale(0.5);
746
- }
747
- to {
748
- opacity: 1;
749
- transform: scale(1);
750
- }
751
- }
752
- .ele-lottie .ele-lotwrap {
753
- overflow: hidden;
754
- }.call {
771
+ }
772
+
773
+ .btn-text {
774
+ margin-left: 10px;
775
+ }.call {
755
776
  position: absolute;
756
777
  cursor: pointer;
757
778
  user-select: none;
@@ -784,130 +805,87 @@
784
805
 
785
806
  .hb-tel:before {
786
807
  content: "\E642";
787
- }#audio {
788
- position: absolute;
789
- right: 10px;
790
- top: 10px;
791
- z-index: 103;
792
- width: 30px;
793
- height: 30px;
794
- display: flex;
795
- align-items: center;
808
+ }.ele-effect {
809
+ will-change: transform;
796
810
  }
797
811
 
798
- #audio .mrotate {
799
- animation: mrotate 5s linear infinite;
812
+ .ele-effect .effect-wrap {
813
+ position: relative;
814
+ width: 100%;
815
+ height: 100%;
800
816
  }
801
817
 
802
- @keyframes mrotate {
803
- to {
804
- transform: rotate(1turn);
818
+ .particle {
819
+ position: absolute;
820
+ background-repeat: no-repeat;
821
+ background-size: contain;
822
+ animation-name: falling;
823
+ animation-timing-function: linear;
824
+ animation-iteration-count: infinite;
825
+ will-change: transform;
826
+ }
827
+
828
+ @keyframes falling {
829
+ 0% {
830
+ transform: translateY(0) rotate(0deg);
831
+ opacity: 1;
832
+ }
833
+ 80% {
834
+ opacity: 0.8;
835
+ }
836
+ 100% {
837
+ transform: translateY(100vh) rotate(360deg);
838
+ opacity: 0;
805
839
  }
806
840
  }
841
+ .ele-lottie .ele-lotwrap {
842
+ overflow: hidden
843
+ }
807
844
 
808
- #audio .audio {
845
+ .ele-effect .effect-wrap {
846
+ position: relative;
847
+ overflow: hidden;
848
+ width: 100%;
849
+ height: 100%
850
+ }
851
+
852
+ .ele-effect .e-small {
853
+ position: absolute;
854
+ width: 24px;
855
+ height: 24px;
856
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
857
+ background-size: cover;
858
+ background-repeat: no-repeat;
859
+ -webkit-transform-origin: center;
860
+ transform-origin: center;
861
+ -webkit-animation: snow 5s linear infinite;
862
+ animation: snow 5s linear infinite
863
+ }body, html {
809
864
  width: 100%;
810
865
  height: 100%;
811
- display: flex;
812
- align-items: center;
813
- justify-content: center;
814
- color: #fff;
815
- background: #666;
816
- border-radius: 50%;
817
- overflow: hidden;
818
- cursor: pointer;
819
- transition: all 0.3s ease;
866
+ }
867
+ * {
868
+ padding: 0;
869
+ margin: 0;
870
+ box-sizing: border-box;
871
+ white-space: normal;
872
+ word-break: break-all;
873
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
820
874
  }
821
875
 
822
- #audio .audio.a-border {
823
- border: 1px solid #fff;
876
+ @font-face {
877
+ font-family: iconfont;
878
+ src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
879
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
880
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
824
881
  }
825
882
 
826
- #audio .audio .music-icon {
827
- display: block;
828
- width: 60%;
829
- height: 60%;
830
- object-fit: contain;
831
- }
832
-
833
- #audio .audio .iconfont {
834
- font-size: 2opx;
835
- line-height: 1;
836
- }
837
- #audio .icon-cancel {
838
- position: absolute;
839
- width: 100%;
840
- height: 100%;
841
- border-radius: 50%;
842
- overflow: hidden;
843
- padding: 15px 0;
844
- }
845
- #audio .icon-cancel .icon-h {
846
- transform: rotate(45deg);
847
- width: 100%;
848
- height: 2px;
849
- background: #fff;
850
- }
851
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
852
- content: '';
853
- position: absolute;
854
- width: 100%;
855
- height: 2px;
856
- background: #fff;
857
- }.button {
858
- position: absolute;
859
- cursor: pointer;
860
- user-select: none;
861
- }
862
-
863
- .button .ani-wrap {
864
- display: flex;
865
- justify-content: center;
866
- align-items: center;
867
- width: 100%;
868
- height: 100%;
869
- overflow: hidden;
870
- transition: opacity 0.2s;
871
- }
872
-
873
- .button .ani-wrap:hover {
874
- opacity: 0.9;
875
- }
876
-
877
- .button-content {
878
- display: flex;
879
- align-items: center;
880
- justify-content: center;
881
- }
882
-
883
- .btn-text {
884
- margin-left: 10px;
885
- }body, html {
886
- width: 100%;
887
- height: 100%;
888
- }
889
- * {
890
- padding: 0;
891
- margin: 0;
892
- box-sizing: border-box;
893
- white-space: normal;
894
- word-break: break-all;
895
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
896
- }
897
-
898
- @font-face {
899
- font-family: iconfont;
900
- src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
901
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
902
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
903
- }
904
-
905
- .iconfont {
906
- font-family: "iconfont" !important;
907
- font-size: 16px;
908
- font-style: normal;
909
- -webkit-font-smoothing: antialiased;
910
- -moz-osx-font-smoothing: grayscale;
883
+ .iconfont {
884
+ font-family: "iconfont" !important;
885
+ font-size: 16px;
886
+ font-style: normal;
887
+ -webkit-font-smoothing: antialiased;
888
+ -moz-osx-font-smoothing: grayscale;
911
889
  }
912
890
 
913
891
  #index {
@@ -2353,229 +2331,47 @@ to {
2353
2331
  -webkit-transform: none;
2354
2332
  transform: none
2355
2333
  }
2356
- }#page-list .tip-cover {
2357
- position: fixed;
2358
- left: 0;
2359
- top: 0;
2360
- width: 100%;
2361
- height: 100%;
2362
- display: -ms-flexbox;
2363
- display: flex;
2364
- -ms-flex-align: center;
2365
- align-items: center;
2366
- -ms-flex-pack: center;
2367
- justify-content: center;
2368
- z-index: 999;
2369
- background-color: rgba(0,0,0,.7)
2370
- }
2371
-
2372
- #page-list .tip-cover .tip {
2373
- width: 80%;
2374
- max-width: 250px;
2375
- padding: 10px;
2376
- border-radius: 5px;
2377
- background-color: #fff
2378
- }
2379
-
2380
- #page-list .tip-cover .tip-btn {
2381
- display: block;
2382
- margin: 25px auto;
2383
- width: 120px;
2384
- height: 30px;
2385
- color: #fff;
2386
- border-radius: 4px;
2387
- text-align: center;
2388
- font-size: 14px;
2389
- line-height: 30px;
2390
- background: #ed5566
2391
- }
2392
-
2393
- #page-list .tip-cover .tip-content {
2394
- font-size: 14px;
2395
- padding-top: 30px;
2396
- }
2397
-
2398
- .tip-cover {
2399
- position: fixed;
2400
- left: 0;
2401
- top: 0;
2402
- width: 100%;
2403
- height: 100%;
2404
- display: -ms-flexbox;
2405
- display: flex;
2406
- -ms-flex-align: center;
2407
- align-items: center;
2408
- -ms-flex-pack: center;
2409
- justify-content: center;
2410
- z-index: 999;
2411
- background-color: rgba(0,0,0,.7)
2412
- }
2413
-
2414
- .tip-cover .tip {
2415
- width: 80%;
2416
- max-width: 250px;
2417
- padding: 5px;
2418
- border-radius: 3px;
2419
- background-color: #fff
2420
- }
2421
-
2422
- .tip-cover .tip-btn {
2423
- display: block;
2424
- margin: 13px auto;
2425
- width: 64px;
2426
- height: 20px;
2427
- color: #fff;
2428
- border-radius: 4px;
2429
- text-align: center;
2430
- font-size: 14px;
2431
- line-height: 20px;
2432
- background: #ed5566;
2433
- } .ele-effect {
2434
- will-change: transform;
2435
- }
2436
-
2437
- .ele-effect .effect-wrap {
2438
- position: relative;
2439
- width: 100%;
2440
- height: 100%;
2441
- }
2442
-
2443
- .particle {
2444
- position: absolute;
2445
- background-repeat: no-repeat;
2446
- background-size: contain;
2447
- animation-name: falling;
2448
- animation-timing-function: linear;
2449
- animation-iteration-count: infinite;
2450
- will-change: transform;
2451
- }
2452
-
2453
- @keyframes falling {
2454
- 0% {
2455
- transform: translateY(0) rotate(0deg);
2456
- opacity: 1;
2334
+ }/* Iconfont definition */
2335
+ .icon-danmuliebiao1:before {
2336
+ content: "\E68A";
2457
2337
  }
2458
- 80% {
2459
- opacity: 0.8;
2338
+
2339
+ .icon-cuowu2:before {
2340
+ content: "\E65E";
2460
2341
  }
2461
- 100% {
2462
- transform: translateY(100vh) rotate(360deg);
2463
- opacity: 0;
2342
+
2343
+ i {
2344
+ font-style: normal;
2464
2345
  }
2465
- }
2466
- .ele-lottie .ele-lotwrap {
2467
- overflow: hidden
2468
- }
2469
-
2470
- .ele-effect .effect-wrap {
2471
- position: relative;
2472
- overflow: hidden;
2346
+
2347
+ .v-modal {
2348
+ position: fixed;
2349
+ left: 0;
2350
+ top: 0;
2351
+ width: 100%;
2352
+ height: 100%;
2353
+ opacity: .5;
2354
+ background: #000;
2355
+ }
2356
+ /* 底部工具栏样式 */
2357
+ #toolbarNew {
2358
+ position: fixed;
2359
+ left: 0;
2360
+ bottom: 0;
2473
2361
  width: 100%;
2474
- height: 100%
2475
- }
2476
-
2477
- .ele-effect .e-small {
2478
- position: absolute;
2479
- width: 24px;
2480
- height: 24px;
2481
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
2482
- background-size: cover;
2483
- background-repeat: no-repeat;
2484
- -webkit-transform-origin: center;
2485
- transform-origin: center;
2486
- -webkit-animation: snow 5s linear infinite;
2487
- animation: snow 5s linear infinite
2488
- }.form-input {
2489
- position: absolute;
2362
+ padding: 12px 0;
2363
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
2364
+ z-index: 100;
2490
2365
  }
2491
2366
 
2492
- .input-wrapper {
2367
+ .toolbar {
2493
2368
  display: flex;
2494
2369
  align-items: center;
2495
- width: 100%;
2496
- height: 100%;
2497
2370
  padding: 0 10px;
2498
- box-sizing: border-box;
2499
- position: relative;
2500
- transition: border-color 0.3s;
2501
2371
  }
2502
2372
 
2503
- .required-marker {
2504
- font-size: 12px;
2505
- padding: 0 5px 0 0;
2506
- color: red;
2507
- vertical-align: middle;
2508
- }
2509
-
2510
- input {
2511
- flex: 1;
2512
- border: none;
2513
- outline: none;
2514
- background: transparent;
2515
- height: 100%;
2516
- padding: 0;
2517
- margin: 0;
2518
- }
2519
- /*
2520
- input::placeholder {
2521
- color: #ccc;
2522
- opacity: 1;
2523
- } */
2524
-
2525
- .dynamic-placeholder-input::placeholder {
2526
- color: var(--placeholder-color, #999);
2527
- opacity: 1;
2528
- }
2529
- .dynamic-placeholder-input::-webkit-input-placeholder {
2530
- color: var(--placeholder-color, #999);
2531
- }
2532
- .dynamic-placeholder-input::-moz-placeholder {
2533
- color: var(--placeholder-color, #999);
2534
- opacity: 1;
2535
- }
2536
- .dynamic-placeholder-input:-ms-input-placeholder {
2537
- color: var(--placeholder-color, #999);
2538
- }/* Iconfont definition */
2539
- .icon-danmuliebiao1:before {
2540
- content: "\E68A";
2541
- }
2542
-
2543
- .icon-cuowu2:before {
2544
- content: "\E65E";
2545
- }
2546
-
2547
- i {
2548
- font-style: normal;
2549
- }
2550
-
2551
- .v-modal {
2552
- position: fixed;
2553
- left: 0;
2554
- top: 0;
2555
- width: 100%;
2556
- height: 100%;
2557
- opacity: .5;
2558
- background: #000;
2559
- }
2560
- /* 底部工具栏样式 */
2561
- #toolbarNew {
2562
- position: fixed;
2563
- left: 0;
2564
- bottom: 0;
2565
- width: 100%;
2566
- padding: 12px 0;
2567
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
2568
- z-index: 100;
2569
- }
2570
-
2571
- .toolbar {
2572
- display: flex;
2573
- align-items: center;
2574
- padding: 0 10px;
2575
- }
2576
-
2577
- .bar-left {
2578
- position: relative;
2373
+ .bar-left {
2374
+ position: relative;
2579
2375
  flex: 1;
2580
2376
  }
2581
2377
 
@@ -3438,7 +3234,309 @@ to {
3438
3234
  100% { transform: rotate(360deg); }
3439
3235
  }
3440
3236
 
3441
- .form-submit {
3237
+ .element-ditu .ani-wrap {
3238
+ width: 100%;
3239
+ height: 100%;
3240
+ overflow: hidden
3241
+ }
3242
+
3243
+ .element-ditu .map {
3244
+ width: 100%;
3245
+ height: 100%
3246
+ }
3247
+
3248
+ .element-ditu .map .el-button {
3249
+ width: 100%;
3250
+ height: 100%;
3251
+ display: -webkit-box;
3252
+ display: -ms-flexbox;
3253
+ display: flex;
3254
+ -webkit-box-align: center;
3255
+ -ms-flex-align: center;
3256
+ align-items: center;
3257
+ padding: 0;
3258
+ -webkit-box-pack: center;
3259
+ -ms-flex-pack: center;
3260
+ justify-content: center;
3261
+ background: inherit;
3262
+ color: inherit;
3263
+ border: none
3264
+ }
3265
+
3266
+ .element-ditu .center-map {
3267
+ width: 100%;
3268
+ height: 100%;
3269
+ background: #fff
3270
+ }
3271
+
3272
+ .element-ditu .mask-map {
3273
+ position: absolute;
3274
+ width: 100%;
3275
+ height: 100%;
3276
+ top: 0
3277
+ }
3278
+ .map-iframe {
3279
+ width: 100%;
3280
+ height: 100%;
3281
+ }#page-list .tip-cover {
3282
+ position: fixed;
3283
+ left: 0;
3284
+ top: 0;
3285
+ width: 100%;
3286
+ height: 100%;
3287
+ display: -ms-flexbox;
3288
+ display: flex;
3289
+ -ms-flex-align: center;
3290
+ align-items: center;
3291
+ -ms-flex-pack: center;
3292
+ justify-content: center;
3293
+ z-index: 999;
3294
+ background-color: rgba(0,0,0,.7)
3295
+ }
3296
+
3297
+ #page-list .tip-cover .tip {
3298
+ width: 80%;
3299
+ max-width: 250px;
3300
+ padding: 10px;
3301
+ border-radius: 5px;
3302
+ background-color: #fff
3303
+ }
3304
+
3305
+ #page-list .tip-cover .tip-btn {
3306
+ display: block;
3307
+ margin: 25px auto;
3308
+ width: 120px;
3309
+ height: 30px;
3310
+ color: #fff;
3311
+ border-radius: 4px;
3312
+ text-align: center;
3313
+ font-size: 14px;
3314
+ line-height: 30px;
3315
+ background: #ed5566
3316
+ }
3317
+
3318
+ #page-list .tip-cover .tip-content {
3319
+ font-size: 14px;
3320
+ padding-top: 30px;
3321
+ }
3322
+
3323
+ .tip-cover {
3324
+ position: fixed;
3325
+ left: 0;
3326
+ top: 0;
3327
+ width: 100%;
3328
+ height: 100%;
3329
+ display: -ms-flexbox;
3330
+ display: flex;
3331
+ -ms-flex-align: center;
3332
+ align-items: center;
3333
+ -ms-flex-pack: center;
3334
+ justify-content: center;
3335
+ z-index: 999;
3336
+ background-color: rgba(0,0,0,.7)
3337
+ }
3338
+
3339
+ .tip-cover .tip {
3340
+ width: 80%;
3341
+ max-width: 250px;
3342
+ padding: 5px;
3343
+ border-radius: 3px;
3344
+ background-color: #fff
3345
+ }
3346
+
3347
+ .tip-cover .tip-btn {
3348
+ display: block;
3349
+ margin: 13px auto;
3350
+ width: 64px;
3351
+ height: 20px;
3352
+ color: #fff;
3353
+ border-radius: 4px;
3354
+ text-align: center;
3355
+ font-size: 14px;
3356
+ line-height: 20px;
3357
+ background: #ed5566;
3358
+ } .ele-shape {
3359
+ position: absolute;
3360
+ overflow: hidden;
3361
+ }
3362
+
3363
+ .ani-wrap {
3364
+ width: 100%;
3365
+ height: 100%;
3366
+ box-sizing: border-box;
3367
+ }
3368
+
3369
+ .e-shape {
3370
+ width: 100%;
3371
+ height: 100%;
3372
+ }
3373
+
3374
+ .svg-container :deep(svg) {
3375
+ width: 100%;
3376
+ height: 100%;
3377
+ display: block;
3378
+ }
3379
+
3380
+ .svg-loading,
3381
+ .svg-error {
3382
+ display: flex;
3383
+ align-items: center;
3384
+ justify-content: center;
3385
+ width: 100%;
3386
+ height: 100%;
3387
+ background: rgba(0,0,0,0.05);
3388
+ }
3389
+ .ele-lottie .ele-lotwrap {
3390
+ overflow: hidden;
3391
+ }.form-input {
3392
+ position: absolute;
3393
+ }
3394
+
3395
+ .input-wrapper {
3396
+ display: flex;
3397
+ align-items: center;
3398
+ width: 100%;
3399
+ height: 100%;
3400
+ padding: 0 10px;
3401
+ box-sizing: border-box;
3402
+ position: relative;
3403
+ transition: border-color 0.3s;
3404
+ }
3405
+
3406
+ .required-marker {
3407
+ font-size: 12px;
3408
+ padding: 0 5px 0 0;
3409
+ color: red;
3410
+ vertical-align: middle;
3411
+ }
3412
+
3413
+ input {
3414
+ flex: 1;
3415
+ border: none;
3416
+ outline: none;
3417
+ background: transparent;
3418
+ height: 100%;
3419
+ padding: 0;
3420
+ margin: 0;
3421
+ }
3422
+ /*
3423
+ input::placeholder {
3424
+ color: #ccc;
3425
+ opacity: 1;
3426
+ } */
3427
+
3428
+ .dynamic-placeholder-input::placeholder {
3429
+ color: var(--placeholder-color, #999);
3430
+ opacity: 1;
3431
+ }
3432
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3433
+ color: var(--placeholder-color, #999);
3434
+ }
3435
+ .dynamic-placeholder-input::-moz-placeholder {
3436
+ color: var(--placeholder-color, #999);
3437
+ opacity: 1;
3438
+ }
3439
+ .dynamic-placeholder-input:-ms-input-placeholder {
3440
+ color: var(--placeholder-color, #999);
3441
+ }/* .ele-form {
3442
+ position: absolute;
3443
+ user-select: none;
3444
+ } */
3445
+
3446
+ .f-select {
3447
+ cursor: pointer;
3448
+ }
3449
+
3450
+ .ani-wrap {
3451
+ position: relative;
3452
+ }
3453
+
3454
+ .f-select .ani-wrap .fs-tit {
3455
+ position: relative;
3456
+ display: flex;
3457
+ padding: 0 5px;
3458
+ height: 35px;
3459
+ line-height: 35px;
3460
+ align-items: center;
3461
+ }
3462
+
3463
+ .require {
3464
+ padding: 0 5px 0 0;
3465
+ color: red;
3466
+ vertical-align: middle;
3467
+ }
3468
+
3469
+ .fs-cont {
3470
+ padding-right: 15px;
3471
+ white-space: nowrap;
3472
+ overflow: hidden;
3473
+ text-overflow: ellipsis;
3474
+ flex-grow: 1;
3475
+ }
3476
+
3477
+ .icon-bofang1 {
3478
+ font-size: 12px;
3479
+ transition: transform 0.2s ease;
3480
+ }
3481
+
3482
+ .rotate-180 {
3483
+ transform: rotate(180deg) !important;
3484
+ }
3485
+
3486
+ .f-real {
3487
+ position: absolute;
3488
+ left: 0;
3489
+ top: 0;
3490
+ width: 100%;
3491
+ height: 100%;
3492
+ z-index: 1;
3493
+ opacity: 0;
3494
+ cursor: pointer;
3495
+ }
3496
+
3497
+ .dropdown-menu {
3498
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3499
+ }
3500
+
3501
+ .dropdown-item {
3502
+ padding: 8px 10px;
3503
+ cursor: pointer;
3504
+ transition: background-color 0.2s;
3505
+ }
3506
+
3507
+ .dropdown-item:hover {
3508
+ background-color: #f5f5f5;
3509
+ }
3510
+
3511
+ .dropdown-item.selected {
3512
+ background-color: #e6f7ff;
3513
+ color: #1890ff;
3514
+ }
3515
+
3516
+ .f-select .fs-tit .icon-bofang1 {
3517
+ position: absolute;
3518
+ right: 10px;
3519
+ font-size: 12px;
3520
+ display: inline-block;
3521
+ transform: rotate(90deg);
3522
+ }
3523
+
3524
+ .icon-bofang1:before {
3525
+ content: "\E6CF";
3526
+ }
3527
+
3528
+ .has-error {
3529
+ border-color: #ff4d4f !important;
3530
+ }
3531
+
3532
+ .error-tip {
3533
+ position: fixed;
3534
+ left: 0;
3535
+ top: 0;
3536
+ width: 100%;
3537
+ height: 100%;
3538
+ z-index: 1000;
3539
+ }.form-submit {
3442
3540
  cursor: pointer;
3443
3541
  transition: all 0.2s;
3444
3542
  outline: none;
@@ -3569,12 +3667,50 @@ cursor: not-allowed;
3569
3667
 
3570
3668
  .has-error .fs-tit {
3571
3669
  border-bottom-color: #ff4d4f;
3572
- }/* .ele-form {
3573
- position: absolute;
3574
- user-select: none;
3575
- } */
3576
-
3577
- .f-select {
3670
+ }
3671
+ .global.video {
3672
+ width: 35px;
3673
+ height: 55px;
3674
+ border-radius: 50%;
3675
+ text-align: center;
3676
+ margin-bottom: 5px;
3677
+ border: 2px solid #fff;
3678
+ cursor: pointer;
3679
+ }
3680
+ .icon-shipin2:before { content: "\E611"; }
3681
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3682
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
3683
+ }
3684
+
3685
+ .global.receipt {
3686
+ width: 35px;
3687
+ height: 55px;
3688
+ border-radius: 50%;
3689
+ text-align: center;
3690
+ margin-bottom: 5px;
3691
+ border: 2px solid #fff;
3692
+ cursor: pointer;
3693
+ }
3694
+ .icon-liuyan:before { content: "\E636"; }
3695
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3696
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
3697
+ .global.tel {
3698
+ width: 35px;
3699
+ height: 55px;
3700
+ border-radius: 50%;
3701
+ text-align: center;
3702
+ margin-bottom: 15px;
3703
+ border: 2px solid #fff;
3704
+ cursor: pointer;
3705
+ }
3706
+ .icon-dianhua:before { content: "\E60E"; }
3707
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3708
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}/* .ele-form {
3709
+ position: absolute;
3710
+ user-select: none;
3711
+ }
3712
+ */
3713
+ .f-single {
3578
3714
  cursor: pointer;
3579
3715
  }
3580
3716
 
@@ -3582,13 +3718,15 @@ cursor: not-allowed;
3582
3718
  position: relative;
3583
3719
  }
3584
3720
 
3585
- .f-select .ani-wrap .fs-tit {
3586
- position: relative;
3721
+ .f-single .ani-wrap .fs-tit {
3587
3722
  display: flex;
3588
3723
  padding: 0 5px;
3589
- height: 35px;
3590
- line-height: 35px;
3724
+ height: 40px;
3591
3725
  align-items: center;
3726
+ white-space: nowrap;
3727
+ overflow: hidden;
3728
+ text-overflow: ellipsis;
3729
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3592
3730
  }
3593
3731
 
3594
3732
  .require {
@@ -3597,69 +3735,63 @@ cursor: not-allowed;
3597
3735
  vertical-align: middle;
3598
3736
  }
3599
3737
 
3600
- .fs-cont {
3601
- padding-right: 15px;
3602
- white-space: nowrap;
3603
- overflow: hidden;
3604
- text-overflow: ellipsis;
3605
- flex-grow: 1;
3606
- }
3607
-
3608
- .icon-bofang1 {
3609
- font-size: 12px;
3610
- transition: transform 0.2s ease;
3611
- }
3612
-
3613
- .rotate-180 {
3614
- transform: rotate(180deg) !important;
3615
- }
3616
-
3617
- .f-real {
3618
- position: absolute;
3619
- left: 0;
3620
- top: 0;
3621
- width: 100%;
3622
- height: 100%;
3623
- z-index: 1;
3624
- opacity: 0;
3625
- cursor: pointer;
3738
+ .f-single ul {
3739
+ padding: 15px;
3740
+ margin: 0;
3741
+ list-style: none;
3626
3742
  }
3627
3743
 
3628
- .dropdown-menu {
3629
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3744
+ .f-single ul li {
3745
+ display: flex;
3746
+ align-items: center;
3747
+ margin-top: 12px;
3748
+ font-size: 0;
3630
3749
  }
3631
3750
 
3632
- .dropdown-item {
3633
- padding: 8px 10px;
3634
- cursor: pointer;
3635
- transition: background-color 0.2s;
3751
+ .f-single ul li:first-child {
3752
+ margin-top: 0;
3636
3753
  }
3637
3754
 
3638
- .dropdown-item:hover {
3639
- background-color: #f5f5f5;
3755
+ .fs-circle {
3756
+ display: inline-block;
3757
+ width: 16px;
3758
+ height: 16px;
3759
+ border-radius: 50%;
3760
+ position: relative;
3761
+ transition: all 0.2s;
3640
3762
  }
3641
3763
 
3642
- .dropdown-item.selected {
3643
- background-color: #e6f7ff;
3644
- color: #1890ff;
3764
+ .fs-circle.selected {
3765
+ background-color: #2687f1;
3766
+ border-color: #2687f1 !important;
3645
3767
  }
3646
3768
 
3647
- .f-select .fs-tit .icon-bofang1 {
3648
- position: absolute;
3649
- right: 10px;
3650
- font-size: 12px;
3651
- display: inline-block;
3652
- transform: rotate(90deg);
3769
+ .fs-circle.selected::after {
3770
+ content: "";
3771
+ position: absolute;
3772
+ top: 3px;
3773
+ left: 3px;
3774
+ width: 8px;
3775
+ height: 8px;
3776
+ border-radius: 50%;
3777
+ background-color: white;
3653
3778
  }
3654
3779
 
3655
- .icon-bofang1:before {
3656
- content: "\E6CF";
3780
+ .fs-txt {
3781
+ display: inline-block;
3782
+ width: calc(100% - 16px);
3783
+ padding-left: 8px;
3784
+ vertical-align: top;
3785
+ word-break: break-all;
3786
+ font-size: 14px;
3787
+ line-height: 1.2;
3657
3788
  }
3658
3789
 
3659
- .has-error {
3660
- border-color: #ff4d4f !important;
3790
+ .has-error .fs-tit {
3791
+ border-bottom-color: #ff4d4f;
3661
3792
  }
3662
3793
 
3794
+ /* 错误提示样式 */
3663
3795
  .error-tip {
3664
3796
  position: fixed;
3665
3797
  left: 0;
@@ -3668,6 +3800,18 @@ cursor: not-allowed;
3668
3800
  height: 100%;
3669
3801
  z-index: 1000;
3670
3802
  }
3803
+ .global.map {
3804
+ width: 35px;
3805
+ height: 55px;
3806
+ border-radius: 50%;
3807
+ text-align: center;
3808
+ margin-bottom: 5px;
3809
+ border: 2px solid #fff;
3810
+ cursor: pointer;
3811
+ }
3812
+ .icon-daohang1:before { content: "\E612"; }
3813
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3814
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
3671
3815
  .icon-guanbi:before {
3672
3816
  content: "\E676";
3673
3817
  }
@@ -4061,148 +4205,3 @@ cursor: not-allowed;
4061
4205
  content: "\E65E";
4062
4206
  color: #F44336; /* 失败的红色 */
4063
4207
  }
4064
- /* .ele-form {
4065
- position: absolute;
4066
- user-select: none;
4067
- }
4068
- */
4069
- .f-single {
4070
- cursor: pointer;
4071
- }
4072
-
4073
- .ani-wrap {
4074
- position: relative;
4075
- }
4076
-
4077
- .f-single .ani-wrap .fs-tit {
4078
- display: flex;
4079
- padding: 0 5px;
4080
- height: 40px;
4081
- align-items: center;
4082
- white-space: nowrap;
4083
- overflow: hidden;
4084
- text-overflow: ellipsis;
4085
- border-bottom: 1px solid rgba(153, 153, 153, 1);
4086
- }
4087
-
4088
- .require {
4089
- padding: 0 5px 0 0;
4090
- color: red;
4091
- vertical-align: middle;
4092
- }
4093
-
4094
- .f-single ul {
4095
- padding: 15px;
4096
- margin: 0;
4097
- list-style: none;
4098
- }
4099
-
4100
- .f-single ul li {
4101
- display: flex;
4102
- align-items: center;
4103
- margin-top: 12px;
4104
- font-size: 0;
4105
- }
4106
-
4107
- .f-single ul li:first-child {
4108
- margin-top: 0;
4109
- }
4110
-
4111
- .fs-circle {
4112
- display: inline-block;
4113
- width: 16px;
4114
- height: 16px;
4115
- border-radius: 50%;
4116
- position: relative;
4117
- transition: all 0.2s;
4118
- }
4119
-
4120
- .fs-circle.selected {
4121
- background-color: #2687f1;
4122
- border-color: #2687f1 !important;
4123
- }
4124
-
4125
- .fs-circle.selected::after {
4126
- content: "";
4127
- position: absolute;
4128
- top: 3px;
4129
- left: 3px;
4130
- width: 8px;
4131
- height: 8px;
4132
- border-radius: 50%;
4133
- background-color: white;
4134
- }
4135
-
4136
- .fs-txt {
4137
- display: inline-block;
4138
- width: calc(100% - 16px);
4139
- padding-left: 8px;
4140
- vertical-align: top;
4141
- word-break: break-all;
4142
- font-size: 14px;
4143
- line-height: 1.2;
4144
- }
4145
-
4146
- .has-error .fs-tit {
4147
- border-bottom-color: #ff4d4f;
4148
- }
4149
-
4150
- /* 错误提示样式 */
4151
- .error-tip {
4152
- position: fixed;
4153
- left: 0;
4154
- top: 0;
4155
- width: 100%;
4156
- height: 100%;
4157
- z-index: 1000;
4158
- }
4159
- .global.receipt {
4160
- width: 35px;
4161
- height: 55px;
4162
- border-radius: 50%;
4163
- text-align: center;
4164
- margin-bottom: 5px;
4165
- border: 2px solid #fff;
4166
- cursor: pointer;
4167
- }
4168
- .icon-liuyan:before { content: "\E636"; }
4169
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4170
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
4171
- .global.video {
4172
- width: 35px;
4173
- height: 55px;
4174
- border-radius: 50%;
4175
- text-align: center;
4176
- margin-bottom: 5px;
4177
- border: 2px solid #fff;
4178
- cursor: pointer;
4179
- }
4180
- .icon-shipin2:before { content: "\E611"; }
4181
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4182
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4183
- }
4184
-
4185
- .global.tel {
4186
- width: 35px;
4187
- height: 55px;
4188
- border-radius: 50%;
4189
- text-align: center;
4190
- margin-bottom: 15px;
4191
- border: 2px solid #fff;
4192
- cursor: pointer;
4193
- }
4194
- .icon-dianhua:before { content: "\E60E"; }
4195
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4196
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4197
- .global.map {
4198
- width: 35px;
4199
- height: 55px;
4200
- border-radius: 50%;
4201
- text-align: center;
4202
- margin-bottom: 5px;
4203
- border: 2px solid #fff;
4204
- cursor: pointer;
4205
- }
4206
- .icon-daohang1:before { content: "\E612"; }
4207
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4208
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}