zz-shopify-components 0.0.1-beta.1

package/snippets/zz-button.liquid

@@ -0,0 +1,70 @@
+{% comment %} 
+按钮配置选项：
+type：按钮类型
+  - primary：主要按钮
+  - default：默认按钮
+  - round：圆角按钮
+  - link：链接按钮
+
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- backdrop_filter：毛玻璃效果 true/false
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+{% assign btn_type = type | default: 'primary' %}
+{% assign btn_color = color | default: 'black' %}
+{% assign btn_size = size | default: 'medium' %}
+{% assign icon_size = icon_size | default: 15 %}
+
+<style>
+  .zz-btn-icon {
+    display: flex;
+  }
+</style>
+  
+{% if href %}
+  {% if btn_type == 'link' %}
+    <a href="{{ href | default: '#' }}" class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {{ class_name }}">
+      <span class="zz-btn-text">{{ text }}</span>
+      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
+        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
+      </span>{% endif %}
+    </a>
+  {% else %}
+    <a
+      href="{{ href | default: '#' }}"
+      class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {{ class_name }}"
+      {% if backdrop_filter %}
+        style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+      {% endif %}
+    >
+      {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+      <span class="zz-btn-text">{{ text }}</span>
+    </a>
+  {% endif %}
+
+{% else %}
+
+<button
+  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {{ class_name }}"
+  {% if backdrop_filter %}
+    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+  {% endif %}
+>
+  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+  <span class="zz-btn-text">{{ text }}</span>
+</button>
+{% endif %}

package/snippets/zz-content-text.liquid

@@ -0,0 +1,56 @@
+{% comment %}
+  text: 内容
+  mb_text: 移动端内容
+  color: 标题颜色
+  highlight_color: 高亮颜色
+  link_color: 链接颜色
+  class_name: 增加类名
+  pc_font_size: pc端字体大小
+  mobile_font_size: 移动端字体大小
+  pc_text_align: pc端对齐方式
+  font_weight: 字体粗细
+  mobile_text_align: 移动端对齐方式
+{% endcomment %}
+
+{% if text != blank %}
+  <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 }} " 
+    style="color: {{ text_color }};font-weight: {{ font_weight }};
+    font-size: {{ pc_font_size }}px;
+    text-align: {{ pc_text_align }}; 
+    {% if pc_font_line_height %}line-height: {{ pc_font_line_height }};{% endif %}"
+>
+    {{ text }}
+</div>
+{% endif %}
+
+{% if mb_text != blank %}
+<div 
+    class="content-text content-text-mobile lg:tw-hidden tw-text-[#170B01B2] tw-text-[14px] tw-leading-[1.5] tw-text-left {{ class_name }}" 
+    style="color: {{ text_color }};font-weight: {{ font_weight }};
+    font-size: {{ mobile_font_size }}px;
+    text-align: {{ mobile_text_align }}; 
+    {% if mobile_font_line_height %}line-height: {{ mobile_font_line_height }};{% endif %}"
+>
+    {{ mb_text | default: text }}
+</div>
+{% endif %}
+
+
+
+
+<style>
+
+  {% if highlight_color %}
+  #shopify-section-{{ section.id }} .content-text strong {
+    color: {{ highlight_color }};
+    font-weight: inherit;
+  }
+  {% endif %}
+  {% if link_color %}
+  #shopify-section-{{ section.id }} .content-text a {
+    color: {{ link_color }};
+    text-decoration: underline;
+  }
+  {% endif %}
+
+</style>

package/snippets/zz-h2.liquid

@@ -0,0 +1,31 @@
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+  italic: 斜体
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif  title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h2
+  class='{{ class_name }} zz-title-hx title-h2 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[60px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h2>
+<h2
+  class='{{ class_name }} zz-title-hx title-h2 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[28px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h2>
+

package/snippets/zz-h3.liquid

@@ -0,0 +1,31 @@
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+  italic: 斜体
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h3
+  class='{{ class_name }} zz-title-hx title-h3 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[48px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h3>
+<h3
+  class='{{ class_name }} zz-title-hx title-h3 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h3>
+

package/snippets/zz-h4.liquid

@@ -0,0 +1,30 @@
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h4
+  class='{{ class_name }} zz-title-hx title-h4 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[40px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h4>
+<h4
+  class='{{ class_name }} zz-title-hx title-h4 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[20px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h4>
+

package/snippets/zz-h5.liquid

