unika-components 1.0.358 → 1.0.361

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.
@@ -1,36 +1,4 @@
1
1
 
2
- .ele-shape {
3
- position: absolute;
4
- overflow: hidden;
5
- }
6
-
7
- .ani-wrap {
8
- width: 100%;
9
- height: 100%;
10
- box-sizing: border-box;
11
- }
12
-
13
- .e-shape {
14
- width: 100%;
15
- height: 100%;
16
- }
17
-
18
- .svg-container :deep(svg) {
19
- width: 100%;
20
- height: 100%;
21
- display: block;
22
- }
23
-
24
- .svg-loading,
25
- .svg-error {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- width: 100%;
30
- height: 100%;
31
- background: rgba(0,0,0,0.05);
32
- }
33
-
34
2
  .ele-text {
35
3
  position: relative;
36
4
  }
@@ -99,6 +67,79 @@
99
67
  }
100
68
  }
101
69
 
70
+ .ele-shape {
71
+ position: absolute;
72
+ overflow: hidden;
73
+ }
74
+
75
+ .ani-wrap {
76
+ width: 100%;
77
+ height: 100%;
78
+ box-sizing: border-box;
79
+ }
80
+
81
+ .e-shape {
82
+ width: 100%;
83
+ height: 100%;
84
+ }
85
+
86
+ .svg-container :deep(svg) {
87
+ width: 100%;
88
+ height: 100%;
89
+ display: block;
90
+ }
91
+
92
+ .svg-loading,
93
+ .svg-error {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ width: 100%;
98
+ height: 100%;
99
+ background: rgba(0,0,0,0.05);
100
+ }
101
+
102
+ .video-player {
103
+ position: absolute;
104
+ overflow: hidden;
105
+ background-color: #000;
106
+ }
107
+
108
+ .video-container {
109
+ width: 100%;
110
+ height: 100%;
111
+ }
112
+
113
+ .video-container iframe {
114
+ width: 100%;
115
+ height: 100%;
116
+ border: none;
117
+ }
118
+
119
+ .video-cover {
120
+ position: relative;
121
+ width: 100%;
122
+ height: 100%;
123
+ background-size: cover;
124
+ background-position: center;
125
+ cursor: pointer;
126
+ }
127
+
128
+ .video-cover .play-btn {
129
+ position: absolute;
130
+ left: 50%;
131
+ top: 50%;
132
+ transform: translate(-50%, -50%);
133
+ width: 50px;
134
+ height: 50px;
135
+ opacity: 0.8;
136
+ transition: opacity 0.2s;
137
+ }
138
+
139
+ .video-cover:hover .play-btn {
140
+ opacity: 1;
141
+ }
142
+
102
143
  .ele-img {
103
144
  position: absolute;
104
145
  overflow: hidden;
@@ -150,45 +191,240 @@
150
191
  }
151
192
  }
152
193
 
153
- .video-player {
194
+ #audio {
154
195
  position: absolute;
155
- overflow: hidden;
156
- background-color: #000;
196
+ right: 10px;
197
+ top: 10px;
198
+ z-index: 103;
199
+ width: 30px;
200
+ height: 30px;
201
+ display: flex;
202
+ align-items: center;
157
203
  }
158
204
 
159
- .video-container {
205
+ #audio .mrotate {
206
+ animation: mrotate 5s linear infinite;
207
+ }
208
+
209
+ @keyframes mrotate {
210
+ to {
211
+ transform: rotate(1turn);
212
+ }
213
+ }
214
+
215
+ #audio .audio {
160
216
  width: 100%;
161
217
  height: 100%;
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: center;
221
+ color: #fff;
222
+ background: #666;
223
+ border-radius: 50%;
224
+ overflow: hidden;
225
+ cursor: pointer;
226
+ transition: all 0.3s ease;
162
227
  }
163
228
 
