Merge remote-tracking branch 'origin/master'

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 {

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

public/themes/website/1/en/demo/about.html

@@ -227,36 +227,36 @@
       <div class="ab-members__inner section__wrap">
         <h2 class="ab-members__title">{$vo.title}</h2>
         <div class="ab-members__card">
-          <div class="ab-members__panels tab-content">
-            {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"}
-            <div class="ab-members__panel tab-pane fade {if $member_idx == 0}show active{/if}" id="ab-member-panel-{$case_top.id}" role="tabpanel" aria-labelledby="ab-member-tab-{$case_top.id}" tabindex="{$case_top.id}">
-              <div class="ab-members__content">
-                <div>
-                  <h3 class="ab-members__name">{$case_top.title}</h3>
-                  <p class="ab-members__desc">
-                    {$case_top.content|strip_tags}
-                  </p>
+          <div class="ab-members__panels-swiper swiper">
+            <div class="ab-members__panels swiper-wrapper">
+              {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"}
+              <div class="ab-members__panel swiper-slide" id="ab-member-panel-{$case_top.id}" data-index="{$member_idx}">
+                <div class="ab-members__content">
+                  <div>
+                    <h3 class="ab-members__name">{$case_top.title}</h3>
+                    <p class="ab-members__desc">
+                      {$case_top.content|strip_tags}
+                    </p>
+                  </div>
+                  <a target="_blank" class="s-btn s-btn--outline s-btn--pill ab-members__more" href="{$case_top.url ?? '#'}">Explore more</a>
                 </div>
-                <a target="_blank" class="s-btn s-btn--outline s-btn--pill ab-members__more" href="{$case_top.url ?? '#'}">Explore more</a>
               </div>
-            </div>
-            {php}$member_idx++;{/php}
-            {/hcTaglib:content}
-          </div>
-          <div class="ab-members__logos-swiper swiper">
-            <div class="ab-members__logos nav swiper-wrapper" role="tablist" aria-label="Group members">
-              {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"}
-              <button type="button" class="ab-members__logo nav-link swiper-slide {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
-                data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
-                role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
-                <img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
-              </button>
               {php}$member_idx++;{/php}
               {/hcTaglib:content}
             </div>
           </div>
+          <div class="ab-members__logos" role="tablist" aria-label="Group members">
+            {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"}
+            <button type="button" class="ab-members__logo{if $member_idx == 0} is-active{/if}" id="ab-member-tab-{$case_top.id}"
+              data-index="{$member_idx}"
+              role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
+              <img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
+            </button>
+            {php}$member_idx++;{/php}
+            {/hcTaglib:content}
+          </div>
         </div>
       </div>
     </section>

public/themes/website/1/zh/demo/about.html

@@ -227,36 +227,36 @@
       <div class="ab-members__inner section__wrap">
         <h2 class="ab-members__title">{$vo.title}</h2>
         <div class="ab-members__card">
-          <div class="ab-members__panels tab-content">
-            {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"}
-            <div class="ab-members__panel tab-pane fade {if $member_idx == 0}show active{/if}" id="ab-member-panel-{$case_top.id}" role="tabpanel" aria-labelledby="ab-member-tab-{$case_top.id}" tabindex="{$case_top.id}">
-              <div class="ab-members__content">
-                <div>
-                  <h3 class="ab-members__name">{$case_top.title}</h3>
-                  <p class="ab-members__desc">
-                    {$case_top.content|strip_tags}
-                  </p>
+          <div class="ab-members__panels-swiper swiper">
+            <div class="ab-members__panels swiper-wrapper">
+              {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"}
+              <div class="ab-members__panel swiper-slide" id="ab-member-panel-{$case_top.id}" data-index="{$member_idx}">
+                <div class="ab-members__content">
+                  <div>
+                    <h3 class="ab-members__name">{$case_top.title}</h3>
+                    <p class="ab-members__desc">
+                      {$case_top.content|strip_tags}
+                    </p>
+                  </div>
+                  <a target="_blank" class="s-btn s-btn--outline s-btn--pill ab-members__more" href="{$case_top.url ?? '#'}">探索更多</a>
                 </div>
-                <a target="_blank" class="s-btn s-btn--outline s-btn--pill ab-members__more" href="{$case_top.url ?? '#'}">探索更多</a>
               </div>
-            </div>
-            {php}$member_idx++;{/php}
-            {/hcTaglib:content}
-          </div>
-          <div class="ab-members__logos-swiper swiper">
-            <div class="ab-members__logos nav swiper-wrapper" role="tablist" aria-label="集团成员">
-              {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"}
-              <button type="button" class="ab-members__logo nav-link swiper-slide {if $member_idx == 0}active{/if}" id="ab-member-tab-{$case_top.id}"
-                data-bs-toggle="tab" data-bs-target="#ab-member-panel-{$case_top.id}"
-                role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
-                <img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
-              </button>
               {php}$member_idx++;{/php}
               {/hcTaglib:content}
             </div>
           </div>
+          <div class="ab-members__logos" role="tablist" aria-label="集团成员">
+            {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"}
+            <button type="button" class="ab-members__logo{if $member_idx == 0} is-active{/if}" id="ab-member-tab-{$case_top.id}"
+              data-index="{$member_idx}"
+              role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
+              <img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
+            </button>
+            {php}$member_idx++;{/php}
+            {/hcTaglib:content}
+          </div>
         </div>
       </div>
     </section>