save

package.json

@@ -79,7 +79,8 @@
     "webpack-manifest-plugin": "^4.0.2",
     "winston": "^3.17.0",
     "workbox-webpack-plugin": "^6.4.1",
-    "zustand": "^5.0.11"
+    "zustand": "^5.0.11",
+    "react-activation": "^0.13.4"
   },
   "scripts": {
     "dev": "node --stack-size=12800 --stack-trace-limit=20  scripts/start.js",

src/Routes.tsx

@@ -1,6 +1,6 @@
 import Home from "@/pages/Home/index";
 import MainLayout from "@/layouts/MainLayout";
-import type { RouteObject } from "react-router-dom";
+import { Navigate, type RouteObject } from "react-router-dom";
 
 import About from "@/pages/About/overview";
 import AboutHistory from "@/pages/About/History";
@@ -25,6 +25,8 @@ import PrivacyPolicy from "@/pages/Others/PrivacyPolicy";
 import AuditReport from "@/pages/Others/AuditReport";
 import SiteMap from "@/pages/Others/SiteMap";
 import Search from "@/pages/Others/Search";
+import NavigateReplace from "@/utils/NavigateReplace";
+
 
 const routes: RouteObject[] = [
     {
@@ -33,10 +35,12 @@ const routes: RouteObject[] = [
         children: [
             { index: true, element: <Home /> },
             // 关于银泰
+            { path: "about", element: <NavigateReplace path="/about/overview"><About /></NavigateReplace> },
             { path: "about/overview", element: <About /> }, //集团概览
             { path: "about/history", element: <AboutHistory /> },
             { path: "about/founder", element: <AboutFounder /> },
             // 集团业务
+            { path: "business", element: <NavigateReplace path="/business/commercial-group"><BusinessCommercialGroup /></NavigateReplace> },
             { path: "business/commercial-group", element: <BusinessCommercialGroup /> },
             { path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> },
             { path: "business/base-group", element: <BusinessBaseGroup /> },
@@ -44,13 +48,16 @@ const routes: RouteObject[] = [
             { path: "business/invest-group", element: <BusinessInvestGroup /> },
             { path: "business/ruijing-group", element: <BusinessRujingGroup /> },
             // 社会责任
+            { path: "social", element: <NavigateReplace path="/social/sustainability"><SocialSustainability /></NavigateReplace> },
             { path: "social/sustainability", element: <SocialSustainability /> },
             { path: "social/foundation", element: <SocialFoundation /> },
             // 新闻中心
+            { path: "news", element: <NavigateReplace path="/news/public"><NewsPublic /></NavigateReplace> },
             { path: "news/public", element: <NewsPublic /> },
             { path: "news/media", element: <NewsMedia /> },
             { path: "news/detail/:id", element: <NewsDetail /> },
             // 加入银泰
+            { path: "join", element: <NavigateReplace path="/join/culture"><JoinCulture /></NavigateReplace> },
             { path: "join/culture", element: <JoinCulture /> },
             { path: "join/campus", element: <JoinCampus /> },
             { path: "join/campus/detail/:id", element: <JoinCampusDetail /> },
@@ -64,6 +71,7 @@ const routes: RouteObject[] = [
             { path: "/privacy-policy", element: <PrivacyPolicy /> },
             { path: "/audit-report", element: <AuditReport /> },
             { path: "/site-map", element: <SiteMap /> },
+            { path: "/contact-us", element: <Navigate to="/news/media"></Navigate> },
         ],
     },
     {

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

@@ -18,4 +18,14 @@
         margin-top: 20px;
     }
 
+    .sectionTitleSubcontent {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 30px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        margin-top: 20px;
+    }
+
 }

src/components/layout/SectionTitle/index.tsx

@@ -3,14 +3,16 @@ import styles from "./index.module.css";
 type Props = {
     title: string;
     subtitle?: string;
+    subcontent?: string;
     color?: string;
 }
 
-export default function SectionTitle({ title, subtitle, color }: Props) {
+export default function SectionTitle({ title, subtitle, color, subcontent }: Props) {
     return (
         <div className={styles.sectionTitle} style={{ color: color || '#222', marginBottom: subtitle ? '60px' : '100px' }}>
             <span>{title}</span>
             {subtitle && <span className={styles.sectionTitleSubtitle}>{subtitle}</span>}
+            {subcontent && <span className={styles.sectionTitleSubcontent}>{subcontent}</span>}
         </div>
     )
 }

src/layouts/MainLayout.tsx

@@ -3,6 +3,8 @@ import { useEffect } from "react";
 import Header from "./Header";
 import Footer from "./Footer";
 import useHashScroll from "@/hooks/useHashScroll";
+import { AliveScope } from "react-activation";
+
 export default function MainLayout() {
     useHashScroll()
     const { pathname } = useLocation();
@@ -15,7 +17,7 @@ export default function MainLayout() {
         <div className="layout">
             <Header />
             <main className="container">
-                <Outlet />
+            <Outlet />
             </main>
             <Footer />
         </div>

src/pages/Business/CommercialGroup.module.css

@@ -37,6 +37,7 @@
   background-repeat: no-repeat;
   padding: 100px 0 !important;
 }
+
 .twoColSection.reverse {
   flex-direction: row-reverse;
 }
@@ -55,10 +56,12 @@
   color: #222;
   line-height: 34px;
 }
+
 .twoColSectionTab.active {
   border-bottom: 2px solid #14355C;
   color: #14355C;
 }
+
 .twoColSectionContent {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -105,7 +108,7 @@
   margin: 0 0 1rem;
 }
 
-.twoColDesc + .twoColDesc {
+.twoColDesc+.twoColDesc {
   margin-top: 0;
 }
 
@@ -139,9 +142,28 @@
 }
 
 .featuresHeroContent {
-  height: 690px;
+  margin-top: 160px;
+  height: 400px;
+  overflow: hidden;
   width: 100%;
   color: #FFFFFF;
+  white-space: pre-wrap;
+}
+
+.featuresHeroContentTitle {
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 600;
+  font-size: 30px;
+  color: #FFFFFF;
+  margin-bottom: 30px;
+}
+
+.featuresHeroContentDesc {
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 400;
+  font-size: 18px;
+  color: #FFFFFF;
+  line-height: 40px;
 }
 
 .featuresHeroTabs {
@@ -149,7 +171,7 @@
   flex-direction: row;
   justify-content: center;
   gap: 200px;
-  border-top: 1px solid rgba(255,255,255,0.5);
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .featuresHeroTab {
@@ -160,6 +182,7 @@
   height: 60px;
   cursor: pointer;
 }
+
 .featuresHeroTab.active {
   border-top: 2px solid #FFFFFF;
 }
@@ -186,6 +209,7 @@
   color: #FFFFFF;
   line-height: 50px;
 }
+
 .propertyServicesSubtitle {
   font-weight: 500;
   font-size: 18px;
@@ -297,4 +321,4 @@
   .featureBlockTitle {
     font-size: 1.875rem;
   }
-}
+}

src/pages/Business/CommercialGroup.tsx

@@ -6,6 +6,7 @@ import Banner from "@/components/Banner";
 import ParagraphSection from "@/components/layout/ParagraphSection";
 import Section from "@/components/layout/Section";
 import TopTabs from "@/components/layout/TopTabsSection/TopTabs";
+import SectionTitle from "@/components/layout/SectionTitle";
 
 const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
 
@@ -72,11 +73,13 @@ export default function BusinessCommercialGroup() {
             <section
                 className={styles.featuresHero}
                 style={{
-                    backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}`,
+                    backgroundImage: `url(${section3Data.tabItems[activeFeaturesTabIndex]?.backgroundImage}), ${FALLBACK_GRADIENT}`,
                 }}
             >
+                <SectionTitle color="#fff" title={section3Data.title} subcontent={section3Data.content} />
                 <div className={styles.featuresHeroContent}>
-                    <div>{section3Data.tabItems[activeFeaturesTabIndex]?.content}</div>
+                    <div className={styles.featuresHeroContentTitle}>{section3Data.tabItems[activeFeaturesTabIndex]?.tabName}</div>
+                    <div className={styles.featuresHeroContentDesc}>{section3Data.tabItems[activeFeaturesTabIndex]?.content}</div>
                 </div>
                 <div className={styles.featuresHeroTabs}>
                     {section3Data.tabItems.map((item: { tabName: string }, i: number) => (

src/utils/NavigateReplace.tsx

@@ -0,0 +1,11 @@
+import { useLayoutEffect } from "react";
+import { useNavigate } from "react-router-dom";
+function NavigateReplace({ path, children }: { path: string, children: any }) {
+    const navigate = useNavigate();
+    useLayoutEffect(() => {
+        navigate(path, { replace: true });
+    }, [path, navigate]);
+    return children;
+}
+
+export default NavigateReplace;