refactor(about): 重构关于页面集团成员切换方式

public/themes/dist_static/static/css/about.css

@@ -466,6 +466,10 @@
   background: rgba(255, 255, 255, 0.2);
   overflow: hidden;
 }
+.ab-members__panels {
+  position: relative;
+  min-width: 0;
+}
 .ab-members__content {
   display: flex;
   flex-direction: column;
@@ -505,9 +509,11 @@
   justify-content: center;
   width: 10rem;
   height: 6.25rem;
+  padding: 0;
   border: 0;
   border-radius: 1rem;
   background: rgba(255, 255, 255, 0.5);
+  color: inherit;
   cursor: pointer;
   transition: background var(--duration-fast) var(--easing);
 }
@@ -518,7 +524,8 @@
   height: auto;
   object-fit: cover;
 }
-.ab-members__logo.is-active, .ab-members__logo:hover {
+.ab-members__logo.active,
+.ab-members__logo:hover {
   background: rgb(255, 255, 255);
 }
 

public/themes/dist_static/static/js/about.js

@@ -59,51 +59,6 @@ function initHistorySwiper() {
 		on: { slideChange: updateFarClass }
 	}));
 }
-function initMemberLogos() {
-	const root = document.querySelector(".ab-members");
-	if (!root) return;
-	const nameEl = root.querySelector("#ab-members-name");
-	const descEl = root.querySelector("#ab-members-desc");
-	const contentEl = root.querySelector(".ab-members__content > div");
-	const logos = root.querySelectorAll(".ab-members__logo");
-	if (!nameEl || !descEl || !logos.length) return;
-	const applyMember = (btn) => {
-		const name = btn.getAttribute("data-name") || "";
-		const desc = btn.getAttribute("data-desc") || "";
-		if (!name && !desc) return;
-		const update = () => {
-			nameEl.textContent = name;
-			descEl.textContent = desc;
-		};
-		if (!contentEl || !contentEl.animate) {
-			update();
-			return;
-		}
-		contentEl.animate([{ opacity: 1 }, { opacity: 0 }], {
-			duration: 160,
-			fill: "forwards",
-			easing: "ease"
-		}).finished.then(() => {
-			update();
-			contentEl.animate([{ opacity: 0 }, { opacity: 1 }], {
-				duration: 220,
-				fill: "forwards",
-				easing: "ease"
-			});
-		});
-	};
-	logos.forEach((btn) => {
-		btn.addEventListener("click", () => {
-			if (btn.classList.contains("is-active")) return;
-			logos.forEach((item) => {
-				const active = item === btn;
-				item.classList.toggle("is-active", active);
-				item.setAttribute("aria-selected", active ? "true" : "false");
-			});
-			applyMember(btn);
-		});
-	});
-}
 function initHonorsToggle() {
 	const list = document.querySelector(".ab-honors__list");
 	const btn = document.querySelector(".ab-honors__more");
@@ -122,7 +77,6 @@ function initHonorsToggle() {
 $(function() {
 	setActiveNav();
 	initHistorySwiper();
-	initMemberLogos();
 	counterUpInit();
 	initHonorsToggle();
 });

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

@@ -312,36 +312,87 @@
       <div class="ab-members__inner section__wrap">
         <h2 class="ab-members__title">集团成员</h2>
         <div class="ab-members__card">
-          <div class="ab-members__content">
-            <div>
-              <h3 class="ab-members__name" id="ab-members-name">上海睿能高齐自动化有限公司</h3>
-              <p class="ab-members__desc" id="ab-members-desc">
-                上海睿能高齐自动化有限公司成立于2018年，是睿能科技旗下全资子公司。睿能自动化主要从事工业物联网、HMI、PLC、伺服系统、变频器等工业自动化产品的研发、生产、销售及系统集成......</p>
+          <div class="ab-members__panels tab-content">
+            <div class="ab-members__panel tab-pane fade show active" id="ab-member-panel-0" role="tabpanel" aria-labelledby="ab-member-tab-0" tabindex="0">
+              <div class="ab-members__content">
+                <div>
+                  <h3 class="ab-members__name">上海睿能高齐自动化有限公司</h3>
+                  <p class="ab-members__desc">
+                    上海睿能高齐自动化有限公司成立于2018年，是睿能科技旗下全资子公司。睿能自动化主要从事工业物联网、HMI、PLC、伺服系统、变频器等工业自动化产品的研发、生产、销售及系统集成......
+                  </p>
+                </div>
+                <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
+              </div>
+            </div>
+            <div class="ab-members__panel tab-pane fade" id="ab-member-panel-1" role="tabpanel" aria-labelledby="ab-member-tab-1" tabindex="0">
+              <div class="ab-members__content">
+                <div>
+                  <h3 class="ab-members__name">奇电电气（GIROD）</h3>
+                  <p class="ab-members__desc">
+                    奇电电气专注工业电气与自动化配套产品，具备研发、制造与系统集成能力。并入睿能科技后，持续完善工业自动化产品矩阵，强化全产业链协同与交付能力。
+                  </p>
+                </div>
+                <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
+              </div>
+            </div>
+            <div class="ab-members__panel tab-pane fade" id="ab-member-panel-2" role="tabpanel" aria-labelledby="ab-member-tab-2" tabindex="0">
+              <div class="ab-members__content">
+                <div>
+                  <h3 class="ab-members__name">深圳亿维自动化有限公司</h3>
+                  <p class="ab-members__desc">
+                    深圳亿维自动化（UniMAT）深耕可编程控制器与工业自动化控制产品，面向离散制造与过程控制等场景提供可靠的控制解决方案，助力客户实现设备智能化升级。
+                  </p>
+                </div>
+                <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
+              </div>
+            </div>
+            <div class="ab-members__panel tab-pane fade" id="ab-member-panel-3" role="tabpanel" aria-labelledby="ab-member-tab-3" tabindex="0">
+              <div class="ab-members__content">
+                <div>
+                  <h3 class="ab-members__name">贝诺国际（Burnon International）</h3>
+                  <p class="ab-members__desc">
+                    贝诺国际专注相关领域的技术与市场拓展，依托睿能科技平台资源，持续推进产品与解决方案的国际化布局，服务更广泛的行业客户与合作伙伴。
+                  </p>
+                </div>
+                <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
+              </div>
+            </div>
+            <div class="ab-members__panel tab-pane fade" id="ab-member-panel-4" role="tabpanel" aria-labelledby="ab-member-tab-4" tabindex="0">
+              <div class="ab-members__content">
+                <div>
+                  <h3 class="ab-members__name">琪利软件（Qili Software）</h3>
+                  <p class="ab-members__desc">
+                    琪利软件专注工业软件与数字化相关产品研发，围绕自动化控制与智能制造场景，为客户提供软件工具、系统集成与技术服务，赋能生产效率提升。
+                  </p>
+                </div>
+                <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
+              </div>
             </div>
-            <a class="s-btn s-btn--outline s-btn--pill ab-members__more" href="#">探索更多</a>
           </div>
-          <div class="ab-members__logos" role="tablist" aria-label="集团成员">
-            <button type="button" class="ab-members__logo is-active" role="tab" aria-selected="true"
-              data-name="上海睿能高齐自动化有限公司"
-              data-desc="上海睿能高齐自动化有限公司成立于2018年，是睿能科技旗下全资子公司。睿能自动化主要从事工业物联网、HMI、PLC、伺服系统、变频器等工业自动化产品的研发、生产、销售及系统集成......">
+          <div class="ab-members__logos nav" role="tablist" aria-label="集团成员">
+            <button type="button" class="ab-members__logo nav-link active" id="ab-member-tab-0"
+              data-bs-toggle="tab" data-bs-target="#ab-member-panel-0"
+              role="tab" aria-controls="ab-member-panel-0" aria-selected="true">
               <img src="/themes/dist_static/static/images/section-5-logo-1-DVpbfFy_.png" alt="上海睿能高齐" width="160" height="60" />
             </button>
-            <button type="button" class="ab-members__logo" role="tab" aria-selected="false" data-name="奇电电气（GIROD）"
-              data-desc="奇电电气专注工业电气与自动化配套产品，具备研发、制造与系统集成能力。并入睿能科技后，持续完善工业自动化产品矩阵，强化全产业链协同与交付能力。">
+            <button type="button" class="ab-members__logo nav-link" id="ab-member-tab-1"
+              data-bs-toggle="tab" data-bs-target="#ab-member-panel-1"
+              role="tab" aria-controls="ab-member-panel-1" aria-selected="false">
               <img src="/themes/dist_static/static/images/section-5-logo-2-D0uWVRPO.png" alt="奇电电气" width="160" height="60" />
             </button>
-            <button type="button" class="ab-members__logo" role="tab" aria-selected="false" data-name="深圳亿维自动化有限公司"
-              data-desc="深圳亿维自动化（UniMAT）深耕可编程控制器与工业自动化控制产品，面向离散制造与过程控制等场景提供可靠的控制解决方案，助力客户实现设备智能化升级。">
+            <button type="button" class="ab-members__logo nav-link" id="ab-member-tab-2"
+              data-bs-toggle="tab" data-bs-target="#ab-member-panel-2"
+              role="tab" aria-controls="ab-member-panel-2" aria-selected="false">
               <img src="/themes/dist_static/static/images/section-5-logo-3-fn6Kr4ds.png" alt="亿维自动化" width="160" height="60" />
             </button>
-            <button type="button" class="ab-members__logo" role="tab" aria-selected="false"
-              data-name="贝诺国际（Burnon International）"
-              data-desc="贝诺国际专注相关领域的技术与市场拓展，依托睿能科技平台资源，持续推进产品与解决方案的国际化布局，服务更广泛的行业客户与合作伙伴。">
+            <button type="button" class="ab-members__logo nav-link" id="ab-member-tab-3"
+              data-bs-toggle="tab" data-bs-target="#ab-member-panel-3"
+              role="tab" aria-controls="ab-member-panel-3" aria-selected="false">
               <img src="/themes/dist_static/static/images/section-5-logo-4-CZyQbg-M.png" alt="贝诺国际" width="160" height="60" />
             </button>
-            <button type="button" class="ab-members__logo" role="tab" aria-selected="false"
-              data-name="琪利软件（Qili Software）"
-              data-desc="琪利软件专注工业软件与数字化相关产品研发，围绕自动化控制与智能制造场景，为客户提供软件工具、系统集成与技术服务，赋能生产效率提升。">
+            <button type="button" class="ab-members__logo nav-link" id="ab-member-tab-4"
+              data-bs-toggle="tab" data-bs-target="#ab-member-panel-4"
+              role="tab" aria-controls="ab-member-panel-4" aria-selected="false">
               <img src="/themes/dist_static/static/images/section-5-logo-5-Bbt0mBYA.png" alt="琪利软件" width="160" height="60" />
             </button>
           </div>