ud

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>

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;

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;

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>
     );

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;
             }
         }
 

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>

src/pages/Business/CommercialGroupDetail.module.css

@@ -95,6 +95,10 @@
     }
 }
 
+.twoColSectionTabs {
+    min-height: auto;
+}
+
 @media (max-width: 48rem) {
     .twoColSection,
     .threeColSection {

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>
     );
 }

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;
 }
 

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>