unika-components 1.0.346 → 1.0.348

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.
@@ -13,8 +13,6 @@ export interface Animation {
13
13
  id: number;
14
14
  }
15
15
  export interface GlobalData {
16
- workId?: number;
17
- workUuid?: string;
18
16
  type?: string;
19
17
  width?: string;
20
18
  height?: string;
@@ -36,6 +34,7 @@ export interface GlobalData {
36
34
  themeColor?: string;
37
35
  viewedCount?: number;
38
36
  cat?: 'h5' | 'long';
37
+ scene_id: number;
39
38
  user?: {
40
39
  gender: string;
41
40
  nickName: string;
@@ -44,7 +43,7 @@ export interface GlobalData {
44
43
  };
45
44
  pageDot: number;
46
45
  pageLoop: boolean;
47
- SMimg: string;
46
+ smImg: string;
48
47
  receipt: {
49
48
  open: boolean;
50
49
  which: boolean;
@@ -94,20 +93,15 @@ export interface GlobalData {
94
93
  bgcolor: string;
95
94
  hash: string;
96
95
  };
97
- useFont: Record<string, {
96
+ useFont?: Record<string, {
98
97
  name: string;
99
98
  content: string;
100
99
  }>;
101
- record: {
102
- name: string[];
103
- tel: string[];
104
- map: string;
105
- time: string;
106
- };
100
+ record?: any;
107
101
  f_id: number;
108
- uid: number;
102
+ uid: string;
109
103
  scenecode: string;
110
- createFont: Record<string, Array<{
104
+ createFont?: Record<string, Array<{
111
105
  name: string;
112
106
  url: string;
113
107
  }>>;
@@ -137,7 +131,6 @@ export interface ElementData {
137
131
  sign: boolean;
138
132
  signSort: number;
139
133
  overturnType: number;
140
- eleIndex?: number;
141
134
  delay?: string;
142
135
  css: {
143
136
  fontFamily: string;
@@ -231,6 +224,9 @@ export interface PageData {
231
224
  autoPage: boolean;
232
225
  delay: string;
233
226
  bgOpacity: string;
227
+ height: number;
228
+ eleIndex?: number;
229
+ bgSign?: number;
234
230
  elements: Array<ElementData> | [];
235
231
  bgAni?: {
236
232
  aniList: Array<{
@@ -246,14 +242,11 @@ export interface PageData {
246
242
  aniType: string;
247
243
  allDelay: string;
248
244
  id: number;
249
- }>;
245
+ }> | [];
250
246
  aniCss: string;
251
- aniCss2: string;
247
+ aniCss2?: string;
252
248
  };
253
- triggers: any[];
254
- animations: any[];
255
- transitions: any[];
256
- imgMattingInfo: string;
249
+ imgMattingInfo: string | null;
257
250
  }
258
251
  export interface PersonalData {
259
252
  bridegroom: string;
@@ -263,9 +256,9 @@ export interface PersonalData {
263
256
  address: string;
264
257
  }
265
258
  export interface WorkData {
266
- personalData?: PersonalData;
267
- global?: GlobalData;
268
- pages: PageData[];
259
+ personalData?: PersonalData | null;
260
+ global: GlobalData;
261
+ pages: PageData[] | [];
269
262
  }
270
263
  export declare const commonDefaultProps: {
271
264
  actionType: string;
@@ -1,72 +1,4 @@
1
1
 
2
- .ele-text {
3
- position: relative;
4
- }
5
-
6
- .ele-text .ani-wrap {
7
- width: 100%;
8
- height: 100%;
9
- }
10
-
11
- .text-common {
12
- padding: 5px;
13
- text-orientation: upright;
14
- white-space: pre-wrap;
15
- }
16
-
17
- /* 文本动画类 */
18
- .text-fadeIn {
19
- animation: fadeIn 1s ease-in-out;
20
- }
21
-
22
- .text-slideIn {
23
- animation: slideIn 1s ease-in-out;
24
- }
25
-
26
- .text-bounceIn {
27
- animation: bounceIn 1s ease-in-out;
28
- }
29
-
30
- /* 基础动画关键帧 */
31
- @keyframes fadeIn {
32
- from {
33
- opacity: 0;
34
- }
35
- to {
36
- opacity: 1;
37
- }
38
- }
39
-
40
- @keyframes slideIn {
41
- from {
42
- transform: translateY(20px);
43
- opacity: 0;
44
- }
45
- to {
46
- transform: translateY(0);
47
- opacity: 1;
48
- }
49
- }
50
-
51
- @keyframes bounceIn {
52
- 0% {
53
- transform: scale(0.3);
54
- opacity: 0;
55
- }
56
- 50% {
57
- transform: scale(1.05);
58
- opacity: 0.8;
59
- }
60
- 70% {
61
- transform: scale(0.9);
62
- opacity: 0.9;
63
- }
64
- 100% {
65
- transform: scale(1);
66
- opacity: 1;
67
- }
68
- }
69
-
70
2
  .work-container {
71
3
  position: relative;
72
4
  overflow: hidden;
@@ -263,29 +195,115 @@
263
195
  background-position: center;
264
196
  will-change: transform;
265
197
  }
198
+
199
+ .uni-image-component {
200
+ max-width: 100%;
201
+ }
202
+ .uni-image-mask-wrapper {
203
+ display: inline-block;
204
+ }
205
+
206
+ .ele-text {
207
+ position: relative;
208
+ }
209
+
210
+ .ele-text .ani-wrap {
211
+ width: 100%;
212
+ height: 100%;
213
+ }
214
+
215
+ .text-common {
216
+ padding: 5px;
217
+ text-orientation: upright;
218
+ white-space: pre-wrap;
219
+ }
220
+
221
+ /* 文本动画类 */
222
+ .text-fadeIn {
223
+ animation: fadeIn 1s ease-in-out;
224
+ }
225
+
226
+ .text-slideIn {
227
+ animation: slideIn 1s ease-in-out;
228
+ }
229
+
230
+ .text-bounceIn {
231
+ animation: bounceIn 1s ease-in-out;
232
+ }
233
+
234
+ /* 基础动画关键帧 */
235
+ @keyframes fadeIn {
236
+ from {
237
+ opacity: 0;
238
+ }
239
+ to {
240
+ opacity: 1;
241
+ }
242
+ }
243
+
244
+ @keyframes slideIn {
245
+ from {
246
+ transform: translateY(20px);
247
+ opacity: 0;
248
+ }
249
+ to {
250
+ transform: translateY(0);
251
+ opacity: 1;
252
+ }
253
+ }
254
+
255
+ @keyframes bounceIn {
256
+ 0% {
257
+ transform: scale(0.3);
258
+ opacity: 0;
259
+ }
260
+ 50% {
261
+ transform: scale(1.05);
262
+ opacity: 0.8;
263
+ }
264
+ 70% {
265
+ transform: scale(0.9);
266
+ opacity: 0.9;
267
+ }
268
+ 100% {
269
+ transform: scale(1);
270
+ opacity: 1;
271
+ }
272
+ }
266
273
 
267
- .like-button {
268
- display: flex;
269
- flex-direction: column;
270
- align-items: center;
271
- cursor: pointer;
272
- }
273
274
 
274
- .icon-heart {
275
- font-size: 24px;
276
- color: #e74c3c;
277
- }
275
+ .uni-calendar-component {
278
276
 
279
- .liked {
280
- color: #f00; /* 更改颜色以示已赞 */
281
277
  }
282
-
283
- .like-count {
284
- margin-top: 4px;
285
- font-size: 16px;
286
- color: #333;
278
+ .slot-number {
279
+ position: absolute;
280
+ bottom: 2px;
281
+ left: 7px;
282
+ font-size: 12px;
283
+ color: #666
287
284
  }
288
285
 
286
+ .uni-video-component {
287
+ position: relative;
288
+ text-align: center;
289
+ }
290
+ .play-pause-button {
291
+ position: absolute;
292
+ top: 50%;
293
+ left: 50%;
294
+ transform: translate(-50%, -50%);
295
+ cursor: pointer;
296
+ font-size: 2rem;
297
+ color: #fff;
298
+ background: rgba(0, 0, 0, 0.6);
299
+ border-radius: 50%;
300
+ padding: 10px;
301
+ transition: background 0.3s;
302
+ }
303
+ .play-pause-button:hover {
304
+ background: rgba(0, 0, 0, 0.8);
305
+ }
306
+
289
307
  #audio {
290
308
  position: absolute;
291
309
  right: 10px;
@@ -359,46 +377,6 @@
359
377
  background: #fff;
360
378
  }
361
379
 
362
- .uni-video-component {
363
- position: relative;
364
- text-align: center;
365
- }
366
- .play-pause-button {
367
- position: absolute;
368
- top: 50%;
369
- left: 50%;
370
- transform: translate(-50%, -50%);
371
- cursor: pointer;
372
- font-size: 2rem;
373
- color: #fff;
374
- background: rgba(0, 0, 0, 0.6);
375
- border-radius: 50%;
376
- padding: 10px;
377
- transition: background 0.3s;
378
- }
379
- .play-pause-button:hover {
380
- background: rgba(0, 0, 0, 0.8);
381
- }
382
-
383
- .uni-image-component {
384
- max-width: 100%;
385
- }
386
- .uni-image-mask-wrapper {
387
- display: inline-block;
388
- }
389
-
390
-
391
- .uni-calendar-component {
392
-
393
- }
394
- .slot-number {
395
- position: absolute;
396
- bottom: 2px;
397
- left: 7px;
398
- font-size: 12px;
399
- color: #666
400
- }
401
-
402
380
  .ant-input-number {
403
381
  box-sizing: border-box;
404
382
  margin: 0;
@@ -433,14 +411,27 @@
433
411
  margin-bottom: 0px;
434
412
  vertical-align: top;
435
413
  }
436
-
437
- .uni-svg-component {
438
- display: inline-block;
439
- }
440
414
 
441
- .effect {
442
- width: 100%;
443
- height: 100%;
415
+ .like-button {
416
+ display: flex;
417
+ flex-direction: column;
418
+ align-items: center;
419
+ cursor: pointer;
420
+ }
421
+
422
+ .icon-heart {
423
+ font-size: 24px;
424
+ color: #e74c3c;
425
+ }
426
+
427
+ .liked {
428
+ color: #f00; /* 更改颜色以示已赞 */
429
+ }
430
+
431
+ .like-count {
432
+ margin-top: 4px;
433
+ font-size: 16px;
434
+ color: #333;
444
435
  }
445
436
 
446
437
  .uni-lotties-component {
@@ -448,195 +439,17 @@
448
439
  height: 100%;
449
440
  }
450
441
 
451
- .uni-build-up-component {
452
- }
453
-
454
-
455
- .no-animation__card {
456
- font-weight: 500;
457
- font-size: var(--countdown-size, 2rem);
458
- line-height: 1.5;
459
- display: block;
460
- color: var(--main-color, #EC685C);
461
- }
462
-
463
- .flip-clock {
464
- text-align: center;
465
- perspective: 600px;
466
- margin: 0 auto;
467
- }
468
-
469
- .flip-clock *,
470
- .flip-clock *:before,
471
- .flip-clock *:after {
472
- box-sizing: border-box;
473
- }
474
-
475
- .flip-clock__piece {
476
- display: inline-block;
477
- margin: 0 0.2vw;
478
- }
479
-
480
- @media (min-width: 1000px) {
481
- .flip-clock__piece {
482
- margin: 0 5px;
483
- }
484
- }
485
-
486
- .flip-clock__slot {
487
- font-size: var(--label-size, 1rem);
488
- line-height: 1.5;
489
- display: block;
490
- color: var(--label-color, #222222);
491
- }
492
-
493
- .flip-card {
494
- display: block;
495
- position: relative;
496
- padding-bottom: 0.72em; /* halfHeight */
497
- font-size: var(--countdown-size, 2.25rem);
498
- line-height: 0.95;
499
- }
500
-
501
- @media (min-width: 1000px) {
502
- .flip-clock__slot {
503
- font-size: 1.2rem;
504
- }
505
-
506
- .flip-card {
507
- font-size: 3rem;
508
- }
509
- }
510
-
511
- .flip-card__top,
512
- .flip-card__bottom,
513
- .flip-card__back-bottom,
514
- .flip-card__back::before,
515
- .flip-card__back::after{
516
- display: block;
517
- height: 0.72em; /* halfHeight */
518
- color: var(--main-color, #EC685C);
519
- background: var(--main-flip-background-color, #222222);
520
- padding: 0.23em 0.15em 0.4em;
521
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
522
- backface-visibility: hidden;
523
- -webkit-backface-visibility: hidden;
524
- transform-style: preserve-3d;
525
- width: 2.1em;
526
- }
527
-
528
- .flip-card__top-4digits,
529
- .flip-card__bottom-4digits,
530
- .flip-card__back-bottom-4digits,
531
- .flip-card__back-4digits::before,
532
- .flip-card__back-4digits::after {
533
- display: block;
534
- height: 0.72em; /* halfHeight */
535
- color: var(--main-color, #EC685C);
536
- background: var(--main-flip-background-color, #222222);
537
- padding: 0.23em 0.15em 0.4em;
538
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
539
- backface-visibility: hidden;
540
- -webkit-backface-visibility: hidden;
541
- transform-style: preserve-3d;
542
- width: 2.65em;
543
- }
544
-
545
- .flip-card__bottom,
546
- .flip-card__back-bottom,
547
- .flip-card__bottom-4digits,
548
- .flip-card__back-bottom-4digits {
549
- color: var(--second-flip-color, #EC685C);
550
- position: absolute;
551
- top: 50%;
552
- left: 0;
553
- border-top: solid 1px var(--second-flip-background-color, #000);
554
- background: var(--second-flip-background-color, #393939);
555
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
556
- pointer-events: none;
557
- overflow: hidden;
558
- z-index: 2;
559
- }
560
-
561
- .flip-card__back-bottom,
562
- .flip-card__back-bottom-4digits {
563
- z-index: 1;
564
- }
565
-
566
- .flip-card__bottom::after,
567
- .flip-card__back-bottom::after,
568
- .flip-card__bottom-4digits::after,
569
- .flip-card__back-bottom-4digits::after {
570
- display: block;
571
- margin-top: -0.72em; /* Negative halfHeight */
572
- }
573
- .flip-card__back::before,
574
- .flip-card__bottom::after,
575
- .flip-card__back-bottom::after,
576
- .flip-card__back-4digits::before,
577
- .flip-card__bottom-4digits::after,
578
- .flip-card__back-bottom-4digits::after {
579
- content: attr(data-value);
580
- }
581
-
582
- .flip-card__back,
583
- .flip-card__back-4digits {
584
- position: absolute;
585
- top: 0;
586
- height: 100%;
587
- left: 0%;
588
- pointer-events: none;
589
- }
590
- .flip-card__back::before,
591
- .flip-card__back-4digits::before {
592
- position: relative;
593
- overflow: hidden;
594
- z-index: -1;
595
- }
596
-
597
- .flip .flip-card__back::before,
598
- .flip .flip-card__back-4digits::before {
599
- z-index: 1;
600
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
601
- animation-fill-mode: both;
602
- transform-origin: center bottom;
603
- }
604
-
605
- .flip .flip-card__bottom,
606
- .flip .flip-card__bottom-4digits {
607
- transform-origin: center top;
608
- animation-fill-mode: both;
609
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
610
- }
611
- @keyframes flipTop {
612
- 0% {
613
- transform: rotateX(0deg);
614
- z-index: 2;
615
- }
616
- 0%, 99% {
617
- opacity: 1;
618
- }
619
- 100% {
620
- transform: rotateX(-90deg);
621
- opacity: 0;
622
- }
442
+ .effect {
443
+ width: 100%;
444
+ height: 100%;
623
445
  }
624
446
 
625
- @keyframes flipBottom {
626
- 0%, 50% {
627
- z-index: -1;
628
- transform: rotateX(90deg);
629
- opacity: 0;
630
- }
631
- 51% {
632
- opacity: 1;
633
- }
634
- 100% {
635
- opacity: 1;
636
- transform: rotateX(0deg);
637
- z-index: 5;
447
+ .uni-build-up-component {
638
448
  }
639
- }
449
+
450
+ .uni-svg-component {
451
+ display: inline-block;
452
+ }
640
453
 
641
454
  .unika-calendar-box {
642
455
  position: relative;
@@ -898,3 +711,190 @@
898
711
  padding: 0 0px;
899
712
  border-bottom: 1px solid
900
713
  }
714
+
715
+
716
+ .no-animation__card {
717
+ font-weight: 500;
718
+ font-size: var(--countdown-size, 2rem);
719
+ line-height: 1.5;
720
+ display: block;
721
+ color: var(--main-color, #EC685C);
722
+ }
723
+
724
+ .flip-clock {
725
+ text-align: center;
726
+ perspective: 600px;
727
+ margin: 0 auto;
728
+ }
729
+
730
+ .flip-clock *,
731
+ .flip-clock *:before,
732
+ .flip-clock *:after {
733
+ box-sizing: border-box;
734
+ }
735
+
736
+ .flip-clock__piece {
737
+ display: inline-block;
738
+ margin: 0 0.2vw;
739
+ }
740
+
741
+ @media (min-width: 1000px) {
742
+ .flip-clock__piece {
743
+ margin: 0 5px;
744
+ }
745
+ }
746
+
747
+ .flip-clock__slot {
748
+ font-size: var(--label-size, 1rem);
749
+ line-height: 1.5;
750
+ display: block;
751
+ color: var(--label-color, #222222);
752
+ }
753
+
754
+ .flip-card {
755
+ display: block;
756
+ position: relative;
757
+ padding-bottom: 0.72em; /* halfHeight */
758
+ font-size: var(--countdown-size, 2.25rem);
759
+ line-height: 0.95;
760
+ }
761
+
762
+ @media (min-width: 1000px) {
763
+ .flip-clock__slot {
764
+ font-size: 1.2rem;
765
+ }
766
+
767
+ .flip-card {
768
+ font-size: 3rem;
769
+ }
770
+ }
771
+
772
+ .flip-card__top,
773
+ .flip-card__bottom,
774
+ .flip-card__back-bottom,
775
+ .flip-card__back::before,
776
+ .flip-card__back::after{
777
+ display: block;
778
+ height: 0.72em; /* halfHeight */
779
+ color: var(--main-color, #EC685C);
780
+ background: var(--main-flip-background-color, #222222);
781
+ padding: 0.23em 0.15em 0.4em;
782
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
783
+ backface-visibility: hidden;
784
+ -webkit-backface-visibility: hidden;
785
+ transform-style: preserve-3d;
786
+ width: 2.1em;
787
+ }
788
+
789
+ .flip-card__top-4digits,
790
+ .flip-card__bottom-4digits,
791
+ .flip-card__back-bottom-4digits,
792
+ .flip-card__back-4digits::before,
793
+ .flip-card__back-4digits::after {
794
+ display: block;
795
+ height: 0.72em; /* halfHeight */
796
+ color: var(--main-color, #EC685C);
797
+ background: var(--main-flip-background-color, #222222);
798
+ padding: 0.23em 0.15em 0.4em;
799
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
800
+ backface-visibility: hidden;
801
+ -webkit-backface-visibility: hidden;
802
+ transform-style: preserve-3d;
803
+ width: 2.65em;
804
+ }
805
+
806
+ .flip-card__bottom,
807
+ .flip-card__back-bottom,
808
+ .flip-card__bottom-4digits,
809
+ .flip-card__back-bottom-4digits {
810
+ color: var(--second-flip-color, #EC685C);
811
+ position: absolute;
812
+ top: 50%;
813
+ left: 0;
814
+ border-top: solid 1px var(--second-flip-background-color, #000);
815
+ background: var(--second-flip-background-color, #393939);
816
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
817
+ pointer-events: none;
818
+ overflow: hidden;
819
+ z-index: 2;
820
+ }
821
+
822
+ .flip-card__back-bottom,
823
+ .flip-card__back-bottom-4digits {
824
+ z-index: 1;
825
+ }
826
+
827
+ .flip-card__bottom::after,
828
+ .flip-card__back-bottom::after,
829
+ .flip-card__bottom-4digits::after,
830
+ .flip-card__back-bottom-4digits::after {
831
+ display: block;
832
+ margin-top: -0.72em; /* Negative halfHeight */
833
+ }
834
+ .flip-card__back::before,
835
+ .flip-card__bottom::after,
836
+ .flip-card__back-bottom::after,
837
+ .flip-card__back-4digits::before,
838
+ .flip-card__bottom-4digits::after,
839
+ .flip-card__back-bottom-4digits::after {
840
+ content: attr(data-value);
841
+ }
842
+
843
+ .flip-card__back,
844
+ .flip-card__back-4digits {
845
+ position: absolute;
846
+ top: 0;
847
+ height: 100%;
848
+ left: 0%;
849
+ pointer-events: none;
850
+ }
851
+ .flip-card__back::before,
852
+ .flip-card__back-4digits::before {
853
+ position: relative;
854
+ overflow: hidden;
855
+ z-index: -1;
856
+ }
857
+
858
+ .flip .flip-card__back::before,
859
+ .flip .flip-card__back-4digits::before {
860
+ z-index: 1;
861
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
862
+ animation-fill-mode: both;
863
+ transform-origin: center bottom;
864
+ }
865
+
866
+ .flip .flip-card__bottom,
867
+ .flip .flip-card__bottom-4digits {
868
+ transform-origin: center top;
869
+ animation-fill-mode: both;
870
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
871
+ }
872
+ @keyframes flipTop {
873
+ 0% {
874
+ transform: rotateX(0deg);
875
+ z-index: 2;
876
+ }
877
+ 0%, 99% {
878
+ opacity: 1;
879
+ }
880
+ 100% {
881
+ transform: rotateX(-90deg);
882
+ opacity: 0;
883
+ }
884
+ }
885
+
886
+ @keyframes flipBottom {
887
+ 0%, 50% {
888
+ z-index: -1;
889
+ transform: rotateX(90deg);
890
+ opacity: 0;
891
+ }
892
+ 51% {
893
+ opacity: 1;
894
+ }
895
+ 100% {
896
+ opacity: 1;
897
+ transform: rotateX(0deg);
898
+ z-index: 5;
899
+ }
900
+ }
@@ -5825,7 +5825,10 @@ var script$h = defineComponent({
5825
5825
  const bgMusic = ref(null);
5826
5826
  const currentPageId = ref('');
5827
5827
  // 使用 computed 保持响应性
5828
- const workData = computed(() => props.workData);
5828
+ const workData = computed(() => props.workData || { pages: [], global: {} });
5829
+ console.log('workData', workData.value);
5830
+ console.log('-----aa');
5831
+ console.log('workDataaaa', props.workData);
5829
5832
  const personalData = computed(() => workData.value.personalData || {});
5830
5833
  const global = computed(() => workData.value.global || {});
5831
5834
  const pages = computed(() => workData.value.pages || []);
@@ -5832,7 +5832,10 @@
5832
5832
  const bgMusic = vue.ref(null);
5833
5833
  const currentPageId = vue.ref('');
5834
5834
  // 使用 computed 保持响应性
5835
- const workData = vue.computed(() => props.workData);
5835
+ const workData = vue.computed(() => props.workData || { pages: [], global: {} });
5836
+ console.log('workData', workData.value);
5837
+ console.log('-----aa');
5838
+ console.log('workDataaaa', props.workData);
5836
5839
  const personalData = vue.computed(() => workData.value.personalData || {});
5837
5840
  const global = vue.computed(() => workData.value.global || {});
5838
5841
  const pages = vue.computed(() => workData.value.pages || []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.346",
3
+ "version": "1.0.348",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",