zz-shopify-components 0.32.1-beta.1 → 0.32.1-beta.3

package/blocks/zz-swiper-title-in-item.liquid

@@ -37,7 +37,7 @@
   {% render 'zz-h6',
       title: block.settings.heading,
       title_color: block.settings.title_color,
-      class_name: 'media-box-title tw-text-center max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px]'
+      class_name: 'media-box-title tw-text-left max-lg:tw-hidden tw-absolute tw-top-[20px] tw-left-[20px] tw-right-[20px]'
     %}
   {% if block.settings.video_pc != blank %}
     {% if block.settings.video_url_pc != blank %}
@@ -80,7 +80,7 @@
         pc_font_size: 16,
         mobile_font_size: 12,
         text_color: block.settings.content_color,
-        class_name: 'tw-text-left',
+        class_name: 'max-lg:tw-text-center lg:tw-text-left',
       %}
     </div>
   </div>

package/blocks/zz-video-swiper-right.liquid

@@ -129,11 +129,11 @@
 
 </style>
 
-<div class="left-title-desc max-lg:tw-px-[20px]  lg:tw-w-[450px] xl:tw-w-[509px] tw-flex-shrink-0 max-lg:tw-mb-[20px] fade-in-box">
+<div class="left-title-desc max-lg:tw-px-[20px]  lg:tw-w-[460px] xl:tw-w-[531px] tw-flex-shrink-0 max-lg:tw-mb-[20px] fade-in-box">
 
    {% render 'zz-h4',
             title: block.settings.heading,
-            title_mb: block.settings.heading,
+            title_mb: block.settings.heading_mobile,
             title_color: block.settings.text_color,
             class_name: 'content-title tw-text-left tw-mb-[20px] lg:tw-mb-[24px] '
           %}
@@ -356,6 +356,12 @@
       "label": "标题 (Heading)",
       "default": "<p>这里是文字内容</p>"
     },
+    {
+      "type": "richtext",
+      "id": "heading_mobile",
+      "label": "标题 移动 (Heading)",
+      "default": "<p>这里是文字内容</p>"
+    },
     {
       "type": "richtext",
       "id": "desc",

package/package.json

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

package/sections/zz-video-collapse-swiper.liquid

@@ -62,7 +62,6 @@
         { "value": "black", "label": "黑色" },
       ],
       "default": "white",
-      "visible_if": "{{ section.settings.mobile_style == 'left_right' }}"
     },
     {
       "type": "image_picker",
@@ -349,7 +348,7 @@
               {% assign collapsible_title_color = section.settings.collapsible_title_color
                 | color_modify: 'alpha', 0.5
               %}
-              <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[30px]  tw-text-[20px]  tw-font-[700]  tw-leading-[1]" style="color: {{ collapsible_title_color }};">
+              <div class="tw-daisy-collapse-title tw-py-[20px] tw-pl-0 tw-pr-[30px]  tw-text-[20px]  tw-font-[700]  tw-leading-[1.3]" style="color: {{ collapsible_title_color }};">
                 {{ collapsible_row.settings.heading }}
               </div>
               <div class="tw-p-0  tw-daisy-collapse-content">
@@ -552,14 +551,23 @@
             
       {% else %}
         #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets {
+          display: flex;
+          align-items: center;
           bottom: 170px;
           left: 50%;
           transform: translateX(-50%);
           width: calc(100% - 40px);
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
-            background: white;
+            
             border-radius: 10px;
+            {% if section.settings.collapse_button_color == 'black' %}
+              background: white;
+            {% else %}
+              background: #282828;
+            {% endif %}
+
+            
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}
@@ -589,12 +597,21 @@
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
             box-sizing: border-box;
-            line-height: normal;
             border-radius: 10px;
-            vertical-align: top; /* 关键 */
-            color: #00000080;
-            height: 66px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0px 20px 0px 0px;
+            height: 58px;
             padding: 16px;
