diff --git a/public/themes/dist_static/static/css/about.css b/public/themes/dist_static/static/css/about.css index 9aeaead..e8fc81d 100644 --- a/public/themes/dist_static/static/css/about.css +++ b/public/themes/dist_static/static/css/about.css @@ -466,9 +466,19 @@ background: rgba(255, 255, 255, 0.2); overflow: hidden; } -.ab-members__panels { - position: relative; +.ab-members__panels-swiper { + width: 100%; min-width: 0; + overflow: hidden; +} +.ab-members__panels-swiper .ab-members__panels { + display: flex; + box-sizing: border-box; +} +.ab-members__panel { + width: 100%; + box-sizing: border-box; + height: auto; } .ab-members__content { display: flex; @@ -498,19 +508,25 @@ .ab-members__more { min-width: 12.5rem; } -.ab-members__logos-swiper { - width: 100%; - overflow: hidden; -} -.ab-members__logos-swiper .ab-members__logos { +.ab-members__logos { display: flex; - box-sizing: border-box; + flex-wrap: nowrap; + align-items: center; + gap: 1rem; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} +.ab-members__logos::-webkit-scrollbar { + display: none; } .ab-members__logo { display: flex; align-items: center; justify-content: center; - width: 100%; + flex: 0 0 auto; + width: 10rem; height: 6.25rem; padding: 0; border: 0; @@ -528,6 +544,7 @@ height: auto; object-fit: cover; } +.ab-members__logo.is-active, .ab-members__logo.active, .ab-members__logo:hover { background: rgb(255, 255, 255); @@ -569,6 +586,8 @@ max-height: calc(8 * (5rem + var(--font-32) + 1px)); overflow-y: auto; overscroll-behavior: contain; + scrollbar-gutter: stable; + padding-right: 0.75rem; scrollbar-width: thin; } .ab-honors__item { diff --git a/public/themes/dist_static/static/js/about.js b/public/themes/dist_static/static/js/about.js index c004261..02e8a18 100644 --- a/public/themes/dist_static/static/js/about.js +++ b/public/themes/dist_static/static/js/about.js @@ -72,45 +72,57 @@ function initHonorsToggle() { const expanded = list.classList.toggle("is-expanded"); btn.classList.toggle("is-expanded", expanded); btn.querySelector("span").textContent = expanded ? t("about.collapse") : t("about.expand_more"); + if (expanded) list.setAttribute("data-lenis-prevent", ""); + else list.removeAttribute("data-lenis-prevent"); }); } -function initMembersLogosSwiper() { - const el = document.querySelector(".ab-members__logos-swiper"); - if (!el || !window.Swiper) return; - const count = el.querySelectorAll(".ab-members__logo").length; - const enableCarousel = count > 5; +function initMembersCarousel() { + const root = document.querySelector(".ab-members"); + const SwiperCtor = window.Swiper; + if (!root || !SwiperCtor) return; + const el = root.querySelector(".ab-members__panels-swiper"); + const buttons = [...root.querySelectorAll(".ab-members__logo")]; + if (!el || !buttons.length) return; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; - new window.Swiper(el, { - slidesPerView: 5, - spaceBetween: 16, - watchOverflow: true, - rewind: enableCarousel, - autoplay: enableCarousel && !reduceMotion ? { + const canLoop = buttons.length > 1; + const swiper = new SwiperCtor(el, { + initialSlide: Math.max(0, buttons.findIndex((btn) => btn.classList.contains("is-active"))), + loop: canLoop, + grabCursor: true, + speed: 600, + autoplay: canLoop && !reduceMotion ? { delay: 3e3, disableOnInteraction: false, pauseOnMouseEnter: true - } : false, - breakpoints: { - 0: { - slidesPerView: 2, - spaceBetween: 12 - }, - 576: { - slidesPerView: 3, - spaceBetween: 16 - }, - 993: { - slidesPerView: 5, - spaceBetween: 16 - } + } : false + }); + const logos = root.querySelector(".ab-members__logos"); + const syncNav = (index) => { + buttons.forEach((btn, i) => { + const on = i === index; + btn.classList.toggle("is-active", on); + btn.setAttribute("aria-selected", on ? "true" : "false"); + }); + const btn = buttons[index]; + if (logos && btn) { + const left = btn.offsetLeft - (logos.clientWidth - btn.offsetWidth) / 2; + logos.scrollTo({ left: Math.max(0, left), behavior: "smooth" }); } + }; + buttons.forEach((btn, i) => { + btn.addEventListener("click", () => { + if (canLoop) swiper.slideToLoop(i); + else swiper.slideTo(i); + }); }); + swiper.on("slideChange", () => syncNav(swiper.realIndex)); + syncNav(swiper.realIndex); } $(function() { setActiveNav(); initHistorySwiper(); counterUpInit(); initHonorsToggle(); - initMembersLogosSwiper(); + initMembersCarousel(); }); //#endregion diff --git a/public/themes/website/1/en/demo/about.html b/public/themes/website/1/en/demo/about.html index 9147382..835141e 100644 --- a/public/themes/website/1/en/demo/about.html +++ b/public/themes/website/1/en/demo/about.html @@ -227,36 +227,36 @@

{$vo.title}

-
- {php}$member_idx = 0;{/php} - {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} -
-
-
-

{$case_top.title}

-

- {$case_top.content|strip_tags} -

+
+
+ {php}$member_idx = 0;{/php} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} +
+
+
+

{$case_top.title}

+

+ {$case_top.content|strip_tags} +

+
+ Explore more
- Explore more
-
- {php}$member_idx++;{/php} - {/hcTaglib:content} -
-
-
+
+ {php}$member_idx = 0;{/php} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} + + {php}$member_idx++;{/php} + {/hcTaglib:content} +
diff --git a/public/themes/website/1/zh/demo/about.html b/public/themes/website/1/zh/demo/about.html index c87a8a0..63dd59f 100644 --- a/public/themes/website/1/zh/demo/about.html +++ b/public/themes/website/1/zh/demo/about.html @@ -227,36 +227,36 @@

{$vo.title}

-
- {php}$member_idx = 0;{/php} - {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} -
-
-
-

{$case_top.title}

-

- {$case_top.content|strip_tags} -

+
+
+ {php}$member_idx = 0;{/php} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} +
+
+
+

{$case_top.title}

+

+ {$case_top.content|strip_tags} +

+
+ 探索更多
- 探索更多
-
- {php}$member_idx++;{/php} - {/hcTaglib:content} -
-
-
+
+ {php}$member_idx = 0;{/php} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} + + {php}$member_idx++;{/php} + {/hcTaglib:content} +