164
- .video-container iframe {
229
+ #audio .audio.a-border {
230
+ border: 1px solid #fff;
231
+ }
232
+
233
+ #audio .audio .music-icon {
234
+ display: block;
235
+ width: 60%;
236
+ height: 60%;
237
+ object-fit: contain;
238
+ }
239
+
240
+ #audio .audio .iconfont {
241
+ font-size: 2opx;
242
+ line-height: 1;
243
+ }
244
+ #audio .icon-cancel {
245
+ position: absolute;
246
+ width: 100%;
247
+ height: 100%;
248
+ border-radius: 50%;
249
+ overflow: hidden;
250
+ padding: 15px 0;
251
+ }
252
+ #audio .icon-cancel .icon-h {
253
+ transform: rotate(45deg);
254
+ width: 100%;
255
+ height: 2px;
256
+ margin-top: 15px;
257
+ background: #fff;
258
+ }
259
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
260
+ content: '';
261
+ position: absolute;
262
+ width: 100%;
263
+ height: 2px;
264
+ background: #fff;
265
+ }
266
+
267
+ .element-ditu .ani-wrap {
268
+ width: 100%;
269
+ height: 100%;
270
+ overflow: hidden
271
+ }
272
+
273
+ .element-ditu .map {
274
+ width: 100%;
275
+ height: 100%
276
+ }
277
+
278
+ .element-ditu .map .el-button {
279
+ width: 100%;
280
+ height: 100%;
281
+ display: -webkit-box;
282
+ display: -ms-flexbox;
283
+ display: flex;
284
+ -webkit-box-align: center;
285
+ -ms-flex-align: center;
286
+ align-items: center;
287
+ padding: 0;
288
+ -webkit-box-pack: center;
289
+ -ms-flex-pack: center;
290
+ justify-content: center;
291
+ background: inherit;
292
+ color: inherit;
293
+ border: none
294
+ }
295
+
296
+ .element-ditu .center-map {
297
+ width: 100%;
298
+ height: 100%;
299
+ background: #fff
300
+ }
301
+
302
+ .element-ditu .mask-map {
303
+ position: absolute;
304
+ width: 100%;
305
+ height: 100%;
306
+ top: 0
307
+ }
308
+
309
+
310
+ .bohao-button {
311
+ position: absolute;
312
+ cursor: pointer;
313
+ user-select: none;
314
+ }
315
+
316
+ .bohao-container {
317
+ display: flex;
318
+ justify-content: center;
319
+ align-items: center;
165
320
  width: 100%;
166
321
  height: 100%;
167
- border: none;
322
+ overflow: hidden;
323
+ transition: opacity 0.2s;
168
324
  }
169
325
 
