diff --git a/src/App.css b/src/App.css
index e6f1579..b2d95c5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -141,4 +141,9 @@ body {
 
 .logo-dark {
   filter: brightness(0) saturate(100%) invert(16%) sepia(25%) saturate(4500%) hue-rotate(223deg) brightness(80%) contrast(85%);
+}
+
+.w-72-inner {
+  margin: 0 auto;
+  width: 72%;
 }
\ No newline at end of file
diff --git a/src/components/Banner.module.css b/src/components/Banner.module.css
index d655dd2..7fcff0f 100644
--- a/src/components/Banner.module.css
+++ b/src/components/Banner.module.css
@@ -10,6 +10,14 @@
   justify-content: flex-end;
 }
 
+.heroIcon {
+  width: 10rem;
+  height: 10rem;
+  object-fit: cover;
+  margin-left: -1.875rem;
+  margin-bottom: -2.5rem;
+}
+
 .bgSwiper {
   position: absolute;
   inset: 0;
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 16e6fe8..48f8306 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -40,7 +40,7 @@ function BannerSlideVideo({
         if (!v) return;
         if (active) {
             v.currentTime = 0;
-            void v.play().catch(() => {});
+            void v.play().catch(() => { });
         } else {
             v.pause();
         }
@@ -60,6 +60,7 @@ type Props = {
     largedesc?: string;
     titleSize?: "large" | "medium" | string;
     backgroundImage: string | string[];
+    icon?: string;
 };
 
 export default function Banner({
@@ -70,6 +71,7 @@ export default function Banner({
     largedesc,
     titleSize = "large",
     backgroundImage,
+    icon
 }: Props) {
     const appConfig = useStore((s) => s.appConfig);
     const navItems = appConfig?.navItems ?? [];
@@ -115,7 +117,10 @@ export default function Banner({
     const heroContent = (
         <div className={styles.heroContent} style={{ gap: "1.875rem" }}>
             <ScrollReveal preset="slideUp">
-                <h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
+                {icon ? <img src={icon} alt="" className={styles.heroIcon} />
+                    :
+                    <h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
+                }
             </ScrollReveal>
             {subtitle && <ScrollReveal preset="slideUp" delay={0.2}>
                 <h2 className={styles.heroSubtitle}>{subtitle}</h2>
@@ -128,7 +133,7 @@ export default function Banner({
             </ScrollReveal>}
             <ScrollReveal preset="fadeIn" delay={0.2}>
                 <div className={styles.breadcrumb}>
-                    { !notShowBreadcrumbPaths.includes(location.pathname) &&
+                    {!notShowBreadcrumbPaths.includes(location.pathname) &&
                         (breadcrumbItems ?? []).map((item, i) => (
                             <span key={i}>
                                 {i > 0 && <span>{" > "}</span>}
diff --git a/src/components/SineWaveTimeline/index.module.css b/src/components/SineWaveTimeline/index.module.css
index 804a247..96adf84 100644
--- a/src/components/SineWaveTimeline/index.module.css
+++ b/src/components/SineWaveTimeline/index.module.css
@@ -1,8 +1,14 @@
 .scrollContainer {
   width: 100%;
   overflow-x: auto;
-  overflow-y: auto;
+  overflow-y: hidden;
   cursor: all-scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollContainer::-webkit-scrollbar {
+  display: none;
 }
 
 .content {
@@ -86,3 +92,5 @@
   list-style: disc;
   margin-left: 1.25em;
 }
+
+
diff --git a/src/components/layout/Article/index.module.css b/src/components/layout/Article/index.module.css
index 241932e..e6073fe 100644
--- a/src/components/layout/Article/index.module.css
+++ b/src/components/layout/Article/index.module.css
@@ -1,6 +1,6 @@
 .article {
     width: 100%;
-    /* min-height: 100vh; */
+    min-height: 100vh;
     padding: 7.5rem 0;
 
     .articleHeaderLine, .articleHeader, .articleContent, .articleBottomLine {
diff --git a/src/components/layout/BottomTabsSection/index.module.css b/src/components/layout/BottomTabsSection/index.module.css
index bf2c083..ea3b792 100644
--- a/src/components/layout/BottomTabsSection/index.module.css
+++ b/src/components/layout/BottomTabsSection/index.module.css
@@ -54,8 +54,9 @@
     .contentText { 
       font-weight: 400;
       font-size: 1.125rem;
-      line-height: 1.625rem;
+      line-height: 2.5rem;
       margin-top: 1.25rem;
+      white-space: pre-line;
     }
   }
   
diff --git a/src/components/layout/HonorGrids/index.tsx b/src/components/layout/HonorGrids/index.tsx
index b6d3db5..f2e5b00 100644
--- a/src/components/layout/HonorGrids/index.tsx
+++ b/src/components/layout/HonorGrids/index.tsx
@@ -3,6 +3,7 @@ import styles from './index.module.css';
 
 type Data = {
     title: string;
+    backgroundImage: string;
     items: {
         largeTitle: string;
         title: string;
@@ -10,7 +11,7 @@ type Data = {
 }
 export default function HonorGrids({ data }: { data: Data }) {
     return (
-        <section className={styles.honorGrids}>
+        <section className={styles.honorGrids} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
             <div className={styles.honorGridsTitle}>{data.title}</div>
 
             <div className={styles.honorGridsItems}>
diff --git a/src/components/layout/Section/index.module.css b/src/components/layout/Section/index.module.css
index 61b90ec..24c2bc9 100644
--- a/src/components/layout/Section/index.module.css
+++ b/src/components/layout/Section/index.module.css
@@ -8,8 +8,8 @@
 }
 
 .sectionContent {
-    /* width: 72%; */
-    /* margin: 0 auto; */
+    /* width: 72%;
+    margin: 0 auto; */
 }
 
 .mask {
diff --git a/src/components/layout/SwiperCardSection/index.module.css b/src/components/layout/SwiperCardSection/index.module.css
index 3f812be..70003a2 100644
--- a/src/components/layout/SwiperCardSection/index.module.css
+++ b/src/components/layout/SwiperCardSection/index.module.css
@@ -2,6 +2,9 @@
     min-height: calc(100vh / var(--zoom-compensation, 1));
     padding: 6.25rem 16.25rem;
     background: #D8D8D8;
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
 }
 
 .carouselWrapper {
@@ -115,9 +118,10 @@
         .swiperDesc {
             font-size: 1rem;
             color: #FFFFFF;
-            line-height: 1.5rem;
+            line-height: 1.875rem;
             margin: 2.5rem 3.75rem;
             opacity: 0;
+            white-space: pre-line;
         }
     }
 }
diff --git a/src/components/layout/SwiperCardSection/index.tsx b/src/components/layout/SwiperCardSection/index.tsx
index fe017ad..d73c696 100644
--- a/src/components/layout/SwiperCardSection/index.tsx
+++ b/src/components/layout/SwiperCardSection/index.tsx
@@ -9,6 +9,7 @@ import { useLocation } from "react-router-dom";
 import ScrollReveal from "@/components/ScrollReveal";
 type Data = {
     title: string;
+    backgroundImage?: string;
     cardItems: {
         title: string;
         desc?: string;
@@ -39,7 +40,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
         }
     }, [hashId, data.cardItems, swiperRef])
     return (
-        <section className={styles.swiperCardSection} id={data.cardItems[activeIndex]?.title}>
+        <section className={styles.swiperCardSection} id={data.cardItems[activeIndex]?.title} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
             <SectionTitle title={data.title} />
             <div className={styles.carouselWrapper} >
                 {activeIndex > 0 && (
@@ -48,7 +49,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
                         className={styles.navBtn}
                         onClick={() => swiperRef?.slidePrev()}
                     >
-                        <LeftOutlined color="#14355C" />
+                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" width="24" height="24"><path d="M737.9 888.2L361.7 512l376.2-376.2c16.4-16.4 16.4-43.1 0-59.5s-43.1-16.4-59.5 0L295.8 458.9c-14.2 14.2-22 33-22 53.1s7.8 38.9 22 53.1l382.6 382.6c16.4 16.4 43.1 16.4 59.5 0 16.4-16.5 16.4-43.1 0-59.5z" fill="#272636" p-id="2822"></path></svg>
                     </button>
                 )}
                 <Swiper
@@ -62,16 +63,16 @@ export default function SwiperCardSection({ data }: { data: Data }) {
                     {data.cardItems.map((item, index) => (
                         <SwiperSlide key={item.title}>
                             <ScrollReveal preset="slideUp" amount={0.2} delay={index > 2 ? 0 : index * 0.5}>
-                            <div className={styles.swiperCardItem}>
-                                <img src={item.backgroundImage ?? item.image ?? ""} alt={item.title} />
-                                <div className={styles.swiperMask}></div>
-                                <div className={styles.swiperContent}>
-                                    <div className={styles.swiperTitle}>
-                                        <span>{item.title}</span>
+                                <div className={styles.swiperCardItem}>
+                                    <img src={item.backgroundImage ?? item.image ?? ""} alt={item.title} />
+                                    <div className={styles.swiperMask}></div>
+                                    <div className={styles.swiperContent}>
+                                        <div className={styles.swiperTitle}>
+                                            <span>{item.title}</span>
+                                        </div>
+                                        <p className={styles.swiperDesc}>{item.content ?? item.desc}</p>
                                     </div>
-                                    <p className={styles.swiperDesc}>{item.content ?? item.desc}</p>
                                 </div>
-                            </div>
                             </ScrollReveal>
                         </SwiperSlide>
                     ))}
@@ -82,7 +83,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
                         className={`${styles.navBtn} ${styles.nextBtn}`}
                         onClick={() => swiperRef?.slideNext()}
                     >
-                        <RightOutlined color="#14355C" />
+                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1638" width="24" height="24"><path d="M318.57 223.95l322.99 322.99c21.87 21.87 57.33 21.87 79.2 0 21.87-21.87 21.87-57.33 0-79.2l-323-322.99c-21.87-21.87-57.33-21.87-79.2 0-21.86 21.87-21.86 57.33 0.01 79.2z" fill="#14355C" p-id="1639"></path><path d="M729.75 555.95L406.76 878.93c-21.87 21.87-57.33 21.87-79.2 0-21.87-21.87-21.87-57.33 0-79.2l322.99-322.99c21.87-21.87 57.33-21.87 79.2 0 21.87 21.88 21.87 57.34 0 79.21z" fill="#14355C" p-id="1640"></path></svg>
                     </button>
                 )}
             </div>
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
index 54abd29..9376756 100644
--- a/src/components/layout/TopTabsSection/index.module.css
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -13,14 +13,14 @@
     font-weight: 400;
     font-size: 1.5rem;
     line-height: 2.125rem;
-    border-bottom: .0625rem solid #D5D8DC;
+    /* border-bottom: .0625rem solid #D5D8DC; */
     width: 100%;
+    overflow: hidden;
 }
 
 .topTabsNavBtn {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 0%;
     z-index: 1;
     width: 2.25rem;
     height: 2.25rem;
@@ -85,11 +85,12 @@
     flex-shrink: 0;
     cursor: pointer;
     color: #222222;
-    font-weight: 500;
+    font-weight: 400;
 }
 
 .topTabsTabItem.active {
     color: #14355C;
+    font-weight: 600;
 }
 
 .topTabsContent {
@@ -162,11 +163,10 @@
 }
 
 .topTabsContentItems {
-    width: 57.5rem;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1.25rem;
+    gap: 1.25rem 12.5rem;
 }
 
 .topTabsContentItem {
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
index 89e6cb9..ed64d8c 100644
--- a/src/components/layout/TopTabsSection/index.tsx
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -79,8 +79,11 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
                             </div>
                         </div>
                         <ScrollReveal preset="slideUp" delay={0.9} duration={1.1}>
-                            <p className={styles.topTabsContentLeftDesc}>
-                                {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content}
+                            <p className={`${styles.topTabsContentLeftDesc} normal-p`}
+                            
+                            dangerouslySetInnerHTML={{ __html: data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content as any }}
+                            >
+                                {/* {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} */}
                             </p>
                         </ScrollReveal>
                     </div>
diff --git a/src/layouts/Footer.module.css b/src/layouts/Footer.module.css
index a429431..885c6ff 100644
--- a/src/layouts/Footer.module.css
+++ b/src/layouts/Footer.module.css
@@ -24,7 +24,7 @@
 .footerTitle {
   font-size: .875rem;
   font-weight: 600;
-  color: #333;
+  color: #222;
   margin-bottom: .25rem;
 }
 
diff --git a/src/layouts/Header.module.css b/src/layouts/Header.module.css
index 0631ad5..3f96b2a 100644
--- a/src/layouts/Header.module.css
+++ b/src/layouts/Header.module.css
@@ -258,6 +258,10 @@
   line-height: 3.125rem;
   color: #222222;
   text-decoration: none;
+
+  &:hover {
+    color: #14355C;
+  }
 }
 
 @media (max-width: 64rem) {
diff --git a/src/pages/About/Founder.module.css b/src/pages/About/Founder.module.css
index e3d2ad1..98e0704 100644
--- a/src/pages/About/Founder.module.css
+++ b/src/pages/About/Founder.module.css
@@ -166,6 +166,8 @@
   grid-auto-rows: auto;
   align-items: start;
   gap: 1rem;
+  width: 70%;
+  margin: 0 auto;
 }
 
 .section3Item {
@@ -195,7 +197,7 @@
   }
   .timelineWrapper {
     width: 100%;
-    overflow: auto;
+    overflow: hidden;
   }
 }
 
@@ -252,4 +254,26 @@
   .images .imageOverlay {
     padding: 1.5rem;
   }
+}
+
+.virtualScrollBar {
+  width: 82.4375rem;
+  height: 6px;
+  background: #DFE4EA;
+  border-radius: 450px 450px 450px 450px;
+  margin: 0 auto;
+  cursor: pointer;
+  max-width: calc(100% - 2rem);
+  margin-bottom: 6.25rem;
+  margin-top: 20px;
+
+  .virtualScrollBarInner {
+    width: 0;
+    height: 6px;
+    background: #14355C;
+    border-radius: 450px 450px 450px 450px;
+    transform: translateX(0px);
+    transition: transform 0.2s ease-out;
+    cursor: grab;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/About/Founder.tsx b/src/pages/About/Founder.tsx
index 901859a..72a2b0d 100644
--- a/src/pages/About/Founder.tsx
+++ b/src/pages/About/Founder.tsx
@@ -101,6 +101,12 @@ export default function AboutFounder() {
 function TimeLineComponent({ section4Data }: { section4Data: any }) {
     const refElement = useRef<HTMLDivElement>(null);
     const sectionRef = useRef<HTMLElement>(null);
+    const virtualBarRef = useRef<HTMLDivElement>(null);
+    const [thumbLeft, setThumbLeft] = useState(0);
+    const [thumbWidth, setThumbWidth] = useState(0);
+    const [isDraggingThumb, setIsDraggingThumb] = useState(false);
+    const dragStartX = useRef(0);
+    const dragStartScrollLeft = useRef(0);
     const [isSectionInView, setIsSectionInView] = useState(false);
 
     useEffect(() => {
@@ -133,6 +139,40 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
             smoothWheel: true,
         });
 
+        const updateVirtualScrollBar = () => {
+            const bar = virtualBarRef.current;
+            if (!bar) return;
+            const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
+            const maxThumbTravel = bar.clientWidth;
+            if (wrapper.scrollWidth <= 0 || bar.clientWidth <= 0) return;
+
+            if (totalScrollable <= 0) {
+                setThumbWidth(bar.clientWidth);
+                setThumbLeft(0);
+                return;
+            }
+
+            const nextThumbWidth = Math.max(
+                (wrapper.clientWidth / wrapper.scrollWidth) * bar.clientWidth,
+                72
+            );
+            const maxLeft = Math.max(maxThumbTravel - nextThumbWidth, 0);
+            const nextLeft = (wrapper.scrollLeft / totalScrollable) * maxLeft;
+
+            setThumbWidth(nextThumbWidth);
+            setThumbLeft(nextLeft);
+        };
+
+        const resizeObserver = new ResizeObserver(() => {
+            updateVirtualScrollBar();
+        });
+        resizeObserver.observe(wrapper);
+        if (content) resizeObserver.observe(content);
+        if (virtualBarRef.current) resizeObserver.observe(virtualBarRef.current);
+
+        wrapper.addEventListener("scroll", updateVirtualScrollBar, { passive: true });
+        updateVirtualScrollBar();
+
         let rafId = 0;
         const raf = (time: number) => {
             lenis.raf(time);
@@ -143,9 +183,61 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
 
         return () => {
             cancelAnimationFrame(rafId);
+            wrapper.removeEventListener("scroll", updateVirtualScrollBar);
+            resizeObserver.disconnect();
             lenis.destroy();
         };
     }, [isSectionInView]);
+
+    const handleTrackClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (!refElement.current || !virtualBarRef.current) return;
+        const wrapper = refElement.current;
+        const barRect = virtualBarRef.current.getBoundingClientRect();
+        const clickedX = event.clientX - barRect.left;
+        const desiredThumbLeft = clickedX - thumbWidth / 2;
+        const maxLeft = Math.max(barRect.width - thumbWidth, 0);
+        const clampedThumbLeft = Math.max(0, Math.min(desiredThumbLeft, maxLeft));
+        const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
+        if (totalScrollable <= 0 || maxLeft <= 0) return;
+        wrapper.scrollLeft = (clampedThumbLeft / maxLeft) * totalScrollable;
+    };
+
+    const handleThumbMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        if (!refElement.current) return;
+        setIsDraggingThumb(true);
+        dragStartX.current = event.clientX;
+        dragStartScrollLeft.current = refElement.current.scrollLeft;
+    };
+
+    useEffect(() => {
+        if (!isDraggingThumb) return;
+
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!refElement.current || !virtualBarRef.current) return;
+            const wrapper = refElement.current;
+            const bar = virtualBarRef.current;
+            const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
+            const maxLeft = Math.max(bar.clientWidth - thumbWidth, 0);
+            if (totalScrollable <= 0 || maxLeft <= 0) return;
+
+            const deltaX = event.clientX - dragStartX.current;
+            const deltaScroll = (deltaX / maxLeft) * totalScrollable;
+            wrapper.scrollLeft = dragStartScrollLeft.current + deltaScroll;
+        };
+
+        const handleMouseUp = () => {
+            setIsDraggingThumb(false);
+        };
+
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isDraggingThumb, thumbWidth]);
+
     return (
         <>
             {section4Data && (
@@ -157,6 +249,13 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
                     <div className={styles.section4Title}>{section4Data?.title}</div>
                     <div className={styles.timelineWrapper}>
                         <SineWaveTimeline items={section4Data?.items ?? []} refElement={refElement} />
+                        <div className={styles.virtualScrollBar} ref={virtualBarRef} onClick={handleTrackClick}>
+                            <div
+                                className={styles.virtualScrollBarInner}
+                                onMouseDown={handleThumbMouseDown}
+                                style={{ width: `${thumbWidth}px`, transform: `translateX(${thumbLeft}px)` }}
+                            />
+                        </div>
                     </div>
                 </section>
             )}
diff --git a/src/pages/About/History.module.css b/src/pages/About/History.module.css
index ca68389..322a26e 100644
--- a/src/pages/About/History.module.css
+++ b/src/pages/About/History.module.css
@@ -9,12 +9,17 @@
   );
   min-height: calc(100vh / var(--zoom-compensation, 1));
   width: 100%;
-  padding: 6.25rem auto;
+  padding: 6.25rem 0;
   padding-bottom: 9.375rem;
   display: flex;
   flex-direction: column;
 }
 
+.sectionInner {
+  margin: 0 auto;
+  width: 72%;
+}
+
 .headRow {
   width: 100%;
   display: flex;
diff --git a/src/pages/About/History.tsx b/src/pages/About/History.tsx
index dbcac60..5ff6dce 100644
--- a/src/pages/About/History.tsx
+++ b/src/pages/About/History.tsx
@@ -58,6 +58,7 @@ export default function AboutHistory() {
             />
 
             <section className={styles.section}>
+                <div className={styles.sectionInner}>
                 <div className={styles.headRow}>
                     <YearPicker placeholder="年份" value={year} onChange={handleYearChange} />
                 </div>
@@ -66,6 +67,7 @@ export default function AboutHistory() {
                     selectedYear={year}
                     onYearChange={setYear}
                 />
+                </div>
             </section>
         </div>
     );
diff --git a/src/pages/Business/BaseGroup.tsx b/src/pages/Business/BaseGroup.tsx
index 97d92c5..da87eb4 100644
--- a/src/pages/Business/BaseGroup.tsx
+++ b/src/pages/Business/BaseGroup.tsx
@@ -20,15 +20,7 @@ export default function BaseGroup() {
     const section5Data = data.section5Data;
 
     const swiperCardData = section2Data
-        ? {
-              title: section2Data.title,
-              cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
-                  title: c.title,
-                  content: c.content,
-                  backgroundImage: c.backgroundImage,
-              })) ?? [],
-          }
-        : null;
+        
 
     const rowAccordionData = section3Data
         ? {
@@ -49,8 +41,8 @@ export default function BaseGroup() {
             {section1Data && <ParagraphSection data={section1Data} />}
             {swiperCardData && <SwiperCardSection data={swiperCardData} />}
             {rowAccordionData && <RowAccordion data={rowAccordionData} placement="top" />}
-            {section4Data && <HonorGrids data={section4Data} />}
             {section5Data && <BottomTabsSection data={section5Data} />}
+            {section4Data && <HonorGrids data={section4Data} />}
         </div>
     );
 }
diff --git a/src/pages/Business/CommercialGroup.tsx b/src/pages/Business/CommercialGroup.tsx
index 813f04b..275007e 100644
--- a/src/pages/Business/CommercialGroup.tsx
+++ b/src/pages/Business/CommercialGroup.tsx
@@ -130,7 +130,7 @@ export default function BusinessCommercialGroup() {
             <section
                 className={`${styles.twoColSection} ${styles.propertyServices}`}
                 style={{
-                    backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}`,
+                    backgroundImage: `url(${section4Data?.backgroundImage}), ${FALLBACK_GRADIENT}`,
                 }}
             >
                 <div className={styles.propertyServicesContent}>
diff --git a/src/pages/Business/CommercialGroupDetail.tsx b/src/pages/Business/CommercialGroupDetail.tsx
index d6587b3..fcdab6e 100644
--- a/src/pages/Business/CommercialGroupDetail.tsx
+++ b/src/pages/Business/CommercialGroupDetail.tsx
@@ -18,6 +18,7 @@ export default function BusinessCommercialGroupDetail() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
+                icon={banner?.icon ?? ""}
                 largedesc={(banner as BannerConfig)?.largeContent}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-commercial-group.png"}
diff --git a/src/pages/Business/InvestGroup.module.css b/src/pages/Business/InvestGroup.module.css
index 4167fb9..9564266 100644
--- a/src/pages/Business/InvestGroup.module.css
+++ b/src/pages/Business/InvestGroup.module.css
@@ -1,24 +1,45 @@
 .investGroup {
     width: 100%;
     height: 50rem;
-    padding: 6.25rem 16.25rem;
+    padding: 6.25rem 0;
     background: rgba(0, 39, 83, 0.7);
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
+
+    .investGroupInner {
+        margin: 0 auto;
+        width: 72%;
+    }
 
     .investGroupContent {
         color: #FFFFFF;
         height: 28.75rem;
+        margin-top: 7.5rem;
 
         .investGroupContentItems {
             display: flex;
             height: 28.75rem;
+            gap: 200px;
+            position: relative;
 
-            .investGroupContentItem:first-child {
+            &::after {
+                content: '';
+                position: absolute;
+                left: 50%;
+                top: -10%;
+                width: 1px;
+                height: 100%;
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            /* .investGroupContentItem:first-child {
                 padding-right: 6.25rem;
             }
 
             .investGroupContentItem:last-child {
                 padding-left: 6.25rem;
-            }
+            } */
 
             .investGroupContentItem {
                 flex: 1;
@@ -57,6 +78,9 @@
     width: 100%;
     padding: 6.25rem 16.25rem;
     background: rgba(255, 255, 255, 0.6);
+    background-size: cover;
+    background-position: center;
+    background-repeat: repeat;
 
     .equityInvestmentItems {
         /* 5列布局 */
@@ -81,6 +105,7 @@
 }
 
 
+
 .industryFoster {
     width: 100%;
     height: calc(100vh / var(--zoom-compensation, 1));
@@ -103,6 +128,7 @@
         background: rgba(20, 53, 92, 0.5);
         color: #fff;
         padding: 3.75rem 3.125rem;
+        margin-left: 16.25rem;
 
         .industryFosterMaskTitle {
             font-weight: 500;
diff --git a/src/pages/Business/InvestGroup.tsx b/src/pages/Business/InvestGroup.tsx
index 416a1cb..fafce6f 100644
--- a/src/pages/Business/InvestGroup.tsx
+++ b/src/pages/Business/InvestGroup.tsx
@@ -30,37 +30,45 @@ export default function InvestGroup() {
             {section1Data && <ParagraphSection data={section1Data} />}
 
             {section2Data && (
-                <section className={styles.investGroup} id={section2Data.title}>
-                    <SectionTitle title={section2Data.title} color="#fff" />
-                    <div className={styles.investGroupContent}>
-                        <div className={styles.investGroupContentItems}>
-                            {section2Data.items?.map((item: { title: string; content: string }, index: number) => (
-                                <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
-                                <div className={styles.investGroupContentItem} key={index}>
-                                    <div className={styles.investGroupContentItemTitle}>{item.title}</div>
-                                    <div className={styles.investGroupContentItemContent}>{item.content}</div>
-                                </div>
-                                </ScrollReveal>
-                            ))}
+                <section className={styles.investGroup} id={section2Data.title} style={{
+                    backgroundImage: `url(${section2Data.backgroundImage})`
+                }}>
+                    <div className={styles.investGroupInner}>
+                        <SectionTitle title={section2Data.title} color="#fff" />
+                        <div className={styles.investGroupContent}>
+                            <div className={styles.investGroupContentItems}>
+                                {section2Data.items?.map((item: { title: string; content: string }, index: number) => (
+                                    <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
+                                        <div className={styles.investGroupContentItem} key={index}>
+                                            <div className={styles.investGroupContentItemTitle}>{item.title}</div>
+                                            <div className={styles.investGroupContentItemContent}>{item.content}</div>
+                                        </div>
+                                    </ScrollReveal>
+                                ))}
+                            </div>
                         </div>
                     </div>
                 </section>
             )}
 
             {section3Data && (
-                <section className={styles.equityInvestment} id={section3Data.title}>
+                <section className={styles.equityInvestment} id={section3Data.title} 
+                style={{
+                    backgroundImage: `url(${section3Data.backgroundImage})`
+                }}
+                >
                     <SectionTitle title={section3Data.title} />
                     <div className={styles.equityInvestmentItems}>
                         {section3Data.items?.map((item: { logo: string; title: string }, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
-                            <div className={styles.equityInvestmentItem} key={index}>
-                                <img
-                                    src={item.logo}
-                                    alt={item.title}
-                                    className={styles.equityInvestmentItemLogo}
-                                />
-                                <div className={styles.equityInvestmentItemTitle}>{item.title}</div>
-                            </div>
+                                <div className={styles.equityInvestmentItem} key={index}>
+                                    <img
+                                        src={item.logo}
+                                        alt={item.title}
+                                        className={styles.equityInvestmentItemLogo}
+                                    />
+                                    <div className={styles.equityInvestmentItemTitle}>{item.title}</div>
+                                </div>
                             </ScrollReveal>
                         ))}
                     </div>
@@ -76,10 +84,10 @@ export default function InvestGroup() {
                         height="100vh"
                     >
                         <ScrollReveal preset="slideUp" amount={0.2}>
-                        <div className={styles.industryFosterMask}>
-                            <div className={styles.industryFosterMaskTitle}>{section4Data.title}</div>
-                            <div className={styles.industryFosterMaskContent}>{section4Data.content}</div>
-                        </div>
+                            <div className={styles.industryFosterMask}>
+                                <div className={styles.industryFosterMaskTitle}>{section4Data.title}</div>
+                                <div className={styles.industryFosterMaskContent}>{section4Data.content}</div>
+                            </div>
                         </ScrollReveal>
                     </Section>
                 </div>
diff --git a/src/pages/Business/RealtyGroup.tsx b/src/pages/Business/RealtyGroup.tsx
index b9d684d..abb29ff 100644
--- a/src/pages/Business/RealtyGroup.tsx
+++ b/src/pages/Business/RealtyGroup.tsx
@@ -18,9 +18,8 @@ export default function RealtyGroup() {
     const section2Data = data.section2Data;
     const section3Data = data.section3Data;
     const section4Data = data.section4Data;
-    const section5Data = data.section5Data;
 
-    const topTabsData = section2Data ? { tabItems: section2Data.tabItems ?? [] } : null;
+    const topTabsData = section2Data 
 
     const rowAccordionData = section3Data
         ? {
@@ -46,7 +45,6 @@ export default function RealtyGroup() {
             {topTabsData && <TopTabsSection data={topTabsData} />}
             {rowAccordionData && <RowAccordion data={rowAccordionData} />}
             {section4Data && <HonorGrids data={section4Data} />}
-            {section5Data && <BottomTabsSection data={section5Data} />}
         </div>
     );
 }
diff --git a/src/pages/Business/RuijingGroup.tsx b/src/pages/Business/RuijingGroup.tsx
index 414e06f..959d9e7 100644
--- a/src/pages/Business/RuijingGroup.tsx
+++ b/src/pages/Business/RuijingGroup.tsx
@@ -21,15 +21,7 @@ export default function RuijingGroup() {
     const section4Data = data.section4Data;
 
     const swiperCardData = section2Data
-        ? {
-              title: section2Data.title,
-              cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
-                  title: c.title,
-                  content: c.content,
-                  backgroundImage: c.backgroundImage,
-              })) ?? [],
-          }
-        : null;
+
 
     return (
         <div>
@@ -48,15 +40,17 @@ export default function RuijingGroup() {
                     title={section3Data.title}
                     subtitle={section3Data.subtitle}
                     titleColor="#fff"
-                    background="/images/bg-overview.png"
+                    background={section3Data.backgroundImage}
                     maskBackground="rgba(2,17,48,0.5)"
                 >
-                    <ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
-                    <div className={styles.businessFeatureContent}>{section3Data.content}</div>
-                    </ScrollReveal>
-                    {section3Data.statsData && (
-                        <StatsRow data={section3Data.statsData} color="#fff" />
-                    )}
+                    <div className="w-72-inner">
+                        <ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
+                            <div className={styles.businessFeatureContent}>{section3Data.content}</div>
+                        </ScrollReveal>
+                        {section3Data.statsData && (
+                            <StatsRow data={section3Data.statsData} color="#fff" />
+                        )}
+                    </div>
                 </Section>
             )}
 
diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css
index 8c15082..ca0578d 100644
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -311,8 +311,9 @@
 .newsGrid {
   gap: 1.25rem;
   align-items: start;
-  display: flex;
   width: 72%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   margin: 0 auto;
 }
 
diff --git a/src/pages/Join/Campus.tsx b/src/pages/Join/Campus.tsx
index bd0bce9..8c93226 100644
--- a/src/pages/Join/Campus.tsx
+++ b/src/pages/Join/Campus.tsx
@@ -110,7 +110,7 @@ export default function JoinCampus() {
       />
 
       <Section maskBackground="#FFFFFF">
-        <div className={styles.campusRow}>
+        <div className={`${styles.campusRow} w-72-inner`}>
           <div className={styles.campusColLeft}>
             <SearchInput value={searchValue} placeholder="搜索职位" onChange={setSearchValue} onEnter={refreshData} />
 
diff --git a/src/pages/Join/Culture.tsx b/src/pages/Join/Culture.tsx
index 0f48a6d..707062b 100644
--- a/src/pages/Join/Culture.tsx
+++ b/src/pages/Join/Culture.tsx
@@ -20,16 +20,16 @@ export default function Culture() {
                 title={banner?.title ?? ""}
                 content={(banner as BannerConfig)?.content}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
-                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
+                backgroundImage={banner?.backgroundImage ?? ""}
             />
 
             {section1Data && (
                 <Section
                     title={section1Data.title}
-                    background="/images/bg-overview.png"
-                    maskBackground="#D8D8D8"
+                    background={section1Data.backgroundImage ?? ""}
+                    maskBackground="transparent"
                 >
-                    <div className={styles.cultureItems}>
+                    <div className={`${styles.cultureItems} w-72-inner`}>
                         {section1Data.items?.map((item: any, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.cultureItem}>
                             <div
@@ -52,10 +52,10 @@ export default function Culture() {
             {section2Data && (
                 <Section
                     title={section2Data.title}
-                    background=""
+                    background={section2Data.backgroundImage ?? ""}
                     maskBackground="rgba(216,216,216,0.6)"
                 >
-                    <div className={styles.valuesItems}>
+                    <div className={`${styles.valuesItems}`} style={{ margin: "0 auto", width: "60%" }}>
                         {section2Data.items?.map((item: { title: string; content?: string; icon?: string }, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.cultureItem}>
                             <div key={index} className={styles.valuesItem}>
diff --git a/src/pages/News/Media.tsx b/src/pages/News/Media.tsx
index d7126f5..aeb7f95 100644
--- a/src/pages/News/Media.tsx
+++ b/src/pages/News/Media.tsx
@@ -20,11 +20,11 @@ export default function Media() {
                 title={banner?.title ?? ""}
                 content={(banner as BannerConfig)?.content}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
-                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
+                backgroundImage={banner?.backgroundImage ?? ""}
             />
 
-            <Section background="/images/bg-overview.png" maskBackground="rgba(1,11,72,0.8)">
-                <div className={styles.mediaItems}>
+            <Section background={section1Data.backgroundImage ?? ""} maskBackground="rgba(1,11,72,0.8)">
+                <div className={`${styles.mediaItems} w-72-inner`}>
                     {items.map((item: { title: string; content?: string }, index: number) => (
                         <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.mediaItem}>
                             <div className={styles.mediaItemTitle}>{item.title}</div>
diff --git a/src/pages/Social/Foundation.tsx b/src/pages/Social/Foundation.tsx
index d5032fa..d45faf9 100644
--- a/src/pages/Social/Foundation.tsx
+++ b/src/pages/Social/Foundation.tsx
@@ -28,10 +28,11 @@ export default function Foundation() {
         return newsList.filter((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
     }, [newsList, locale])
     const getNewsList = useCallback(() => {
-        appApi.getNewsList({ page: 1, size: 1000, sort: "create_time DESC",
+        appApi.getNewsList({
+            page: 1, size: 1000, sort: "create_time DESC",
             category_id: String(categoryList?.find((item: any) => item.name.includes('【银泰公益基金会】公益传播'))?.id ?? ''),
-         }).then((res:any) => {
-            setNewsList(res.data.items.map((item:any) => {
+        }).then((res: any) => {
+            setNewsList(res.data.items.map((item: any) => {
                 return {
                     id: item.id,
                     title: item.title,
@@ -54,11 +55,11 @@ export default function Foundation() {
 
     const getFileList = useCallback(async () => {
         const res = await appApi.getDocList({
-            page: 1, 
+            page: 1,
             size: 1000,
             // category_id: String(categoryList?.find((item: any) => item.name.includes('社会责任报告'))?.id ?? '')
         })
-        const items = res.data.items.filter((item:any) => item.category_name.includes("信息公开"))
+        const items = res.data.items.filter((item: any) => item.category_name.includes("信息公开"))
         console.log("------items-----", items)
         setFileList(items)
     }, [])
@@ -85,10 +86,10 @@ export default function Foundation() {
             {section2Data && (
                 <Section
                     title={section2Data.title}
-                    background=""
+                    background={section2Data.backgroundImage ?? ""}
                     maskBackground="rgba(255,255,255,0.3)"
                 >
-                    <div className={styles.publicWelfareDataItems}>
+                    <div className={`${styles.publicWelfareDataItems} w-72-inner`}>
                         {localNewsList?.map((item: any, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
                                 key={index}
@@ -97,8 +98,8 @@ export default function Foundation() {
                                 <AnimateTopCard data={item} />
                             </ScrollReveal>
                         ))}
+                        <div style={{ marginBottom: "3.125rem" }} />
                     </div>
-                    <div style={{ marginBottom: "3.125rem" }} />
                 </Section>
             )}
 
@@ -110,19 +111,19 @@ export default function Foundation() {
                     maskBackground="rgba(255,255,255,0.1)"
                     height="47.5rem"
                 >
-                    <div className={styles.informationPublicDataContent}>
+                    <div className={`${styles.informationPublicDataContent} w-72-inner`}>
                         <div className={styles.informationPublicDataItems}>
                             {localFileList
-                            .filter((item:any) => item.category_name.includes(
-                                section3Data.tabItems?.[activeIndex]?.tabName ?? ''
-                            ))
-                            .map((item: any, index: number) => (
-                                <div key={index} className={styles.informationPublicDataItem}>
-                                    <li onClick={() => window.open(item.path, '_blank')}>
-                                        <span>{item.name}</span>
-                                    </li>
-                                </div>
-                            ))}
+                                .filter((item: any) => item.category_name.includes(
+                                    section3Data.tabItems?.[activeIndex]?.tabName ?? ''
+                                ))
+                                .map((item: any, index: number) => (
+                                    <div key={index} className={styles.informationPublicDataItem}>
+                                        <li onClick={() => window.open(item.path, '_blank')}>
+                                            <span>{item.name}</span>
+                                        </li>
+                                    </div>
+                                ))}
                         </div>
                         <BottomTabs
                             tabItems={section3Data.tabItems ?? []}
@@ -135,12 +136,12 @@ export default function Foundation() {
 
             {section4Data && (
                 <Section title={section4Data.title} background="" maskBackground="#F7FBFF">
-                    <div className={styles.partnerItems}>
+                    <div className={`${styles.partnerItems} w-72-inner`}>
                         {section4Data.items?.map((item: any, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index}>
-                            <div key={index} className={styles.partnerItem}>
-                                <img src={item.logo} alt="logo" />
-                            </div>
+                                <div key={index} className={styles.partnerItem}>
+                                    <img src={item.logo} alt="logo" />
+                                </div>
                             </ScrollReveal>
                         ))}
                     </div>
diff --git a/src/pages/Social/Sustainability.tsx b/src/pages/Social/Sustainability.tsx
index 452b0b5..e2b70f7 100644
--- a/src/pages/Social/Sustainability.tsx
+++ b/src/pages/Social/Sustainability.tsx
@@ -83,7 +83,7 @@ export default function Sustainability() {
     }, [reportItems, locale])
     const getReportList = useCallback(async () => {
         const res = await appApi.getDocList({
-            page, 
+            page,
             size,
             category_id: String(categoryList?.find((item: any) => item.name.includes('社会责任报告'))?.id ?? '')
         })
@@ -93,7 +93,7 @@ export default function Sustainability() {
             const resItems: any[] = []
             // 去重 id lang 相同
             items.forEach((item: any) => {
-                if(!resItems.some((i: any) => i.id === item.id && i.lang === item.lang)) {
+                if (!resItems.some((i: any) => i.id === item.id && i.lang === item.lang)) {
                     resItems.push(item)
                 }
             })
@@ -121,29 +121,31 @@ export default function Sustainability() {
 
             {section1Data && (
                 <ParagraphSection data={section1Data}>
+                    <div style={{ width: "100%", height: "100px" }}></div>
                     <ColumnXGrids items={columnXGridsData} />
                 </ParagraphSection>
             )}
-
             {section3Data && (
                 <Section
                     title={section3Data.title}
                     background=""
                     maskBackground="rgba(255,255,255,0.3)"
                 >
-                    <p className={styles.socialResponsibilityCaseDataContent}>
-                        {section3Data.content}
-                    </p>
-                    <div className={styles.socialResponsibilityCaseDataItems}>
-                        {localNewsItems?.map((item: any, index: number) => (
-                            <ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
-                            key={index}
-                                className={styles.socialResponsibilityCaseDataItem}
-                            >
-                            
-                                <AnimateTopCard data={item} />
-                            </ScrollReveal>
-                        ))}
+                    <div className="w-72-inner">
+                        <p className={styles.socialResponsibilityCaseDataContent}>
+                            {section3Data.content}
+                        </p>
+                        <div className={styles.socialResponsibilityCaseDataItems}>
+                            {localNewsItems?.map((item: any, index: number) => (
+                                <ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
+                                    key={index}
+                                    className={styles.socialResponsibilityCaseDataItem}
+                                >
+
+                                    <AnimateTopCard data={item} />
+                                </ScrollReveal>
+                            ))}
+                        </div>
                     </div>
                 </Section>
             )}
@@ -154,6 +156,7 @@ export default function Sustainability() {
                     background=""
                     maskBackground="#F7FBFF"
                 >
+                    <div className="w-72-inner">
                     <div className={styles.socialResponsibilityReportData}>
                         {localReportItems?.map((item: any, index: number) => (
                             <ScrollReveal preset="slideUp" amount={0.2} delay={(index % 4) * 0.5}
@@ -176,7 +179,7 @@ export default function Sustainability() {
                     <div
                         className={styles.socialResponsibilityReportItemMore}
                         onClick={() => {
-                            if(localReportItems.length < total) {
+                            if (localReportItems.length < total) {
                                 setPage(page + 1)
                             } else {
                                 setReportItems(prev => [...prev.slice(0, 8)])
@@ -186,6 +189,7 @@ export default function Sustainability() {
                     >
                         {localReportItems.length < total ? "了解更多" : "收起"}
                     </div>
+                    </div>
                 </Section>
             )}
         </div>