ud

src/components/layout/TopTabsSection/TopTabs.tsx

@@ -110,19 +110,20 @@ export default function TopTabs({ data, activeIndex, setActiveIndex, className }
 
 
     return (
-        <div className={className}>
+        <div className={className} style={{position: 'relative'}}>
+            {canScrollLeft && (
+                <button
+                    type="button"
+                    className={`${styles.topTabsNavBtn} ${styles.topTabsNavBtnLeft}`}
+                    onClick={handleScrollLeft}
+                    aria-label="向左滚动"
+                >
+                    <LeftOutlined />
+                </button>
+            )}
             <div ref={containerRef} className={styles.topTabsTabs}
             >
-                {canScrollLeft && (
-                    <button
-                        type="button"
-                        className={`${styles.topTabsNavBtn} ${styles.topTabsNavBtnLeft}`}
-                        onClick={handleScrollLeft}
-                        aria-label="向左滚动"
-                    >
-                        <LeftOutlined />
-                    </button>
-                )}
+
                 <div
                     ref={scrollRef}
                     className={`${styles.topTabsTabsScroll} ${shouldCenter ? styles.topTabsTabsScrollCenter : ''}`}
@@ -137,16 +138,7 @@ export default function TopTabs({ data, activeIndex, setActiveIndex, className }
                         </div>
                     ))}
                 </div>
-                {canScrollRight && (
-                    <button
-                        type="button"
-                        className={`${styles.topTabsNavBtn} ${styles.topTabsNavBtnRight}`}
-                        onClick={handleScrollRight}
-                        aria-label="向右滚动"
-                    >
-                        <RightOutlined />
-                    </button>
-                )}
+
                 <div
                     className={styles.topTabsBottomLine}
                     style={{
@@ -158,6 +150,16 @@ export default function TopTabs({ data, activeIndex, setActiveIndex, className }
                     className={styles.topTabsBottomLineWhite}
                 />
             </div>
+            {canScrollRight && (
+                <button
+                    type="button"
+                    className={`${styles.topTabsNavBtn} ${styles.topTabsNavBtnRight}`}
+                    onClick={handleScrollRight}
+                    aria-label="向右滚动"
+                >
+                    <RightOutlined />
+                </button>
+            )}
         </div>
     );
 }

src/components/layout/TopTabsSection/index.module.css

@@ -15,7 +15,7 @@
     line-height: 2.125rem;
     /* border-bottom: .0625rem solid #D5D8DC; */
     width: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
 }
 
 .topTabsNavBtn {
@@ -42,11 +42,11 @@
 }
 
 .topTabsNavBtnLeft {
-    left: 0rem;
+    left: -80px;
 }
 
 .topTabsNavBtnRight {
-    right: 0rem;
+    right: -80px;
 }
 
 .topTabsTabsScroll {
@@ -54,7 +54,9 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    gap: 8.125rem;
+    padding: 0 20px;
+    gap: 70px;
+    /* gap: 8.125rem; */
     height: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
@@ -69,7 +71,7 @@
 
 .topTabsTabsScrollCenter {
     justify-content: center;
-    /* gap: 130px; */
+    gap: 8.125rem;
 }
 
 .topTabsBottomLine {

src/pages/Social/Foundation.tsx

@@ -71,8 +71,8 @@ export default function Foundation() {
     return (
         <div>
             <Banner
-                icon={banner?.icon && <img src={banner?.icon} alt="" style={{ width: '26rem', height: '8.375rem' }} />}
-                subtitle={banner?.title ?? ""}
+                icon={banner?.icon && <img src={banner?.icon} alt="" style={{ width: '26rem', height: '8.375rem', marginLeft: "-60px" }} />}
+                largedesc={banner?.title ?? ""}
                 content={(banner as BannerConfig)?.content}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}