zz-shopify-components 0.0.27 → 0.0.28-beta.10

package/blocks/zz-world-video.liquid

@@ -1,639 +1,639 @@
-{% schema %}
-{
-  "name": "World Video",
-  "class": "world-video-list",
-  "settings": [
-    {
-      "type": "select",
-      "id": "shop_select",
-      "label": "站点选择",
-      "options": [
-        { "value": "OFFICIAL", "label": "官网 central" },
-        { "value": "US", "label": "US" },
-        { "value": "EU", "label": "EU" },
-        { "value": "UK", "label": "UK" },
-        { "value": "GLOBAL", "label": "GLOBAL" },
-        { "value": "JP", "label": "JP" },
-        { "value": "TW", "label": "TW" }
-      ],
-      "default": "OFFICIAL"
-    },
-    {
-      "type": "select",
-      "id": "request_type",
-      "label": "请求类型",
-      "options": [
-        { "value": "prod", "label": "正式" },
-        { "value": "test", "label": "测试" }
-      ],
-      "default": "test"
-    },
-    {
-      "type": "image_picker",
-      "id": "img_141_icon",
-      "label": "141 产品icon"
-    },
-    {
-      "type": "image_picker",
-      "id": "img_130_icon",
-      "label": "130 产品icon"
-    },
-    {
-      "type": "textarea",
-      "id": "links_130",
-      "label": "Sites Link 130",
-      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
-    },
-    {
-      "type": "textarea",
-      "id": "links_141",
-      "label": "Sites Link 141",
-      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
-    }
-  ],
-  "presets": [
-    {
-      "name": "World Video"
-    }
-  ]
-}
-{% endschema %}
-
-<world-video-list
-  data-x1pro-img='{{block.settings.img_141_icon | image_url}}'
-  data-x1-img='{{block.settings.img_130_icon | image_url}}'
-  data-x1pro-links='{{block.settings.links_141 | url_encode }}'
-  data-x1-links='{{block.settings.links_130 | url_encode }}'
-  data-request-type='{{ block.settings.request_type }}'
-  data-shop-select='{{ block.settings.shop_select }}'
->
-  <div class='tw-flex tw-justify-center tw-items-center tw-my-[30px] lg:tw-my-[80px]'>
-    <div class='world-video-switch tw-flex tw-w-[336px] lg:tw-w-[360px] tw-h-[42px] tw-bg-[#F3F3F3] tw-rounded-[21px] tw-overflow-hidden '>
-      <button
-        id='switch-pro'
-        class='tw-flex-1 tw-border-none tw-h-full tw-text-[13px] lg:tw-text-[16px] tw-bg-black tw-text-white tw-rounded-[21px] tw-transition-colors'
-        style='font-size: 16px;'
-      >
-        X1 PRO&PROMAX
-      </button>
-      <button
-        id='switch-x1'
-        class='tw-flex-1  tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
-        style='font-size: 16px;'
-      >
-        X1
-      </button>
-    </div>
-  </div>
-  <div class='tw-relative tw-w-full'>
-    <div
-      id='video-page-content'
-      class='video-page-list tw-flex tw-overflow-x-scroll tw-w-full lg:tw-pr-[120px] tw-pr-[20px]'
-    >
-      <div
-        class='tw-w-full tw-h-[100px] tw-flex tw-justify-center tw-items-center'
-      >
-        <span
-          class='tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-lg'
-        ></span>
-      </div>
-    </div>
- 
-    <div class='video-page-left-arrow tw-cursor-pointer tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-hidden tw-absolute tw-left-[48px] tw-top-1/2 tw-translate-y-[-50%]'>
-      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23806_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23806_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
-        </clipPath></defs>
-        </svg>
-        
-    </div>
-    <div class='video-page-right-arrow tw-cursor-pointer tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-hidden tw-absolute tw-right-[48px] tw-top-1/2 tw-translate-y-[-50%]'>
-      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23800_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23800_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
-        </clipPath></defs>
-        </svg>
-        
-    </div>
- 
-  </div>
-
-  <world-video-dialog
-    data-x1pro-img='{{block.settings.img_141_icon | image_url}}'
-    data-x1-img='{{block.settings.img_130_icon | image_url}}'
-    data-x1pro-links='{{block.settings.links_141 | url_encode }}'
-    data-x1-links='{{block.settings.links_130 | url_encode }}'
-    data-request-type='{{ block.settings.request_type }}'
-  >
-    <!-- 蒙层 -->
-    <div
-      id='world-video-modalMask'
-      class='world-video-modal-mask tw-bg-black/60 tw-fixed tw-inset-0 tw-z-[1000]'
-    >
-      <div class='close-modal-btn max-lg:tw-hidden tw-z-[10042] tw-w-[40px] tw-h-[40px] tw-cursor-pointer tw-absolute  tw-top-[20px] tw-right-[20px]'>
-        <img
-          class='tw-w-full tw-h-full'
-          width='40'
-          height='40'
-          src='https://cdn.shopify.com/s/files/1/0891/9796/9711/files/Group_1509997654.png?v=1746510524'
-          alt='close button'
-        >
-      </div>
-    </div>
-    <!-- 弹窗 -->
-    <div
-      id='world-video-modal'
-      class='world-video-modal max-lg:tw-w-screen max-lg:tw-h-screen max-lg:tw-bg-black tw-fixed tw-z-[1001] max-lg:tw-z-[10005]'
-    >
-      <div class='video-page-swiper tw-overflow-hidden max-lg:tw-w-screen max-lg:tw-h-screen  lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px]'>
-        {% comment %} 轮播图， 弹起时候获取,往swiper-wrapper中添加swiper-slide {% endcomment %}
-        <div
-          class='swiper-wrapper max-lg:tw-w-screen max-lg:tw-h-screen lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px]'
-          id='video-swiper-wrapper'
-        ></div>
-        <div class='swiper-button-prev !tw-w-[48px] !tw-h-[48px] tw-cursor-pointer max-lg:tw-hidden tw-absolute !tw-left-[-100px] !tw-top-1/2 !tw-translate-y-[-50%]'>
-          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23806_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23806_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
-            </clipPath></defs>
-            </svg>
-            
-        </div>
-        <div class='swiper-button-next !tw-w-[48px] !tw-h-[48px] tw-cursor-pointer max-lg:tw-hidden tw-absolute !tw-right-[-100px] tw-top-1/2 !tw-translate-y-[-50%]'>
-          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23800_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23800_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
-            </clipPath></defs>
-            </svg>
-            
-        </div>
-        
-
-        
-      </div>
-      
-    </div>
-    
-  </world-video-dialog>
-  {% comment %} 模板 {% endcomment %}
-  <script type='text/template' id='video-page-item'>
-    <div class="tw-flex tw-scroll-snap-align-start tw-ml-[8px] lg:tw-ml-[20px]">
-      <div class="tw-w-[80vw] lg:tw-w-[740px] {item-display-1}">
-        <div class="video-item tw-w-full tw-h-[36.8vw] lg:tw-h-[340px] tw-cursor-pointer  {item-display-1}" data-item="{video-item-1}">
-          <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-1}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-1" >
-            <source type='video/mp4'
-              data-src="{video-1}"
-            >
-          </video>
-        </div>
-        <div class="tw-flex tw-w-full tw-h-[46.4vw] lg:tw-h-[204px] tw-mt-[8px] lg:tw-mt-[20px] {item-display-2}">
-          <div class="video-item tw-flex-1 tw-relative tw-cursor-pointer tw-h-full {item-display-2}" data-item="{video-item-2}">
-            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
-            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-2}" alt="" data-video-index="video-2"/>
-          </div>
-          <div class="video-item tw-flex-1 tw-relative tw-cursor-pointer tw-ml-[8px] lg:tw-ml-[20px] tw-h-full {item-display-3}" data-item="{video-item-3}">
-            <img class="tw-h-full tw-w-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-3}" alt="" data-video-index="video-3"/>
-            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
-          </div>
-        </div>
-      </div>
-      <div class="video-item tw-w-[48vw] lg:tw-w-[360px] tw-h-full lg:tw-h-[564px]  tw-ml-[8px] lg:tw-ml-[20px] tw-cursor-pointer {item-display-4}" data-item="{video-item-4}">
-        <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-4}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-4" >
-          <source type='video/mp4'
-            data-src="{video-4}"
-          >
-        </video>
-      </div>
-
-    </div>
-    <div class="tw-flex tw-scroll-snap-align-start tw-ml-[8px] lg:tw-ml-[20px] {item-display-5}">
-      <div class="tw-w-[80vw] lg:tw-w-[740px] {item-display-5}">
-        <div class="tw-flex tw-w-full tw-h-[46.4vw] lg:tw-h-[204px] {item-display-5}">
-          <div class="video-item tw-relative tw-flex-1 tw-cursor-pointer {item-display-5}" data-item="{video-item-5}">
-            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-5}" alt="" data-video-index="video-5" />
-            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
-          </div>
-          <div class="video-item tw-relative tw-flex-1 tw-cursor-pointer tw-ml-[8px] lg:tw-ml-[20px] tw-h-full {item-display-6}" data-item="{video-item-6}">
-            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-6}" alt="" data-video-index="video-6"/>
-            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
-          </div>
-
-
-        </div>
-        <div class="video-item tw-w-full tw-h-[36.8vw] lg:tw-h-[340px] tw-cursor-pointer tw-mt-[8px] lg:tw-mt-[20px] {item-display-7}" data-item="{video-item-7}">
-          <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-7}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-7" >
-            <source type='video/mp4'
-              data-src="{video-7}"
-            >
-          </video>
-        </div>
-      </div>
-      <div class="video-item tw-w-[48vw] lg:tw-w-[360px] lg:tw-h-[564px] tw-h-full tw-ml-[8px] lg:tw-ml-[20px] {item-display-8}" data-item="{video-item-8}">
-        <video class="word-lazy-video world-lozad tw-w-full tw-cursor-pointer tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-8}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-8" >
-          <source type='video/mp4'
-            data-src="{video-8}"
-          >
-        </video>
-      </div>
-
-    </div>
-  </script>
-  <script type='text/template' id='video-swiper-slide'>
-    <div class='swiper-slide max-lg:tw-w-full max-lg:tw-h-full lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px] lg:tw-rounded-[20px] tw-relative'>
-      <world-video data-id='{id}' data-product-links="{product-links}">
-        <video
-          class='word-slide-lazy-video  video-player tw-bg-black tw-w-full tw-h-full lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px] lg:tw-rounded-[20px]'
-          playsinline
-          x5-video-player-type="h5"
-          webkit-playsinline
-          poster="{poster-url}"
-          loop
-        >
-          <source type='video/mp4'
-            src="{video-url}"
-          >
-        </video>
-        <div class="controls lg:tw-min-h-[40px] tw-absolute lg:tw-bottom-0 max-lg:tw-bottom-[56px] tw-left-0 tw-right-0 tw-w-full tw-flex tw-flex-col tw-gap-[12px] tw-pb-[6px] tw-pt-[6px] tw-z-50 lg:tw-px-[60px] max-lg:tw-px-[20px] tw-box-border">
-          <div class="controls-container lg:tw-hidden">
-            <div class="progress-container tw-w-full tw-h-[4px] tw-bg-white/20 tw-rounded-[3px] tw-cursor-pointer tw-relative">
-              <div class="progress-bar tw-h-[4px] tw-bg-white tw-rounded-[3px] tw-w-0 tw-relative">
-                  <div class="progress-handle tw-w-[12px] tw-h-[12px] tw-bg-white tw-rounded-[50%] tw-absolute tw-top-[50%] tw-right-[-6px] tw-translate-y-[-50%]">&nbsp;</div>
-              </div>
-            </div>
-            <div class="buttons-container tw-flex tw-justify-between max-lg:tw-hidden lg:tw-mt-[6px]">
-
-              <div class="play-volume-container tw-flex tw-items-center tw-gap-[20px]">
-                  <div class="play-pause ">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <rect x="6.6001" y="5.09961" width="3.6" height="13.8" rx="0.9" fill="white"/>
-                      <rect x="13.7998" y="5.09961" width="3.6" height="13.8" rx="0.9" fill="white"/>
-                    </svg>
-
-                  </div>
-                  <div class="time-display tw-text-white tw-text-[12px]">
-                    <span class="current-time tw-inline-block tw-min-w-[30px]">0:00</span> / <span class="total-time tw-text-white/60">0:00</span>
-                </div>
-              </div>
-              <div class="volume-btn">
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M-0.000976562 6.81816C-0.000976562 6.3663 0.365326 6 0.817183 6H4.27166L8.5972 1.60038C9.11057 1.07822 9.99878 1.44172 9.99878 2.17398V17.815C9.99878 18.5468 9.11159 18.9105 8.59792 18.3893L4.27166 14H0.817183C0.365326 14 -0.000976562 13.6337 -0.000976562 13.1818V6.81816Z" fill="white"/>
-                  <path d="M13.2734 6.31152C14.4639 7.10304 15.2485 8.45651 15.2485 9.99324C15.2485 11.53 14.4639 12.8834 13.2734 13.675" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
-                  <path d="M15.7246 3.89258C17.6972 5.20412 18.9972 7.44685 18.9972 9.99323C18.9972 12.5396 17.6972 14.7823 15.7246 16.0939" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
-                  </svg>
-
-              </div>
-
-          </div>
-          </div>
-        </div>
-        <div class='overlay video-info tw-w-full tw-h-full tw-absolute tw-bottom-0 tw-left-0 tw-flex tw-flex-col tw-justify-end tw-z-40'>
-          <div class='pc-video-info tw-w-full tw-flex max-lg:tw-hidden tw-justify-between tw-items-end tw-pb-[54px] tw-px-[60px] tw-box-border'>
-            <div>
-              <div class='max-lg:tw-hidden tw-mb-[12px] tw-flex tw-items-center tw-gap-[9px]'>
-                <img
-                  class='tw-w-[36px] tw-h-[36px] tw-rounded-[50%] tw-bg-white'
-                  src='{avatar}'
-                  width='36'
-                  height='36'
-                  alt='avatar'
-                >
-                <div class='tw-flex tw-flex-col tw-gap-[4px]'>
-                  <span class='tw-text-[14px] tw-font-blod tw-text-white tw-leading-[1.5]'
-                    >{nickname}</span
-                  >
-                  <span class='tw-text-[14px] tw-font-medium tw-text-white/50 tw-leading-[1.5]'
-                    >@{nickname}</span
-                  >
-                </div>
-              </div>
-              <div class='tw-text-[14px] tw-mb-[20px] tw-w-[320px] tw-font-[500] tw-text-white/70 tw-leading-[1.5]'>
-                {content}
-              </div>
-              <div class='tw-flex tw-items-center tw-gap-[40px]'>
-                <div class='video-like-btn tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[16px]'>
-                  <svg
-                    width='24'
-                    height='24'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <path d="M7.76465 3.57422H7.76562C9.14354 3.57246 10.4742 4.08002 11.5 5C11.7846 5.25525 12.215 5.25577 12.5 5.00098C14.0954 3.574 16.3593 3.18434 18.333 3.98145L18.5234 4.0625C20.5401 4.96453 21.8387 6.96759 21.8389 9.17676C21.8389 11.7565 20.415 14.1798 18.6104 16.1152L18.2451 16.4961C16.39 18.37 14.157 19.7975 12.4658 20.4404L12.1348 20.5586C12.0692 20.5803 12 20.5861 11.9326 20.5752L11.8662 20.5586C10.2514 20.022 8.03343 18.678 6.13281 16.8652L5.75684 16.4961L5.39062 16.1152C3.58519 14.1791 2.16211 11.7563 2.16211 9.17676C2.16232 6.17928 4.51634 3.73118 7.47656 3.58105L7.76465 3.57422Z" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linejoin="round"/>
-                  </svg>
-                  <span>{likeCount}</span>
-                </div>
-                <div class='video-comments-btn tw-cursor-pointer tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[16px]' data-id="{mediaId}">
-                  <svg
-                    width='24'
-                    height='24'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <path d="M3 4.75H21C21.1381 4.75 21.25 4.86193 21.25 5V18C21.25 18.1381 21.1381 18.25 21 18.25H16.333C16.0017 18.2501 15.678 18.3438 15.3994 18.5195L15.2832 18.5996L12.1504 20.9502C12.0837 21.0002 11.9979 21.0123 11.9219 20.9873L11.8496 20.9502L8.7168 18.5996C8.41399 18.3725 8.04548 18.2501 7.66699 18.25H3C2.86193 18.25 2.75 18.1381 2.75 18V5C2.75 4.86193 2.86193 4.75 3 4.75Z" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linejoin="round"/>
-                    <path d="M8 11.5H16" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
-                  </svg>
-
-                  <span>{commentCount}</span>
-                </div>
-              </div>
-            </div>
-            <div
-              class='tw-flex world-video-learn-more tw-cursor-pointer tw-items-center tw-gap-[12px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-text-white tw-font-medium tw-h-[48px] tw-rounded-[100px] tw-px-[24px]'
-              data-product-type='{product-type}'
-            >
-              <img
-                class='product-icon tw-w-[auto] tw-h-[34px]'
-                width='auto'
-                height='34'
-                src='{product-icon}'
-              >
-              Learn more
-            </div>
-          </div>
-          <div class='mb-video-info lg:tw-hidden tw-w-full tw-px-[20px] tw-pb-[12px] tw-box-border'>
-            <div class='tw-flex tw-justify-between tw-items-end'>
-              <div class='tw-text-[12px]  tw-w-[160px] tw-font-[500] tw-text-white/70 tw-leading-[1.5]'>
-                {content}
-              </div>
-              <div
-                class='tw-flex world-video-learn-more tw-cursor-pointer tw-items-center tw-gap-[12px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-text-white tw-font-medium tw-h-[36px] tw-rounded-[75px] tw-px-[18px]'
-                data-product-type='{product-type}'
-              >
-                <img
-                  class='product-icon tw-w-[auto] tw-h-[25px]'
-                  width='auto'
-                  height='25'
-                  src='{product-icon}'
-                >
-                Learn more
-              </div>
-            </div>
-            <div class='tw-flex tw-justify-between tw-mt-[34px] tw-items-center'>
-              <div class='tw-flex tw-items-center tw-gap-[9px]'>
-                <img
-                  class='tw-w-[36px] tw-h-[36px] tw-rounded-[50%] tw-bg-white'
-                  src='{avatar}'
-                  width='36'
-                  height='36'
-                  alt='avatar'
-                >
-                <div class='tw-flex tw-flex-col tw-gap-[4px]'>
-                  <span class='tw-text-[14px] tw-font-blod tw-text-white tw-leading-[1.5]'
-                    >{nickname}</span
-                  >
-                  <span class='tw-text-[12px] tw-font-medium tw-text-white/50 tw-leading-[1.5]'
-                    >@{nickname}</span
-                  >
-                </div>
-              </div>
-              <div class='tw-flex tw-items-center tw-gap-[40px]'>
-                <div class='video-like-btn tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[12px]'>
-                  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M6.47046 3.47852H6.47144C7.61969 3.47705 8.72793 3.90035 9.58276 4.66699C9.81992 4.87968 10.1793 4.88024 10.4167 4.66797C11.7033 3.51726 13.5111 3.17579 15.1169 3.75684L15.4353 3.88574C17.1161 4.63739 18.1989 6.3063 18.199 8.14746C18.199 10.2973 17.0125 12.3168 15.5085 13.9297L15.2039 14.2471C13.6578 15.8088 11.7968 16.9986 10.3875 17.5342L10.1121 17.6318C10.0572 17.65 9.99945 17.6547 9.94312 17.6455L9.88843 17.6318C8.54259 17.1846 6.69407 16.0646 5.11011 14.5537L4.79761 14.2471H4.79663C3.15054 12.585 1.80151 10.4405 1.80151 8.14746C1.80161 5.64949 3.76332 3.60949 6.23022 3.48438L6.47046 3.47852Z" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linejoin="round"/>
-                    </svg>
-                    
-                  <span>{likeCount}</span>
-                </div>
-                <div class='video-comments-btn tw-cursor-pointer tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[12px]' data-id="{mediaId}">
-                  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M2.49976 4.45801H17.4998C17.6147 4.45801 17.7086 4.5511 17.7087 4.66602V15.5C17.7086 15.6149 17.6147 15.708 17.4998 15.708H13.6111C13.3352 15.708 13.0658 15.7864 12.8337 15.9326L12.7361 16L10.1248 17.958C10.0693 17.9995 9.99852 18.0099 9.9353 17.9893L9.87476 17.958L7.2644 16C7.01209 15.8108 6.70479 15.7081 6.3894 15.708H2.49976C2.38496 15.7078 2.29192 15.6148 2.29175 15.5V4.66602C2.29192 4.55121 2.38495 4.45818 2.49976 4.45801Z" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linejoin="round"/>
-                    <path d="M6.66675 10.083H13.3334" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linecap="round"/>
-                    </svg>
-                    
-
-                  <span>{commentCount}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class='mb-voice-close lg:tw-hidden tw-absolute tw-z-[10020] tw-top-[20px] tw-right-[20px] tw-flex tw-items-center tw-justify-center tw-gap-[16px] tw-w-[80px] tw-h-[32px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[20px]'>
-            <div class='mb-word-video-volume-btn tw-cursor-pointer'>
-              <svg
-                width='20'
-                height='20'
-                viewBox='0 0 20 20'
-                fill='none'
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <path d="M12.7271 6.92578C13.7191 7.58537 14.3729 8.71327 14.3729 9.99388C14.3729 11.2745 13.7191 12.4024 12.7271 13.062" stroke="white" stroke-width="1.15381" stroke-linecap="round"/>
-                <path d="M14.7729 4.91113C16.4168 6.00409 17.5001 7.87303 17.5001 9.99501C17.5001 12.117 16.4168 13.9859 14.7729 15.0789" stroke="white" stroke-width="1.15381" stroke-linecap="round"/>
-                <path d="M3.50098 3.79785L15.8753 16.1722" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
-                <path d="M10 12.5468V16.4891C9.9997 17.1018 9.25411 17.4031 8.82812 16.9628L5.22754 13.2372H1.93164C1.5553 13.2371 1.25022 12.9319 1.25 12.5555V7.43153C1.25 7.05503 1.55517 6.74997 1.93164 6.74988H4.20312L10 12.5468ZM8.82812 3.0243C9.25423 2.58404 10 2.88606 10 3.49891V10.4257L5.76562 6.19129L8.82812 3.0243Z" fill="white"/>
-              </svg>
-            </div>
-            <div class='mb-close-modal-btn tw-cursor-pointer'>
-              <svg
-                width='20'
-                height='20'
-                viewBox='0 0 20 20'
-                fill='none'
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <path d="M5.09961 14.9492L14.9991 5.04972" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-                <path d="M5.09961 5.0498L14.9991 14.9493" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-              </svg>
-            </div>
-          </div>
-        </div>
-        
-        <div class="video-play-btn lg:tw-hidden tw-absolute tw-w-[60px] tw-h-[60px] tw-z-[1009] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]">
-          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M48.0537 26.1529C50.9545 27.8974 50.9545 32.1026 48.0537 33.8471L25.5732 47.3658C22.5812 49.1651 18.7707 47.0101 18.7707 43.5187L18.7707 16.4813C18.7707 12.9899 22.5812 10.8349 25.5732 12.6342L48.0537 26.1529Z" fill="white" fill-opacity="0.6"/>
-          </svg>
-        </div>
-        
-        <world-video-comments-dialog>
-          <div
-            class='world-video-comments-mask lg:tw-hidden tw-z-[1007] tw-bg-black/60 tw-fixed tw-inset-0 tw-z-[1000]'
-          ></div>
-          <div class="word-video-comments-modal tw-absolute tw-z-[1008] tw-bottom-0 tw-left-0 max-lg:tw-right-0 lg:tw-w-[375px] tw-w-full lg:tw-h-full max-lg:tw-h-[70vh] tw-bg-white">
-            <div class="word-video-comments-modal-content tw-w-full tw-h-full">
-              <div class="tw-flex tw-justify-between tw-items-center tw-px-[20px] tw-p-[20px]">
-                <div>&nbsp;</div>
-                <div class="reply-title tw-text-[15px] tw-font-medium tw-text-[#333333]"><span class="reply-title-num"></span> replies</div>
-
-                <div class="close-modal-btn tw-cursor-pointer">
-                  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M3 3.5L13 13.5" stroke="#979797" stroke-width="1.5" stroke-linecap="round"/>
-                    <path d="M3 13.5L13 3.5" stroke="#979797" stroke-width="1.5" stroke-linecap="round"/>
-                    </svg>
-                </div>
-              </div>
-              <div class="word-video-comments-list  tw-overflow-y-auto tw-w-full tw-px-[20px] tw-pb-[20px] tw-box-border">
-                <div class="tw-h-[40px] tw-w-full word-video-comments-list-footer tw-flex tw-items-center tw-justify-center">
-                  <span class="tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-md"></span>
-                </div>
-              </div>
-
-
-            </div>
-          </div>
-
-        </world-video-comments-dialog>
-
-      </world-video>
-    </div>
-  </script>
-  <script type='text/template' id='video-comment'>
-    <div class="video-comment-item tw-flex tw-gap-[8px] tw-pt-[8px]" >
-
-        <img class="tw-w-[36px] tw-h-[36px] tw-rounded-[50%]" src="{avatar}" alt="avatar">
-        <div class="video-comment-item-content">
-          <div class="video-comment-item-content-header-name tw-text-black/50 tw-text-[12px]">{nickname}</div>
-          <div class="video-comment-item-content-text tw-text-black tw-text-[14px]">{content}</div>
-          <div class="video-comment-item-content-header-time tw-text-black/50 tw-text-[12px] tw-pb-[8px]">{time}</div>
-          <div class="sub-comment-list {hasReply} tw-py-[8px]">
-            <div  data-comment-id="{commentId}">
-              <div class="video-comment-item tw-flex tw-gap-[8px] tw-pt-[8px]" >
-                <img class="tw-w-[36px] tw-h-[36px] tw-rounded-[50%]" src="{sub-avatar}" alt="avatar">
-                <div class="video-comment-item-content">
-                  <div class="video-comment-item-content-header-name tw-text-black/50 tw-text-[12px]">{sub-nickname}</div>
-                  <div class="video-comment-item-content-text tw-text-black tw-text-[14px]">{sub-content}</div>
-                  <div class="video-comment-item-content-header-time tw-text-black/50 tw-text-[12px] tw-pb-[8px]">{sub-time}</div>
-                </div>
-              </div>
-            </div>
-            <div class="more-comment {hasMore} tw-text-[#378DDD] tw-text-[12px] tw-cursor-pointer" data-id="{commentId}" data-total="{total}" data-sub-comment-id="{subCommentId}">
-                <span class="more-comment-text-num">{moreNum}</span>
-                <span class="more-comment-text-text" >more replies</span>
-            </div>
-
-          </div>
-        </div>
-
-
-    </div>
-  </script>
-  <script type='text/template' id='world-video-header-footer'>
-    <div class='page-header tw-w-[20px] lg:tw-w-[130px] xl:tw-w-[240px] tw-flex-shrink-0 max-lg:tw-hidden'>
-      &nbsp;
-      </div>
-    <div
-      id='video-page-content-footer'
-      class='page-footer tw-w-[100px] lg:tw-w-[240px] tw-flex-shrink-0 tw-flex tw-justify-center'
-    >
-      <span class='tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-lg'></span>
-    </div>
-  </script>
-</world-video-list>
-
-<script defer src='{{ 'zz-http-request.js' | asset_url }}'></script>
-<script defer src='{{ 'zz-world-video-list.js' | asset_url }}'></script>
-<script defer src='{{ 'zz-world-video-dialog.js' | asset_url }}'></script>
-<script defer src='{{ 'zz-world-video-comments-dialog.js' | asset_url }}'></script>
-<script defer src='{{ 'zz-world-video.js' | asset_url }}'></script>
-<style>
-  body.modal-open {
-    overflow: hidden;
-    touch-action: none;
-  }
-  body {
-    overflow-x: hidden;
-  }
-  #shopify-block-{{ block.id }} {
-    width: 100%;
-  }
-  #shopify-block-{{ block.id }} .video-page-list {
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-
-  }
-  #shopify-block-{{ block.id }} .swiper-button-next:after,
-  #shopify-block-{{ block.id }} .swiper-button-prev:after {
-    display: none;
-  }
-
-  .world-video-modal-mask {
-    display: none;
-  }
-
-  .world-video-modal {
-
-    display: none;
-    transition: translate 0.3s ease, scale 0.3s ease;
-  }
-  .world-video-comments-mask {
-    display: none;
-  }
-  .word-video-comments-modal {
-    display: none;
-    transition: translate 0.3s ease, scale 0.3s ease;
-    border-radius: 20px 0 0 20px;
-    transform: translateY(100%);
-  }
-  .word-video-comments-modal.show {
-    transform: translateY(0);
-  }
-  .word-video-comments-list {
-    height: calc(100% - 64px);
-  }
-
-  /* PC端样式 */
-  @media (min-width: 1024px) {
-    .world-video-modal {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.7);
-      opacity: 0;
-
-    }
-
-    .world-video-modal.show {
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
-    }
-    .controls:hover .controls-container {
-      display: block;
-    }
-    .controls:hover ~ .overlay {
-      display: none;
-    }
-    .controls-container {
-    }
-
-  }
-
-  /* 移动端样式 */
-  @media (max-width: 1023px) {
-    .world-video-modal {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      transform: translateY(100%);
-    }
-    .word-video-comments-modal {
-      border-radius: 20px 20px 0 0;
-    }
-
-    .world-video-modal.show {
-      transform: translateY(0);
-    }
-    #shopify-block-{{ block.id }} .overlay {
-      height: 100dvh;
-    }
-
-  }
-
-  .video-page-list {
-    -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
-    scrollbar-width: none;     /* Firefox */
-    -ms-overflow-style: none;  /* IE 和 Edge */
-  }
-  .video-page-list::-webkit-scrollbar {
-    width: 0px; /* 隐藏滚动条 */
-  }
-  .video-page-list::-webkit-scrollbar {
-    display: none;
-  }
-</style>
+{% schema %}
+{
+  "name": "World Video",
+  "class": "world-video-list",
+  "settings": [
+    {
+      "type": "select",
+      "id": "shop_select",
+      "label": "站点选择",
+      "options": [
+        { "value": "OFFICIAL", "label": "官网 central" },
+        { "value": "US", "label": "US" },
+        { "value": "EU", "label": "EU" },
+        { "value": "UK", "label": "UK" },
+        { "value": "GLOBAL", "label": "GLOBAL" },
+        { "value": "JP", "label": "JP" },
+        { "value": "TW", "label": "TW" }
+      ],
+      "default": "OFFICIAL"
+    },
+    {
+      "type": "select",
+      "id": "request_type",
+      "label": "请求类型",
+      "options": [
+        { "value": "prod", "label": "正式" },
+        { "value": "test", "label": "测试" }
+      ],
+      "default": "test"
+    },
+    {
+      "type": "image_picker",
+      "id": "img_141_icon",
+      "label": "141 产品icon"
+    },
+    {
+      "type": "image_picker",
+      "id": "img_130_icon",
+      "label": "130 产品icon"
+    },
+    {
+      "type": "textarea",
+      "id": "links_130",
+      "label": "Sites Link 130",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
+    },
+    {
+      "type": "textarea",
+      "id": "links_141",
+      "label": "Sites Link 141",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
+    }
+  ],
+  "presets": [
+    {
+      "name": "World Video"
+    }
+  ]
+}
+{% endschema %}
+
+<world-video-list
+  data-x1pro-img='{{block.settings.img_141_icon | image_url}}'
+  data-x1-img='{{block.settings.img_130_icon | image_url}}'
+  data-x1pro-links='{{block.settings.links_141 | url_encode }}'
+  data-x1-links='{{block.settings.links_130 | url_encode }}'
+  data-request-type='{{ block.settings.request_type }}'
+  data-shop-select='{{ block.settings.shop_select }}'
+>
+  <div class='tw-flex tw-justify-center tw-items-center tw-my-[30px] lg:tw-my-[80px]'>
+    <div class='world-video-switch tw-flex tw-w-[336px] lg:tw-w-[360px] tw-h-[42px] tw-bg-[#F3F3F3] tw-rounded-[21px] tw-overflow-hidden '>
+      <button
+        id='switch-pro'
+        class='tw-flex-1 tw-border-none tw-h-full tw-text-[13px] lg:tw-text-[16px] tw-bg-black tw-text-white tw-rounded-[21px] tw-transition-colors'
+        style='font-size: 16px;'
+      >
+        X1 PRO&PROMAX
+      </button>
+      <button
+        id='switch-x1'
+        class='tw-flex-1  tw-border-none tw-h-full tw-rounded-[21px] tw-text-[13px] lg:tw-text-[16px] tw-bg-transparent tw-text-black tw-transition-colors'
+        style='font-size: 16px;'
+      >
+        X1
+      </button>
+    </div>
+  </div>
+  <div class='tw-relative tw-w-full'>
+    <div
+      id='video-page-content'
+      class='video-page-list tw-flex tw-overflow-x-scroll tw-w-full lg:tw-pr-[120px] tw-pr-[20px]'
+    >
+      <div
+        class='tw-w-full tw-h-[100px] tw-flex tw-justify-center tw-items-center'
+      >
+        <span
+          class='tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-lg'
+        ></span>
+      </div>
+    </div>
+ 
+    <div class='video-page-left-arrow tw-cursor-pointer tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-hidden tw-absolute tw-left-[48px] tw-top-1/2 tw-translate-y-[-50%]'>
+      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23806_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23806_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
+        </clipPath></defs>
+        </svg>
+        
+    </div>
+    <div class='video-page-right-arrow tw-cursor-pointer tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[50%] max-lg:tw-hidden tw-absolute tw-right-[48px] tw-top-1/2 tw-translate-y-[-50%]'>
+      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23800_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23800_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
+        </clipPath></defs>
+        </svg>
+        
+    </div>
+ 
+  </div>
+
+  <world-video-dialog
+    data-x1pro-img='{{block.settings.img_141_icon | image_url}}'
+    data-x1-img='{{block.settings.img_130_icon | image_url}}'
+    data-x1pro-links='{{block.settings.links_141 | url_encode }}'
+    data-x1-links='{{block.settings.links_130 | url_encode }}'
+    data-request-type='{{ block.settings.request_type }}'
+  >
+    <!-- 蒙层 -->
+    <div
+      id='world-video-modalMask'
+      class='world-video-modal-mask tw-bg-black/60 tw-fixed tw-inset-0 tw-z-[1000]'
+    >
+      <div class='close-modal-btn max-lg:tw-hidden tw-z-[10042] tw-w-[40px] tw-h-[40px] tw-cursor-pointer tw-absolute  tw-top-[20px] tw-right-[20px]'>
+        <img
+          class='tw-w-full tw-h-full'
+          width='40'
+          height='40'
+          src='https://cdn.shopify.com/s/files/1/0891/9796/9711/files/Group_1509997654.png?v=1746510524'
+          alt='close button'
+        >
+      </div>
+    </div>
+    <!-- 弹窗 -->
+    <div
+      id='world-video-modal'
+      class='world-video-modal max-lg:tw-w-screen max-lg:tw-h-screen max-lg:tw-bg-black tw-fixed tw-z-[1001] max-lg:tw-z-[10005]'
+    >
+      <div class='video-page-swiper tw-overflow-hidden max-lg:tw-w-screen max-lg:tw-h-screen  lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px]'>
+        {% comment %} 轮播图， 弹起时候获取,往swiper-wrapper中添加swiper-slide {% endcomment %}
+        <div
+          class='swiper-wrapper max-lg:tw-w-screen max-lg:tw-h-screen lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px]'
+          id='video-swiper-wrapper'
+        ></div>
+        <div class='swiper-button-prev !tw-w-[48px] !tw-h-[48px] tw-cursor-pointer max-lg:tw-hidden tw-absolute !tw-left-[-100px] !tw-top-1/2 !tw-translate-y-[-50%]'>
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23806_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23806_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
+            </clipPath></defs>
+            </svg>
+            
+        </div>
+        <div class='swiper-button-next !tw-w-[48px] !tw-h-[48px] tw-cursor-pointer max-lg:tw-hidden tw-absolute !tw-right-[-100px] tw-top-1/2 !tw-translate-y-[-50%]'>
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <foreignObject x="-10" y="-10" width="68" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_11239_23800_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="10" 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_11239_23800_clip_path" transform="translate(10 10)"><rect width="48" height="48" rx="24"/>
+            </clipPath></defs>
+            </svg>
+            
+        </div>
+        
+
+        
+      </div>
+      
+    </div>
+    
+  </world-video-dialog>
+  {% comment %} 模板 {% endcomment %}
+  <script type='text/template' id='video-page-item'>
+    <div class="tw-flex tw-scroll-snap-align-start tw-ml-[8px] lg:tw-ml-[20px]">
+      <div class="tw-w-[80vw] lg:tw-w-[740px] {item-display-1}">
+        <div class="video-item tw-w-full tw-h-[36.8vw] lg:tw-h-[340px] tw-cursor-pointer  {item-display-1}" data-item="{video-item-1}">
+          <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-1}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-1" >
+            <source type='video/mp4'
+              data-src="{video-1}"
+            >
+          </video>
+        </div>
+        <div class="tw-flex tw-w-full tw-h-[46.4vw] lg:tw-h-[204px] tw-mt-[8px] lg:tw-mt-[20px] {item-display-2}">
+          <div class="video-item tw-flex-1 tw-relative tw-cursor-pointer tw-h-full {item-display-2}" data-item="{video-item-2}">
+            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
+            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-2}" alt="" data-video-index="video-2"/>
+          </div>
+          <div class="video-item tw-flex-1 tw-relative tw-cursor-pointer tw-ml-[8px] lg:tw-ml-[20px] tw-h-full {item-display-3}" data-item="{video-item-3}">
+            <img class="tw-h-full tw-w-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-3}" alt="" data-video-index="video-3"/>
+            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
+          </div>
+        </div>
+      </div>
+      <div class="video-item tw-w-[48vw] lg:tw-w-[360px] tw-h-full lg:tw-h-[564px]  tw-ml-[8px] lg:tw-ml-[20px] tw-cursor-pointer {item-display-4}" data-item="{video-item-4}">
+        <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-4}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-4" >
+          <source type='video/mp4'
+            data-src="{video-4}"
+          >
+        </video>
+      </div>
+
+    </div>
+    <div class="tw-flex tw-scroll-snap-align-start tw-ml-[8px] lg:tw-ml-[20px] {item-display-5}">
+      <div class="tw-w-[80vw] lg:tw-w-[740px] {item-display-5}">
+        <div class="tw-flex tw-w-full tw-h-[46.4vw] lg:tw-h-[204px] {item-display-5}">
+          <div class="video-item tw-relative tw-flex-1 tw-cursor-pointer {item-display-5}" data-item="{video-item-5}">
+            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-5}" alt="" data-video-index="video-5" />
+            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
+          </div>
+          <div class="video-item tw-relative tw-flex-1 tw-cursor-pointer tw-ml-[8px] lg:tw-ml-[20px] tw-h-full {item-display-6}" data-item="{video-item-6}">
+            <img class="tw-w-full tw-h-full tw-rounded-[10px] lg:tw-rounded-[20px] tw-object-cover" src="{video-6}" alt="" data-video-index="video-6"/>
+            <img class="play-icon tw-absolute tw-w-[32px] tw-h-[32px] lg:tw-w-[80px] lg:tw-h-[80px] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]" src="https://cdn.shopify.com/s/files/1/0891/9796/9711/files/video_on.png?v=1745996489">
+          </div>
+
+
+        </div>
+        <div class="video-item tw-w-full tw-h-[36.8vw] lg:tw-h-[340px] tw-cursor-pointer tw-mt-[8px] lg:tw-mt-[20px] {item-display-7}" data-item="{video-item-7}">
+          <video class="word-lazy-video world-lozad tw-w-full tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-7}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-7" >
+            <source type='video/mp4'
+              data-src="{video-7}"
+            >
+          </video>
+        </div>
+      </div>
+      <div class="video-item tw-w-[48vw] lg:tw-w-[360px] lg:tw-h-[564px] tw-h-full tw-ml-[8px] lg:tw-ml-[20px] {item-display-8}" data-item="{video-item-8}">
+        <video class="word-lazy-video world-lozad tw-w-full tw-cursor-pointer tw-h-full tw-object-cover tw-rounded-[10px] lg:tw-rounded-[20px]" data-poster="{poster-8}" muted autoplay playsinline x5-video-player-type="h5" webkit-playsinline loop data-video-index="video-8" >
+          <source type='video/mp4'
+            data-src="{video-8}"
+          >
+        </video>
+      </div>
+
+    </div>
+  </script>
+  <script type='text/template' id='video-swiper-slide'>
+    <div class='swiper-slide max-lg:tw-w-full max-lg:tw-h-full lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px] lg:tw-rounded-[20px] tw-relative'>
+      <world-video data-id='{id}' data-product-links="{product-links}">
+        <video
+          class='word-slide-lazy-video  video-player tw-bg-black tw-w-full tw-h-full lg:tw-w-[854px] lg:tw-h-[480px] xl:tw-w-[960px] xl:tw-h-[540px] lg:tw-rounded-[20px]'
+          playsinline
+          x5-video-player-type="h5"
+          webkit-playsinline
+          poster="{poster-url}"
+          loop
+        >
+          <source type='video/mp4'
+            src="{video-url}"
+          >
+        </video>
+        <div class="controls lg:tw-min-h-[40px] tw-absolute lg:tw-bottom-0 max-lg:tw-bottom-[56px] tw-left-0 tw-right-0 tw-w-full tw-flex tw-flex-col tw-gap-[12px] tw-pb-[6px] tw-pt-[6px] tw-z-50 lg:tw-px-[60px] max-lg:tw-px-[20px] tw-box-border">
+          <div class="controls-container lg:tw-hidden">
+            <div class="progress-container tw-w-full tw-h-[4px] tw-bg-white/20 tw-rounded-[3px] tw-cursor-pointer tw-relative">
+              <div class="progress-bar tw-h-[4px] tw-bg-white tw-rounded-[3px] tw-w-0 tw-relative">
+                  <div class="progress-handle tw-w-[12px] tw-h-[12px] tw-bg-white tw-rounded-[50%] tw-absolute tw-top-[50%] tw-right-[-6px] tw-translate-y-[-50%]">&nbsp;</div>
+              </div>
+            </div>
+            <div class="buttons-container tw-flex tw-justify-between max-lg:tw-hidden lg:tw-mt-[6px]">
+
+              <div class="play-volume-container tw-flex tw-items-center tw-gap-[20px]">
+                  <div class="play-pause ">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="6.6001" y="5.09961" width="3.6" height="13.8" rx="0.9" fill="white"/>
+                      <rect x="13.7998" y="5.09961" width="3.6" height="13.8" rx="0.9" fill="white"/>
+                    </svg>
+
+                  </div>
+                  <div class="time-display tw-text-white tw-text-[12px]">
+                    <span class="current-time tw-inline-block tw-min-w-[30px]">0:00</span> / <span class="total-time tw-text-white/60">0:00</span>
+                </div>
+              </div>
+              <div class="volume-btn">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M-0.000976562 6.81816C-0.000976562 6.3663 0.365326 6 0.817183 6H4.27166L8.5972 1.60038C9.11057 1.07822 9.99878 1.44172 9.99878 2.17398V17.815C9.99878 18.5468 9.11159 18.9105 8.59792 18.3893L4.27166 14H0.817183C0.365326 14 -0.000976562 13.6337 -0.000976562 13.1818V6.81816Z" fill="white"/>
+                  <path d="M13.2734 6.31152C14.4639 7.10304 15.2485 8.45651 15.2485 9.99324C15.2485 11.53 14.4639 12.8834 13.2734 13.675" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
+                  <path d="M15.7246 3.89258C17.6972 5.20412 18.9972 7.44685 18.9972 9.99323C18.9972 12.5396 17.6972 14.7823 15.7246 16.0939" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
+                  </svg>
+
+              </div>
+
+          </div>
+          </div>
+        </div>
+        <div class='overlay video-info tw-w-full tw-h-full tw-absolute tw-bottom-0 tw-left-0 tw-flex tw-flex-col tw-justify-end tw-z-40'>
+          <div class='pc-video-info tw-w-full tw-flex max-lg:tw-hidden tw-justify-between tw-items-end tw-pb-[54px] tw-px-[60px] tw-box-border'>
+            <div>
+              <div class='max-lg:tw-hidden tw-mb-[12px] tw-flex tw-items-center tw-gap-[9px]'>
+                <img
+                  class='tw-w-[36px] tw-h-[36px] tw-rounded-[50%] tw-bg-white'
+                  src='{avatar}'
+                  width='36'
+                  height='36'
+                  alt='avatar'
+                >
+                <div class='tw-flex tw-flex-col tw-gap-[4px]'>
+                  <span class='tw-text-[14px] tw-font-blod tw-text-white tw-leading-[1.5]'
+                    >{nickname}</span
+                  >
+                  <span class='tw-text-[14px] tw-font-medium tw-text-white/50 tw-leading-[1.5]'
+                    >@{nickname}</span
+                  >
+                </div>
+              </div>
+              <div class='tw-text-[14px] tw-mb-[20px] tw-w-[320px] tw-font-[500] tw-text-white/70 tw-leading-[1.5]'>
+                {content}
+              </div>
+              <div class='tw-flex tw-items-center tw-gap-[40px]'>
+                <div class='video-like-btn tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[16px]'>
+                  <svg
+                    width='24'
+                    height='24'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path d="M7.76465 3.57422H7.76562C9.14354 3.57246 10.4742 4.08002 11.5 5C11.7846 5.25525 12.215 5.25577 12.5 5.00098C14.0954 3.574 16.3593 3.18434 18.333 3.98145L18.5234 4.0625C20.5401 4.96453 21.8387 6.96759 21.8389 9.17676C21.8389 11.7565 20.415 14.1798 18.6104 16.1152L18.2451 16.4961C16.39 18.37 14.157 19.7975 12.4658 20.4404L12.1348 20.5586C12.0692 20.5803 12 20.5861 11.9326 20.5752L11.8662 20.5586C10.2514 20.022 8.03343 18.678 6.13281 16.8652L5.75684 16.4961L5.39062 16.1152C3.58519 14.1791 2.16211 11.7563 2.16211 9.17676C2.16232 6.17928 4.51634 3.73118 7.47656 3.58105L7.76465 3.57422Z" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linejoin="round"/>
+                  </svg>
+                  <span>{likeCount}</span>
+                </div>
+                <div class='video-comments-btn tw-cursor-pointer tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[16px]' data-id="{mediaId}">
+                  <svg
+                    width='24'
+                    height='24'
+                    viewBox='0 0 24 24'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path d="M3 4.75H21C21.1381 4.75 21.25 4.86193 21.25 5V18C21.25 18.1381 21.1381 18.25 21 18.25H16.333C16.0017 18.2501 15.678 18.3438 15.3994 18.5195L15.2832 18.5996L12.1504 20.9502C12.0837 21.0002 11.9979 21.0123 11.9219 20.9873L11.8496 20.9502L8.7168 18.5996C8.41399 18.3725 8.04548 18.2501 7.66699 18.25H3C2.86193 18.25 2.75 18.1381 2.75 18V5C2.75 4.86193 2.86193 4.75 3 4.75Z" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linejoin="round"/>
+                    <path d="M8 11.5H16" stroke="white" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
+                  </svg>
+
+                  <span>{commentCount}</span>
+                </div>
+              </div>
+            </div>
+            <div
+              class='tw-flex world-video-learn-more tw-cursor-pointer tw-items-center tw-gap-[12px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-text-white tw-font-medium tw-h-[48px] tw-rounded-[100px] tw-px-[24px]'
+              data-product-type='{product-type}'
+            >
+              <img
+                class='product-icon tw-w-[auto] tw-h-[34px]'
+                width='auto'
+                height='34'
+                src='{product-icon}'
+              >
+              Learn more
+            </div>
+          </div>
+          <div class='mb-video-info lg:tw-hidden tw-w-full tw-px-[20px] tw-pb-[12px] tw-box-border'>
+            <div class='tw-flex tw-justify-between tw-items-end'>
+              <div class='tw-text-[12px]  tw-w-[160px] tw-font-[500] tw-text-white/70 tw-leading-[1.5]'>
+                {content}
+              </div>
+              <div
+                class='tw-flex world-video-learn-more tw-cursor-pointer tw-items-center tw-gap-[12px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-text-white tw-font-medium tw-h-[36px] tw-rounded-[75px] tw-px-[18px]'
+                data-product-type='{product-type}'
+              >
+                <img
+                  class='product-icon tw-w-[auto] tw-h-[25px]'
+                  width='auto'
+                  height='25'
+                  src='{product-icon}'
+                >
+                Learn more
+              </div>
+            </div>
+            <div class='tw-flex tw-justify-between tw-mt-[34px] tw-items-center'>
+              <div class='tw-flex tw-items-center tw-gap-[9px]'>
+                <img
+                  class='tw-w-[36px] tw-h-[36px] tw-rounded-[50%] tw-bg-white'
+                  src='{avatar}'
+                  width='36'
+                  height='36'
+                  alt='avatar'
+                >
+                <div class='tw-flex tw-flex-col tw-gap-[4px]'>
+                  <span class='tw-text-[14px] tw-font-blod tw-text-white tw-leading-[1.5]'
+                    >{nickname}</span
+                  >
+                  <span class='tw-text-[12px] tw-font-medium tw-text-white/50 tw-leading-[1.5]'
+                    >@{nickname}</span
+                  >
+                </div>
+              </div>
+              <div class='tw-flex tw-items-center tw-gap-[40px]'>
+                <div class='video-like-btn tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[12px]'>
+                  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6.47046 3.47852H6.47144C7.61969 3.47705 8.72793 3.90035 9.58276 4.66699C9.81992 4.87968 10.1793 4.88024 10.4167 4.66797C11.7033 3.51726 13.5111 3.17579 15.1169 3.75684L15.4353 3.88574C17.1161 4.63739 18.1989 6.3063 18.199 8.14746C18.199 10.2973 17.0125 12.3168 15.5085 13.9297L15.2039 14.2471C13.6578 15.8088 11.7968 16.9986 10.3875 17.5342L10.1121 17.6318C10.0572 17.65 9.99945 17.6547 9.94312 17.6455L9.88843 17.6318C8.54259 17.1846 6.69407 16.0646 5.11011 14.5537L4.79761 14.2471H4.79663C3.15054 12.585 1.80151 10.4405 1.80151 8.14746C1.80161 5.64949 3.76332 3.60949 6.23022 3.48438L6.47046 3.47852Z" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linejoin="round"/>
+                    </svg>
+                    
+                  <span>{likeCount}</span>
+                </div>
+                <div class='video-comments-btn tw-cursor-pointer tw-flex tw-items-center tw-gap-[4px] tw-text-white/70 tw-font-medium tw-text-[12px]' data-id="{mediaId}">
+                  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2.49976 4.45801H17.4998C17.6147 4.45801 17.7086 4.5511 17.7087 4.66602V15.5C17.7086 15.6149 17.6147 15.708 17.4998 15.708H13.6111C13.3352 15.708 13.0658 15.7864 12.8337 15.9326L12.7361 16L10.1248 17.958C10.0693 17.9995 9.99852 18.0099 9.9353 17.9893L9.87476 17.958L7.2644 16C7.01209 15.8108 6.70479 15.7081 6.3894 15.708H2.49976C2.38496 15.7078 2.29192 15.6148 2.29175 15.5V4.66602C2.29192 4.55121 2.38495 4.45818 2.49976 4.45801Z" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linejoin="round"/>
+                    <path d="M6.66675 10.083H13.3334" stroke="white" stroke-opacity="0.7" stroke-width="1.25" stroke-linecap="round"/>
+                    </svg>
+                    
+
+                  <span>{commentCount}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class='mb-voice-close lg:tw-hidden tw-absolute tw-z-[10020] tw-top-[20px] tw-right-[20px] tw-flex tw-items-center tw-justify-center tw-gap-[16px] tw-w-[80px] tw-h-[32px] tw-bg-white/20 tw-backdrop-blur-[10px] tw-rounded-[20px]'>
+            <div class='mb-word-video-volume-btn tw-cursor-pointer'>
+              <svg
+                width='20'
+                height='20'
+                viewBox='0 0 20 20'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path d="M12.7271 6.92578C13.7191 7.58537 14.3729 8.71327 14.3729 9.99388C14.3729 11.2745 13.7191 12.4024 12.7271 13.062" stroke="white" stroke-width="1.15381" stroke-linecap="round"/>
+                <path d="M14.7729 4.91113C16.4168 6.00409 17.5001 7.87303 17.5001 9.99501C17.5001 12.117 16.4168 13.9859 14.7729 15.0789" stroke="white" stroke-width="1.15381" stroke-linecap="round"/>
+                <path d="M3.50098 3.79785L15.8753 16.1722" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
+                <path d="M10 12.5468V16.4891C9.9997 17.1018 9.25411 17.4031 8.82812 16.9628L5.22754 13.2372H1.93164C1.5553 13.2371 1.25022 12.9319 1.25 12.5555V7.43153C1.25 7.05503 1.55517 6.74997 1.93164 6.74988H4.20312L10 12.5468ZM8.82812 3.0243C9.25423 2.58404 10 2.88606 10 3.49891V10.4257L5.76562 6.19129L8.82812 3.0243Z" fill="white"/>
+              </svg>
+            </div>
+            <div class='mb-close-modal-btn tw-cursor-pointer'>
+              <svg
+                width='20'
+                height='20'
+                viewBox='0 0 20 20'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path d="M5.09961 14.9492L14.9991 5.04972" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M5.09961 5.0498L14.9991 14.9493" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+        
+        <div class="video-play-btn lg:tw-hidden tw-absolute tw-w-[60px] tw-h-[60px] tw-z-[1009] tw-top-[50%] tw-left-[50%] tw-translate-x-[-50%] tw-translate-y-[-50%]">
+          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M48.0537 26.1529C50.9545 27.8974 50.9545 32.1026 48.0537 33.8471L25.5732 47.3658C22.5812 49.1651 18.7707 47.0101 18.7707 43.5187L18.7707 16.4813C18.7707 12.9899 22.5812 10.8349 25.5732 12.6342L48.0537 26.1529Z" fill="white" fill-opacity="0.6"/>
+          </svg>
+        </div>
+        
+        <world-video-comments-dialog>
+          <div
+            class='world-video-comments-mask lg:tw-hidden tw-z-[1007] tw-bg-black/60 tw-fixed tw-inset-0 tw-z-[1000]'
+          ></div>
+          <div class="word-video-comments-modal tw-absolute tw-z-[1008] tw-bottom-0 tw-left-0 max-lg:tw-right-0 lg:tw-w-[375px] tw-w-full lg:tw-h-full max-lg:tw-h-[70vh] tw-bg-white">
+            <div class="word-video-comments-modal-content tw-w-full tw-h-full">
+              <div class="tw-flex tw-justify-between tw-items-center tw-px-[20px] tw-p-[20px]">
+                <div>&nbsp;</div>
+                <div class="reply-title tw-text-[15px] tw-font-medium tw-text-[#333333]"><span class="reply-title-num"></span> replies</div>
+
+                <div class="close-modal-btn tw-cursor-pointer">
+                  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 3.5L13 13.5" stroke="#979797" stroke-width="1.5" stroke-linecap="round"/>
+                    <path d="M3 13.5L13 3.5" stroke="#979797" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </div>
+              </div>
+              <div class="word-video-comments-list  tw-overflow-y-auto tw-w-full tw-px-[20px] tw-pb-[20px] tw-box-border">
+                <div class="tw-h-[40px] tw-w-full word-video-comments-list-footer tw-flex tw-items-center tw-justify-center">
+                  <span class="tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-md"></span>
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+
+        </world-video-comments-dialog>
+
+      </world-video>
+    </div>
+  </script>
+  <script type='text/template' id='video-comment'>
+    <div class="video-comment-item tw-flex tw-gap-[8px] tw-pt-[8px]" >
+
+        <img class="tw-w-[36px] tw-h-[36px] tw-rounded-[50%]" src="{avatar}" alt="avatar">
+        <div class="video-comment-item-content">
+          <div class="video-comment-item-content-header-name tw-text-black/50 tw-text-[12px]">{nickname}</div>
+          <div class="video-comment-item-content-text tw-text-black tw-text-[14px]">{content}</div>
+          <div class="video-comment-item-content-header-time tw-text-black/50 tw-text-[12px] tw-pb-[8px]">{time}</div>
+          <div class="sub-comment-list {hasReply} tw-py-[8px]">
+            <div  data-comment-id="{commentId}">
+              <div class="video-comment-item tw-flex tw-gap-[8px] tw-pt-[8px]" >
+                <img class="tw-w-[36px] tw-h-[36px] tw-rounded-[50%]" src="{sub-avatar}" alt="avatar">
+                <div class="video-comment-item-content">
+                  <div class="video-comment-item-content-header-name tw-text-black/50 tw-text-[12px]">{sub-nickname}</div>
+                  <div class="video-comment-item-content-text tw-text-black tw-text-[14px]">{sub-content}</div>
+                  <div class="video-comment-item-content-header-time tw-text-black/50 tw-text-[12px] tw-pb-[8px]">{sub-time}</div>
+                </div>
+              </div>
+            </div>
+            <div class="more-comment {hasMore} tw-text-[#378DDD] tw-text-[12px] tw-cursor-pointer" data-id="{commentId}" data-total="{total}" data-sub-comment-id="{subCommentId}">
+                <span class="more-comment-text-num">{moreNum}</span>
+                <span class="more-comment-text-text" >more replies</span>
+            </div>
+
+          </div>
+        </div>
+
+
+    </div>
+  </script>
+  <script type='text/template' id='world-video-header-footer'>
+    <div class='page-header tw-w-[20px] lg:tw-w-[130px] xl:tw-w-[240px] tw-flex-shrink-0 max-lg:tw-hidden'>
+      &nbsp;
+      </div>
+    <div
+      id='video-page-content-footer'
+      class='page-footer tw-w-[100px] lg:tw-w-[240px] tw-flex-shrink-0 tw-flex tw-justify-center'
+    >
+      <span class='tw-daisy-loading tw-daisy-loading-dots tw-daisy-loading-lg'></span>
+    </div>
+  </script>
+</world-video-list>
+
+<script defer src='{{ 'zz-http-request.js' | asset_url }}'></script>
+<script defer src='{{ 'zz-world-video-list.js' | asset_url }}'></script>
+<script defer src='{{ 'zz-world-video-dialog.js' | asset_url }}'></script>
+<script defer src='{{ 'zz-world-video-comments-dialog.js' | asset_url }}'></script>
+<script defer src='{{ 'zz-world-video.js' | asset_url }}'></script>
+<style>
+  body.modal-open {
+    overflow: hidden;
+    touch-action: none;
+  }
+  body {
+    overflow-x: hidden;
+  }
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+  }
+  #shopify-block-{{ block.id }} .video-page-list {
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next:after,
+  #shopify-block-{{ block.id }} .swiper-button-prev:after {
+    display: none;
+  }
+
+  .world-video-modal-mask {
+    display: none;
+  }
+
+  .world-video-modal {
+
+    display: none;
+    transition: translate 0.3s ease, scale 0.3s ease;
+  }
+  .world-video-comments-mask {
+    display: none;
+  }
+  .word-video-comments-modal {
+    display: none;
+    transition: translate 0.3s ease, scale 0.3s ease;
+    border-radius: 20px 0 0 20px;
+    transform: translateY(100%);
+  }
+  .word-video-comments-modal.show {
+    transform: translateY(0);
+  }
+  .word-video-comments-list {
+    height: calc(100% - 64px);
+  }
+
+  /* PC端样式 */
+  @media (min-width: 1024px) {
+    .world-video-modal {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.7);
+      opacity: 0;
+
+    }
+
+    .world-video-modal.show {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    .controls:hover .controls-container {
+      display: block;
+    }
+    .controls:hover ~ .overlay {
+      display: none;
+    }
+    .controls-container {
+    }
+
+  }
+
+  /* 移动端样式 */
+  @media (max-width: 1023px) {
+    .world-video-modal {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      transform: translateY(100%);
+    }
+    .word-video-comments-modal {
+      border-radius: 20px 20px 0 0;
+    }
+
+    .world-video-modal.show {
+      transform: translateY(0);
+    }
+    #shopify-block-{{ block.id }} .overlay {
+      height: 100dvh;
+    }
+
+  }
+
+  .video-page-list {
+    -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
+    scrollbar-width: none;     /* Firefox */
+    -ms-overflow-style: none;  /* IE 和 Edge */
+  }
+  .video-page-list::-webkit-scrollbar {
+    width: 0px; /* 隐藏滚动条 */
+  }
+  .video-page-list::-webkit-scrollbar {
+    display: none;
+  }
+</style>