save

src/App.css

@@ -66,13 +66,30 @@ ul, li {
   display: flex;
 }
 
+/* 数字字体 */
+.font-num {
+  font-family: D-DIN-PRO, D-DIN-PRO;
+}
+
 .header-row {
   width: 100%;
   margin: 0 auto;
-  padding: 0 60px;
+  padding: 0 3.75rem;
   box-sizing: border-box;
 }
 
+@media (max-width: 1024px) {
+  .header-row {
+    padding: 0 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-row {
+    padding: 0 1rem;
+  }
+}
+
 body {
   overflow-x: hidden;
   background: #f0f2f4;
@@ -92,30 +109,17 @@ body {
 
 .container {
   flex: 1;
-  overflow: auto;
+  /* overflow: auto; */
 }
 
 .layout-footer {
   flex-shrink: 0;
 }
 
-
+.normal-p p {
-
+  font-weight: 400;
-/* html {
+  font-size: 18px;
-  font-size: 16px;
+  color: #222222;
-}
+  line-height: 34px;
-@media screen and (max-width: 1920px) {
+  margin-bottom: 20px;
-  html {
+}
-    font-size: 16px;
-  }
-}
-@media screen and (max-width: 1440px) {
-  html {
-    font-size: 14px;
-  }
-}
-@media screen and (max-width: 1024px) {
-  html {
-    font-size: 12px;
-  }
-} */

src/Routes.tsx

@@ -7,6 +7,7 @@ import AboutHistory from "@/pages/About/History";
 import AboutFounder from "@/pages/About/Founder";
 import Business from "@/pages/Business/index";
 import BusinessCommercialGroup from "@/pages/Business/CommercialGroup";
+import BusinessCommercialGroupDetail from "@/pages/Business/CommercialGroupDetail";
 import BusinessBaseGroup from "@/pages/Business/BaseGroup";
 import BusinessRealtyGroup from "@/pages/Business/RealtyGroup";
 import BusinessInvestGroup from "@/pages/Business/InvestGroup";
@@ -20,6 +21,7 @@ import NewsMedia from "@/pages/News/Media";
 import Join from "@/pages/Join/index";
 import JoinCulture from "@/pages/Join/Culture";
 import JoinCampus from "@/pages/Join/Campus";
+import PropertyService from "@/pages/PropertyService/index";
 
 const routes: RouteObject[] = [
     {
@@ -34,6 +36,7 @@ const routes: RouteObject[] = [
             // 集团业务
             { path: "business", element: <Business /> },
             { path: "business/commercial-group", element: <BusinessCommercialGroup /> },
+            { path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> },
             { path: "business/base-group", element: <BusinessBaseGroup /> },
             { path: "business/realty-group", element: <BusinessRealtyGroup /> },
             { path: "business/invest-group", element: <BusinessInvestGroup /> },
@@ -50,6 +53,9 @@ const routes: RouteObject[] = [
             { path: "join", element: <Join /> },
             { path: "join/culture", element: <JoinCulture /> },
             { path: "join/campus", element: <JoinCampus /> },
+
+            // 物业服务
+            { path: "property-service", element: <PropertyService /> },
         ],
     },
     {

src/components/Banner.module.css

@@ -4,7 +4,7 @@
   min-height: 100vh;
   background-size: cover;
   background-position: center;
-  padding-bottom: 50px;
+  padding-bottom: 3.125rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -24,8 +24,7 @@
 .heroContent {
   position: relative;
   z-index: 1;
-  padding: 0 24px;
+  padding: 0 1.5rem;
-  /* padding-top: 400px; */
   padding-left: 13.5%;
   display: flex;
   flex-direction: column;
@@ -33,31 +32,33 @@
 }
 
 .heroTitle {
-  font-size: 60px;
+  font-size: 3.75rem;
   font-weight: 700;
   color: #fff;
-  /* margin: 0 0 50px; */
   letter-spacing: 0.05em;
 }
 
+.heroTitleMedium {
+  font-size: 2.5rem;
+}
+
 .heroSubtitle {
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: 700;
   color: #fff;
-  /* margin: 0 0 16px; */
   letter-spacing: 0.05em;
 }
 
 .heroDesc {
-  max-width: 900px;
+  max-width: 56.25rem;
-  font-size: 20px;
+  font-size: 1.25rem;
   color: rgba(255, 255, 255, 0.95);
   margin: 0;
   letter-spacing: 0.02em;
 }
 
 .heroLargeDesc {
-  font-size: 34px;
+  font-size: 2.125rem;
   color: rgba(255, 255, 255, 0.95);
   margin: 0;
   letter-spacing: 0.02em;
@@ -66,10 +67,10 @@
 .breadcrumb {
   display: flex;
   flex-direction: row;
-  gap: 5px;
+  gap: 0.3125rem;
   color: #fff;
   text-decoration: none;
-  font-size: 16px;
+  font-size: 1rem;
-  margin-top: 100px;
+  margin-top: 6.25rem;
 }
 

src/components/YearPicker/YearPicker.module.css

@@ -1,19 +1,19 @@
 .wrapper {
   position: relative;
   display: inline-block;
-  min-width: 140px;
+  min-width: 8.75rem;
 }
 
 .trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 0.5rem;
-  padding: 8px 11px;
+  padding: 0.5rem 0.6875rem;
   background: #14355C;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 6px;
+  border-radius: 0.375rem;
   cursor: pointer;
   user-select: none;
 }
@@ -55,13 +55,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
+  width: 1rem;
-  height: 16px;
+  height: 1rem;
   color: rgba(255, 255, 255, 0.85);
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: 0.125rem;
 }
 
 .clear:hover {
@@ -80,38 +80,38 @@
 
 .panel {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 0.25rem);
   left: 0;
   z-index: 1050;
-  min-width: 220px;
+  min-width: 13.75rem;
-  padding: 12px;
+  padding: 0.75rem;
   background: #14355C;
   border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 8px;
+  border-radius: 0.5rem;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3);
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
-  padding: 0 4px;
+  padding: 0 0.25rem;
 }
 
 .navBtn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  width: 1.75rem;
-  height: 28px;
+  height: 1.75rem;
   padding: 0;
   background: transparent;
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .navBtn:hover:not(:disabled) {
@@ -125,26 +125,26 @@
 
 .decadeLabel {
   color: #fff;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
 }
 
 .yearGrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .yearCell {
-  min-width: 56px;
+  min-width: 3.5rem;
-  height: 32px;
+  height: 2rem;
   padding: 0;
   background: transparent;
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 0.875rem;
   transition: background 0.2s;
 }
 

src/components/banner.tsx

@@ -2,15 +2,19 @@ import { Link } from "react-router-dom";
 import styles from "./Banner.module.css";
 const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
 
+type BreadcrumbItem = { label: string; to: string };
+
 type Props = {
     title: string;
     subtitle?: string;
     desc?: string;
     largedesc?: string;
     showBreadcrumb?: boolean;
+    breadcrumbItems?: BreadcrumbItem[];
+    titleSize?: "large" | "medium";
     backgroundImage: string;
 }
-export default function Banner({ title, subtitle, desc, largedesc, showBreadcrumb, backgroundImage }: Props) {
+export default function Banner({ title, subtitle, desc, largedesc, showBreadcrumb, breadcrumbItems, titleSize = "large", backgroundImage }: Props) {
     return (
         <section
             className={styles.hero}
@@ -20,17 +24,18 @@ export default function Banner({ title, subtitle, desc, largedesc, showBreadcrum
         >
             <div className={styles.heroOverlay} />
             <div className={styles.heroContent} style={{gap: '30px'}}>
-                <h1 className={styles.heroTitle}>{title}</h1>
+                <h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
                 {subtitle && <h2 className={styles.heroSubtitle}>{subtitle}</h2>}
                 {desc && <p className={styles.heroDesc}>{desc}</p>}
                 {largedesc && <p className={styles.heroLargeDesc}>{largedesc}</p>}
-                {showBreadcrumb && (
+                <div className={styles.breadcrumb}>
-                    <div className={styles.breadcrumb}>
+                    {showBreadcrumb && (breadcrumbItems ?? []).map((item, i) => (
-                        <Link to="/">首页</Link>
+                        <span key={i}>
-                        <span>{'>'}</span>
+                            {i > 0 && <span>{' > '}</span>}
-                        <Link to="/about">关于银泰</Link>
+                            {item.to ? <Link to={item.to}>{item.label}</Link> : <span>{item.label}</span>}
-                    </div>
+                        </span>
-                )}
+                    ))}
+                </div>
             </div>
         </section>
     )

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

@@ -0,0 +1,8 @@
+.sectionTitle {
+    font-weight: 700;
+    font-size: 40px;
+    color: #222222;
+    line-height: 50px;
+    text-align: center;
+    margin-bottom: 100px;
+}

src/components/layout/SectionTitle/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./index.module.css";
+
+export default function SectionTitle({ title }: { title: string }) {
+    return (
+        <div className={styles.sectionTitle}>
+            <span>{title}</span>
+        </div>
+    )
+}

src/components/layout/StatsRow/StatsRow.module.css

@@ -0,0 +1,37 @@
+.statsRow {
+    margin-top: 9.375rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: nowrap;
+}
+
+.statItem {
+    width: 17rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .625rem;
+}
+
+.statItem:not(:last-child) {
+    border-right: 1px solid #222222;
+}
+
+.statNum {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #222;
+    line-height: 1.2;
+}
+
+.statNumDesc {
+    font-size: 1.875rem;
+}
+
+.statLabel {
+    font-size: 1rem;
+    color: #666;
+}

src/components/layout/StatsRow/StatsRow.tsx

@@ -0,0 +1,26 @@
+import styles from "./StatsRow.module.css";
+
+type StatsData = {
+    num: string;
+    label: string;
+}
+
+export default function StatsRow({ statsData }: { statsData: StatsData[] }) {
+    return (
+        <div className={styles.statsRow}>
+            {statsData.map((item, i) => (
+                <div key={i} className={styles.statItem}>
+                    <div>
+                        <span className={`${styles.statNum} font-num`}>
+                            {item.num.split(' ')[0] + ' '}
+                        </span>
+                        <span className={`${styles.statNumDesc}`}>
+                            {item.num.split(' ')[1]}
+                        </span>
+                    </div>
+                    <span className={styles.statLabel}>{item.label}</span>
+                </div>
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,57 @@
+.swiperCardSection {
+    min-height: 100vh;
+    padding: 100px 260px;
+    background: #D8D8D8;
+}
+
+
+.swiperCardList {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    .swiperCardItem {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 457 / 630;
+        img {
+            width: 100%;
+            aspect-ratio: 457 / 630;
+            object-fit: cover;
+        }
+        .swiperMask {
+            width: 100%;
+            aspect-ratio: 457 / 630;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .swiperContent {
+            color: #fff;
+            position: absolute;
+            top: 80%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            .swiperTitle {
+                font-weight: 500;
+                font-size: 24px;
+                color: #FFFFFF;
+                line-height: 80px;
+                height: 80px;
+                margin: 0 30px;
+                text-align: center;
+                border-bottom: 1px solid rgba(255,255,255,0.3);
+
+                span {
+                    display: inline-block;
+                    line-height: 80px;
+                    height: 80px;
+                    border-bottom: 3px solid #14355C;
+                }
+            }
+        }
+    }
+}

src/components/layout/SwiperCardSection/index.tsx

@@ -0,0 +1,33 @@
+import SectionTitle from "../SectionTitle";
+import styles from "./index.module.css";
+
+type Data = {
+    title: string;
+    cardItems: {
+        title: string;
+        desc: string;
+        image: string;
+    }[];
+}
+
+export default function SwiperCardSection({ data }: { data: Data }) {
+    return (
+        <section className={styles.swiperCardSection}>
+            <SectionTitle title={data.title} />
+            <div className={styles.swiperCardList}>
+                {data.cardItems.map((item) => (
+                    <div key={item.title} className={styles.swiperCardItem}>
+                        <img src={item.image} alt={item.title} />
+                        <div className={styles.swiperMask}></div>
+                        <div className={styles.swiperContent}>
+                            <div className={styles.swiperTitle}>
+                                <span>{item.title}</span>
+                            </div>
+                            {/* <p>{item.desc}</p> */}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}

src/index.css

@@ -1,3 +1,38 @@
+/* rem 基准：以 16px 为设计稿基准 */
+html {
+  font-size: 16px;
+}
+
+@media screen and (max-width: 1920px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  html {
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -13,6 +48,10 @@ code {
 }
 
 @font-face { 
-  font-family: 'Alimama ShuHeiTi';
+  font-family: 'D-DIN-PRO';
-  src: url('https://cdn.batiao8.com/static/ttf/%E9%98%BF%E9%87%8C%E5%A6%88%E5%A6%88%E6%95%B0%E9%BB%91%E4%BD%93.ttf');
+  src: url('/public/ttf/D-DIN-PRO-400-Regular.otf');
+}
+@font-face { 
+  font-family: 'Source Han Sans';
+  src: url('/public/ttf/SourceHanSansCN-Normal.otf');
 }

src/layouts/Footer.module.css

@@ -4,32 +4,32 @@
 }
 
 .footerUpper {
-  padding: 60px;
+  padding: 3.75rem;
 }
 
 
 .footerGrid {
   display: grid;
   grid-template-columns: repeat(7, 1fr) auto;
-  gap: 24px;
+  gap: 1.5rem;
   align-items: start;
 }
 
 .footerColumn {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0.75rem;
 }
 
 .footerTitle {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: #333;
-  margin-bottom: 4px;
+  margin-bottom: 0.25rem;
 }
 
 .footerLink {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #666;
   text-decoration: none;
 }
@@ -42,25 +42,25 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 16px;
+  gap: 1rem;
   position: absolute;
-  right: 60px;
+  right: 3.75rem;
 }
 
 .footerLogo {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 600;
   color: #999;
 }
 
 .socialIcons {
   display: flex;
-  gap: 12px;
+  gap: 0.75rem;
 }
 
 .socialIcon {
-  width: 28px;
+  width: 1.75rem;
-  height: 28px;
+  height: 1.75rem;
   border-radius: 50%;
   background: #ddd;
   display: flex;
@@ -68,13 +68,13 @@
   justify-content: center;
   color: #666;
   text-decoration: none;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 .footerLower {
   background: #031229;
   color: #fff;
-  height: 60px;
+  height: 3.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -84,12 +84,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .footerLowerLinks {
   display: flex;
-  gap: 20px;
+  gap: 1.25rem;
 }
 
 .footerLowerLink {
@@ -100,3 +100,44 @@
 .footerLowerLink:hover {
   color: #fff;
 }
+
+@media (max-width: 1024px) {
+  .footerUpper {
+    padding: 2rem;
+  }
+
+  .footerGrid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.25rem;
+  }
+
+  .footerRight {
+    right: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .footerUpper {
+    padding: 1.5rem;
+  }
+
+  .footerGrid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+
+  .footerRight {
+    position: static;
+    margin-top: 1rem;
+  }
+
+  .footerLower {
+    height: auto;
+    padding: 1rem;
+  }
+
+  .footerLowerInner {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

src/layouts/Header.module.css

@@ -3,13 +3,13 @@
   top: 0;
   left: 0;
   z-index: 1000;
-  height: 120px;
+  height: 7.5rem;
   width: 100%;
 
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 1.125rem;
-  line-height: 26px;
+  line-height: 1.625rem;
   text-align: left;
   font-style: normal;
   text-transform: none;
@@ -37,10 +37,10 @@
 .headerInner::after {
   position: absolute;
   bottom: 0;
-  left: 60px;
+  left: 3.75rem;
   content: '';
   display: block;
-  width: calc(100% - 120px);
+  width: calc(100% - 7.5rem);
   box-sizing: border-box;
   height: 1px;
   background: #FFFFFF;
@@ -56,7 +56,7 @@
 .headerRight {
   display: flex;
   align-items: center;
-  gap: 30px;
+  gap: 1.875rem;
 }
 
 .nav {
@@ -66,11 +66,11 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-right: 30px;
+  margin-right: 1.875rem;
 }
 
 .navItem {
-  padding: 0 30px;
+  padding: 0 1.875rem;
 }
 
 .navLink {
@@ -90,14 +90,14 @@
 .actions {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 1rem;
-  margin-left: 30px;
+  margin-left: 1.875rem;
 }
 
 .langTrigger {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
   color: #fff;
   background: transparent;
   border: none;
@@ -109,7 +109,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: 4px;
+  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -121,10 +121,10 @@
   top: 100%;
   left: 0;
   width: 100%;
-  height: 380px;
+  height: 23.75rem;
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
+  padding: 1.25rem;
   z-index: 1000;
 }
 
@@ -136,8 +136,71 @@
 
 .dropPanelLink {
   font-weight: 400;
-  font-size: 18px;
+  font-size: 1.125rem;
-  line-height: 50px;
+  line-height: 3.125rem;
   color: #222222;
   text-decoration: none;
+}
+
+@media (max-width: 1024px) {
+  .header {
+    height: 5.5rem;
+  }
+
+  .headerInner::after {
+    left: 1.5rem;
+    width: calc(100% - 3rem);
+  }
+
+  .navItem {
+    padding: 0 1rem;
+  }
+
+  .headerRight {
+    gap: 1rem;
+  }
+
+  .nav {
+    margin-right: 1rem;
+  }
+
+  .actions {
+    margin-left: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    height: 4rem;
+  }
+
+  .headerInner::after {
+    left: 1rem;
+    width: calc(100% - 2rem);
+  }
+
+  .navItem {
+    padding: 0 0.5rem;
+  }
+
+  .headerRight {
+    gap: 0.5rem;
+  }
+
+  .nav {
+    margin-right: 0.5rem;
+  }
+
+  .actions {
+    margin-left: 0.5rem;
+  }
+
+  .dropPanel {
+    height: auto;
+    padding: 1rem;
+  }
+
+  .dropPanelLink {
+    line-height: 2.5rem;
+  }
 }

src/layouts/Header.tsx

@@ -80,7 +80,7 @@ export default function Header() {
         >
             <div className={`header-row ${styles.headerInner}`}>
                 <Link to="/" className={styles.logo}>
-                    <img src="/images/logo.png" alt="logo" style={{ width: "92px", height: "55px" }} />
+                    <img src="/images/logo.png" alt="logo" style={{ width: "5.75rem", height: "3.4375rem" }} />
                 </Link>
                 <div className={styles.headerRight}>
                     <nav>

src/pages/About/About.module.css

@@ -28,7 +28,7 @@
   position: relative;
   z-index: 1;
   margin: 0 5%;
-  max-width: 560px;
+  max-width: 35rem;
 }
 
 .contentRight {
@@ -39,23 +39,23 @@
 /* Dark blue semi-transparent text box */
 .textBox {
   background: rgba(20,53,92,0.5);
-  padding: 40px;
+  padding: 2.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .title {
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: 700;
   color: #fff;
-  margin: 0 0 30px;
+  margin: 0 0 1.875rem;
   letter-spacing: 0.05em;
 }
 
 .desc {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.95);
-  margin: 0 0 60px;
+  margin: 0 0 3.75rem;
 }
 
 .links {
@@ -63,9 +63,9 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0 40px;
+  gap: 0 2.5rem;
   color: #fff;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .links a {

src/pages/About/Founder.module.css

@@ -1,38 +1,54 @@
 .section {
   background: rgba(255,255,255,0.6);
-  border-radius: 0px 0px 0px 0px;
+  border-radius: 0;
   min-height: 100vh;
   width: 100%;
-  padding: 100px 15.6%;
+  padding: 6.25rem 16.25rem;
   display: flex;
   flex-direction: column;
 }
 
 .content p {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.5;
   color: #333;
-  margin: 0 0 24px;
+  margin: 0 0 1.5rem;
   letter-spacing: 0.05em;
 }
 
 .images {
   display: flex;
-  gap: 40px;
+  gap: 2.5rem;
-  margin-top: 100px;
+  margin-top: 6.25rem;
+
+  .imageItem {
+    width: 100%;
+    aspect-ratio: 680 / 800;
+  }
 }
 .images img{
   width: 100%;
   aspect-ratio: 680 / 800;
   background: rgba(0,0,0,0.3);
+  object-fit: cover;
 }
 
 .images .imageItem {
   position: relative;
   overflow: hidden;
+  .imageOverlay {
+    background: transparent;
+  }
 }
 .images .imageItem:hover .imageOverlay {
   top: 0;
+  background: rgba(20,53,92,0.8);
+  .imageOverlayDesc {
+    opacity: 1;
+  }
+  .imageOverlayTitle span {
+    border-bottom: 3px solid #FFFFFF;
+  }
 }
 .images .imageMask {
   position: absolute;
@@ -44,58 +60,60 @@
 }
 .images .imageOverlay {
   position: absolute;
-  top: 74%;
+  top: 78%;
   left: 0;
   width: 100%;
   height: 100%;
   color: #fff;
-  padding: 60px 40px;
+  padding: 3.75rem 2.5rem;
-  background: rgba(20,53,92,0.8);
   transition: top 0.3s ease-in-out;
+  .imageOverlayDesc {
+    opacity: 0;
+  }
 }
 .images .imageOverlayTitle {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 500;
-  height: 70px;
+  height: 4.375rem;
   color: #fff;
   text-align: center;
   border-bottom: 1px solid rgba(255,255,255,0.3);
 }
 .images .imageOverlayTitle span {
   display: inline-block;
-  height: 71px;
+  height: 4.4375rem;
-  border-bottom: 3px solid #FFFFFF;
+  border-bottom: 3px solid #14355C;
 }
 .images .imageOverlayDesc {
-  font-size: 16px;
+  font-size: 1rem;
   color: #fff;
-  margin-top: 50px;
+  margin-top: 3.125rem;
 }
 
 .sectionFounder{
-  padding: 100px 0 150px;
+  padding: 6.25rem 0 9.375rem;
   min-height: 100vh;
 }
 .founderIntroduction h2 {
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: 700;
   color: #222;
-  margin-bottom: 50px;
+  margin-bottom: 3.125rem;
   text-align: center;
 }
 .founderIntroduction p {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.5;
   color: #222;
-  margin: 0 0 24px;
+  margin: 0 0 1.5rem;
   letter-spacing: 0.05em;
   text-align: center;
 }
 .founderPhoto{
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 100px;
+  gap: 6.25rem;
-  margin-top: 100px;
+  margin-top: 6.25rem;
 }
 
 .founderPhoto img{
@@ -104,13 +122,40 @@
   aspect-ratio: 680 / 800;
 }
 .founderPhotoContent{
-  padding-top: 100px;
+  padding-top: 6.25rem;
-  padding-right: 100px;
+  padding-right: 6.25rem;
 }
 .founderPhotoContent p {
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 1.5;
   color: #222;
-  margin: 0 0 24px;
+  margin: 0 0 1.5rem;
   letter-spacing: 0.05em;
+}
+
+@media (max-width: 768px) {
+  .section {
+    padding: 2rem 1rem;
+  }
+
+  .images {
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 2rem;
+  }
+
+  .sectionFounder {
+    padding: 2rem 1rem;
+  }
+
+  .founderPhoto {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    margin-top: 2rem;
+  }
+
+  .founderPhotoContent {
+    padding-top: 1rem;
+    padding-right: 0;
+  }
 }

src/pages/About/History.module.css

@@ -9,7 +9,7 @@
   );
   min-height: 100vh;
   width: 100%;
-  padding: 100px 300px;
+  padding: 6.25rem 18.75rem;
   display: flex;
   flex-direction: column;
 }
@@ -18,7 +18,7 @@
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 100px;
+  margin-bottom: 6.25rem;
 }
 
 /* Timeline */
@@ -47,16 +47,16 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  min-height: 96px;
+  min-height: 6rem;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .timelineItem .side {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
-  padding: 8px 24px;
+  padding: 0.5rem 1.5rem;
   min-width: 0;
 }
 
@@ -75,18 +75,18 @@
 }
 
 .year {
-  font-size: 40px;
+  font-size: 2.5rem;
   color: #222;
   line-height: 1.2;
 }
 
 .desc {
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1.6;
   color: #333;
   margin: 0;
-  max-width: 540px;
+  max-width: 33.75rem;
-  margin-top: 30px;
+  margin-top: 1.875rem;
 }
 
 .timelineItem.left .desc {
@@ -96,8 +96,8 @@
 .dotWrapper {
   position: relative;
   flex-shrink: 0;
-  width: 60px;
+  width: 3.75rem;
-  height: 60px;
+  height: 3.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -107,21 +107,21 @@
 }
 
 .dot {
-  width: 20px;
+  width: 1.25rem;
-  height: 20px;
+  height: 1.25rem;
   border-radius: 50%;
   background: #3875FF;
 }
 
 .dotWrapper.selected {
-  width: 60px;
+  width: 3.75rem;
-  height: 60px;
+  height: 3.75rem;
   background: #e8eaed;
 }
 
 .dotWrapper.selected .dot {
-  width: 20px;
+  width: 1.25rem;
-  height: 20px;
+  height: 1.25rem;
   background: #14355C;
 }
 
@@ -131,8 +131,8 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 60px;
+  width: 3.75rem;
-  height: 60px;
+  height: 3.75rem;
   border: 2px solid #14355C;
   border-radius: 50%;
   background: transparent;
@@ -143,7 +143,27 @@
   left: 50%;
   top: 100%;
   transform: translateX(-50%);
-  width: 6px;
+  width: 0.375rem;
   min-height: 0;
   background: #14355C;
 }
+
+@media (max-width: 1024px) {
+  .section {
+    padding: 4rem 4rem;
+  }
+
+  .headRow {
+    margin-bottom: 4rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .section {
+    padding: 2rem 1rem;
+  }
+
+  .headRow {
+    margin-bottom: 2rem;
+  }
+}

src/pages/Business/CommercialGroup.module.css

@@ -0,0 +1,302 @@
+/* Overview Section */
+.overview {
+  background: #f0f2f4;
+  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23e8eaed' fill-opacity='0.5' d='M0 50 Q 25 30 50 50 T 100 50 L 100 100 L 0 100 Z'/%3E%3C/svg%3E"); */
+  padding: 6.25rem 16.25rem;
+}
+
+.overviewInner {
+  margin: 0 auto;
+}
+
+.overviewTitle {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #222;
+  margin: 0 0 1.5rem;
+}
+
+.overviewDesc {
+  font-size: 1.125rem;
+  line-height: 1.8;
+  color: #222;
+  margin: 0 0 2.5rem;
+  max-width: 100%;
+}
+
+
+
+/* Two-column Section */
+.twoColSection {
+  /* display: flex; */
+  align-items: stretch;
+  min-height: 28rem;
+  padding: 6.25rem 0 9.375rem;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.twoColSection.reverse {
+  flex-direction: row-reverse;
+}
+
+.twoColSectionTabs {
+  height: 4.125rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 8.125rem;
+  border-bottom: 1px solid #D5D8DC;
+  margin: 0 16.25rem;
+  margin-bottom: 3.75rem;
+}
+
+.twoColSectionTab {
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 24px;
+  color: #14355C;
+  line-height: 34px;
+}
+.twoColSectionTab.active {
+  border-bottom: 2px solid #14355C;
+}
+.twoColSectionContent {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.twoColImage {
+  min-width: 0;
+  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 4/3;
+}
+
+.twoColImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.twoColImage .placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.twoColText {
+  padding: 100px 260px 150px 80px;
+  background: #F0F2F4;
+}
+
+.twoColTitle {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #222;
+  margin: 0 0 1.5rem;
+}
+
+.twoColDesc {
+  font-size: 1.125rem;
+  line-height: 1.8;
+  color: #222;
+  margin: 0 0 1rem;
+}
+
+.twoColDesc + .twoColDesc {
+  margin-top: 0;
+}
+
+.btnPrimary {
+  margin-top: 6.25rem;
+  display: inline-block;
+  width: 104px;
+  height: 38px;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #333333;
+  font-size: 16px;
+  color: #333333;
+  line-height: 38px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btnPrimary:hover {
+  background: #0f2847;
+  color: #fff;
+}
+
+/* Features Section */
+.featuresHero {
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 100px 260px;
+}
+
+.featuresHeroContent {
+  height: 690px;
+  width: 100%;
+  color: #FFFFFF;
+}
+
+.featuresHeroTabs {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 200px;
+  border-top: 1px solid rgba(255,255,255,0.5);
+}
+
+.featuresHeroTab {
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  line-height: 60px;
+  height: 60px;
+  cursor: pointer;
+}
+.featuresHeroTab.active {
+  border-top: 2px solid #FFFFFF;
+}
+
+
+.propertyServices {
+  height: 100vh;
+  color: #fff;
+  padding: 0 260px;
+}
+
+.propertyServicesContent {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.propertyServicesTitle {
+  font-weight: 700;
+  font-size: 40px;
+  color: #FFFFFF;
+  line-height: 50px;
+}
+.propertyServicesSubtitle {
+  font-weight: 500;
+  font-size: 18px;
+  color: #FFFFFF;
+  line-height: 26px;
+  margin-top: 20px;
+}
+
+.propertyServicesBtn {
+  width: 104px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #FFFFFF;
+  margin-top: 100px;
+}
+
+.propertyServicesBtn:hover {
+  background: #14355C;
+  border-color: #14355C;
+  color: #FFFFFF;
+}
+
+
+.placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 16rem;
+  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .overview {
+    padding: 3rem 2rem;
+  }
+
+  .statsRow {
+    gap: 2rem;
+  }
+
+  .twoColText {
+    padding: 2rem;
+  }
+
+  .featuresGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .overview {
+    padding: 2rem 1rem;
+  }
+
+  .overviewTitle {
+    font-size: 1.875rem;
+  }
+
+  .statNum {
+    font-size: 1.875rem;
+  }
+
+  .statsRow {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .twoColSection {
+    flex-direction: column;
+  }
+
+  .twoColSection.reverse {
+    flex-direction: column;
+  }
+
+  .twoColImage {
+    aspect-ratio: 16/9;
+    min-height: 12rem;
+  }
+
+  .twoColText {
+    padding: 1.5rem 1rem;
+  }
+
+  .twoColTitle {
+    font-size: 1.875rem;
+  }
+
+  .featuresHero {
+    min-height: 14rem;
+  }
+
+  .featuresHeroTitle {
+    font-size: 1.875rem;
+  }
+
+  .featureBlock {
+    min-height: 18rem;
+    padding: 1.5rem;
+  }
+
+  .featureBlockTitle {
+    font-size: 1.875rem;
+  }
+}

src/pages/Business/CommercialGroup.tsx

@@ -1,10 +1,138 @@
+import { useState } from "react";
 import styles from "./CommercialGroup.module.css";
 import Banner from "@/components/banner";
+import { Link } from "react-router-dom";
+import StatsRow from "@/components/layout/StatsRow/StatsRow";
+
+const PUBLIC_URL = process.env.PUBLIC_URL || "";
+const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
+
+const statsData = [
+  { num: "32 个", label: "全国在管项目" },
+  { num: "475 万平方", label: "总建筑面积" },
+  { num: "3 亿人次", label: "客流每年超" },
+  { num: "350 亿元", label: "销售额每年" },
+  { num: "5000 +", label: "合作品牌" },
+];
+
+
+function PlaceholderImage() {
+  return <div className={styles.placeholder}>占位图</div>;
+}
 
 export default function BusinessCommercialGroup() {
+  const [in77ImgError, setIn77ImgError] = useState(false);
+  const [propertyImgError, setPropertyImgError] = useState(false);
+
+  const [tabItems, setTabItems] = useState([
+    { label: 'in77', content: 'in77 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/in77' }, 
+    { label: 'inPARK', content: 'inPARK 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/inPARK' },
+    { label: '银泰城购物中心', content: '银泰城 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/shopping-center' },
+  ])
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  const [featuresTabItems, setFeaturesTabItems] = useState([
+    { label: '深耕运营', content: '全域营销 内容', image: '/images/bg-overview.png',},
+    { label: '行业领先', content: '数字化运营 内容', image: '/images/bg-overview.png',  },
+    { label: '创新变革', content: '全球品牌合作 内容', image: '/images/bg-overview.png',  },
+    { label: '数字生态', content: '全球品牌合作 内容', image: '/images/bg-overview.png',  },
+  ])
+  const [activeFeaturesTabIndex, setActiveFeaturesTabIndex] = useState(0);
+
   return (
     <div>
-      <Banner title="银泰商业集团" largedesc="传统零售业的推动者和变革者" showBreadcrumb={true} backgroundImage="/images/bg-commercial-group.png" />
+      {/* 1. Hero Banner */}
+      <Banner
+        title="银泰商业集团"
+        desc="传统零售业的推动者和典范"
+        titleSize="medium"
+        showBreadcrumb={true}
+        breadcrumbItems={[
+          { label: "首页", to: "/" },
+          { label: "集团业务", to: "/business" },
+          { label: "银泰商业集团", to: "" },
+        ]}
+        backgroundImage={`${PUBLIC_URL}/images/bg-commercial-group.png`}
+      />
+
+      {/* 2. Overview + Stats */}
+      <section className={styles.overview}>
+        <div className={styles.overviewInner}>
+          <p className={styles.overviewDesc}>
+            <span className={styles.overviewTitle}>银泰商业集团</span>
+            作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
+          </p>
+          <p className={styles.overviewDesc}>
+            作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
+          </p>
+          <StatsRow statsData={statsData} />
+        </div>
+      </section>
+
+      {/* 3. in77 Section - Image Left, Text Right */}
+      <section className={styles.twoColSection}
+        style={{ backgroundImage: 'url(/images/bg-in.png)' }}
+      >
+        <div className={styles.twoColSectionTabs}>
+          {tabItems.map((item, i) => (
+            <div key={i} className={`${styles.twoColSectionTab} ${activeTabIndex === i ? styles.active : ''}`} onClick={() => setActiveTabIndex(i)}>
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+        <div className={styles.twoColSectionContent}>
+          <div className={styles.twoColImage}>
+            {in77ImgError ? (
+              <PlaceholderImage />
+            ) : (
+              <img
+                src={tabItems[activeTabIndex].image}
+                alt="in77 杭州湖滨银泰"
+                onError={() => setIn77ImgError(true)}
+                style={{ width: '100%', height: '800px' }}
+              />
+            )}
+          </div>
+          <div className={styles.twoColText}>
+            <p className={styles.twoColDesc}>{tabItems[activeTabIndex].content}</p>
+            <a href={tabItems[activeTabIndex].path} className={styles.btnPrimary}>
+              查看详情
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Features Section - Hero + 3 Blocks */}
+      <section className={styles.featuresHero} style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}>
+        <div className={styles.featuresHeroContent}>
+          <div>{featuresTabItems[activeFeaturesTabIndex].content}</div>
+        </div>
+        <div className={styles.featuresHeroTabs}>
+          {featuresTabItems.map((item, i) => (
+            <div key={i} className={`${styles.featuresHeroTab} ${activeFeaturesTabIndex === i ? styles.active : ''}`} onClick={() => setActiveFeaturesTabIndex(i)}>
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+      
+
+      {/* 5. Property Services - Text Left, Image Right */}
+      <section className={`${styles.twoColSection} ${styles.propertyServices}`}
+      style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}
+      >
+        <div className={styles.propertyServicesContent}>
+          <div className={styles.propertyServicesTitle}>
+            物业服务
+          </div>
+          <p className={styles.propertyServicesSubtitle}>
+            国内一流物业服务品牌
+          </p>
+          <Link to="/property-service" className={styles.propertyServicesBtn}>
+            查看详情
+          </Link>
+        </div>
+      </section>
     </div>
   );
 }

src/pages/Business/CommercialGroupDetail.module.css

@@ -0,0 +1,96 @@
+.twoColSection {
+    padding: 100px 260px;
+}
+
+.twoColSection p {
+    font-size: 18px;
+    color: #222;
+    line-height: 24px;
+    margin-bottom: 20px;
+}
+
+
+.threeColSection {
+    padding: 100px 260px;
+    width: 100%;
+    height: 966px;
+    background: rgba(216, 216, 216, 0.5);
+}
+
+.threeColTabs {
+    height: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 70px;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 34px;
+    border-bottom: 1px solid #D5D8DC;
+}
+
+.threeColTabItem {
+    height: 60px;
+    cursor: pointer;
+    color: #222222;
+}
+
+.threeColTabItem.active {
+    border-bottom: 2px solid #000000;
+    color: #14355C;
+}
+
+.threeColContent {
+    padding: 150px 0;
+    display: flex;
+    gap: 80px;
+    flex-direction: row;
+}
+
+.threeColContentLeft {
+    flex: 6;
+    margin: auto 0;
+    .threeColContentLeftHead {
+        margin-bottom: 30px;
+        display: flex;
+        gap: 10px;
+
+        .threeColContentLeftTitle {
+            .threeColContentLeftTitleMain {
+                font-weight: 700;
+                font-size: 40px;
+                color: #222222;
+                line-height: 50px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+            .threeColContentLeftTitleSub {
+                font-weight: 400;
+                font-size: 18px;
+                color: #14355C;
+                line-height: 26px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+    }
+    .threeColContentLeftDesc {
+        font-weight: 400;
+        font-size: 18px;
+        color: #222222;
+        line-height: 34px;
+        text-align: justify;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+.threeColContentRight {
+    flex: 8;
+    img {
+        width: 800px;
+        height: 500px;
+    }
+}

src/pages/Business/CommercialGroupDetail.tsx

@@ -0,0 +1,63 @@
+import Banner from "@/components/banner";
+import styles from "./CommercialGroupDetail.module.css";
+import { useState } from "react";
+export default function BusinessCommercialGroupDetail() {
+  const [tabItems, setTabItems] = useState([
+    { label: "北京银泰中心in01", icon: "", title: '北京银泰中心', subtitle: '精致优雅的典范', sideImg: '/images/bg-overview.png' },
+    { label: "杭州湖滨银泰in77", icon: "", title: '杭州湖滨银泰', subtitle: '潮流时尚的聚集地', sideImg: '/images/bg-overview.png' },
+    { label: "北京王府井银泰in88", icon: "", title: '北京王府井银泰', subtitle: '时尚购物的理想选择', sideImg: '/images/bg-overview.png' },
+    { label: "成都银泰中心in99", icon: "", title: '成都银泰中心', subtitle: '现代都市的活力中心', sideImg: '/images/bg-overview.png' },
+    { label: "合肥银泰中心in77", icon: "", title: '合肥银泰中心', subtitle: '城市商业的璀璨明珠', sideImg: '/images/bg-overview.png' },
+  ]);
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div>
+      <Banner
+        title="in77"
+        largedesc="地标型高端商业综合体"
+        titleSize="large"
+        showBreadcrumb={true}
+        breadcrumbItems={[
+          { label: "首页", to: "/" },
+          { label: "集团业务", to: "/business" },
+          { label: "银泰商业集团", to: "/business/commercial-group" },
+          { label: "in77", to: "" },
+        ]}
+        backgroundImage={`/images/bg-commercial-group.png`}
+      />
+
+      <section className={styles.twoColSection}>
+        <p>in77 作为高端商业品牌，汲取了银泰集团优质的商业资源及运营管理能力，旗下项目均位于核心商业圈或国家示范步行街，成为时尚零售业和新消费领域的标杆。目前有北京银泰中心in01、杭州湖滨银泰in77、北京王府井银泰in88、合肥银泰in77及成都银泰中心in99等项目。每个项目都融入“唤醒真正的自我”的理念，同时亦不乏各自特色与个性。</p>
+        <p>2024年，“in77”正式升级为高端产品线，标志着银泰商业集团在商业领域的深化运营与转型发展迈入新阶段。新系列产品以 “全球商业标杆、时尚购物打卡地、年轻人社交聚集地”为核心理念，旨在加速银泰商业集团全国商业布局，推动集团化快速发展。</p>
+      </section>
+
+      <section className={styles.threeColSection}>
+        <div className={styles.threeColTabs}>
+          {tabItems.map((item, index) => (
+            <div key={index} className={`${styles.threeColTabItem} ${activeTab === index ? styles.active : ''}`} onClick={() => setActiveTab(index)}>
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+        <div className={styles.threeColContent}>
+          <div className={styles.threeColContentLeft}>
+            <div className={styles.threeColContentLeftHead}>
+              <img src="" alt="" style={{width: '100px', height: '100px'}} />
+              <div className={styles.threeColContentLeftTitle}>
+                <div className={styles.threeColContentLeftTitleMain}>{tabItems[activeTab].title}</div>
+                <div className={styles.threeColContentLeftTitleSub}>{tabItems[activeTab].subtitle}</div>
+              </div>
+            </div>
+            <p className={styles.threeColContentLeftDesc}>
+            地处CBD核心的北京银泰中心in01，是集思想性、艺术性于一体的高端购物中心，更是引领潮流和定制尊享的目的地。in01倡导美、个性和活力，打造了一个集潮奢品牌、时尚运动、独特购物体验于一体的商业艺术空间，目前拥有Chrome Hears、alexanderwang、RICHARD MILLE 、Burton、华为等品牌首店或旗舰店，为客人带来高品质的全新生活方式和购物体验，同时也诠释了优雅的in式服务概念。
+            </p>
+          </div>
+          <div className={styles.threeColContentRight}>
+            <img src={tabItems[activeTab].sideImg} alt=""/>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/Home/Home.module.css

@@ -20,21 +20,21 @@
 .heroContent {
   position: relative;
   z-index: 1;
-  padding: 0 24px;
+  padding: 0 1.5rem;
-  padding-top: 550px;
+  padding-top: 34.375rem;
   padding-left: 13.5%;
 }
 
 .heroTitle {
-  font-size: 48px;
+  font-size: 3rem;
   font-weight: 700;
   color: #fff;
-  margin: 0 0 16px;
+  margin: 0 0 1rem;
   letter-spacing: 0.05em;
 }
 
 .heroSubtitle {
-  font-size: 20px;
+  font-size: 1.25rem;
   color: rgba(255, 255, 255, 0.95);
   margin: 0;
   letter-spacing: 0.02em;
@@ -64,7 +64,7 @@
 .commercialContent {
   position: relative;
   z-index: 1;
-  margin: 0 260px;
+  margin: 0 16.25rem;
   display: flex;
   width: 100%;
   height: 100%;
@@ -77,57 +77,56 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-bottom: 135px;
+  padding-bottom: 8.4375rem;
-  padding-left: 16px;
+  padding-left: 1rem;
   box-sizing: border-box;
 }
 .commercialItem:last-child {
   border-right: 1px solid #fff;
 }
 .commercialTitle {
-  font-size: 40px;
+  font-size: 1.25rem;
-  font-size: 20px;
   font-weight: 700;
   color: #fff;
-  margin: 0 0 24px;
+  margin: 0 0 1.5rem;
   letter-spacing: 0.05em;
   cursor: pointer;
 }
 
 .commercialDesc {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.95);
-  max-width: 560px;
+  max-width: 35rem;
   margin: 0;
 }
 
 .commercialLinks {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 1.25rem;
   color: #fff;
   text-decoration: underline;
-  margin-top: 100px;
+  margin-top: 6.25rem;
 }
 
 .commercialLink {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 /* Cards */
 .cards {
-  padding: 150px 100px;
+  padding: 9.375rem 6.25rem;
   background: url('/public/images/bg-mask-card.png') no-repeat center center;
   background-size: cover;
 }
 
 .cardsInner {
-  max-width: 1720px;
+  max-width: 107.5rem;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
+  gap: 1.5rem;
 }
 
 .card {
@@ -139,10 +138,70 @@
   align-items: flex-end;
 }
 
+@media (max-width: 1024px) {
+  .commercialContent {
+    margin: 0 4rem;
+  }
+
+  .newsFeaturedImgWrap {
+    max-width: 100%;
+  }
+
+  .news {
+    padding: 4rem 2rem;
+  }
+}
+
 @media (max-width: 768px) {
   .cardsInner {
     grid-template-columns: 1fr;
   }
+
+  .cards {
+    padding: 4rem 1.5rem;
+  }
+
+  .heroContent {
+    padding-top: 20rem;
+    padding-left: 5%;
+  }
+
+  .commercialContent {
+    margin: 0 1rem;
+    flex-direction: column;
+  }
+
+  .commercialItem {
+    padding-bottom: 2rem;
+    padding-left: 1rem;
+  }
+
+  .commercialLinks {
+    margin-top: 2rem;
+  }
+
+  .news {
+    padding: 2rem 1rem;
+  }
+
+  .newsTitle {
+    margin: 1rem 0 2rem;
+  }
+
+  .newsGrid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .newsFeaturedImgWrap {
+    width: 100%;
+  }
+
+  .newsItem {
+    padding: 1rem 1.25rem;
+    height: auto;
+    min-height: 6rem;
+  }
 }
 
 .cardBg {
@@ -169,18 +228,18 @@
 .cardContent {
   position: relative;
   z-index: 1;
-  padding: 32px;
+  padding: 2rem;
   color: #fff;
 }
 
 .cardTitle {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 600;
-  margin: 0 0 12px;
+  margin: 0 0 0.75rem;
 }
 
 .cardDesc {
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.7;
   margin: 0;
   opacity: 0.95;
@@ -193,7 +252,7 @@
 
 /* News */
 .news {
-  padding: 80px 60px;
+  padding: 5rem 3.75rem;
 }
 
 .newsInner {
@@ -201,17 +260,17 @@
 }
 
 .newsTitle {
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: 700;
   color: #222222;
   text-align: center;
-  margin: 20px 0 80px;
+  margin: 1.25rem 0 5rem;
 }
 
 .newsGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 1.25rem;
   align-items: start;
 }
 
@@ -220,7 +279,8 @@
 }
 
 .newsFeaturedImgWrap {
-  width: 950px;
+  width: 59.375rem;
+  max-width: 100%;
   aspect-ratio: 950 / 560;
   background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
   overflow: hidden;
@@ -236,10 +296,10 @@
 
 .newsFeaturedCaption {
   position: absolute;
-  bottom: 22px;
+  bottom: 1.375rem;
-  left: 40px;
+  left: 2.5rem;
   font-weight: 500;
-  font-size: 24px;
+  font-size: 1.5rem;
   color: #FFFFFF;
   width: 80%;
 }
@@ -247,13 +307,13 @@
 .newsList {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .newsItem {
   box-sizing: border-box;
-  padding: 24px 30px 20px 30px;
+  padding: 1.5rem 1.875rem 1.25rem 1.875rem;
-  height: 180px;
+  height: 11.25rem;
   background: #FFFFFF;
   display: flex;
   flex-direction: column;
@@ -262,10 +322,10 @@
 
 
 .newsItemTitle {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 500;
   color: #333;
-  margin: 0 0 8px;
+  margin: 0 0 0.5rem;
   line-height: 1.4;
 }
 
@@ -279,9 +339,9 @@
 }
 
 .newsItemSnippet {
-  font-size: 16px;
+  font-size: 1rem;
   color: #666;
-  margin: 0 0 8px;
+  margin: 0 0 0.5rem;
   line-height: 1.6;
 
   display: -webkit-box;
@@ -292,6 +352,6 @@
 }
 
 .newsItemDate {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #999;
 }

src/pages/PropertyService/PropertyService.module.css

@@ -0,0 +1,5 @@
+.propertyService {
+    padding: 100px 260px;
+    background: rgba(255, 255, 255, 0.8);
+}
+

src/pages/PropertyService/index.tsx

@@ -0,0 +1,50 @@
+import Banner from "@/components/banner";
+import styles from "./PropertyService.module.css";
+import StatsRow from "@/components/layout/StatsRow/StatsRow";
+import { useState } from "react";
+import SectionTitle from "@/components/layout/SectionTitle";
+import SwiperCardSection from "@/components/layout/SwiperCardSection";
+
+export default function PropertyService() {
+  const [statsData] = useState([
+    { num: "32 个", label: "全国在管项目" },
+    { num: "475 万平方", label: "总建筑面积" },
+    { num: "3 亿人次", label: "客流每年超" },
+    { num: "350 亿元", label: "销售额每年" },
+    { num: "5000 +", label: "合作品牌" },
+  ])
+
+  const swiperCardData = {
+    title: "服务业态",
+    cardItems: [
+      { title: "服务业态1", desc: "服务业态1", image: "/images/bg-overview.png" },
+      { title: "服务业态2", desc: "服务业态2", image: "/images/bg-overview.png" },
+      { title: "服务业态3", desc: "服务业态3", image: "/images/bg-overview.png" },
+      { title: "服务业态4", desc: "服务业态3", image: "/images/bg-overview.png" },
+      { title: "服务业态5", desc: "服务业态3", image: "/images/bg-overview.png" },
+    ],
+  }
+  return (
+    <div>
+      <Banner
+        title="物业服务"
+        desc="国内一流物业服务品牌"
+        titleSize="medium"
+        showBreadcrumb={false}
+        backgroundImage={`/images/bg-overview.png`}
+      />
+
+      <section className={`${styles.propertyService} normal-p`}>
+        <div className={styles.propertyServiceContent}>
+          <p>银泰智享物业 管理有限公司是一家集品质物业服务、资产托管运营、智慧物联管理、科技平台创新运维为一体的专业化物业服务企业，致力于商办类物业运营管理、打造资产全周期生态服务。</p>
+          <p>凭借银泰集团多年城市商业地产运营经验不断深化创新，银泰智享积极拓展业务深度与广度，做强基础物业服务，深耕客户卓越服务体验，创造企业多元化价值。核心业务涵盖资产全托管服务、资产顾问服务、资产设施服务、物业品牌合作等，着力实现服务体系化、标准化、精细化、智慧化“四化合一”，打造国内一流的物业管理品牌。</p>
+        </div>
+        <StatsRow statsData={statsData} />
+      </section>
+
+      <SwiperCardSection data={swiperCardData} />
+    </div>
+  );
+}
+
+

src/utils/data.ts

@@ -0,0 +1,5 @@
+export default {
+    menus: [
+        
+    ]
+}