From 5261a96ae1ef9e05f024e386c6fef14faa99f05f Mon Sep 17 00:00:00 2001
From: peijunlei <pjl@suq.cn>
Date: Mon, 7 Sep 2026 20:04:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(about):=20=E8=B0=83=E6=95=B4=E9=9B=86?=
 =?UTF-8?q?=E5=9B=A2=E6=88=90=E5=91=98=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/themes/dist_static/static/css/about.css | 19 +++++++--------
 public/themes/dist_static/static/js/about.js   | 33 ++++++++++++++++++++++++++
 public/themes/website/1/en/demo/about.html     | 22 +++++++++--------
 public/themes/website/1/zh/demo/about.html     | 22 +++++++++--------
 4 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/public/themes/dist_static/static/css/about.css b/public/themes/dist_static/static/css/about.css
index daf4a50..9aeaead 100644
--- a/public/themes/dist_static/static/css/about.css
+++ b/public/themes/dist_static/static/css/about.css
@@ -498,23 +498,19 @@
 .ab-members__more {
   min-width: 12.5rem;
 }
-.ab-members__logos {
+.ab-members__logos-swiper {
+  width: 100%;
+  overflow: hidden;
+}
+.ab-members__logos-swiper .ab-members__logos {
   display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 1rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-x: contain;
-  scrollbar-width: thin;
+  box-sizing: border-box;
 }
 .ab-members__logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
-  width: 10rem;
+  width: 100%;
   height: 6.25rem;
   padding: 0;
   border: 0;
@@ -523,6 +519,7 @@
   color: inherit;
   cursor: pointer;
   transition: background var(--duration-fast) var(--easing);
+  box-sizing: border-box;
 }
 .ab-members__logo img {
   display: block;
diff --git a/public/themes/dist_static/static/js/about.js b/public/themes/dist_static/static/js/about.js
index 60e5d58..c004261 100644
--- a/public/themes/dist_static/static/js/about.js
+++ b/public/themes/dist_static/static/js/about.js
@@ -74,10 +74,43 @@ function initHonorsToggle() {
 		btn.querySelector("span").textContent = expanded ? t("about.collapse") : t("about.expand_more");
 	});
 }
+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;
+	const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	new window.Swiper(el, {
+		slidesPerView: 5,
+		spaceBetween: 16,
+		watchOverflow: true,
+		rewind: enableCarousel,
+		autoplay: enableCarousel && !reduceMotion ? {
+			delay: 3e3,
+			disableOnInteraction: false,
+			pauseOnMouseEnter: true
+		} : false,
+		breakpoints: {
+			0: {
+				slidesPerView: 2,
+				spaceBetween: 12
+			},
+			576: {
+				slidesPerView: 3,
+				spaceBetween: 16
+			},
+			993: {
+				slidesPerView: 5,
+				spaceBetween: 16
+			}
+		}
+	});
+}
 $(function() {
 	setActiveNav();
 	initHistorySwiper();
 	counterUpInit();
 	initHonorsToggle();
+	initMembersLogosSwiper();
 });
 //#endregion
diff --git a/public/themes/website/1/en/demo/about.html b/public/themes/website/1/en/demo/about.html
index 56e047b..a13af14 100644
--- a/public/themes/website/1/en/demo/about.html
+++ b/public/themes/website/1/en/demo/about.html
@@ -244,16 +244,18 @@
             {php}$member_idx++;{/php}
             {/hcTaglib:content}
           </div>
-          <div class="ab-members__logos nav" 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 {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 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>
       </div>
diff --git a/public/themes/website/1/zh/demo/about.html b/public/themes/website/1/zh/demo/about.html
index f90d15f..4d25eb5 100644
--- a/public/themes/website/1/zh/demo/about.html
+++ b/public/themes/website/1/zh/demo/about.html
@@ -244,16 +244,18 @@
             {php}$member_idx++;{/php}
             {/hcTaglib:content}
           </div>
-          <div class="ab-members__logos nav" 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 {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 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>
       </div>