From 366681945a1644844e264b3efb62be5cb4358eea Mon Sep 17 00:00:00 2001
From: zhangjianjun <zhangjianjun@batiao8.com>
Date: Sat, 28 Mar 2026 11:28:02 +0800
Subject: [PATCH] ud

---
 .../layout/BottomTabsSection/index.tsx        |  2 +-
 .../layout/HonorGrids/index.module.css        |  4 ++++
 .../layout/RowAccordion/index.module.css      |  3 ++-
 .../layout/TopTabsSection/TopTabs.tsx         |  3 +++
 .../layout/TopTabsSection/index.module.css    | 20 ++++++++++++++++-
 .../layout/TopTabsSection/index.tsx           |  2 +-
 .../Business/CommercialGroupDetail.module.css |  4 ++++
 src/pages/Business/CommercialGroupDetail.tsx  |  2 +-
 src/pages/Join/Campus.module.css              | 15 ++++++++++++-
 src/pages/Join/Campus.tsx                     | 22 ++++++++++++++++---
 10 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/BottomTabsSection/index.tsx b/src/components/layout/BottomTabsSection/index.tsx
index 09b400a..460a8ce 100644
--- a/src/components/layout/BottomTabsSection/index.tsx
+++ b/src/components/layout/BottomTabsSection/index.tsx
@@ -125,7 +125,7 @@ export default function BottomTabsSection({ data }: { data: Data }) {
                                     tabItemRefs.current[i] = el;
                                 }}
                                 className={styles.bottomTabsSectionContentTab}
-                                onClick={() => setActiveIndex(i)}
+                                onMouseEnter={() => setActiveIndex(i)}
                             >
                                 <span>{item.tabName}</span>
                             </div>
diff --git a/src/components/layout/HonorGrids/index.module.css b/src/components/layout/HonorGrids/index.module.css
index f131ecc..1d2229a 100644
--- a/src/components/layout/HonorGrids/index.module.css
+++ b/src/components/layout/HonorGrids/index.module.css
@@ -46,6 +46,10 @@
                 line-height: 1.875rem;
             }
 
+            .honorGridsItemTitle {
+                font-size: 1.25rem;
+            }
+
             .honorGridsItemBgleft,
             .honorGridsItemBgright {
                 width: 4.375rem;
diff --git a/src/components/layout/RowAccordion/index.module.css b/src/components/layout/RowAccordion/index.module.css
index 820bb68..5465808 100644
--- a/src/components/layout/RowAccordion/index.module.css
+++ b/src/components/layout/RowAccordion/index.module.css
@@ -83,7 +83,7 @@
             
             
             .contentItemTitle {
-                height: 6.25rem;
+                /* height: 6.25rem; */
                 font-weight: 500;
                 font-size: 1.5rem;
                 color: #FFFFFF;
@@ -109,6 +109,7 @@
                 justify-content: space-between;
                 /* padding: 3.75rem 0; */
                 margin-top: 1.25rem;
+                margin-top: 2.5rem;
             }
             .contentItemContent {
                 font-size: 1rem;
diff --git a/src/components/layout/TopTabsSection/TopTabs.tsx b/src/components/layout/TopTabsSection/TopTabs.tsx
index 3f12187..e23d3b9 100644
--- a/src/components/layout/TopTabsSection/TopTabs.tsx
+++ b/src/components/layout/TopTabsSection/TopTabs.tsx
@@ -154,6 +154,9 @@ export default function TopTabs({ data, activeIndex, setActiveIndex, className }
                         width: indicatorStyle.width,
                     }}
                 />
+                <div
+                    className={styles.topTabsBottomLineWhite}
+                />
             </div>
         </div>
     );
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
index 9376756..ac8c8ed 100644
--- a/src/components/layout/TopTabsSection/index.module.css
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -69,6 +69,7 @@
 
 .topTabsTabsScrollCenter {
     justify-content: center;
+    /* gap: 130px; */
 }
 
 .topTabsBottomLine {
@@ -77,6 +78,15 @@
     height: .125rem;
     background: #14355C;
     transition: left 0.25s ease, width 0.25s ease;
+    z-index: 1;
+}
+.topTabsBottomLineWhite {
+    position: absolute;
+    bottom: -1px;
+    width: 100%;
+    height: .125rem;
+    background: #D5D8DC;
+    z-index: 0;
 }
 
 .topTabsTabItem {
@@ -107,7 +117,7 @@
     .topTabsContentLeftHead {
         margin-bottom: 1.875rem;
         display: flex;
-        gap: .625rem;
+        /* gap: .625rem; */
 
         .topTabsContentLeftTitle {
             display: flex;
@@ -122,6 +132,10 @@
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
+                width: 32.5rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             .topTabsContentLeftTitleSub {
@@ -132,6 +146,10 @@
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
+                width: 32.5rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
         }
 
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
index ed64d8c..ca8b115 100644
--- a/src/components/layout/TopTabsSection/index.tsx
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -63,7 +63,7 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
                                 <ScrollReveal preset="slideRight" delay={0.3} >
                                 {
                                     data.tabItems[activeIndex].icon && (
-                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem' }} />
+                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem', marginRight: '1.25rem' }} />
                                     )
                                 }
                                 </ScrollReveal>
diff --git a/src/pages/Business/CommercialGroupDetail.module.css b/src/pages/Business/CommercialGroupDetail.module.css
index 0d16491..6c558e6 100644
--- a/src/pages/Business/CommercialGroupDetail.module.css
+++ b/src/pages/Business/CommercialGroupDetail.module.css
@@ -95,6 +95,10 @@
     }
 }
 
+.twoColSectionTabs {
+    min-height: auto;
+}
+
 @media (max-width: 48rem) {
     .twoColSection,
     .threeColSection {
diff --git a/src/pages/Business/CommercialGroupDetail.tsx b/src/pages/Business/CommercialGroupDetail.tsx
index fcdab6e..35ba686 100644
--- a/src/pages/Business/CommercialGroupDetail.tsx
+++ b/src/pages/Business/CommercialGroupDetail.tsx
@@ -26,7 +26,7 @@ export default function BusinessCommercialGroupDetail() {
 
             <ParagraphSection data={data.section1Data}></ParagraphSection>
 
-            <TopTabsSection data={data.section2Data as any} />
+            <TopTabsSection className={styles.twoColSectionTabs} data={data.section2Data as any} />
         </div>
     );
 }
diff --git a/src/pages/Join/Campus.module.css b/src/pages/Join/Campus.module.css
index 331d48a..9bf949e 100644
--- a/src/pages/Join/Campus.module.css
+++ b/src/pages/Join/Campus.module.css
@@ -21,6 +21,13 @@
             color: #14355C;
             line-height: 3.125rem;
             outline: none;
+            background: #fff;
+
+            &:hover {
+                transform: scale(1.01);
+                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+                transition: all 0.3s ease;
+            }
         }
     }
 