+            {% if section.settings.collapse_button_color == 'black' %}
+              color: #00000080;
+              background: none;
+            {% else %}
+              color: #FFFFFF80;
+              background: none;
+
+            {% endif %}
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}
@@ -602,13 +619,12 @@
              color: #FFFFFFB2;
             white-space: nowrap;
             height: auto;
+            background: none;
+            margin: 0;
             
           {% endif %}
-          
-          margin: 0;
           width: fit-content;
           font-size: 14px;
-          background: none;
           border-top: 0;
           opacity: 1;
          
@@ -619,8 +635,15 @@
         #shopify-section-{{ section.id }} .zz-collapse-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
           {% if section.settings.mobile_style == 'tab' %}
             {% comment %} tab栏展示两行文字 {% endcomment %}
-            background:#000000;
-            color: #ffffff;
+            
+
+            {% if section.settings.collapse_button_color == 'black' %}
+              background:#000000;
+              color: #ffffff;
+            {% else %}
+              background: #0000004D;
+              color: #ffffff;
+            {% endif %}
 
           {% else %}
             {% comment %} tab栏展示一行文字 {% endcomment %}

package/sections/zz-video-progress-swiper.liquid

@@ -26,6 +26,7 @@
       display: flex;
       gap: 16px;
       justify-content: space-between;
+      align-items: flex-end;
       top: 0px;
       left: 0px;
       right:0px;
@@ -76,18 +77,11 @@
   }
   #shopify-section-{{ section.id }} .swiper-pagination-bullet-active .bullet-desc{
     color: #FFFFFF;
+    display: block !important;
   }
 
  
-  @media screen and (min-width: 1024px) {
-    #shopify-section-{{ section.id }}  {
-      padding-top: {{ section.settings.pc_padding_top }}px;
-      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
-    }
-    #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-      padding-bottom: 30px;
-    }
-  }
+
    @media screen and (max-width: 1024px) {
     #shopify-section-{{ section.id }} { 
       padding-left: 20px;
@@ -127,6 +121,9 @@
      #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
        display: none;             /* Chrome, Safari */
      }
+    #shopify-section-{{ section.id }} .bullet-title + .bullet-desc {
+      margin-bottom: 10px;
+    }
    }
    @media screen and (min-width: 1024px) {
      #shopify-section-{{ section.id }} .content-title {
@@ -138,6 +135,18 @@
      #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide {
        width: 90vw;
      }
+
+     #shopify-section-{{ section.id }}  {
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+    }
+    #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      padding-bottom: 30px;
+    }
+    #shopify-section-{{ section.id }} .bullet-title + .bullet-desc {
+      margin-bottom: 16px;
+    }
+
      #shopify-section-{{ section.id }} .zz-video-progress-swiper .swiper-slide .media-box {
        position: relative;
        aspect-ratio: 16 / 9;
@@ -284,7 +293,7 @@
             const title = slideTitles[index % slideTitles.length];
             const desc = slideDescs[index % slideDescs.length];
                return `<div class="${className}" {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}>
-                        <div class="bullet-title tw-text-left tw-text-[14px] lg:tw-text-[24px] tw-mb-[10px] lg:tw-mb-[16px] tw-flex tw-items-center tw-gap-[10px]">
+                        <div class="bullet-title tw-text-left tw-text-[14px] lg:tw-text-[24px] tw-flex tw-items-center tw-gap-[10px]">
                           <span class="bullet-active-icon tw-hidden tw-w-[17px] tw-h-[17px] lg:tw-w-[32px] lg:tw-h-[32px]">
                             <img class="tw-w-full tw-h-full tw-object-contain" src="{{ section.settings.active_icon | image_url: width: 40 }}" alt="Specs Header" width="40" height="auto">
                             
@@ -297,7 +306,7 @@
                           </span>
                           ${title}
                         </div>
-                        <div class="bullet-desc tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5]">${desc}</div>
+                        <div class="bullet-desc tw-hidden tw-text-left tw-text-[10px] lg:tw-text-[16px] tw-leading-[1.5]">${desc}</div>
                         <span class="progress-line"></span>
                       </div>`;
         }