@@ -0,0 +1,39 @@
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+{% if title_mb == blank %}
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 tw-m-0 tw-w-[full] tw-text-[16px] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h5>
+{%  else %}
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h5>
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[16px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+  >
+    {{ title_mb }}
+  </h5>
+{% endif %}
+

package/snippets/zz-h6.liquid

@@ -0,0 +1,39 @@
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+{% if title_mb == blank %}
+  <h6
+    class='{{ class_name }} zz-title-hx title-h6 tw-m-0 tw-w-[full] tw-text-[14px] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h6>
+{%  else %}
+<h6
+    class='{{ class_name }} zz-title-hx title-h6 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h6>
+  <h6
+    class='{{ class_name }} zz-title-hx title-h6 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[14px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+  >
+    {{ title_mb }}
+  </h6>
+{% endif %}
+

package/snippets/zz-icon.liquid

@@ -0,0 +1,74 @@
+{% comment %}
+  按钮配置选项：
+  type：按钮类型
+    - primary：主要按钮
+    - default：默认按钮
+    - round：圆角按钮
+    - link：链接按钮
+
+  color：按钮颜色
+    - black：黑色
+    - white：白色
+    - orange：橙色
+
+  size：按钮尺寸
+    - large：大号
+    - medium：中号（默认）
+    - small：小号
+
+  其他参数：
+  - href：链接地址
+  - backdrop_filter：毛玻璃效果 true/false
+  - icon：图标名称
+  - text：按钮文字
+  - class_name：自定义类名
+{% endcomment %}
+
+{% assign icon_name = icon_name | default: 'download' %}
+{% assign icon_color = icon_color | default: 'currentColor' %}
+{% assign icon_size = icon_size | default: '15' %}
+
+{% if icon_name == 'download' %}
+  <svg
+    width='{{ icon_size }}px'
+    height='{{ icon_size }}px'
+    viewBox='0 0 15 15'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d="M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+  </svg>
+{% elsif icon_name == 'arrow-right' %}
+  <svg
+    width='{{ icon_size }}px'
+    height='{{ icon_size }}px'
+    viewBox='0 0 15 15'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+  </svg>
+{% elsif icon_name == 'mail' %}
+  <svg
+    width='{{ icon_size }}px'
+    height='{{ icon_size }}px'
+    viewBox='0 0 15 15'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+  </svg>
+{% elsif icon_name == "copy" %}
+  <svg
+    width='{{ icon_size }}px'
+    height='{{ icon_size }}px'
+    viewBox='0 0 25 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d="M10 8.76172V7.26172C10 6.98558 10.2239 6.76172 10.5 6.76172H17.5C17.7761 6.76172 18 6.98558 18 7.26172V16.7617C18 17.0379 17.7761 17.2617 17.5 17.2617H15.7778" stroke="currentColor" stroke-linecap="round"/>
+    <rect x="8" y="8.76172" width="8" height="10" rx="0.5" stroke="currentColor"/>
+    <path d="M10 11.7617H13" stroke="currentColor" stroke-linecap="round"/>
+    <path d="M10 14.7617H12" stroke="currentColor" stroke-linecap="round"/>
+  </svg>
+{% endif %}

package/snippets/zz-img.liquid

@@ -0,0 +1,44 @@
+{% comment %}
+  pc_image: pc 端图片
+  mb_image: 移动端图片
+  image_alt: 图片描述
+  class_name: 增加类名
+  close_lazy: 是否关闭懒加载 true 关闭 false 开启
+  pc_width: pc 端宽度, 做图片尺寸优化
+  mb_width: 移动端宽度, 做图片尺寸优化
+{% endcomment %}
+{%- assign pc_width = pc_width | default: 1800 -%}
+{%- assign mb_width = mb_width | default: 800 -%}
+
+{%- assign pc_classes = class_name | append: ' max-lg:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
+{%- assign mb_classes = class_name | append: ' lg:tw-hidden tw-w-full tw-h-auto tw-object-cover' -%}
+
+{%- if close_lazy == true -%}
+  {%- assign lazy_load = 'eager' -%}
+{%- else -%}
+  {%- assign lazy_load = 'lazy' -%}
+{%- endif -%}
+
+{%- if pc_image -%}
+{{
+  pc_image
+  | image_url: width: pc_width
+  | image_tag:
+    alt: image_alt,
+    class: pc_classes,
+    widths: '800, 1000, 1200, 1500, 1800 2000',
+    loading: lazy_load
+}}
+{%- endif -%}
+{%- if mb_image -%}
+{{
+  mb_image
+  | image_url: width: mb_width
+  | image_tag:
+    alt: image_alt,
+    class: mb_classes,
+    widths: '400, 600, 800',
+    loading: lazy_load
+}}
+{%- endif -%}
+

package/snippets/zz-prev-next-btn.liquid

@@ -0,0 +1,62 @@
+{% comment %}
+  type: 类型 prev | next
+  color_type: 颜色类型 dark | light
+  class_name: 增加类名
+{% endcomment %}
+{% if type == 'prev' %}
+  {% if color_type == 'light' %}
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_15512_12512_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="12" width="48" height="48" rx="24" fill="white" fill-opacity="0.3"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19 24L26.0711 16.9289L26.0608 19.1149L21.1757 24L26.0711 28.8718L26.0711 31.0711L19 24Z" fill="white"/>
+      <defs>
+      <clipPath id="bgblur_0_15512_12512_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
+      </clipPath></defs>
+      </svg>        
+  {% else %}
+      <svg
+          width='36'
+          height='36'
+          viewBox='0 0 36 36'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <foreignObject x="-12" y="-12" width="60" height="60"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_12868_2987_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
+          <rect width="36" height="36" rx="18" fill="black" fill-opacity="0.03"/>
+          <rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="black" stroke-opacity="0.06"/>
+          </g>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M13 18L20.0711 10.9289L20.0608 13.1149L15.1757 18L20.0711 22.8718L20.0711 25.0711L13 18Z" fill="black"/>
+          <defs>
+          <clipPath id="bgblur_0_12868_2987_clip_path" transform="translate(12 12)"><rect width="36" height="36" rx="18"/>
+          </clipPath></defs>
+        </svg>
+          
+  {% endif %}
+{% else %}
+  {% if color_type == 'light' %}
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_15512_12506_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="12" width="48" height="48" rx="24" fill="white" fill-opacity="0.3"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M29 24L21.9289 16.9289L21.9392 19.1149L26.8243 24L21.9289 28.8718L21.9289 31.0711L29 24Z" fill="white"/>
+      <defs>
+      <clipPath id="bgblur_0_15512_12506_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
+      </clipPath></defs>
+      </svg>
+      
+  {% else %}
+      <svg
+          width='36'
+          height='36'
+          viewBox='0 0 36 36'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <foreignObject x="-11.9957" y="-12" width="60" height="60"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_12868_2998_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
+          <rect x="0.0043335" width="36" height="36" rx="18" fill="black" fill-opacity="0.03"/>
+          <rect x="0.504333" y="0.5" width="35" height="35" rx="17.5" stroke="black" stroke-opacity="0.06"/>
+          </g>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M23.0043 18L15.9333 10.9289L15.9435 13.1149L20.8286 18L15.9333 22.8718L15.9333 25.0711L23.0043 18Z" fill="black"/>
+          <defs>
+          <clipPath id="bgblur_0_12868_2998_clip_path" transform="translate(11.9957 12)"><rect x="0.0043335" width="36" height="36" rx="18"/>
+          </clipPath></defs>
+        </svg>
+  {% endif %}
+{% endif %}

package/snippets/zz-spoke.liquid

@@ -0,0 +1,142 @@
+{% comment %}
+  背书
+  bg_color: 背景色
+  pc_image: pc 端图片/视频封面
+  mb_image: 移动端图片/视频封面
+  pc_video: pc 端视频
+  mb_video: 移动端视频
+  media_class: 图片/视频类名（设置高）
+  pc_media_pos: pc 端视频位置 'top'|'bottom'，默认 top
+  mb_media_pos: 移动端视频位置 'top'|'bottom'，默认 top
+  class_name: 自定义类名（设置宽高）
+
+  user_name: 用户名
+  name_class: 名字类名（设置文字大小和颜色）
+  user_account: 账号
+  account_class: 账号类名
+  user_avatar: 用户头像
+  content: 内容
+  content_class: 内容类名（设置文字大小和颜色）
+
+  logo: 图标
+  logo_class: 图标类名
+  logo_alt: 图标 alt
+{% endcomment %}
+
+{% if pc_video != blank or pc_image != black %}
+  {% assign only_content = false %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
+  %}
+  {% if content != blank %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[152px] lg:tw-h-[397px]'
+    %}
+  {% else %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[221px] lg:tw-h-[468px]'
+    %}
+  {% endif %}
+{% else %}
+  {% assign only_content = true %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[175px] lg:tw-w-[351px] lg:tw-h-[265px]'
+  %}
+{% endif %}
+
+{% assign pc_media_pos = pc_media_pos | default: 'top' %}
+{% assign mb_media_pos = mb_media_pos | default: 'top' %}
+{% assign bg_color = bg_color | default: 'rgba(255,255,255,0.1)' %}
+{% assign name_class = name_class
+  | default: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-white'
+%}
+{% assign account_class = account_class | default: 'tw-opacity-50' %}
+{% assign content_class = content_class
+  | default: 'max-lg:tw-text-[9px] lg:tw-text-[14px] tw-tracking-[0.01] tw-text-white'
+%}
+{% assign logo_class = logo_class | default: 'tw-w-[39px] lg:tw-w-[45px]' %}
+
+<div class='zz-spoke-block tw-relative tw-flex {% if pc_media_pos == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if mb_media_pos == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between {{ class_name }}'>
+  {% if only_content == false %}
+    {% comment %} 视频/图片 {% endcomment %}
+    <div
+      class='zz-spoke-block-media tw-w-full {{media_class}}'
+    >
+      {% if pc_video != blank %}
+        {% render 'zz-video',
+          pc_video: pc_video,
+          pc_poster: pc_image,
+          mb_video: mb_video,
+          mb_poster: mb_image,
+          pc_posterWidth: 700,
+          mb_poster_width: 480,
+          class: 'click-video-play-pause tw-w-full tw-h-full tw-cursor-pointer tw-object-cover'
+        %}
+      {% else %}
+        {% render 'zz-img',
+          pc_image: pc_image,
+          mb_image: mb_image,
+          image_alt: image_alt,
+          pc_width: 700,
+          mb_width: 480
+        %}
+      {% endif %}
+      {% comment %}
+        {% if user_intro != blank %}
+          <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
+            <div class='max-lg:tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.2] tw-font-bold tw-text-white'>
+              {{ user_name | upcase }}
+            </div>
+            <div class='tw-mt-[4px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-font-medium tw-text-white/70 lg:tw-text-white/60'>
+              {{ user_intro | upcase }}
+            </div>
+          </div>
+        {% endif %}
+      {% endcomment %}
+    </div>
+  {% endif %}
+  <div class='zz-spoke-block-content tw-relative tw-p-[10px] tw-pr-[0px] lg:tw-pl-[24px] lg:tw-pr-[30px] lg:tw-py-[20px] tw-w-full tw-h-fit tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden {% if only_content %}tw-pb-[32px] lg:tw-pb-[40px] {% else %}tw-pb-[10px] lg:tw-pb-[20px]{% endif %}'>
+    <div class='tw-flex tw-items-center'>
+      <div class='tw-w-[20px] tw-min-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-min-w-[36px] lg:tw-h-[36px]'>
+        {% render 'zz-img',
+          pc_image: user_avatar,
+          mb_image: user_avatar,
+          image_alt: user_name,
+          pc_width: 72,
+          mb_width: 60
+        %}
+      </div>
+      <div class='tw-ml-[10px] tw-leading-[1.5] tw-font-bold {{ name_class }}'>
+        {{ user_name }}
+        <span class='tw-block tw-font-medium tw-leading-[1.5] {{ account_class }}'>
+          {{- user_account -}}
+        </span>
+      </div>
+    </div>
+    {% if content != blank %}
+      <div class='tw-mt-[8px] lg:tw-mt-[14px] tw-leading-[1.5] {{ content_class }}'>
+        {{ content }}
+      </div>
+    {% endif %}
+  </div>
+  {% if logo != blank %}
+    <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
+      {% render 'zz-img',
+        pc_image: logo,
+        mb_image: logo,
+        image_alt: logo_alt,
+        pc_width: 120,
+        mb_width: 120
+      %}
+    </div>
+  {% endif %}
+</div>
+
+<style>
+  .zz-spoke-block {
+    background-color: {{ bg_color }};
+  }
+  .zz-spoke-block p {
+    margin: 0;
+  }
+</style>

package/snippets/zz-tag.liquid

@@ -0,0 +1,22 @@
+{% comment %}
+  tag: 标签
+  tag_bg_color_gradient: 标签背景颜色渐变
+  tag_bg_color: 标签背景颜色
+  tag_color: 标签颜色
+  class_name: 增加类名
+{% endcomment %}
+  
+{%- capture tag_bg_color -%}
+  {%- if tag_bg_color_gradient != blank %} 
+    {{ tag_bg_color_gradient }}
+  {%- else -%} 
+    {{ tag_bg_color }}
+  {%- endif %}
+{%- endcapture %}
+{% assign tag_color = tag_color %}
+<div
+  class='{{ class_name }} zz-tag tw-z-[1] tw-w-fit tw-relative tw-italic tw-font-bold max-lg:tw-h-[24px] tw-text-[16px] tw-leading-[24px] tw-px-[16px] lg:tw-h-[32px] lg:tw-text-[20px] lg:tw-px-[28px] lg:tw-leading-[32px]'
+  style='color: {{ tag_color }}; --zz-tag-bg-color: {{ tag_bg_color }};'
+>
+  {{ tag }}
+</div>