170
- .video-cover {
326
+ .bohao-container:hover {
327
+ opacity: 0.9;
328
+ }
329
+
330
+ .bohao-content {
331
+ display: flex;
332
+ align-items: center;
333
+ justify-content: center;
334
+ }
335
+
336
+ .btn-text {
337
+ margin-left: 10px;
338
+ }
339
+
340
+ /* 这里可以添加实际的电话图标样式 */
341
+ .iconfont.hb-tel {
342
+ display: inline-block;
343
+ width: 16px;
344
+ height: 16px;
345
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
346
+ background-repeat: no-repeat;
347
+ background-position: center;
348
+ background-size: contain;
349
+ }
350
+
351
+ .like-button {
352
+ display: flex;
353
+ flex-direction: column;
354
+ align-items: center;
355
+ cursor: pointer;
356
+ }
357
+
358
+ .icon-heart {
359
+ font-size: 24px;
360
+ color: #e74c3c;
361
+ }
362
+
363
+ .liked {
364
+ color: #f00; /* 更改颜色以示已赞 */
365
+ }
366
+
367
+ .like-count {
368
+ margin-top: 4px;
369
+ font-size: 16px;
370
+ color: #333;
371
+ }
372
+
373
+ .effect-container {
374
+ will-change: transform;
375
+ }
376
+
377
+ .particles-wrapper {
171
378
  position: relative;
172
379
  width: 100%;
173
380
  height: 100%;
174
- background-size: cover;
175
- background-position: center;
176
- cursor: pointer;
177
381
  }
178
382
 
179
- .video-cover .play-btn {
383
+ .particle {
180
384
  position: absolute;
181
- left: 50%;
182
- top: 50%;
183
- transform: translate(-50%, -50%);
184
- width: 50px;
185
- height: 50px;
186
- opacity: 0.8;
187
- transition: opacity 0.2s;
385
+ background-repeat: no-repeat;
386
+ background-size: contain;
387
+ animation-name: falling;
388
+ animation-timing-function: linear;
389
+ animation-iteration-count: infinite;
390
+ will-change: transform;
188
391
  }
189
392
 
190
- .video-cover:hover .play-btn {
191
- opacity: 1;
393
+ @keyframes falling {
394
+ 0% {
395
+ transform: translateY(0) rotate(0deg);
396
+ opacity: 1;
397
+ }
398
+ 80% {
399
+ opacity: 0.8;
400
+ }
401
+ 100% {
402
+ transform: translateY(100vh) rotate(360deg);
403
+ opacity: 0;
404
+ }
405
+ }
406
+ .ele-lottie .ele-lotwrap {
407
+ overflow: hidden
408
+ }
409
+
410
+ .ele-effect .effect-wrap {
411
+ position: relative;
412
+ overflow: hidden;
413
+ width: 100%;
414
+ height: 100%
415
+ }
416
+
417
+ .ele-effect .e-small {
418
+ position: absolute;
419
+ width: 24px;
420
+ height: 24px;
421
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
422
+ background-size: cover;
423
+ background-repeat: no-repeat;
424
+ -webkit-transform-origin: center;
425
+ transform-origin: center;
426
+ -webkit-animation: snow 5s linear infinite;
427
+ animation: snow 5s linear infinite
192
428
  }
193
429
 
194
430
  .ant-input-number {
@@ -391,27 +627,30 @@
391
627
 
392
628
 
393
629
 
394
- .like-button {
395
- display: flex;
396
- flex-direction: column;
397
- align-items: center;
398
- cursor: pointer;
399
- }
400
-
401
- .icon-heart {
402
- font-size: 24px;
403
- color: #e74c3c;
630
+ .uni-lotties-component {
631
+ width: 100%;
632
+ height: 100%;
404
633
  }
634
+
635
+ .uni-svg-component {
636
+ display: inline-block;
637
+ }
405
638
 
406
- .liked {
407
- color: #f00; /* 更改颜色以示已赞 */
639
+ /* 设计稿尺寸(如375px下20px的按钮) */
640
+ .btn {
641
+ width: 20px; /* 直接写设计稿px */
642
+ height: 10px;
643
+ font-size: 14px;
408
644
  }
409
645
 
410
- .like-count {
411
- margin-top: 4px;
412
- font-size: 16px;
413
- color: #333;
414
- }
646
+ .uni-build-up-component {
647
+ }
648
+
649
+ .form-container {
650
+ position: relative;
651
+ width: 100%;
652
+ height: 100%;
653
+ }
415
654
 
416
655
  @font-face {
417
656
  font-family: "iconfont"; /* Project id 3350423 */
@@ -547,134 +786,6 @@
547
786
  .hb-zan1:before {
548
787
  content: "\e6aa";
549
788
  }
550
-
551
- .uni-lotties-component {
552
- width: 100%;
553
- height: 100%;
554
- }
555
-
556
- /* 设计稿尺寸(如375px下20px的按钮) */
557
- .btn {
558
- width: 20px; /* 直接写设计稿px */
559
- height: 10px;
560
- font-size: 14px;
561
- }
562
-
563
- .element-ditu .ani-wrap {
564
- width: 100%;
565
- height: 100%;
566
- overflow: hidden
567
- }
568
-
569
- .element-ditu .map {
570
- width: 100%;
571
- height: 100%
572
- }
573
-
574
- .element-ditu .map .el-button {
575
- width: 100%;
576
- height: 100%;
577
- display: -webkit-box;
578
- display: -ms-flexbox;
579
- display: flex;
580
- -webkit-box-align: center;
581
- -ms-flex-align: center;
582
- align-items: center;
583
- padding: 0;
584
- -webkit-box-pack: center;
585
- -ms-flex-pack: center;
586
- justify-content: center;
587
- background: inherit;
588
- color: inherit;
589
- border: none
590
- }
591
-
592
- .element-ditu .center-map {
593
- width: 100%;
594
- height: 100%;
595
- background: #fff
596
- }
597
-
598
- .element-ditu .mask-map {
599
- position: absolute;
600
- width: 100%;
601
- height: 100%;
602
- top: 0
603
- }
604
-
605
-
606
- #audio {
607
- position: absolute;
608
- right: 10px;
609
- top: 10px;
610
- z-index: 103;
611
- width: 30px;
612
- height: 30px;
613
- display: flex;
614
- align-items: center;
615
- }
616
-
617
- #audio .mrotate {
618
- animation: mrotate 5s linear infinite;
619
- }
620
-
621
- @keyframes mrotate {
622
- to {
623
- transform: rotate(1turn);
624
- }
625
- }
626
-
627
- #audio .audio {
628
- width: 100%;
629
- height: 100%;
630
- display: flex;
631
- align-items: center;
632
- justify-content: center;
633
- color: #fff;
634
- background: #666;
635
- border-radius: 50%;
636
- overflow: hidden;
637
- cursor: pointer;
638
- transition: all 0.3s ease;
639
- }
640
-
641
- #audio .audio.a-border {
642
- border: 1px solid #fff;
643
- }
644
-
645
- #audio .audio .music-icon {
646
- display: block;
647
- width: 60%;
648
- height: 60%;
649
- object-fit: contain;
650
- }
651
-
652
- #audio .audio .iconfont {
653
- font-size: 2opx;
654
- line-height: 1;
655
- }
656
- #audio .icon-cancel {
657
- position: absolute;
658
- width: 100%;
659
- height: 100%;
660
- border-radius: 50%;
661
- overflow: hidden;
662
- padding: 15px 0;
663
- }
664
- #audio .icon-cancel .icon-h {
665
- transform: rotate(45deg);
666
- width: 100%;
667
- height: 2px;
668
- margin-top: 15px;
669
- background: #fff;
670
- }
671
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
672
- content: '';
673
- position: absolute;
674
- width: 100%;
675
- height: 2px;
676
- background: #fff;
677
- }
678
789
 
