unika-components 1.0.371 → 1.0.372
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.
|
@@ -5,6 +5,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
5
5
|
type: PropType<ElementData>;
|
|
6
6
|
required: true;
|
|
7
7
|
};
|
|
8
|
+
unit: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
8
12
|
}, {
|
|
9
13
|
handleNavigation: () => void;
|
|
10
14
|
iframeUrl: import("vue").ComputedRef<string>;
|
|
@@ -36,5 +40,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
36
40
|
type: PropType<ElementData>;
|
|
37
41
|
required: true;
|
|
38
42
|
};
|
|
39
|
-
|
|
43
|
+
unit: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: string;
|
|
46
|
+
};
|
|
47
|
+
}>>, {
|
|
48
|
+
unit: string;
|
|
49
|
+
}, {}>;
|
|
40
50
|
export default _default;
|
|
@@ -160,6 +160,9 @@ export interface ElementData {
|
|
|
160
160
|
succUrl?: string;
|
|
161
161
|
showSize?: string;
|
|
162
162
|
signType?: string;
|
|
163
|
+
mapStyle?: string;
|
|
164
|
+
iframeUrl?: string;
|
|
165
|
+
url?: string;
|
|
163
166
|
css: {
|
|
164
167
|
fontFamily: string;
|
|
165
168
|
fontSize: number;
|
|
@@ -221,8 +224,6 @@ export interface ElementData {
|
|
|
221
224
|
src?: string;
|
|
222
225
|
realW?: number;
|
|
223
226
|
realH?: number;
|
|
224
|
-
iframeUrl?: string;
|
|
225
|
-
url?: string;
|
|
226
227
|
endTime?: string;
|
|
227
228
|
count?: string;
|
|
228
229
|
speed?: string;
|
|
@@ -1,4 +1,36 @@
|
|
|
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
|
+
|
|
2
34
|
.ele-text {
|
|
3
35
|
position: relative;
|
|
4
36
|
}
|
|
@@ -66,6 +98,170 @@
|
|
|
66
98
|
opacity: 1;
|
|
67
99
|
}
|
|
68
100
|
}
|
|
101
|
+
|
|
102
|
+
.ele-img {
|
|
103
|
+
position: absolute;
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.ele-img .ani-wrap {
|
|
108
|
+
width: 100%;
|
|
109
|
+
height: 100%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.ele-img .ele-image {
|
|
113
|
+
position: relative;
|
|
114
|
+
display: block;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ele-img .rotate-wrap {
|
|
118
|
+
position: absolute;
|
|
119
|
+
left: 0;
|
|
120
|
+
right: 0;
|
|
121
|
+
top: 0;
|
|
122
|
+
bottom: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.ele-img .ele-img-bg,
|
|
126
|
+
.ele-img .rotate-wrap .img-wrap {
|
|
127
|
+
width: 100%;
|
|
128
|
+
height: 100%;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.ele-img .ele-bg-wrap {
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 100%;
|
|
135
|
+
background-size: cover;
|
|
136
|
+
background-position: 50% 50%;
|
|
137
|
+
background-repeat: no-repeat;
|
|
138
|
+
background-clip: border-box;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* 动画关键帧 */
|
|
142
|
+
@keyframes zoomIn {
|
|
143
|
+
from {
|
|
144
|
+
opacity: 0;
|
|
145
|
+
transform: scale(0.5);
|
|
146
|
+
}
|
|
147
|
+
to {
|
|
148
|
+
opacity: 1;
|
|
149
|
+
transform: scale(1);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.video-player {
|
|
154
|
+
position: absolute;
|
|
155
|
+
overflow: hidden;
|
|
156
|
+
background-color: #000;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.video-container {
|
|
160
|
+
width: 100%;
|
|
161
|
+
height: 100%;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.video-container iframe {
|
|
165
|
+
width: 100%;
|
|
166
|
+
height: 100%;
|
|
167
|
+
border: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.video-cover {
|
|
171
|
+
position: relative;
|
|
172
|
+
width: 100%;
|
|
173
|
+
height: 100%;
|
|
174
|
+
background-size: cover;
|
|
175
|
+
background-position: center;
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.video-cover .play-btn {
|
|
180
|
+
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;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.video-cover:hover .play-btn {
|
|
191
|
+
opacity: 1;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
#audio {
|
|
195
|
+
position: absolute;
|
|
196
|
+
right: 10px;
|
|
197
|
+
top: 10px;
|
|
198
|
+
z-index: 103;
|
|
199
|
+
width: 30px;
|
|
200
|
+
height: 30px;
|
|
201
|
+
display: flex;
|
|
202
|
+
align-items: center;
|
|
203
|
+
}
|
|
204
|
+
|
|
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 {
|
|
216
|
+
width: 100%;
|
|
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;
|
|
227
|
+
}
|
|
228
|
+
|
|
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
|
+
background: #fff;
|
|
257
|
+
}
|
|
258
|
+
#audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
|
|
259
|
+
content: '';
|
|
260
|
+
position: absolute;
|
|
261
|
+
width: 100%;
|
|
262
|
+
height: 2px;
|
|
263
|
+
background: #fff;
|
|
264
|
+
}
|
|
69
265
|
|
|
70
266
|
@font-face {
|
|
71
267
|
font-family: "iconfont"; /* Project id 3350423 */
|
|
@@ -425,201 +621,51 @@
|
|
|
425
621
|
content: "\E6A6";
|
|
426
622
|
}
|
|
427
623
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
z-index: 103;
|
|
433
|
-
width: 30px;
|
|
434
|
-
height: 30px;
|
|
435
|
-
display: flex;
|
|
436
|
-
align-items: center;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
#audio .mrotate {
|
|
440
|
-
animation: mrotate 5s linear infinite;
|
|
624
|
+
.element-ditu .ani-wrap {
|
|
625
|
+
width: 100%;
|
|
626
|
+
height: 100%;
|
|
627
|
+
overflow: hidden
|
|
441
628
|
}
|
|
442
629
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
}
|
|
630
|
+
.element-ditu .map {
|
|
631
|
+
width: 100%;
|
|
632
|
+
height: 100%
|
|
447
633
|
}
|
|
448
634
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
635
|
+
.element-ditu .map .el-button {
|
|
636
|
+
width: 100%;
|
|
637
|
+
height: 100%;
|
|
638
|
+
display: -webkit-box;
|
|
639
|
+
display: -ms-flexbox;
|
|
640
|
+
display: flex;
|
|
641
|
+
-webkit-box-align: center;
|
|
642
|
+
-ms-flex-align: center;
|
|
643
|
+
align-items: center;
|
|
644
|
+
padding: 0;
|
|
645
|
+
-webkit-box-pack: center;
|
|
646
|
+
-ms-flex-pack: center;
|
|
647
|
+
justify-content: center;
|
|
648
|
+
background: inherit;
|
|
649
|
+
color: inherit;
|
|
650
|
+
border: none
|
|
461
651
|
}
|
|
462
652
|
|
|
463
|
-
|
|
464
|
-
|
|
653
|
+
.element-ditu .center-map {
|
|
654
|
+
width: 100%;
|
|
655
|
+
height: 100%;
|
|
656
|
+
background: #fff
|
|
465
657
|
}
|
|
466
658
|
|
|
467
|
-
|
|
468
|
-
display: block;
|
|
469
|
-
width: 60%;
|
|
470
|
-
height: 60%;
|
|
471
|
-
object-fit: contain;
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
#audio .audio .iconfont {
|
|
475
|
-
font-size: 2opx;
|
|
476
|
-
line-height: 1;
|
|
477
|
-
}
|
|
478
|
-
#audio .icon-cancel {
|
|
659
|
+
.element-ditu .mask-map {
|
|
479
660
|
position: absolute;
|
|
480
661
|
width: 100%;
|
|
481
662
|
height: 100%;
|
|
482
|
-
|
|
483
|
-
overflow: hidden;
|
|
484
|
-
padding: 15px 0;
|
|
663
|
+
top: 0
|
|
485
664
|
}
|
|
486
|
-
|
|
487
|
-
transform: rotate(45deg);
|
|
488
|
-
width: 100%;
|
|
489
|
-
height: 2px;
|
|
490
|
-
background: #fff;
|
|
491
|
-
}
|
|
492
|
-
#audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
|
|
493
|
-
content: '';
|
|
494
|
-
position: absolute;
|
|
665
|
+
.map-iframe {
|
|
495
666
|
width: 100%;
|
|
496
|
-
height:
|
|
497
|
-
background: #fff;
|
|
498
|
-
}
|
|
499
|
-
|
|
500
|
-
.video-player {
|
|
501
|
-
position: absolute;
|
|
502
|
-
overflow: hidden;
|
|
503
|
-
background-color: #000;
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
.video-container {
|
|
507
|
-
width: 100%;
|
|
508
|
-
height: 100%;
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
.video-container iframe {
|
|
512
|
-
width: 100%;
|
|
513
|
-
height: 100%;
|
|
514
|
-
border: none;
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
.video-cover {
|
|
518
|
-
position: relative;
|
|
519
|
-
width: 100%;
|
|
520
|
-
height: 100%;
|
|
521
|
-
background-size: cover;
|
|
522
|
-
background-position: center;
|
|
523
|
-
cursor: pointer;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
.video-cover .play-btn {
|
|
527
|
-
position: absolute;
|
|
528
|
-
left: 50%;
|
|
529
|
-
top: 50%;
|
|
530
|
-
transform: translate(-50%, -50%);
|
|
531
|
-
width: 50px;
|
|
532
|
-
height: 50px;
|
|
533
|
-
opacity: 0.8;
|
|
534
|
-
transition: opacity 0.2s;
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
.video-cover:hover .play-btn {
|
|
538
|
-
opacity: 1;
|
|
667
|
+
height: 100%;
|
|
539
668
|
}
|
|
540
|
-
|
|
541
|
-
.ele-shape {
|
|
542
|
-
position: absolute;
|
|
543
|
-
overflow: hidden;
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
.ani-wrap {
|
|
547
|
-
width: 100%;
|
|
548
|
-
height: 100%;
|
|
549
|
-
box-sizing: border-box;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
.e-shape {
|
|
553
|
-
width: 100%;
|
|
554
|
-
height: 100%;
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
.svg-container :deep(svg) {
|
|
558
|
-
width: 100%;
|
|
559
|
-
height: 100%;
|
|
560
|
-
display: block;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
.svg-loading,
|
|
564
|
-
.svg-error {
|
|
565
|
-
display: flex;
|
|
566
|
-
align-items: center;
|
|
567
|
-
justify-content: center;
|
|
568
|
-
width: 100%;
|
|
569
|
-
height: 100%;
|
|
570
|
-
background: rgba(0,0,0,0.05);
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
.ele-img {
|
|
574
|
-
position: absolute;
|
|
575
|
-
overflow: hidden;
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
.ele-img .ani-wrap {
|
|
579
|
-
width: 100%;
|
|
580
|
-
height: 100%;
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
.ele-img .ele-image {
|
|
584
|
-
position: relative;
|
|
585
|
-
display: block;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
.ele-img .rotate-wrap {
|
|
589
|
-
position: absolute;
|
|
590
|
-
left: 0;
|
|
591
|
-
right: 0;
|
|
592
|
-
top: 0;
|
|
593
|
-
bottom: 0;
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
.ele-img .ele-img-bg,
|
|
597
|
-
.ele-img .rotate-wrap .img-wrap {
|
|
598
|
-
width: 100%;
|
|
599
|
-
height: 100%;
|
|
600
|
-
overflow: hidden;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
.ele-img .ele-bg-wrap {
|
|
604
|
-
width: 100%;
|
|
605
|
-
height: 100%;
|
|
606
|
-
background-size: cover;
|
|
607
|
-
background-position: 50% 50%;
|
|
608
|
-
background-repeat: no-repeat;
|
|
609
|
-
background-clip: border-box;
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
/* 动画关键帧 */
|
|
613
|
-
@keyframes zoomIn {
|
|
614
|
-
from {
|
|
615
|
-
opacity: 0;
|
|
616
|
-
transform: scale(0.5);
|
|
617
|
-
}
|
|
618
|
-
to {
|
|
619
|
-
opacity: 1;
|
|
620
|
-
transform: scale(1);
|
|
621
|
-
}
|
|
622
|
-
}
|
|
623
669
|
|
|
624
670
|
.bohao-button {
|
|
625
671
|
position: absolute;
|
|
@@ -827,41 +873,6 @@
|
|
|
827
873
|
|
|
828
874
|
|
|
829
875
|
|
|
830
|
-
.ant-input-number {
|
|
831
|
-
box-sizing: border-box;
|
|
832
|
-
margin: 0;
|
|
833
|
-
padding: 0;
|
|
834
|
-
color: rgba(0, 0, 0, 0.88);
|
|
835
|
-
font-size: 14px;
|
|
836
|
-
line-height: 1.5714285714285714;
|
|
837
|
-
list-style: none;
|
|
838
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
839
|
-
position: relative;
|
|
840
|
-
display: inline-block;
|
|
841
|
-
width: 100%;
|
|
842
|
-
min-width: 0;
|
|
843
|
-
background-color: #ffffff;
|
|
844
|
-
background-image: none;
|
|
845
|
-
border-width: 1px;
|
|
846
|
-
border-style: solid;
|
|
847
|
-
border-color: #d9d9d9;
|
|
848
|
-
border-radius: 6px;
|
|
849
|
-
transition: all 0.2s;
|
|
850
|
-
border: 1px solid #d9d9d9;
|
|
851
|
-
}
|
|
852
|
-
.ant-form-item {
|
|
853
|
-
box-sizing: border-box;
|
|
854
|
-
margin: 0;
|
|
855
|
-
padding: 0;
|
|
856
|
-
color: rgba(0, 0, 0, 0.88);
|
|
857
|
-
font-size: 14px;
|
|
858
|
-
line-height: 1.5714285714285714;
|
|
859
|
-
list-style: none;
|
|
860
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
861
|
-
margin-bottom: 0px;
|
|
862
|
-
vertical-align: top;
|
|
863
|
-
}
|
|
864
|
-
|
|
865
876
|
.like-button {
|
|
866
877
|
display: flex;
|
|
867
878
|
flex-direction: column;
|
|
@@ -884,49 +895,6 @@
|
|
|
884
895
|
color: #333;
|
|
885
896
|
}
|
|
886
897
|
|
|
887
|
-
.element-ditu .ani-wrap {
|
|
888
|
-
width: 100%;
|
|
889
|
-
height: 100%;
|
|
890
|
-
overflow: hidden
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
.element-ditu .map {
|
|
894
|
-
width: 100%;
|
|
895
|
-
height: 100%
|
|
896
|
-
}
|
|
897
|
-
|
|
898
|
-
.element-ditu .map .el-button {
|
|
899
|
-
width: 100%;
|
|
900
|
-
height: 100%;
|
|
901
|
-
display: -webkit-box;
|
|
902
|
-
display: -ms-flexbox;
|
|
903
|
-
display: flex;
|
|
904
|
-
-webkit-box-align: center;
|
|
905
|
-
-ms-flex-align: center;
|
|
906
|
-
align-items: center;
|
|
907
|
-
padding: 0;
|
|
908
|
-
-webkit-box-pack: center;
|
|
909
|
-
-ms-flex-pack: center;
|
|
910
|
-
justify-content: center;
|
|
911
|
-
background: inherit;
|
|
912
|
-
color: inherit;
|
|
913
|
-
border: none
|
|
914
|
-
}
|
|
915
|
-
|
|
916
|
-
.element-ditu .center-map {
|
|
917
|
-
width: 100%;
|
|
918
|
-
height: 100%;
|
|
919
|
-
background: #fff
|
|
920
|
-
}
|
|
921
|
-
|
|
922
|
-
.element-ditu .mask-map {
|
|
923
|
-
position: absolute;
|
|
924
|
-
width: 100%;
|
|
925
|
-
height: 100%;
|
|
926
|
-
top: 0
|
|
927
|
-
}
|
|
928
|
-
|
|
929
|
-
|
|
930
898
|
.effect-container {
|
|
931
899
|
will-change: transform;
|
|
932
900
|
}
|
|
@@ -987,257 +955,45 @@
|
|
|
987
955
|
.uni-build-up-component {
|
|
988
956
|
}
|
|
989
957
|
|
|
990
|
-
.
|
|
958
|
+
.ant-input-number {
|
|
959
|
+
box-sizing: border-box;
|
|
960
|
+
margin: 0;
|
|
961
|
+
padding: 0;
|
|
962
|
+
color: rgba(0, 0, 0, 0.88);
|
|
963
|
+
font-size: 14px;
|
|
964
|
+
line-height: 1.5714285714285714;
|
|
965
|
+
list-style: none;
|
|
966
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
967
|
+
position: relative;
|
|
968
|
+
display: inline-block;
|
|
991
969
|
width: 100%;
|
|
992
|
-
|
|
970
|
+
min-width: 0;
|
|
971
|
+
background-color: #ffffff;
|
|
972
|
+
background-image: none;
|
|
973
|
+
border-width: 1px;
|
|
974
|
+
border-style: solid;
|
|
975
|
+
border-color: #d9d9d9;
|
|
976
|
+
border-radius: 6px;
|
|
977
|
+
transition: all 0.2s;
|
|
978
|
+
border: 1px solid #d9d9d9;
|
|
993
979
|
}
|
|
994
|
-
|
|
995
|
-
/* Iconfont definition moved here for completeness */
|
|
996
|
-
@font-face {
|
|
997
|
-
font-family: iconfont;
|
|
998
|
-
src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype")
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
.iconfont {
|
|
1002
|
-
font-family: iconfont !important;
|
|
1003
|
-
font-size: 16px;
|
|
1004
|
-
font-style: normal;
|
|
1005
|
-
-webkit-font-smoothing: antialiased;
|
|
1006
|
-
-moz-osx-font-smoothing: grayscale;
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
.icon-danmuliebiao1:before {
|
|
1010
|
-
content: "\E68A";
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
i {
|
|
1014
|
-
font-style: normal;
|
|
1015
|
-
}
|
|
1016
|
-
|
|
1017
|
-
/* 底部工具栏样式 */
|
|
1018
|
-
#toolbarNew {
|
|
1019
|
-
position: fixed;
|
|
1020
|
-
left: 0;
|
|
1021
|
-
bottom: 0;
|
|
1022
|
-
width: 100%;
|
|
1023
|
-
padding: 12px 0;
|
|
1024
|
-
/* Assuming this is a valid base64 background or remove if not needed */
|
|
1025
|
-
background: url('https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/inputBg.png') 0 0 repeat-x;
|
|
1026
|
-
z-index: 100;
|
|
1027
|
-
}
|
|
1028
|
-
|
|
1029
|
-
.toolbar {
|
|
1030
|
-
display: flex;
|
|
1031
|
-
align-items: center;
|
|
1032
|
-
padding: 0 10px;
|
|
1033
|
-
}
|
|
1034
|
-
|
|
1035
|
-
.bar-left {
|
|
1036
|
-
position: relative;
|
|
1037
|
-
flex: 1;
|
|
1038
|
-
}
|
|
1039
|
-
|
|
1040
|
-
.bar-mess {
|
|
1041
|
-
width: 100%; /* Adjusted for padding/icon */
|
|
1042
|
-
height: 36px;
|
|
1043
|
-
line-height: 36px;
|
|
1044
|
-
font-size: 14px;
|
|
1045
|
-
color: #ccc;
|
|
1046
|
-
padding: 0 8px;
|
|
1047
|
-
border-radius: 18px;
|
|
1048
|
-
border: none;
|
|
1049
|
-
-webkit-appearance: none;
|
|
1050
|
-
background-color: rgba(0, 0, 0, 0.28);
|
|
1051
|
-
/* background-size: 0.426px 34.138px; /* Seems like an odd size, might be intended for a pattern */
|
|
1052
|
-
}
|
|
1053
|
-
|
|
1054
|
-
.bar-mess::placeholder {
|
|
1055
|
-
color: rgba(255, 255, 255, 0.7);
|
|
1056
|
-
}
|
|
1057
|
-
|
|
1058
|
-
/* Icon position refined */
|
|
1059
|
-
.bar-left .iconfont {
|
|
1060
|
-
position: absolute;
|
|
1061
|
-
right: 10px; /* Adjusted right position */
|
|
1062
|
-
top: 50%;
|
|
1063
|
-
transform: translateY(-50%);
|
|
1064
|
-
color: #f2f2f2; /* Adjusted color */
|
|
1065
|
-
font-size: 16px; /* Adjusted size */
|
|
1066
|
-
cursor: pointer;
|
|
1067
|
-
z-index: 2;
|
|
1068
|
-
padding: 5px; /* Added padding for easier clicking */
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
/* 关闭弹幕按钮样式 */
|
|
1073
|
-
.toolbar-close {
|
|
1074
|
-
position: absolute; /* Using absolute relative to #toolbarNew */
|
|
1075
|
-
/* Center vertically */
|
|
1076
|
-
left: 10px; /* Position from the left */
|
|
1077
|
-
transform: translateY(-50%); /* Adjust for vertical centering */
|
|
1078
|
-
display: flex;
|
|
1079
|
-
align-items: center;
|
|
1080
|
-
cursor: pointer;
|
|
1081
|
-
z-index: 2; /* Ensure it's above other elements if needed */
|
|
1082
|
-
}
|
|
1083
|
-
|
|
1084
|
-
.toolbar-close img {
|
|
1085
|
-
display: block;
|
|
1086
|
-
width: 36px;
|
|
1087
|
-
height: 36px;
|
|
1088
|
-
cursor: pointer;
|
|
1089
|
-
}
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
/* 弹幕容器样式 */
|
|
1093
|
-
.bullet-container {
|
|
1094
|
-
position: fixed;
|
|
1095
|
-
left: 10px;
|
|
1096
|
-
right: 10px;
|
|
1097
|
-
/* bottom property is set via inline style binding :style="{ bottom: toolbarHeight }" */
|
|
1098
|
-
/* bottom: v-bind(toolbarHeight); /* Use v-bind if you prefer */
|
|
1099
|
-
height: v-bind(bulletContainerHeightPx); /* Bind computed string height */
|
|
1100
|
-
overflow: hidden;
|
|
1101
|
-
z-index: 99;
|
|
1102
|
-
}
|
|
1103
|
-
|
|
1104
|
-
.bullet-item {
|
|
1105
|
-
position: absolute;
|
|
1106
|
-
left: 0; /* Start from the left edge of the container */
|
|
1107
|
-
bottom: 0; /* Start from the bottom edge of the container */
|
|
1108
|
-
/* top is not needed when using transform: translateY for movement */
|
|
1109
|
-
padding: 5px 10px;
|
|
1110
|
-
border-radius: 15px;
|
|
1111
|
-
font-size: 14px;
|
|
1112
|
-
white-space: nowrap;
|
|
1113
|
-
animation: bulletMove linear;
|
|
1114
|
-
animation-fill-mode: forwards;
|
|
1115
|
-
will-change: transform;
|
|
1116
|
-
display: inline-block;
|
|
1117
|
-
max-width: 90%; /* Prevent very long messages from overflowing */
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
|
-
@keyframes bulletMove {
|
|
1121
|
-
0% {
|
|
1122
|
-
/* Start just outside the bottom, or at the bottom edge */
|
|
1123
|
-
transform: translateY(0); /* 0% is at the bottom edge */
|
|
1124
|
-
opacity: 1;
|
|
1125
|
-
}
|
|
1126
|
-
100% {
|
|
1127
|
-
/* Move up by the height of the container + some offset */
|
|
1128
|
-
/* The original calc was: -1 * (containerHeight + 30px) */
|
|
1129
|
-
/* Let's use the pre-calculated string */
|
|
1130
|
-
transform: translateY(calc(-1 * v-bind(bulletTransformOffsetPx))); /* Use computed string */
|
|
1131
|
-
opacity: 0;
|
|
1132
|
-
}
|
|
1133
|
-
}
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
/* 弹幕输入弹窗样式 */
|
|
1137
|
-
.popup-overlay {
|
|
1138
|
-
position: fixed;
|
|
1139
|
-
top: 0;
|
|
1140
|
-
left: 0;
|
|
1141
|
-
right: 0;
|
|
1142
|
-
bottom: 0;
|
|
1143
|
-
background: rgba(0, 0, 0, 0.5);
|
|
1144
|
-
display: flex;
|
|
1145
|
-
/* Align items to bottom for popup appearing from bottom */
|
|
1146
|
-
justify-content: center;
|
|
1147
|
-
align-items: flex-end;
|
|
1148
|
-
z-index: 200;
|
|
1149
|
-
}
|
|
1150
|
-
|
|
1151
|
-
.popup-content {
|
|
1152
|
-
width: 100%;
|
|
1153
|
-
/* max-width: 100%; /* Redundant if width is 100% */
|
|
1154
|
-
background: #fff;
|
|
1155
|
-
border-radius: 15px 15px 0 0;
|
|
1156
|
-
padding: 20px;
|
|
1157
|
-
box-sizing: border-box;
|
|
1158
|
-
/* Prevent content from being hidden under the toolbar if on mobile keyboard */
|
|
1159
|
-
padding-bottom: calc(20px + env(keyboard-inset-bottom, 0));
|
|
1160
|
-
}
|
|
1161
|
-
|
|
1162
|
-
.popup-header {
|
|
1163
|
-
display: flex;
|
|
1164
|
-
justify-content: space-between;
|
|
1165
|
-
align-items: center;
|
|
1166
|
-
margin-bottom: 20px;
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
.popup-title {
|
|
1170
|
-
font-size: 18px;
|
|
1171
|
-
font-weight: bold;
|
|
1172
|
-
}
|
|
1173
|
-
|
|
1174
|
-
.close-btn {
|
|
1175
|
-
background: none;
|
|
1176
|
-
border: none;
|
|
1177
|
-
font-size: 24px;
|
|
1178
|
-
color: #999;
|
|
1179
|
-
cursor: pointer;
|
|
1180
|
-
padding: 0; /* Remove default button padding */
|
|
1181
|
-
}
|
|
1182
|
-
|
|
1183
|
-
.input-group {
|
|
1184
|
-
margin-bottom: 15px;
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
|
-
.input-field, .textarea-field {
|
|
1188
|
-
width: 100%;
|
|
1189
|
-
padding: 12px;
|
|
1190
|
-
border: 1px solid #ddd;
|
|
1191
|
-
border-radius: 6px;
|
|
1192
|
-
font-size: 16px;
|
|
980
|
+
.ant-form-item {
|
|
1193
981
|
box-sizing: border-box;
|
|
982
|
+
margin: 0;
|
|
983
|
+
padding: 0;
|
|
984
|
+
color: rgba(0, 0, 0, 0.88);
|
|
985
|
+
font-size: 14px;
|
|
986
|
+
line-height: 1.5714285714285714;
|
|
987
|
+
list-style: none;
|
|
988
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
989
|
+
margin-bottom: 0px;
|
|
990
|
+
vertical-align: top;
|
|
1194
991
|
}
|
|
1195
992
|
|
|
1196
|
-
.
|
|
1197
|
-
height: 45px;
|
|
1198
|
-
}
|
|
1199
|
-
|
|
1200
|
-
.textarea-field {
|
|
1201
|
-
height: 100px;
|
|
1202
|
-
resize: none;
|
|
1203
|
-
}
|
|
1204
|
-
|
|
1205
|
-
.submit-btn {
|
|
993
|
+
.uni-lotties-component {
|
|
1206
994
|
width: 100%;
|
|
1207
|
-
height:
|
|
1208
|
-
background: #ff4d4f;
|
|
1209
|
-
color: white;
|
|
1210
|
-
border: none;
|
|
1211
|
-
border-radius: 6px;
|
|
1212
|
-
font-size: 16px;
|
|
1213
|
-
cursor: pointer;
|
|
1214
|
-
margin-top: 10px;
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
.submit-btn:hover {
|
|
1218
|
-
background: #ff7875;
|
|
1219
|
-
}
|
|
1220
|
-
|
|
1221
|
-
/* Original iconfont and icon rules - kept for reference but refined above */
|
|
1222
|
-
/*
|
|
1223
|
-
#toolbarNew .toolbar .bar-left .iconfont.icon-danmuliebiao1 {
|
|
1224
|
-
right: 3px;
|
|
1225
|
-
font-size: 16px;
|
|
1226
|
-
font-weight: 400;
|
|
1227
|
-
}
|
|
1228
|
-
|
|
1229
|
-
#toolbarNew .toolbar .bar-left .iconfont {
|
|
1230
|
-
position: absolute;
|
|
1231
|
-
top: 50%;
|
|
1232
|
-
color: #f2f2f2;
|
|
1233
|
-
padding: 5px 5px 5px 0;
|
|
1234
|
-
transform: translateY(-50%);
|
|
995
|
+
height: 100%;
|
|
1235
996
|
}
|
|
1236
|
-
*/
|
|
1237
|
-
|
|
1238
|
-
.uni-svg-component {
|
|
1239
|
-
display: inline-block;
|
|
1240
|
-
}
|
|
1241
997
|
|
|
1242
998
|
body, html {
|
|
1243
999
|
width: 100%;
|
|
@@ -1634,6 +1390,254 @@ body, html {
|
|
|
1634
1390
|
background-position: center;
|
|
1635
1391
|
will-change: transform;
|
|
1636
1392
|
}
|
|
1393
|
+
|
|
1394
|
+
.uni-svg-component {
|
|
1395
|
+
display: inline-block;
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
/* Iconfont definition moved here for completeness */
|
|
1399
|
+
@font-face {
|
|
1400
|
+
font-family: iconfont;
|
|
1401
|
+
src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype")
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.iconfont {
|
|
1405
|
+
font-family: iconfont !important;
|
|
1406
|
+
font-size: 16px;
|
|
1407
|
+
font-style: normal;
|
|
1408
|
+
-webkit-font-smoothing: antialiased;
|
|
1409
|
+
-moz-osx-font-smoothing: grayscale;
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
.icon-danmuliebiao1:before {
|
|
1413
|
+
content: "\E68A";
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
i {
|
|
1417
|
+
font-style: normal;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
/* 底部工具栏样式 */
|
|
1421
|
+
#toolbarNew {
|
|
1422
|
+
position: fixed;
|
|
1423
|
+
left: 0;
|
|
1424
|
+
bottom: 0;
|
|
1425
|
+
width: 100%;
|
|
1426
|
+
padding: 12px 0;
|
|
1427
|
+
/* Assuming this is a valid base64 background or remove if not needed */
|
|
1428
|
+
background: url('https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/inputBg.png') 0 0 repeat-x;
|
|
1429
|
+
z-index: 100;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.toolbar {
|
|
1433
|
+
display: flex;
|
|
1434
|
+
align-items: center;
|
|
1435
|
+
padding: 0 10px;
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
.bar-left {
|
|
1439
|
+
position: relative;
|
|
1440
|
+
flex: 1;
|
|
1441
|
+
}
|
|
1442
|
+
|
|
1443
|
+
.bar-mess {
|
|
1444
|
+
width: 100%; /* Adjusted for padding/icon */
|
|
1445
|
+
height: 36px;
|
|
1446
|
+
line-height: 36px;
|
|
1447
|
+
font-size: 14px;
|
|
1448
|
+
color: #ccc;
|
|
1449
|
+
padding: 0 8px;
|
|
1450
|
+
border-radius: 18px;
|
|
1451
|
+
border: none;
|
|
1452
|
+
-webkit-appearance: none;
|
|
1453
|
+
background-color: rgba(0, 0, 0, 0.28);
|
|
1454
|
+
/* background-size: 0.426px 34.138px; /* Seems like an odd size, might be intended for a pattern */
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
.bar-mess::placeholder {
|
|
1458
|
+
color: rgba(255, 255, 255, 0.7);
|
|
1459
|
+
}
|
|
1460
|
+
|
|
1461
|
+
/* Icon position refined */
|
|
1462
|
+
.bar-left .iconfont {
|
|
1463
|
+
position: absolute;
|
|
1464
|
+
right: 10px; /* Adjusted right position */
|
|
1465
|
+
top: 50%;
|
|
1466
|
+
transform: translateY(-50%);
|
|
1467
|
+
color: #f2f2f2; /* Adjusted color */
|
|
1468
|
+
font-size: 16px; /* Adjusted size */
|
|
1469
|
+
cursor: pointer;
|
|
1470
|
+
z-index: 2;
|
|
1471
|
+
padding: 5px; /* Added padding for easier clicking */
|
|
1472
|
+
}
|
|
1473
|
+
|
|
1474
|
+
|
|
1475
|
+
/* 关闭弹幕按钮样式 */
|
|
1476
|
+
.toolbar-close {
|
|
1477
|
+
position: absolute; /* Using absolute relative to #toolbarNew */
|
|
1478
|
+
/* Center vertically */
|
|
1479
|
+
left: 10px; /* Position from the left */
|
|
1480
|
+
transform: translateY(-50%); /* Adjust for vertical centering */
|
|
1481
|
+
display: flex;
|
|
1482
|
+
align-items: center;
|
|
1483
|
+
cursor: pointer;
|
|
1484
|
+
z-index: 2; /* Ensure it's above other elements if needed */
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1487
|
+
.toolbar-close img {
|
|
1488
|
+
display: block;
|
|
1489
|
+
width: 36px;
|
|
1490
|
+
height: 36px;
|
|
1491
|
+
cursor: pointer;
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
|
|
1495
|
+
/* 弹幕容器样式 */
|
|
1496
|
+
.bullet-container {
|
|
1497
|
+
position: fixed;
|
|
1498
|
+
left: 10px;
|
|
1499
|
+
right: 10px;
|
|
1500
|
+
/* bottom property is set via inline style binding :style="{ bottom: toolbarHeight }" */
|
|
1501
|
+
/* bottom: v-bind(toolbarHeight); /* Use v-bind if you prefer */
|
|
1502
|
+
height: v-bind(bulletContainerHeightPx); /* Bind computed string height */
|
|
1503
|
+
overflow: hidden;
|
|
1504
|
+
z-index: 99;
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
.bullet-item {
|
|
1508
|
+
position: absolute;
|
|
1509
|
+
left: 0; /* Start from the left edge of the container */
|
|
1510
|
+
bottom: 0; /* Start from the bottom edge of the container */
|
|
1511
|
+
/* top is not needed when using transform: translateY for movement */
|
|
1512
|
+
padding: 5px 10px;
|
|
1513
|
+
border-radius: 15px;
|
|
1514
|
+
font-size: 14px;
|
|
1515
|
+
white-space: nowrap;
|
|
1516
|
+
animation: bulletMove linear;
|
|
1517
|
+
animation-fill-mode: forwards;
|
|
1518
|
+
will-change: transform;
|
|
1519
|
+
display: inline-block;
|
|
1520
|
+
max-width: 90%; /* Prevent very long messages from overflowing */
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
@keyframes bulletMove {
|
|
1524
|
+
0% {
|
|
1525
|
+
/* Start just outside the bottom, or at the bottom edge */
|
|
1526
|
+
transform: translateY(0); /* 0% is at the bottom edge */
|
|
1527
|
+
opacity: 1;
|
|
1528
|
+
}
|
|
1529
|
+
100% {
|
|
1530
|
+
/* Move up by the height of the container + some offset */
|
|
1531
|
+
/* The original calc was: -1 * (containerHeight + 30px) */
|
|
1532
|
+
/* Let's use the pre-calculated string */
|
|
1533
|
+
transform: translateY(calc(-1 * v-bind(bulletTransformOffsetPx))); /* Use computed string */
|
|
1534
|
+
opacity: 0;
|
|
1535
|
+
}
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
|
|
1539
|
+
/* 弹幕输入弹窗样式 */
|
|
1540
|
+
.popup-overlay {
|
|
1541
|
+
position: fixed;
|
|
1542
|
+
top: 0;
|
|
1543
|
+
left: 0;
|
|
1544
|
+
right: 0;
|
|
1545
|
+
bottom: 0;
|
|
1546
|
+
background: rgba(0, 0, 0, 0.5);
|
|
1547
|
+
display: flex;
|
|
1548
|
+
/* Align items to bottom for popup appearing from bottom */
|
|
1549
|
+
justify-content: center;
|
|
1550
|
+
align-items: flex-end;
|
|
1551
|
+
z-index: 200;
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
.popup-content {
|
|
1555
|
+
width: 100%;
|
|
1556
|
+
/* max-width: 100%; /* Redundant if width is 100% */
|
|
1557
|
+
background: #fff;
|
|
1558
|
+
border-radius: 15px 15px 0 0;
|
|
1559
|
+
padding: 20px;
|
|
1560
|
+
box-sizing: border-box;
|
|
1561
|
+
/* Prevent content from being hidden under the toolbar if on mobile keyboard */
|
|
1562
|
+
padding-bottom: calc(20px + env(keyboard-inset-bottom, 0));
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
.popup-header {
|
|
1566
|
+
display: flex;
|
|
1567
|
+
justify-content: space-between;
|
|
1568
|
+
align-items: center;
|
|
1569
|
+
margin-bottom: 20px;
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
.popup-title {
|
|
1573
|
+
font-size: 18px;
|
|
1574
|
+
font-weight: bold;
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
.close-btn {
|
|
1578
|
+
background: none;
|
|
1579
|
+
border: none;
|
|
1580
|
+
font-size: 24px;
|
|
1581
|
+
color: #999;
|
|
1582
|
+
cursor: pointer;
|
|
1583
|
+
padding: 0; /* Remove default button padding */
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
.input-group {
|
|
1587
|
+
width: 100%;
|
|
1588
|
+
margin-bottom: 15px;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.input-field, .textarea-field {
|
|
1592
|
+
width: 100%;
|
|
1593
|
+
padding: 12px;
|
|
1594
|
+
border: 1px solid #ddd;
|
|
1595
|
+
border-radius: 6px;
|
|
1596
|
+
font-size: 16px;
|
|
1597
|
+
box-sizing: border-box;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
.input-field {
|
|
1601
|
+
height: 45px;
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
.textarea-field {
|
|
1605
|
+
height: 100px;
|
|
1606
|
+
resize: none;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
.submit-btn {
|
|
1610
|
+
width: 100%;
|
|
1611
|
+
height: 45px;
|
|
1612
|
+
background: #ff4d4f;
|
|
1613
|
+
color: white;
|
|
1614
|
+
border: none;
|
|
1615
|
+
border-radius: 6px;
|
|
1616
|
+
font-size: 16px;
|
|
1617
|
+
cursor: pointer;
|
|
1618
|
+
margin-top: 10px;
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
.submit-btn:hover {
|
|
1622
|
+
background: #ff7875;
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
/* Original iconfont and icon rules - kept for reference but refined above */
|
|
1626
|
+
/*
|
|
1627
|
+
#toolbarNew .toolbar .bar-left .iconfont.icon-danmuliebiao1 {
|
|
1628
|
+
right: 3px;
|
|
1629
|
+
font-size: 16px;
|
|
1630
|
+
font-weight: 400;
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
#toolbarNew .toolbar .bar-left .iconfont {
|
|
1634
|
+
position: absolute;
|
|
1635
|
+
top: 50%;
|
|
1636
|
+
color: #f2f2f2;
|
|
1637
|
+
padding: 5px 5px 5px 0;
|
|
1638
|
+
transform: translateY(-50%);
|
|
1639
|
+
}
|
|
1640
|
+
*/
|
|
1637
1641
|
|
|
1638
1642
|
/* 设计稿尺寸（如375px下20px的按钮） */
|
|
1639
1643
|
.btn {
|
|
@@ -1665,12 +1669,6 @@ body, html {
|
|
|
1665
1669
|
transform: none !important;
|
|
1666
1670
|
}
|
|
1667
1671
|
|
|
1668
|
-
.form-container {
|
|
1669
|
-
position: relative;
|
|
1670
|
-
width: 100%;
|
|
1671
|
-
height: 100%;
|
|
1672
|
-
}
|
|
1673
|
-
|
|
1674
1672
|
.form-input {
|
|
1675
1673
|
position: absolute;
|
|
1676
1674
|
}
|
|
@@ -1748,6 +1746,12 @@ input::placeholder {
|
|
|
1748
1746
|
opacity: 1;
|
|
1749
1747
|
}
|
|
1750
1748
|
|
|
1749
|
+
.form-container {
|
|
1750
|
+
position: relative;
|
|
1751
|
+
width: 100%;
|
|
1752
|
+
height: 100%;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1751
1755
|
.page-indicator {
|
|
1752
1756
|
position: fixed;
|
|
1753
1757
|
display: flex;
|
|
@@ -6802,28 +6802,32 @@ var script$d = defineComponent({
|
|
|
6802
6802
|
element: {
|
|
6803
6803
|
type: Object,
|
|
6804
6804
|
required: true,
|
|
6805
|
-
}
|
|
6805
|
+
},
|
|
6806
|
+
unit: {
|
|
6807
|
+
type: String,
|
|
6808
|
+
default: 'px',
|
|
6809
|
+
},
|
|
6806
6810
|
},
|
|
6807
6811
|
setup(props) {
|
|
6808
|
-
const iframeUrl = computed(() => (props.element.
|
|
6812
|
+
const iframeUrl = computed(() => (props.element.iframeUrl || '').replace('width="600"', 'width="100%"').replace('height="450"', 'height="100%"'));
|
|
6809
6813
|
// 处理导航按钮点击
|
|
6810
6814
|
const handleNavigation = () => {
|
|
6811
|
-
window.open(props.element.
|
|
6815
|
+
window.open(props.element.url);
|
|
6812
6816
|
};
|
|
6813
6817
|
// 容器样式
|
|
6814
6818
|
const containerStyle = computed(() => ({
|
|
6815
|
-
left: `${props.element.css.left}
|
|
6816
|
-
top: `${props.element.css.top}
|
|
6817
|
-
width: `${props.element.css.width}
|
|
6818
|
-
height: `${props.element.css.height}
|
|
6819
|
+
left: `${props.element.css.left + props.unit}`,
|
|
6820
|
+
top: `${props.element.css.top + props.unit}`,
|
|
6821
|
+
width: `${props.element.css.width + props.unit}`,
|
|
6822
|
+
height: `${props.element.css.height + props.unit}`,
|
|
6819
6823
|
transform: `rotate(${props.element.css.transform}deg)`
|
|
6820
6824
|
}));
|
|
6821
6825
|
// 动画包裹层样式
|
|
6822
6826
|
const aniWrapStyle = computed(() => ({
|
|
6823
6827
|
borderColor: props.element.css.borderColor,
|
|
6824
6828
|
borderStyle: props.element.css.borderStyle,
|
|
6825
|
-
borderWidth: `${props.element.css.borderWidth}
|
|
6826
|
-
borderRadius: `${props.element.css.borderRadius}
|
|
6829
|
+
borderWidth: `${props.element.css.borderWidth + props.unit}`,
|
|
6830
|
+
borderRadius: `${props.element.css.borderRadius + props.unit}`
|
|
6827
6831
|
}));
|
|
6828
6832
|
// 地图样式
|
|
6829
6833
|
const mapStyle = computed(() => ({
|
|
@@ -6832,7 +6836,7 @@ var script$d = defineComponent({
|
|
|
6832
6836
|
// 导航按钮样式
|
|
6833
6837
|
const navButtonStyle = computed(() => ({
|
|
6834
6838
|
opacity: props.element.css.opacity,
|
|
6835
|
-
fontSize: `${props.element.css.fontSize}
|
|
6839
|
+
fontSize: `${props.element.css.fontSize + props.unit}`,
|
|
6836
6840
|
color: props.element.css.color,
|
|
6837
6841
|
backgroundColor: props.element.css.backgroundColor,
|
|
6838
6842
|
display: 'none' // 默认隐藏，可根据需要显示
|
|
@@ -6871,32 +6875,37 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
6871
6875
|
class: "ani-wrap",
|
|
6872
6876
|
style: normalizeStyle$1(_ctx.aniWrapStyle)
|
|
6873
6877
|
}, [
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6878
|
+
(_ctx.element.mapStyle === 'default')
|
|
6879
|
+
? (openBlock(), createElementBlock("div", {
|
|
6880
|
+
key: 0,
|
|
6881
|
+
class: "map",
|
|
6882
|
+
style: normalizeStyle$1(_ctx.mapStyle)
|
|
6883
|
+
}, [
|
|
6884
|
+
createCommentVNode(" Google地图iframe "),
|
|
6885
|
+
createElementVNode("div", {
|
|
6886
|
+
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleNavigation && _ctx.handleNavigation(...args))),
|
|
6887
|
+
innerHTML: _ctx.iframeUrl,
|
|
6888
|
+
class: "map-iframe"
|
|
6889
|
+
}, null, 8 /* PROPS */, _hoisted_2$6),
|
|
6890
|
+
createCommentVNode(" 隐藏的辅助元素 "),
|
|
6891
|
+
createCommentVNode(" <div :id=\"'teng_' + element.id + Date.now()\" class=\"center-map\" style=\"display: none;\"></div>\r\n <div :id=\"'bai_' + element.id + Date.now()\" class=\"center-map\" style=\"display: none;\"></div> "),
|
|
6892
|
+
_hoisted_3$5
|
|
6893
|
+
], 4 /* STYLE */))
|
|
6894
|
+
: (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
6895
|
+
createCommentVNode(" 导航按钮 "),
|
|
6896
|
+
createElementVNode("div", {
|
|
6897
|
+
class: "map",
|
|
6898
|
+
style: normalizeStyle$1(_ctx.navButtonStyle)
|
|
6899
|
+
}, [
|
|
6900
|
+
createElementVNode("button", {
|
|
6901
|
+
type: "button",
|
|
6902
|
+
class: "el-button el-button--primary",
|
|
6903
|
+
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleNavigation && _ctx.handleNavigation(...args)))
|
|
6904
|
+
}, [
|
|
6905
|
+
createElementVNode("span", null, toDisplayString(_ctx.element.btnName || 'Google Map'), 1 /* TEXT */)
|
|
6906
|
+
])
|
|
6907
|
+
], 4 /* STYLE */)
|
|
6908
|
+
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
|
|
6900
6909
|
], 4 /* STYLE */)
|
|
6901
6910
|
], 12 /* STYLE, PROPS */, _hoisted_1$a))
|
|
6902
6911
|
}
|
|
@@ -6806,28 +6806,32 @@
|
|
|
6806
6806
|
element: {
|
|
6807
6807
|
type: Object,
|
|
6808
6808
|
required: true,
|
|
6809
|
-
}
|
|
6809
|
+
},
|
|
6810
|
+
unit: {
|
|
6811
|
+
type: String,
|
|
6812
|
+
default: 'px',
|
|
6813
|
+
},
|
|
6810
6814
|
},
|
|
6811
6815
|
setup(props) {
|
|
6812
|
-
const iframeUrl = vue.computed(() => (props.element.
|
|
6816
|
+
const iframeUrl = vue.computed(() => (props.element.iframeUrl || '').replace('width="600"', 'width="100%"').replace('height="450"', 'height="100%"'));
|
|
6813
6817
|
// 处理导航按钮点击
|
|
6814
6818
|
const handleNavigation = () => {
|
|
6815
|
-
window.open(props.element.
|
|
6819
|
+
window.open(props.element.url);
|
|
6816
6820
|
};
|
|
6817
6821
|
// 容器样式
|
|
6818
6822
|
const containerStyle = vue.computed(() => ({
|
|
6819
|
-
left: `${props.element.css.left}
|
|
6820
|
-
top: `${props.element.css.top}
|
|
6821
|
-
width: `${props.element.css.width}
|
|
6822
|
-
height: `${props.element.css.height}
|
|
6823
|
+
left: `${props.element.css.left + props.unit}`,
|
|
6824
|
+
top: `${props.element.css.top + props.unit}`,
|
|
6825
|
+
width: `${props.element.css.width + props.unit}`,
|
|
6826
|
+
height: `${props.element.css.height + props.unit}`,
|
|
6823
6827
|
transform: `rotate(${props.element.css.transform}deg)`
|
|
6824
6828
|
}));
|
|
6825
6829
|
// 动画包裹层样式
|
|
6826
6830
|
const aniWrapStyle = vue.computed(() => ({
|
|
6827
6831
|
borderColor: props.element.css.borderColor,
|
|
6828
6832
|
borderStyle: props.element.css.borderStyle,
|
|
6829
|
-
borderWidth: `${props.element.css.borderWidth}
|
|
6830
|
-
borderRadius: `${props.element.css.borderRadius}
|
|
6833
|
+
borderWidth: `${props.element.css.borderWidth + props.unit}`,
|
|
6834
|
+
borderRadius: `${props.element.css.borderRadius + props.unit}`
|
|
6831
6835
|
}));
|
|
6832
6836
|
// 地图样式
|
|
6833
6837
|
const mapStyle = vue.computed(() => ({
|
|
@@ -6836,7 +6840,7 @@
|
|
|
6836
6840
|
// 导航按钮样式
|
|
6837
6841
|
const navButtonStyle = vue.computed(() => ({
|
|
6838
6842
|
opacity: props.element.css.opacity,
|
|
6839
|
-
fontSize: `${props.element.css.fontSize}
|
|
6843
|
+
fontSize: `${props.element.css.fontSize + props.unit}`,
|
|
6840
6844
|
color: props.element.css.color,
|
|
6841
6845
|
backgroundColor: props.element.css.backgroundColor,
|
|
6842
6846
|
display: 'none' // 默认隐藏，可根据需要显示
|
|
@@ -6875,32 +6879,37 @@
|
|
|
6875
6879
|
class: "ani-wrap",
|
|
6876
6880
|
style: vue.normalizeStyle(_ctx.aniWrapStyle)
|
|
6877
6881
|
}, [
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6882
|
+
(_ctx.element.mapStyle === 'default')
|
|
6883
|
+
? (vue.openBlock(), vue.createElementBlock("div", {
|
|
6884
|
+
key: 0,
|
|
6885
|
+
class: "map",
|
|
6886
|
+
style: vue.normalizeStyle(_ctx.mapStyle)
|
|
6887
|
+
}, [
|
|
6888
|
+
vue.createCommentVNode(" Google地图iframe "),
|
|
6889
|
+
vue.createElementVNode("div", {
|
|
6890
|
+
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleNavigation && _ctx.handleNavigation(...args))),
|
|
6891
|
+
innerHTML: _ctx.iframeUrl,
|
|
6892
|
+
class: "map-iframe"
|
|
6893
|
+
}, null, 8 /* PROPS */, _hoisted_2$6),
|
|
6894
|
+
vue.createCommentVNode(" 隐藏的辅助元素 "),
|
|
6895
|
+
vue.createCommentVNode(" <div :id=\"'teng_' + element.id + Date.now()\" class=\"center-map\" style=\"display: none;\"></div>\r\n <div :id=\"'bai_' + element.id + Date.now()\" class=\"center-map\" style=\"display: none;\"></div> "),
|
|
6896
|
+
_hoisted_3$5
|
|
6897
|
+
], 4 /* STYLE */))
|
|
6898
|
+
: (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
|
|
6899
|
+
vue.createCommentVNode(" 导航按钮 "),
|
|
6900
|
+
vue.createElementVNode("div", {
|
|
6901
|
+
class: "map",
|
|
6902
|
+
style: vue.normalizeStyle(_ctx.navButtonStyle)
|
|
6903
|
+
}, [
|
|
6904
|
+
vue.createElementVNode("button", {
|
|
6905
|
+
type: "button",
|
|
6906
|
+
class: "el-button el-button--primary",
|
|
6907
|
+
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleNavigation && _ctx.handleNavigation(...args)))
|
|
6908
|
+
}, [
|
|
6909
|
+
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.element.btnName || 'Google Map'), 1 /* TEXT */)
|
|
6910
|
+
])
|
|
6911
|
+
], 4 /* STYLE */)
|
|
6912
|
+
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
|
|
6904
6913
|
], 4 /* STYLE */)
|
|
6905
6914
|
], 12 /* STYLE, PROPS */, _hoisted_1$a))
|
|
6906
6915
|
}
|