zz-shopify-components 0.36.1-beta.4 → 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 +1 -1
- 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
|
@@ -981,7 +981,7 @@
|
|
|
981
981
|
</div>
|
|
982
982
|
<div
|
|
983
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
|
-
|
|
984
|
+
style='color: {{ banner.settings.color | default: 'white' }};'
|
|
985
985
|
>
|
|
986
986
|
{{ banner.settings.title_mb }}
|
|
987
987
|
</div>
|
|
@@ -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 }};
|