@@ -205,8 +212,14 @@
     color: #999999;
 }
 
-.selectDownIcon {
+.selectSuffixTrigger {
+    display: inline-flex;
+    align-items: center;
     margin-left: .3125rem;
+    cursor: pointer;
+}
+
+.selectDownIcon {
     color: #999999;
 }
 
diff --git a/src/pages/Join/Campus.tsx b/src/pages/Join/Campus.tsx
index 8c93226..4aa6684 100644
--- a/src/pages/Join/Campus.tsx
+++ b/src/pages/Join/Campus.tsx
@@ -187,13 +187,18 @@ type SelectFormItemProps = {
   onChange: (value: string) => void;
 }
 function SelectFormItem({ value, options, label, onChange }: SelectFormItemProps) {
+  const [open, setOpen] = useState(false);
+  const selectId = `select-${label.replace(/\s/g, "-")}`;
+
   return (
     <div className={styles.selectFormItem}>
-      <label className={styles.selectFormItemLabel} htmlFor={`select-${label.replace(/\s/g, "-")}`}>{label}</label>
+      <label className={styles.selectFormItemLabel} htmlFor={selectId}>{label}</label>
       <div className={styles.selectFormItemBox}>
         <Select
-          id={`select-${label.replace(/\s/g, "-")}`}
+          id={selectId}
           className={styles.selectFormItemSelect}
+          open={open}
+          onOpenChange={setOpen}
           showSearch
           placeholder="全部"
           notFoundContent="无数据"
@@ -205,7 +210,18 @@ function SelectFormItem({ value, options, label, onChange }: SelectFormItemProps
           value={value}
           onChange={v => onChange(v ?? "")}
           prefix={<FilterOutlined className={styles.selectFilterIcon} />}
-          suffixIcon={<DownOutlined className={styles.selectDownIcon} />}
+          suffixIcon={
+            <span
+              className={styles.selectSuffixTrigger}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setOpen((v) => !v);
+              }}
+            >
+              <DownOutlined className={styles.selectDownIcon} />
+            </span>
+          }
           bordered={false}
         />
       </div>