zz-shopify-components 0.36.1-beta.3 → 0.36.1-beta.5
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.
- package/blocks/zz-scroll-animate-bg-text.liquid +18 -8
- package/blocks/zz-swiper-title-in-item.liquid +40 -20
- package/blocks/zz-text.liquid +7 -1
- package/package.json +1 -1
- package/sections/zz-swiper-banner.liquid +21 -22
- package/sections/zz-video-tab-swiper.liquid +111 -53
- package/snippets/zz-content-text.liquid +3 -2
|
@@ -20,6 +20,13 @@
|
|
|
20
20
|
"id": "mobile_image",
|
|
21
21
|
"label": "移动端图片"
|
|
22
22
|
},
|
|
23
|
+
{
|
|
24
|
+
"type": "checkbox",
|
|
25
|
+
"id": "is_compatible",
|
|
26
|
+
"label": "兼容顶部导航栏",
|
|
27
|
+
"default": false,
|
|
28
|
+
"info": "防止顶部导航栏遮住标题"
|
|
29
|
+
},
|
|
23
30
|
{
|
|
24
31
|
"type": "richtext",
|
|
25
32
|
"id": "pc_title",
|
|
@@ -140,7 +147,7 @@
|
|
|
140
147
|
{% render 'zz-img',
|
|
141
148
|
pc_image: block.settings.desktop_image,
|
|
142
149
|
mb_image: block.settings.mobile_image,
|
|
143
|
-
image_alt: block.settings.alt
|
|
150
|
+
image_alt: block.settings.alt,
|
|
144
151
|
class_name: 'tw-w-full tw-h-full tw-object-cover',
|
|
145
152
|
%}
|
|
146
153
|
|
|
@@ -151,7 +158,7 @@
|
|
|
151
158
|
{% when 'h2' %}
|
|
152
159
|
{% render 'zz-h2',
|
|
153
160
|
title: block.settings.pc_title,
|
|
154
|
-
title_mb: block.settings.mb_title
|
|
161
|
+
title_mb: block.settings.mb_title,
|
|
155
162
|
title_color: block.settings.text_color,
|
|
156
163
|
|
|
157
164
|
class_name: 'scroll-animate-bg-title'
|
|
@@ -159,7 +166,7 @@
|
|
|
159
166
|
{% when 'h3' %}
|
|
160
167
|
{% render 'zz-h3',
|
|
161
168
|
title: block.settings.pc_title,
|
|
162
|
-
title_mb: block.settings.mb_title
|
|
169
|
+
title_mb: block.settings.mb_title,
|
|
163
170
|
title_color: block.settings.text_color,
|
|
164
171
|
class_name: 'scroll-animate-bg-title'
|
|
165
172
|
|
|
@@ -167,14 +174,14 @@
|
|
|
167
174
|
{% when 'h4' %}
|
|
168
175
|
{% render 'zz-h4',
|
|
169
176
|
title: block.settings.pc_title,
|
|
170
|
-
title_mb: block.settings.mb_title
|
|
177
|
+
title_mb: block.settings.mb_title,
|
|
171
178
|
title_color: block.settings.text_color,
|
|
172
179
|
class_name: 'scroll-animate-bg-title'
|
|
173
180
|
%}
|
|
174
181
|
{% when 'h5' %}
|
|
175
182
|
{% render 'zz-h5',
|
|
176
183
|
title: block.settings.pc_title,
|
|
177
|
-
title_mb: block.settings.mb_title
|
|
184
|
+
title_mb: block.settings.mb_title,
|
|
178
185
|
title_color: block.settings.text_color,
|
|
179
186
|
class_name: 'scroll-animate-bg-title'
|
|
180
187
|
%}
|
|
@@ -225,9 +232,12 @@
|
|
|
225
232
|
|
|
226
233
|
}
|
|
227
234
|
@media screen and (min-width: 1024px) {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
235
|
+
{% if block.settings.is_compatible == true %}
|
|
236
|
+
#shopify-block-{{ block.id }} .scroll-block-scroll-animate {
|
|
237
|
+
padding-top: 50px;
|
|
238
|
+
}
|
|
239
|
+
{% endif %}
|
|
240
|
+
|
|
231
241
|
#shopify-block-{{ block.id }} .text-overlay {
|
|
232
242
|
position: absolute;
|
|
233
243
|
top: {{ block.settings.pc_top }}%;
|
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
<div class='media-box tw-relative banner-item {{ media_class }}'>
|
|
40
40
|
{% render 'zz-h6',
|
|
41
41
|
title: block.settings.heading,
|
|
42
|
-
|
|
42
|
+
title_mb: block.settings.heading_mb,
|
|
43
|
+
title_color: block.settings.text_color,
|
|
43
44
|
class_name: 'media-box-title tw-text-left max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px] tw-right-[20px]'
|
|
44
45
|
%}
|
|
45
46
|
{% if block.settings.video_pc != blank %}
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
render 'zz-img',
|
|
66
67
|
pc_image: block.settings.poster_pc,
|
|
67
68
|
mb_image: block.settings.poster_mb,
|
|
68
|
-
image_alt: block.settings.heading
|
|
69
|
+
image_alt: block.settings.heading,
|
|
69
70
|
class_name: 'image-video-box',
|
|
70
71
|
%}
|
|
71
72
|
{% endif %}
|
|
@@ -75,19 +76,38 @@
|
|
|
75
76
|
<div class='active-box-content max-lg:tw-mt-[20px]'>
|
|
76
77
|
{% render 'zz-h5',
|
|
77
78
|
title: block.settings.heading,
|
|
78
|
-
title_color: block.settings.
|
|
79
|
+
title_color: block.settings.text_color,
|
|
79
80
|
class_name: 'tw-text-center lg:tw-hidden !tw-text-[16px]'
|
|
80
81
|
%}
|
|
81
|
-
|
|
82
|
-
{%
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
82
|
+
{% if block.settings.row_content != blank %}
|
|
83
|
+
{% assign content_color = block.settings.text_color | color_modify: 'alpha', 0.7 %}
|
|
84
|
+
<div class='tw-mt-[8px] lg:tw-mt-[16px]'>
|
|
85
|
+
{% render 'zz-content-text',
|
|
86
|
+
text: block.settings.row_content,
|
|
87
|
+
mb_text: block.settings.row_content,
|
|
88
|
+
pc_font_size: 16,
|
|
89
|
+
mobile_font_size: 12,
|
|
90
|
+
text_color: content_color,
|
|
91
|
+
class_name: 'max-lg:tw-text-center lg:tw-text-left',
|
|
92
|
+
%}
|
|
93
|
+
</div>
|
|
94
|
+
{% endif %}
|
|
95
|
+
{% if block.settings.row_content_2 != blank %}
|
|
96
|
+
{% assign content_color_2 = block.settings.text_color
|
|
97
|
+
| color_modify: 'alpha', 0.45
|
|
89
98
|
%}
|
|
90
|
-
|
|
99
|
+
<div class='tw-mt-[8px] lg:tw-mt-[16px]'>
|
|
100
|
+
{% render 'zz-content-text',
|
|
101
|
+
text: block.settings.row_content_2,
|
|
102
|
+
mb_text: block.settings.row_content_2,
|
|
103
|
+
pc_font_size: 14,
|
|
104
|
+
mobile_font_size: 10,
|
|
105
|
+
text_color: content_color_2,
|
|
106
|
+
class_name: 'max-lg:tw-text-center lg:tw-text-left',
|
|
107
|
+
%}
|
|
108
|
+
</div>
|
|
109
|
+
{% endif %}
|
|
110
|
+
|
|
91
111
|
</div>
|
|
92
112
|
|
|
93
113
|
|
|
@@ -123,15 +143,16 @@
|
|
|
123
143
|
"label": "Poster(Mobile)"
|
|
124
144
|
},
|
|
125
145
|
{
|
|
126
|
-
"type": "
|
|
146
|
+
"type": "richtext",
|
|
127
147
|
"id": "heading",
|
|
128
148
|
"label": "标题"
|
|
129
149
|
},
|
|
130
150
|
{
|
|
131
151
|
"type": "color",
|
|
132
|
-
"id": "
|
|
133
|
-
"default": "#
|
|
134
|
-
"label": "
|
|
152
|
+
"id": "text_color",
|
|
153
|
+
"default": "#ffffff",
|
|
154
|
+
"label": "文本颜色",
|
|
155
|
+
"info": "标题颜色，文案根据这个颜色， 70%， 45%透明度"
|
|
135
156
|
},
|
|
136
157
|
{
|
|
137
158
|
"type": "richtext",
|
|
@@ -139,10 +160,9 @@
|
|
|
139
160
|
"label": "description"
|
|
140
161
|
},
|
|
141
162
|
{
|
|
142
|
-
"type": "
|
|
143
|
-
"id": "
|
|
144
|
-
"
|
|
145
|
-
"label": "内容颜色"
|
|
163
|
+
"type": "richtext",
|
|
164
|
+
"id": "row_content_2",
|
|
165
|
+
"label": "description2"
|
|
146
166
|
},
|
|
147
167
|
{
|
|
148
168
|
"type": "text",
|
package/blocks/zz-text.liquid
CHANGED
|
@@ -39,7 +39,12 @@
|
|
|
39
39
|
],
|
|
40
40
|
"default": "400"
|
|
41
41
|
},
|
|
42
|
-
|
|
42
|
+
{
|
|
43
|
+
"type": "checkbox",
|
|
44
|
+
"id": "italic",
|
|
45
|
+
"label": "是否斜体 (Italic)",
|
|
46
|
+
"default": false
|
|
47
|
+
},
|
|
43
48
|
{
|
|
44
49
|
"type": "header",
|
|
45
50
|
"content": "PC Settings"
|
|
@@ -195,6 +200,7 @@
|
|
|
195
200
|
pc_text_align: block.settings.pc_text_align,
|
|
196
201
|
mobile_text_align: block.settings.mobile_text_align,
|
|
197
202
|
font_weight: block.settings.font_weight,
|
|
203
|
+
italic: block.settings.italic,
|
|
198
204
|
class_name: block.settings.animation
|
|
199
205
|
%}
|
|
200
206
|
|
package/package.json
CHANGED
|
@@ -100,14 +100,14 @@
|
|
|
100
100
|
color: #2D2D2D;
|
|
101
101
|
}
|
|
102
102
|
#shopify-section-{{section.id}} .discount_sale_type .banner-title {
|
|
103
|
-
font-size:
|
|
103
|
+
font-size: 20px;
|
|
104
104
|
line-height: 1.3;
|
|
105
105
|
margin-bottom: 16px;
|
|
106
106
|
}
|
|
107
107
|
#shopify-section-{{section.id}} .discount_sale_type .banner-description {
|
|
108
108
|
font-size: 24px;
|
|
109
109
|
line-height: 1.3;
|
|
110
|
-
font-weight:
|
|
110
|
+
font-weight: 700;
|
|
111
111
|
}
|
|
112
112
|
#shopify-section-{{section.id}} .product_type .banner-description {
|
|
113
113
|
font-size: 28px;
|
|
@@ -270,14 +270,14 @@
|
|
|
270
270
|
}
|
|
271
271
|
|
|
272
272
|
#shopify-section-{{section.id}} .discount_sale_type .banner-title {
|
|
273
|
-
font-size: 1.
|
|
273
|
+
font-size: 1.4rem;
|
|
274
274
|
line-height: 1.2;
|
|
275
|
-
margin-bottom: 0.
|
|
275
|
+
margin-bottom: 0.8rem;
|
|
276
276
|
}
|
|
277
277
|
#shopify-section-{{section.id}} .discount_sale_type .banner-description{
|
|
278
|
-
font-size: 1.
|
|
279
|
-
line-height: 1.
|
|
280
|
-
font-weight:
|
|
278
|
+
font-size: 1.6rem;
|
|
279
|
+
line-height: 1.2;
|
|
280
|
+
font-weight: 700;
|
|
281
281
|
}
|
|
282
282
|
#shopify-section-{{section.id}} .product_type .banner-description {
|
|
283
283
|
font-size: 1.8rem;
|
|
@@ -426,13 +426,13 @@
|
|
|
426
426
|
{
|
|
427
427
|
"type": "richtext",
|
|
428
428
|
"id": "title",
|
|
429
|
-
"label": "
|
|
429
|
+
"label": "标题/活动日期",
|
|
430
430
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
|
|
431
431
|
},
|
|
432
432
|
{
|
|
433
433
|
"type": "richtext",
|
|
434
434
|
"id": "title_mb",
|
|
435
|
-
"label": "
|
|
435
|
+
"label": "标题/活动日期 Mobile",
|
|
436
436
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
|
|
437
437
|
},
|
|
438
438
|
{
|
|
@@ -440,7 +440,7 @@
|
|
|
440
440
|
"id": "discount_text",
|
|
441
441
|
"label": "折扣",
|
|
442
442
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
|
|
443
|
-
"info": "折扣，如：90
|
|
443
|
+
"info": "折扣，如：90%,会显示UP TO 90% OFF"
|
|
444
444
|
},
|
|
445
445
|
{
|
|
446
446
|
"type": "richtext",
|
|
@@ -701,13 +701,13 @@
|
|
|
701
701
|
{
|
|
702
702
|
"type": "richtext",
|
|
703
703
|
"id": "title",
|
|
704
|
-
"label": "
|
|
704
|
+
"label": "标题/活动日期",
|
|
705
705
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}"
|
|
706
706
|
},
|
|
707
707
|
{
|
|
708
708
|
"type": "richtext",
|
|
709
709
|
"id": "title_mb",
|
|
710
|
-
"label": "
|
|
710
|
+
"label": "标题/活动日期 Mobile",
|
|
711
711
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' or block.settings.banner_type == 'title_description_type' }}",
|
|
712
712
|
},
|
|
713
713
|
{
|
|
@@ -715,7 +715,7 @@
|
|
|
715
715
|
"id": "discount_text",
|
|
716
716
|
"label": "折扣",
|
|
717
717
|
"visible_if": "{{ block.settings.banner_type == 'discount_sale_type' }}",
|
|
718
|
-
"info": "折扣，如：90
|
|
718
|
+
"info": "折扣，如：90%,会显示UP TO 90% OFF"
|
|
719
719
|
},
|
|
720
720
|
{
|
|
721
721
|
"type": "richtext",
|
|
@@ -905,8 +905,7 @@
|
|
|
905
905
|
>
|
|
906
906
|
<div
|
|
907
907
|
id='{{ banner.id }}-bannerlink'
|
|
908
|
-
class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
|
|
909
|
-
style="{% if banner.settings.btn_type == 'none' %}cursor: pointer;{% endif %}"
|
|
908
|
+
class='{{ banner.id }}-site-event swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full tw-cursor-pointer'
|
|
910
909
|
{% if banner.settings.btn_type == 'none' and banner.settings.banner_name != blank %}
|
|
911
910
|
data-track-zz-element="{{ banner.settings.banner_name }}"
|
|
912
911
|
{% endif %}
|
|
@@ -958,7 +957,7 @@
|
|
|
958
957
|
|
|
959
958
|
{% endif %}
|
|
960
959
|
<div
|
|
961
|
-
class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] tw-z-10 max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
|
|
960
|
+
class='center-content tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] lg:tw-w-[85vw] tw-z-10 max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
|
|
962
961
|
>
|
|
963
962
|
<div class='swiper-content-text {% if banner.settings.banner_type == 'image_type' %} lg:tw-w-[560px] {% else %} lg:tw-w-[784px] {% endif %}'>
|
|
964
963
|
{%- if banner.settings.banner_type == 'product_type' or banner.settings.banner_type == 'title_description_type' or banner.settings.banner_type == 'discount_sale_type' -%}
|
|
@@ -975,14 +974,14 @@
|
|
|
975
974
|
|
|
976
975
|
{% if banner.settings.banner_type == 'discount_sale_type' or banner.settings.banner_type == 'title_description_type' %}
|
|
977
976
|
<div
|
|
978
|
-
class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] tw-font-bold max-lg:tw-text-center'
|
|
977
|
+
class='banner-title max-lg:tw-hidden tw-p-0 tw-leading-[1.2] {% if banner.settings.banner_type == 'title_description_type' %} tw-font-bold {% endif %} max-lg:tw-text-center'
|
|
979
978
|
style='color: {{ banner.settings.color | default: 'white' }};'
|
|
980
979
|
>
|
|
981
980
|
{{ banner.settings.title }}
|
|
982
981
|
</div>
|
|
983
982
|
<div
|
|
984
|
-
class='banner-title lg:tw-hidden tw-p-0 tw-font-bold max-lg:tw-leading-[1.2] max-lg:tw-text-center'
|
|
985
|
-
|
|
983
|
+
class='banner-title lg:tw-hidden tw-p-0 {% if banner.settings.banner_type == 'title_description_type' %} tw-font-bold {% endif %} max-lg:tw-leading-[1.2] max-lg:tw-text-center'
|
|
984
|
+
style='color: {{ banner.settings.color | default: 'white' }};'
|
|
986
985
|
>
|
|
987
986
|
{{ banner.settings.title_mb }}
|
|
988
987
|
</div>
|
|
@@ -990,7 +989,7 @@
|
|
|
990
989
|
|
|
991
990
|
{% if banner.settings.banner_type == 'discount_sale_type' %}
|
|
992
991
|
<div
|
|
993
|
-
class='banner-discount_text tw-p-0 max-lg:tw-mt-[
|
|
992
|
+
class='banner-discount_text tw-p-0 max-lg:tw-mt-[8px] max-lg:tw-mb-[7px] lg:tw-mt-[16px] lg:tw-mb-[8px] tw-leading-[1.2] tw-font-bold tw-flex tw-items-center max-lg:tw-justify-center'
|
|
994
993
|
style='color: {{ banner.settings.color | default: 'white' }};'
|
|
995
994
|
>
|
|
996
995
|
<div class="tw-text-[1.9rem] lg:tw-text-[32px] tw-text-center tw-leading-[1] tw-mr-[6px] lg:tw-mr-[8px]"
|
|
@@ -1000,13 +999,13 @@
|
|
|
1000
999
|
</div>
|
|
1001
1000
|
{% endif %}
|
|
1002
1001
|
<div
|
|
1003
|
-
class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5]'
|
|
1002
|
+
class='banner-description max-lg:tw-hidden tw-p-0 tw-leading-[1.5] {% if banner.settings.banner_type == 'discount_sale_type' %} tw-font-bold {% endif %}'
|
|
1004
1003
|
style='color: {{ banner.settings.color | default: 'white' }}'
|
|
1005
1004
|
>
|
|
1006
1005
|
{{ banner.settings.description }}
|
|
1007
1006
|
</div>
|
|
1008
1007
|
<div
|
|
1009
|
-
class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center'
|
|
1008
|
+
class='banner-description lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] max-lg:tw-text-center {% if banner.settings.banner_type == 'discount_sale_type' %} tw-font-bold {% endif %}'
|
|
1010
1009
|
style='color: {{ banner.settings.color | default: 'white' }}'
|
|
1011
1010
|
>
|
|
1012
1011
|
{{ banner.settings.description_mb }}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
%}
|
|
4
4
|
{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
|
|
5
5
|
{% assign video_loop = false %}
|
|
6
|
-
{% if section.settings.loop_swiper %}
|
|
6
|
+
{% if section.settings.loop_swiper == false %}
|
|
7
7
|
{% assign video_loop = true %}
|
|
8
8
|
{% endif %}
|
|
9
9
|
<style>
|
|
@@ -12,9 +12,7 @@
|
|
|
12
12
|
padding-top: {{ section.settings.mobile_padding_top | divided_by: 10 }}rem;
|
|
13
13
|
padding-bottom: {{ section.settings.mobile_padding_bottom | divided_by: 10 }}rem;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
background: {{ section.settings.bg_color }};
|
|
17
|
-
}
|
|
15
|
+
|
|
18
16
|
@media screen and (min-width: 1024px) {
|
|
19
17
|
#shopify-section-{{ section.id }} {
|
|
20
18
|
padding-top: {{ section.settings.pc_padding_top }}px;
|
|
@@ -35,11 +33,8 @@
|
|
|
35
33
|
letter-spacing: 0;
|
|
36
34
|
}
|
|
37
35
|
|
|
38
|
-
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
|
|
39
|
-
bottom: 0.9rem;
|
|
40
|
-
}
|
|
41
36
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
|
|
42
|
-
|
|
37
|
+
|
|
43
38
|
background-color: {{ section.settings.pagination_color }};
|
|
44
39
|
opacity: 0.5;
|
|
45
40
|
}
|
|
@@ -51,9 +46,26 @@
|
|
|
51
46
|
display: block !important;
|
|
52
47
|
}
|
|
53
48
|
@media screen and (max-width: 1024px) {
|
|
54
|
-
|
|
49
|
+
#shopify-section-{{ section.id }} .zz-swiper-container {
|
|
50
|
+
position: relative;
|
|
51
|
+
}
|
|
52
|
+
#shopify-section-{{ section.id }} .zz-swiper-container::after {
|
|
53
|
+
content: '';
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
right: 0;
|
|
57
|
+
width: 2rem;
|
|
58
|
+
height: 100%;
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
z-index: 2;
|
|
61
|
+
background: linear-gradient(to right, transparent, {{ section.settings.bg_color }});
|
|
62
|
+
}
|
|
63
|
+
#shopify-section-{{ section.id }} .zz-video-tab-swiper {
|
|
55
64
|
width: 100%;
|
|
56
|
-
padding: 0 2rem;
|
|
65
|
+
padding: 0 0 0 2rem;
|
|
66
|
+
}
|
|
67
|
+
#shopify-section-{{ section.id }} .title-text-content {
|
|
68
|
+
padding-right: 2rem;
|
|
57
69
|
}
|
|
58
70
|
|
|
59
71
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper {
|
|
@@ -61,19 +73,24 @@
|
|
|
61
73
|
|
|
62
74
|
}
|
|
63
75
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
|
|
64
|
-
width: 100% !important;
|
|
76
|
+
width: calc(100% - 2rem) !important;
|
|
65
77
|
}
|
|
66
78
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
|
|
67
79
|
position: relative;
|
|
68
80
|
width: 100%;
|
|
69
81
|
aspect-ratio: 335 / 252;
|
|
82
|
+
{% if section.settings.mobile_media_box_ratio != blank %}
|
|
83
|
+
aspect-ratio: {{ section.settings.mobile_media_box_ratio }};
|
|
84
|
+
{% endif %}
|
|
70
85
|
}
|
|
71
86
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
|
|
72
|
-
|
|
87
|
+
overflow-y: hidden;
|
|
88
|
+
{% if section.settings.has_description == true %}
|
|
73
89
|
bottom: 8.5rem;
|
|
90
|
+
{% endif %}
|
|
74
91
|
left: 50%;
|
|
75
92
|
transform: translateX(-50%);
|
|
76
|
-
width:
|
|
93
|
+
width: calc(100vw - 2rem);
|
|
77
94
|
height: 4.8rem;
|
|
78
95
|
}
|
|
79
96
|
#shopify-section-{{ section.id }} .swiper-pagination-horizontal {
|
|
@@ -93,7 +110,15 @@
|
|
|
93
110
|
box-sizing: content-box;
|
|
94
111
|
margin: 0;
|
|
95
112
|
margin-right: 2rem;
|
|
96
|
-
|
|
113
|
+
|
|
114
|
+
text-align: left;
|
|
115
|
+
{% if swiper_blocks.size == 2 %}
|
|
116
|
+
width: 50%;
|
|
117
|
+
{% elsif swiper_blocks.size == 3 %}
|
|
118
|
+
width: 33.33%;
|
|
119
|
+
{% else %}
|
|
120
|
+
width: fit-content;
|
|
121
|
+
{% endif %}
|
|
97
122
|
white-space: nowrap;
|
|
98
123
|
height: 4.7rem;
|
|
99
124
|
line-height: 4.7rem;
|
|
@@ -113,7 +138,7 @@
|
|
|
113
138
|
border-bottom: 2px solid {{ section.settings.mb_tab_active_line_color }};
|
|
114
139
|
height: 4.5rem;
|
|
115
140
|
line-height: 4.5rem;
|
|
116
|
-
font-weight:
|
|
141
|
+
font-weight: 500;
|
|
117
142
|
color: {{ section.settings.tab_title_active_color }};
|
|
118
143
|
}
|
|
119
144
|
|
|
@@ -129,10 +154,15 @@
|
|
|
129
154
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
|
|
130
155
|
position: relative;
|
|
131
156
|
width: 90vw;
|
|
132
|
-
|
|
157
|
+
aspect-ratio: 16 / 9;
|
|
158
|
+
{% if section.settings.pc_media_box_ratio != blank %}
|
|
159
|
+
aspect-ratio: {{ section.settings.pc_media_box_ratio }};
|
|
160
|
+
{% endif %}
|
|
133
161
|
}
|
|
134
162
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
|
|
135
|
-
|
|
163
|
+
{% if section.settings.has_description == true %}
|
|
164
|
+
bottom: 135px;
|
|
165
|
+
{% endif %}
|
|
136
166
|
left: 50%;
|
|
137
167
|
transform: translateX(-50%);
|
|
138
168
|
width: auto;
|
|
@@ -169,15 +199,14 @@
|
|
|
169
199
|
}
|
|
170
200
|
@media screen and (min-width: 1280px) {
|
|
171
201
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper {
|
|
172
|
-
width:
|
|
202
|
+
width: 1220px;
|
|
173
203
|
}
|
|
174
204
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
|
|
175
|
-
width:
|
|
205
|
+
width: 1220px;
|
|
176
206
|
}
|
|
177
207
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
|
|
178
208
|
position: relative;
|
|
179
|
-
width:
|
|
180
|
-
height: 608px;
|
|
209
|
+
width: 1220px;
|
|
181
210
|
}
|
|
182
211
|
#shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
|
|
183
212
|
width: auto;
|
|
@@ -199,7 +228,7 @@
|
|
|
199
228
|
{% endif %}
|
|
200
229
|
{% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
|
|
201
230
|
>
|
|
202
|
-
<div class='title-text-content fade-in-box tw-flex tw-flex-col tw-justify-center lg:tw-w-[90vw] xl:tw-w-[
|
|
231
|
+
<div class='title-text-content fade-in-box tw-flex tw-flex-col tw-justify-center lg:tw-w-[90vw] xl:tw-w-[1220px]'>
|
|
203
232
|
{% for block in non_collapsible_blocks %}
|
|
204
233
|
{% case block.type %}
|
|
205
234
|
{% when 'title' %}
|
|
@@ -207,7 +236,7 @@
|
|
|
207
236
|
title: block.settings.pc_title,
|
|
208
237
|
title_mb: block.settings.mb_title,
|
|
209
238
|
title_color: block.settings.text_color,
|
|
210
|
-
class_name: 'tab-content-title tw-text-center
|
|
239
|
+
class_name: 'tab-content-title tw-text-center'
|
|
211
240
|
%}
|
|
212
241
|
<style>
|
|
213
242
|
#shopify-section-{{section.id}} .tab-content-title {
|
|
@@ -228,9 +257,9 @@
|
|
|
228
257
|
text: block.settings.pc_text,
|
|
229
258
|
mb_text: block.settings.mb_text,
|
|
230
259
|
text_color: block.settings.text_color,
|
|
231
|
-
mobile_font_size:
|
|
260
|
+
mobile_font_size: 16,
|
|
232
261
|
pc_font_size: 16,
|
|
233
|
-
class_name: 'tab-content-text tw-text-center
|
|
262
|
+
class_name: 'tab-content-text tw-text-center'
|
|
234
263
|
%}
|
|
235
264
|
<style>
|
|
236
265
|
#shopify-section-{{section.id}} .tab-content-text {
|
|
@@ -252,7 +281,7 @@
|
|
|
252
281
|
|
|
253
282
|
<div class='zz-swiper-container'>
|
|
254
283
|
<div
|
|
255
|
-
class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[90vw] xl:tw-w-[
|
|
284
|
+
class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[90vw] xl:tw-w-[1220px]'
|
|
256
285
|
>
|
|
257
286
|
<div class='swiper-wrapper'>
|
|
258
287
|
{% for banner in swiper_blocks %}
|
|
@@ -273,32 +302,35 @@
|
|
|
273
302
|
class: 'tw-w-full tw-h-full tw-object-cover',
|
|
274
303
|
autoplay: true,
|
|
275
304
|
loop: video_loop,
|
|
276
|
-
muted: true
|
|
277
|
-
module_id: banner.settings.block_module_id
|
|
305
|
+
muted: true
|
|
278
306
|
%}
|
|
279
307
|
{% else %}
|
|
280
308
|
{%- if banner.settings.poster_pc != blank -%}
|
|
281
|
-
{%
|
|
282
|
-
render 'zz-img',
|
|
309
|
+
{% render 'zz-img',
|
|
283
310
|
pc_image: banner.settings.poster_pc,
|
|
284
|
-
mb_image: banner.settings.poster_mb
|
|
285
|
-
image_alt: banner.settings.slide_title
|
|
311
|
+
mb_image: banner.settings.poster_mb,
|
|
312
|
+
image_alt: banner.settings.slide_title,
|
|
286
313
|
%}
|
|
287
314
|
{% endif %}
|
|
288
315
|
{% endif %}
|
|
289
316
|
</div>
|
|
290
|
-
<div
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
317
|
+
<div
|
|
318
|
+
class='slide-box {% if section.settings.has_description == true %} tw-mt-[7.8rem] lg:tw-mt-[148px] tw-h-[6rem] lg:tw-h-[80px] {% else %} tw-mt-[6.8rem] lg:tw-mt-[107px] {% endif %}'>
|
|
319
|
+
{% if section.settings.has_description == true %}
|
|
320
|
+
<div class='active-box-content tw-hidden slide-content lg:tw-w-[814px] lg:tw-mx-auto tw-mt-[8px]'>
|
|
321
|
+
{% render 'zz-content-text',
|
|
322
|
+
text: banner.settings.slide_content,
|
|
323
|
+
mb_text: banner.settings.slide_content_mb,
|
|
324
|
+
text_color: banner.settings.content_color,
|
|
325
|
+
pc_font_size: 16,
|
|
326
|
+
mobile_font_size: 12,
|
|
327
|
+
pc_text_align: 'center',
|
|
328
|
+
mobile_text_align: 'center'
|
|
329
|
+
%}
|
|
330
|
+
</div>
|
|
331
|
+
{% else %}
|
|
332
|
+
|
|
333
|
+
{% endif %}
|
|
302
334
|
</div>
|
|
303
335
|
</div>
|
|
304
336
|
{% endfor %}
|
|
@@ -320,26 +352,33 @@
|
|
|
320
352
|
{% endfor %}
|
|
321
353
|
];
|
|
322
354
|
|
|
323
|
-
|
|
324
|
-
|
|
355
|
+
const slideTracks = [
|
|
356
|
+
{% for block in swiper_blocks %}
|
|
357
|
+
"{{ block.settings.block_module_id | default: 'unset' }}",
|
|
358
|
+
{% endfor %}
|
|
359
|
+
];
|
|
360
|
+
|
|
361
|
+
// 移动端根据屏幕宽度计算间距, 375px 计算 8px 间距
|
|
362
|
+
const mbSpaceBetween = window.innerWidth / 375 * 12;
|
|
325
363
|
|
|
326
364
|
const swiperClassName = '.zz-banner-tab-swiper-{{ section.id }}';
|
|
327
365
|
const tabSwiper = new Swiper(swiperClassName, {
|
|
328
|
-
loop:
|
|
366
|
+
loop: false,
|
|
329
367
|
slidesPerView: 'auto',
|
|
330
|
-
centeredSlides: true,
|
|
368
|
+
centeredSlides: isDesktop ? true : false,
|
|
331
369
|
spaceBetween: isDesktop ? 24 : mbSpaceBetween,
|
|
332
|
-
|
|
370
|
+
slidesOffsetAfter: 20,
|
|
333
371
|
pagination: {
|
|
334
372
|
el: '.swiper-pagination',
|
|
335
373
|
clickable: true,
|
|
336
374
|
renderBullet: function (index, className) {
|
|
337
375
|
const title = slideTitles[index % slideTitles.length];
|
|
376
|
+
const track = slideTracks[index % slideTracks.length];
|
|
338
377
|
return `<span class="${className}"
|
|
339
|
-
|
|
378
|
+
data-track-zz-element="${track}" >${title}</span>`;
|
|
340
379
|
}
|
|
341
380
|
},
|
|
342
|
-
effect: 'fade',
|
|
381
|
+
effect: isDesktop ? 'fade' : 'slide',
|
|
343
382
|
on: {
|
|
344
383
|
|
|
345
384
|
slideChangeTransitionEnd: function () {
|
|
@@ -501,7 +540,7 @@
|
|
|
501
540
|
"name": "Video Img Swiper Tab",
|
|
502
541
|
"settings": [
|
|
503
542
|
{
|
|
504
|
-
"type": "
|
|
543
|
+
"type": "color_background",
|
|
505
544
|
"id": "bg_color",
|
|
506
545
|
"default": "#ffffff",
|
|
507
546
|
"label": "背景色"
|
|
@@ -580,6 +619,25 @@
|
|
|
580
619
|
"label": "移动下内边距 (Padding Bottom)",
|
|
581
620
|
"default": 40
|
|
582
621
|
},
|
|
622
|
+
{
|
|
623
|
+
"type": "text",
|
|
624
|
+
"id": "pc_media_box_ratio",
|
|
625
|
+
"label": "PC media-box 宽高比",
|
|
626
|
+
"info": "支持格式：16/9"
|
|
627
|
+
},
|
|
628
|
+
{
|
|
629
|
+
"type": "text",
|
|
630
|
+
"id": "mobile_media_box_ratio",
|
|
631
|
+
"label": "移动端 media-box 宽高比",
|
|
632
|
+
"info": "支持格式：335/252"
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"type": "checkbox",
|
|
636
|
+
"id": "has_description",
|
|
637
|
+
"label": "是否有描述",
|
|
638
|
+
"default": true,
|
|
639
|
+
"info": "底部是否有描述"
|
|
640
|
+
},
|
|
583
641
|
{
|
|
584
642
|
"type": "checkbox",
|
|
585
643
|
"id": "loop_swiper",
|
|
@@ -762,7 +820,7 @@
|
|
|
762
820
|
"pc_padding_top": 80,
|
|
763
821
|
"pc_padding_bottom": 80,
|
|
764
822
|
"mobile_padding_top": 40,
|
|
765
|
-
"mobile_padding_bottom": 40
|
|
823
|
+
"mobile_padding_bottom": 40,
|
|
766
824
|
},
|
|
767
825
|
"blocks": [
|
|
768
826
|
{
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
mobile_font_size: 移动端字体大小
|
|
10
10
|
pc_text_align: pc端对齐方式
|
|
11
11
|
font_weight: 字体粗细
|
|
12
|
+
italic: 是否斜体
|
|
12
13
|
mobile_text_align: 移动端对齐方式
|
|
13
14
|
separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
|
|
14
15
|
{% endcomment %}
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
{% endif %}
|
|
20
21
|
|
|
21
22
|
{% if text != blank %}
|
|
22
|
-
<div class="content-text content-text-pc max-lg:tw-hidden tw-text-[#170B01B2] tw-text-[16px] tw-leading-[1.5] tw-text-left {{ class_name }}
|
|
23
|
+
<div class="content-text content-text-pc max-lg:tw-hidden tw-text-[#170B01B2] tw-text-[16px] tw-leading-[1.5] tw-text-left {% if italic %}tw-italic{% endif %} {{ class_name }}"
|
|
23
24
|
style="color: {{ text_color }};font-weight: {{ font_weight }};
|
|
24
25
|
font-size: {{ pc_font_size }}px;
|
|
25
26
|
text-align: {{ pc_text_align }};
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
{% endif %}
|
|
36
37
|
{% if mobile_text != blank %}
|
|
37
38
|
<div
|
|
38
|
-
class="content-text content-text-mobile lg:tw-hidden tw-text-[#170B01B2] tw-text-[1.4rem] tw-leading-[1.5] tw-text-left {{ class_name }}"
|
|
39
|
+
class="content-text content-text-mobile lg:tw-hidden tw-text-[#170B01B2] tw-text-[1.4rem] tw-leading-[1.5] tw-text-left {% if italic %}tw-italic{% endif %} {{ class_name }}"
|
|
39
40
|
style="color: {{ text_color }};font-weight: {{ font_weight }};
|
|
40
41
|
font-size: {{ mobile_font_size | divided_by: 10.0 }}rem;
|
|
41
42
|
text-align: {{ mobile_text_align }};
|