zz-shopify-components 0.29.0 → 0.29.1-beta.1

package/blocks/zz-normal-swiper.liquid

@@ -210,13 +210,16 @@
     let instance = null;
     let initialized = false;
 
+    const isDesktop = window.innerWidth > 1023;
+    const spaceBetween = isDesktop ? {{ block.settings.space_between | default: 8 }} : {{ block.settings.space_between_mb | default: 8 }};
+
     const options = {
       loop: {{ block.settings.loop | json }},
       speed: {{ block.settings.speed | default: 500 }},
       autoHeight: {{ block.settings.auto_height | json }},
       centeredSlides: {{ block.settings.centered_slides | json }},
       watchOverflow: true,
-      spaceBetween: {{ block.settings.space_between | default: 8 }},
+      spaceBetween: spaceBetween,
       {% if block.settings.pagination_type != 'none' %}
       pagination: {
         el: '#shopify-block-{{block.id}} .swiper-pagination',
@@ -307,6 +310,15 @@
       "max": 80,
       "step": 2
     },
+    {
+      "type": "range",
+      "id": "space_between_mb",
+      "label": "卡片间距(px)(mobile)",
+      "default": 8,
+      "min": 0,
+      "max": 80,
+      "step": 2
+    },
     {
       "type": "checkbox",
       "id": "centered_slides",
@@ -471,6 +483,7 @@
         "loop": true,
         "speed": 500,
         "space_between": 8,
+        "space_between_mb": 8,
         "centered_slides": false,
         "auto_height": false,
         "autoplay": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.29.0",
+  "version": "0.29.1-beta.1",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-voc-section.liquid

@@ -132,7 +132,7 @@
 {% endschema %}
 
 <div class='user-spokes-section lg:tw-w-[85.3906vw] xl:tw-w-[1093px] lg:tw-mx-auto'>
-  <div class='max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[8px] lg:tw-gap-[20px] slow-reveal'>
+  <div class='voc-item-list max-lg:tw-px-[20px] tw-flex  lg:tw-justify-between max-lg:tw-overflow-x-auto tw-gap-[8px] lg:tw-gap-[20px] slow-reveal'>
     {% for block in section.blocks %}
       <div class='comment-box lg:tw-w-[351px] tw-flex tw-flex-col'>
         <div class='comment-item lg:tw-w-[351px] lg:tw-h-[468px]'>
@@ -150,7 +150,7 @@
             user_account: block.settings.account,
             content: block.settings.content,
             name_class: 'tw-text-black max-lg:tw-text-[10px] lg:tw-text-[14px]',
-            content_class: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-black/70 lg:tw-text-black/60 max-lg:tw-leading-[1.2] tw-line-clamp-6 lg:tw-line-clamp-4'
+            content_class: 'voc-text-content max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-black/70 lg:tw-text-black/60 max-lg:tw-leading-[1.2] tw-line-clamp-8 lg:tw-line-clamp-6'
           %}
         </div>
       </div>
@@ -171,6 +171,18 @@
   #shopify-section-{{section.id}} .zz-spoke-block-media img{
     height: 100%;
   }
+
+   .voc-item-list {
+    -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
+    scrollbar-width: none;     /* Firefox */
+    -ms-overflow-style: none;  /* IE 和 Edge */
+  }
+  .voc-item-list::-webkit-scrollbar {
+    width: 0px; /* 隐藏滚动条 */
+  }
+  .voc-item-list::-webkit-scrollbar {
+    display: none;
+  }
   @media screen and (max-width: 1023px) {
     #shopify-section-{{section.id}} .comment-box .comment-item {
       width: 168px;
@@ -179,14 +191,14 @@
 
        #shopify-section-{{section.id}} .comment-box {
         width: 168px;
-        height: 357px;
+        height: 380px;
       }
       #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
         height: 221px;
       }
       #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
         box-sizing: border-box;
-        height: 136px;
+        height: 160px;
       }
  
     
@@ -198,13 +210,13 @@
       padding-bottom: {{ section.settings.padding_bottom }}px;
     }
     #shopify-section-{{section.id}} .comment-box {
-      height: 643px;
+      height: 688px;
     }
     #shopify-section-{{section.id}} .comment-box .zz-spoke-block-media {
       height: 468px;
     }
     #shopify-section-{{section.id}} .comment-box .zz-spoke-block-content {
-      height: 175px;
+      height: 210px;
     }
   }
   @media (min-width: 1024px) and (max-width: 1280px) {

package/snippets/zz-spoke.liquid

@@ -95,7 +95,7 @@
       {% 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='zz-spoke-block-content tw-relative tw-p-[10px] 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',