diff --git a/public/themes/dist_static/static/css/solution2.css b/public/themes/dist_static/static/css/solution2.css index 82956d0..ed855f1 100644 --- a/public/themes/dist_static/static/css/solution2.css +++ b/public/themes/dist_static/static/css/solution2.css @@ -279,6 +279,7 @@ .sl2-core--dual .sl2-core__pagination { display: none; } + .sl2-scene { padding-top: 7.5rem; padding-bottom: 0; @@ -398,24 +399,37 @@ padding-top: 7.5rem; padding-bottom: 7.5rem; } +.sl2-more__head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + margin-bottom: 3.125rem; +} .sl2-more__title { - margin: 0 0 3.125rem; + margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } -.sl2-more__grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 2.5rem; +.sl2-more__swiper { + overflow: hidden; +} +.sl2-more__arrows-mobile { + display: none; +} +.sl2-more__slide { + height: auto; + min-width: 0; } .sl2-more__card { display: flex; flex-direction: column; gap: 2.8125rem; min-width: 0; + height: 100%; text-decoration: none; transition: color var(--duration-fast) var(--easing); } @@ -532,11 +546,7 @@ width: 520Px; height: 390Px; } - .sl2-more__grid { - grid-template-columns: 1fr; - gap: 32Px; } -} @media (max-width: 992px) { .sl2-scene__slide { width: 420Px; @@ -590,18 +600,20 @@ width: 300Px; height: 260Px; } - .sl2-scene__head .s-arrows { - display: none; - } - .sl2-scene__arrows-mobile { + .sl2-scene__arrows-mobile, + .sl2-more__arrows-mobile { display: flex; justify-content: flex-start; margin-top: 24Px; } - .sl2-scene__arrows-mobile .s-arrows { + .sl2-scene__arrows-mobile .s-arrows, + .sl2-more__arrows-mobile .s-arrows { display: flex; gap: 16Px; } + .sl2-more__head .s-arrows { + display: none; + } .sl2-core__slide { width: 300Px; } diff --git a/public/themes/dist_static/static/js/solution2.js b/public/themes/dist_static/static/js/solution2.js index 6a55d05..bf92b4e 100644 --- a/public/themes/dist_static/static/js/solution2.js +++ b/public/themes/dist_static/static/js/solution2.js @@ -71,9 +71,45 @@ function initSceneSwiper() { } }); } +function initMoreSwiper() { + const root = document.querySelector(".sl2-more"); + const el = root?.querySelector(".sl2-more__swiper"); + if (!root || !el || !window.Swiper) return; + new window.Swiper(el, { + slidesPerView: 3, + spaceBetween: 40, + speed: 600, + observer: true, + observeParents: true, + watchOverflow: true, + navigation: { + prevEl: root.querySelector(".sl2-more__head .s-arrows__prev"), + nextEl: root.querySelector(".sl2-more__head .s-arrows__next") + }, + breakpoints: { + 0: { + slidesPerView: 1.2, + spaceBetween: 20, + navigation: { + prevEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__prev"), + nextEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__next") + } + }, + 768: { + slidesPerView: 2, + spaceBetween: 24 + }, + 1200: { + slidesPerView: 3, + spaceBetween: 40 + } + } + }); +} $(function () { setActiveNav(); initCoreSwiper(); initSceneSwiper(); + initMoreSwiper(); }); //#endregion diff --git a/public/themes/website/1/zh/demo/solution2.html b/public/themes/website/1/zh/demo/solution2.html index dd5820e..05de8ea 100644 --- a/public/themes/website/1/zh/demo/solution2.html +++ b/public/themes/website/1/zh/demo/solution2.html @@ -201,10 +201,29 @@ $current_cate_id = $current_cate['id'] ?? 0; {if !empty($sub_cates[5])}
-

{$sub_cates[5]['title'] ?? ''}

-
+
+

{$sub_cates[5]['title'] ?? ''}

+
+ + +
+
+ +
+
{php}$others = getOtherCategoryCategoryId($current_cate['id'],$seller_id,5);{/php} {volist name="others" id="vo"} + {/volist}
+
+
+
+ + +
+
{/if}