679
790
  .form-input {
680
791
  position: absolute;
@@ -752,117 +863,6 @@ input::placeholder {
752
863
  .error-icon:hover + .error-tooltip {
753
864
  opacity: 1;
754
865
  }
755
-
756
- .bohao-button {
757
- position: absolute;
758
- cursor: pointer;
759
- user-select: none;
760
- }
761
-
762
- .bohao-container {
763
- display: flex;
764
- justify-content: center;
765
- align-items: center;
766
- width: 100%;
767
- height: 100%;
768
- overflow: hidden;
769
- transition: opacity 0.2s;
770
- }
771
-
772
- .bohao-container:hover {
773
- opacity: 0.9;
774
- }
775
-
776
- .bohao-content {
777
- display: flex;
778
- align-items: center;
779
- justify-content: center;
780
- }
781
-
782
- .btn-text {
783
- margin-left: 10px;
784
- }
785
-
786
- /* 这里可以添加实际的电话图标样式 */
787
- .iconfont.hb-tel {
788
- display: inline-block;
789
- width: 16px;
790
- height: 16px;
791
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
792
- background-repeat: no-repeat;
793
- background-position: center;
794
- background-size: contain;
795
- }
796
-
797
- .effect-container {
798
- will-change: transform;
799
- }
800
-
801
- .particles-wrapper {
802
- position: relative;
803
- width: 100%;
804
- height: 100%;
805
- }
806
-
807
- .particle {
808
- position: absolute;
809
- background-repeat: no-repeat;
810
- background-size: contain;
811
- animation-name: falling;
812
- animation-timing-function: linear;
813
- animation-iteration-count: infinite;
814
- will-change: transform;
815
- }
816
-
817
- @keyframes falling {
818
- 0% {
819
- transform: translateY(0) rotate(0deg);
820
- opacity: 1;
821
- }
822
- 80% {
823
- opacity: 0.8;
824
- }
825
- 100% {
826
- transform: translateY(100vh) rotate(360deg);
827
- opacity: 0;
828
- }
829
- }
830
- .ele-lottie .ele-lotwrap {
831
- overflow: hidden
832
- }
833
-
834
- .ele-effect .effect-wrap {
835
- position: relative;
836
- overflow: hidden;
837
- width: 100%;
838
- height: 100%
839
- }
840
-
841
- .ele-effect .e-small {
842
- position: absolute;
843
- width: 24px;
844
- height: 24px;
845
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
846
- background-size: cover;
847
- background-repeat: no-repeat;
848
- -webkit-transform-origin: center;
849
- transform-origin: center;
850
- -webkit-animation: snow 5s linear infinite;
851
- animation: snow 5s linear infinite
852
- }
853
-
854
- .uni-build-up-component {
855
- }
856
-
857
- .form-container {
858
- position: relative;
859
- width: 100%;
860
- height: 100%;
861
- }
862
-
863
- .uni-svg-component {
864
- display: inline-block;
865
- }
866
866
 
867
867
  .form-submit {
868
868
  cursor: pointer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.358",
3
+ "version": "1.0.361",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",