diff --git a/src/components/layout/RowAccordion/index.tsx b/src/components/layout/RowAccordion/index.tsx
index 48a7fee..e974c49 100644
--- a/src/components/layout/RowAccordion/index.tsx
+++ b/src/components/layout/RowAccordion/index.tsx
@@ -15,7 +15,9 @@ type Data = {
text: string;
path: string;
}[];
- image: string;
+ /** 以 mockData 为准，优先使用 backgroundImage */
+ backgroundImage?: string;
+ image?: string;
}[];
}
@@ -34,7 +36,7 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
key={index}
className={styles.rowAccordionBgLayer}
style={{
- backgroundImage: `url(${item.image}), ${FALLBACK_GRADIENT}`,
+ backgroundImage: `url(${item.backgroundImage ?? item.image ?? ""}), ${FALLBACK_GRADIENT}`,
opacity: activeIndex === index ? 1 : 0,
}}
/>
diff --git a/src/components/layout/SwiperCardSection/index.tsx b/src/components/layout/SwiperCardSection/index.tsx
index 28c10f5..8926ded 100644
--- a/src/components/layout/SwiperCardSection/index.tsx
+++ b/src/components/layout/SwiperCardSection/index.tsx
@@ -11,7 +11,9 @@ type Data = {
title: string;
desc?: string;
content?: string;
- image: string;
+ /** 以 mockData 为准，优先使用 backgroundImage */
+ backgroundImage?: string;
+ image?: string;
}[];
}
@@ -45,7 +47,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
{data.cardItems.map((item) => (
- 
+ 
diff --git a/src/components/layout/TopTabsSection/TopTabs.tsx b/src/components/layout/TopTabsSection/TopTabs.tsx
index 68a81ce..1fe37ed 100644
--- a/src/components/layout/TopTabsSection/TopTabs.tsx
+++ b/src/components/layout/TopTabsSection/TopTabs.tsx
@@ -1,48 +1,149 @@
-import { useState } from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import styles from './index.module.css';
type Data = {
tabItems: {
icon?: string;
- tabName: string;
- contentTitle: string;
- contentSubtitle: string;
- contentText: string;
- image: string;
- }[]
+ tabName?: string;
+ contentTitle?: string;
+ contentSubtitle?: string;
+ contentText?: string;
+ content?: string;
+ /** 以 mockData 为准，tabItems 可能使用 sideImage 或 backgroundImage */
+ sideImage?: string;
+ path?: string;
+ }[],
+ backgroundImage?: string;
+ titleDirection?: 'row' | 'column';
+ className?: string;
}
-export default function TopTabs({ data }: { data: Data }) {
- const [activeIndex, setActiveIndex] = useState(0);
+export default function TopTabs({ data, activeIndex, setActiveIndex, className }: { data: Data, activeIndex: number, setActiveIndex: (index: number) => void, className?: string }) {
+ const containerRef = useRef(null);
+ const scrollRef = useRef(null);
+
+ const [indicatorStyle, setIndicatorStyle] = useState<{ left: number; width: number }>({ left: 0, width: 0 });
+ const [canScrollLeft, setCanScrollLeft] = useState(false);
+ const [canScrollRight, setCanScrollRight] = useState(false);
+ const [shouldCenter, setShouldCenter] = useState(true);
+
+ const updateIndicatorPosition = useCallback(() => {
+ const scrollEl = scrollRef.current;
+ const activeTab = activeIndex < data.tabItems.length
+ ? (scrollEl?.children[activeIndex] as HTMLElement)
+ : null;
+
+ if (!scrollEl || !activeTab) return;
+
+ const container = containerRef.current;
+ if (!container) return;
+
+ const containerRect = container.getBoundingClientRect();
+ const scrollRect = scrollEl.getBoundingClientRect();
+ const tabRect = activeTab.getBoundingClientRect();
+
+ const scrollLeft = scrollEl.scrollLeft;
+ const tabOffsetLeft = activeTab.offsetLeft;
+
+ const left = scrollRect.left - containerRect.left + tabOffsetLeft - scrollLeft;
+ const width = tabRect.width;
+
+ setIndicatorStyle({ left, width });
+ }, [activeIndex, data.tabItems.length]);
+
+ const updateScrollState = useCallback(() => {
+ const scrollEl = scrollRef.current;
+ if (!scrollEl) return;
+ const { scrollLeft, clientWidth, scrollWidth } = scrollEl;
+ setCanScrollLeft(scrollLeft > 0);
+ setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+ setShouldCenter(scrollWidth <= clientWidth);
+ }, []);
+
+ const handleScrollLeft = () => {
+ scrollRef.current?.scrollBy({ left: -200, behavior: 'smooth' });
+ };
+
+ const handleScrollRight = () => {
+ scrollRef.current?.scrollBy({ left: 200, behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ const scrollEl = scrollRef.current;
+ const handleScroll = () => {
+ updateIndicatorPosition();
+ updateScrollState();
+ };
+
+ const rafId = requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ updateIndicatorPosition();
+ updateScrollState();
+ });
+ });
+
+ if (!scrollEl) return () => cancelAnimationFrame(rafId);
+
+ scrollEl.addEventListener('scroll', handleScroll);
+
+ const resizeObserver = new ResizeObserver(() => {
+ updateIndicatorPosition();
+ updateScrollState();
+ });
+ resizeObserver.observe(scrollEl);
+
+ return () => {
+ cancelAnimationFrame(rafId);
+ scrollEl.removeEventListener('scroll', handleScroll);
+ resizeObserver.disconnect();
+ };
+ }, [activeIndex, data.tabItems.length, updateIndicatorPosition, updateScrollState]);
+
return (
-
-
- {data.tabItems.map((item, index) => (
-
- setActiveIndex(index)}>
- {item.tabName}
-
- ))}
-
- setShowDropPanel(false)} />}
);
}
-function DropPanel({ items, left }: { items: NavChild[]; left: number }) {
+function DropPanel({ items, left, onLinkClick }: { items: NavChild[]; left: number, onLinkClick: () => void }) {
return (
-
- {showDropPanel && activePanelItem.length > 0 &&
- {
- data.tabItems[activeIndex].icon && (
- 
- )
- }
-
-
+
)
}
\ No newline at end of file
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index ae9017e..790c813 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -106,18 +106,18 @@ export default function Header() {
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
index a222c0a..7a81683 100644
--- a/src/components/layout/TopTabsSection/index.module.css
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -4,30 +4,90 @@
min-height: 100vh;
background-size: cover;
background-position: center;
- background-repeat: no-repeat;
+ background-repeat: repeat;
}
.topTabsTabs {
- height: 60px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- justify-content: space-between;
+ position: relative;
+ /* height: 60px; */
font-weight: 400;
font-size: 24px;
line-height: 34px;
border-bottom: 1px solid #D5D8DC;
- padding: 0 260px;
+ width: 100%;
+ overflow: hidden;
+}
+
+.topTabsNavBtn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 1;
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ background: #fff;
+ color: #14355C;
+ cursor: pointer;
+ border-radius: 50%;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+ transition: background 0.2s, color 0.2s;
+}
+
+.topTabsNavBtn:hover {
+ background: #f0f2f5;
+ color: #14355C;
+}
+
+.topTabsNavBtnLeft {
+ left: 0px;
+}
+
+.topTabsNavBtnRight {
+ right: 0px;
+}
+
+.topTabsTabsScroll {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 130px;
+ height: 100%;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ /* 隐藏滚动条 */
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.topTabsTabsScrollCenter {
+ justify-content: center;
+}
+
+.topTabsBottomLine {
+ position: absolute;
+ bottom: 0;
+ height: 2px;
+ background: #000000;
+ transition: left 0.25s ease, width 0.25s ease;
}
.topTabsTabItem {
- height: 60px;
+ height: 90px;
+ line-height: 90px;
+ flex-shrink: 0;
cursor: pointer;
color: #222222;
}
.topTabsTabItem.active {
- border-bottom: 2px solid #000000;
color: #14355C;
}
@@ -72,6 +132,12 @@
text-transform: none;
}
}
+
+ .columnCenter {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ }
}
.topTabsContentLeftDesc {
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
index 18cb02b..d46c92c 100644
--- a/src/components/layout/TopTabsSection/index.tsx
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -5,18 +5,45 @@ import TopTabs from './TopTabs';
type Data = {
tabItems: {
icon?: string;
- tabName: string;
- contentTitle: string;
- contentSubtitle: string;
- contentText: string;
- image: string;
+ tabName?: string;
+ contentTitle?: string;
+ contentSubtitle?: string;
+ contentText?: string;
+ content?: string;
+ /** 以 mockData 为准 */
+ sideImage?: string;
+ path?: string;
}[]
+ backgroundImage?: string;
+ titleDirection?: 'row' | 'column';
}
-export default function TopTabsSection({ data }: { data: Data }) {
+export default function TopTabsSection({ data, className }: { data: Data, className?: string }) {
+ const [activeIndex, setActiveIndex] = useState(0);
return (
- {data.tabItems[activeIndex].contentTitle}
- {data.tabItems[activeIndex].contentSubtitle}
+
+
+ {canScrollLeft && (
+
+ )}
+
-
+ {data.tabItems.map((item, index) => (
+
- setActiveIndex(index)}
+ >
+ {item.tabName}
- - {data.tabItems[activeIndex].contentText} -
-
- 
+ ))}
+ {canScrollRight && (
+
+ )}
+
+
+
+
+ {
+ data.tabItems[activeIndex].icon && (
+
+ )
+ }
+
+
+
+ {data.tabItems[activeIndex].contentTitle}
+ {data.tabItems[activeIndex].contentSubtitle}
+ + {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} +
+
+ 
+
+
{items.map((item) => (
-
+
{item.label}
diff --git a/src/pages/About/Founder.module.css b/src/pages/About/Founder.module.css
index 51a696a..1100b5f 100644
--- a/src/pages/About/Founder.module.css
+++ b/src/pages/About/Founder.module.css
@@ -171,6 +171,24 @@
}
}
+
+.section4Section {
+ padding-top: 100px;
+
+ .section4Title {
+ font-weight: 700;
+ font-size: 40px;
+ color: #222222;
+ line-height: 50px;
+ text-align: center;
+ }
+ .timelineWrapper {
+ width: 100%;
+ overflow: auto;
+ }
+}
+
+
@media (max-width: 768px) {
.section {
padding: 2rem 1rem;
@@ -196,4 +214,7 @@
padding-top: 1rem;
padding-right: 0;
}
+
+ .timelineWrapper {
+ }
}
\ No newline at end of file
diff --git a/src/pages/About/Founder.tsx b/src/pages/About/Founder.tsx
index 0bd1b3f..ca56d80 100644
--- a/src/pages/About/Founder.tsx
+++ b/src/pages/About/Founder.tsx
@@ -3,6 +3,7 @@ import styles from "./Founder.module.css";
import ParagraphSection from "@/components/layout/ParagraphSection";
import { useStore } from "@/store";
import Section from "@/components/layout/Section";
+import SineWaveTimeline from "@/components/SineWaveTimeline";
export default function AboutFounder() {
const appConfig = useStore((s) => s.appConfig);
@@ -31,7 +32,7 @@ export default function AboutFounder() {
{section1Data.items?.map((item, index) => (
-
+ 
@@ -68,24 +69,29 @@ export default function AboutFounder() {
)}
{/* 社会职务 */}
-
-
+ {section3Data && (
+
+
+ )}
- {/* 荣誉奖项 */}
-
-
-
+ {section4Data && (
+
+ )}
);
}
diff --git a/src/pages/Business/BaseGroup.tsx b/src/pages/Business/BaseGroup.tsx
index ba01294..1c781e8 100644
--- a/src/pages/Business/BaseGroup.tsx
+++ b/src/pages/Business/BaseGroup.tsx
@@ -22,10 +22,10 @@ export default function BaseGroup() {
const swiperCardData = section2Data
? {
title: section2Data.title,
- cardItems: section2Data.cardItems?.map((c: { title: string; content: string; image: string }) => ({
+ cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
- image: c.image,
+ backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
diff --git a/src/pages/Business/CommercialGroup.module.css b/src/pages/Business/CommercialGroup.module.css
index 2a961fe..af69977 100644
--- a/src/pages/Business/CommercialGroup.module.css
+++ b/src/pages/Business/CommercialGroup.module.css
@@ -35,8 +35,8 @@
background-size: cover;
background-position: center;
background-repeat: no-repeat;
+ padding: 100px 0 !important;
}
-
.twoColSection.reverse {
flex-direction: row-reverse;
}
@@ -45,11 +45,7 @@
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 {
@@ -66,6 +62,7 @@
.twoColSectionContent {
display: grid;
grid-template-columns: 1fr 1fr;
+ margin-top: 60px;
}
.twoColImage {
diff --git a/src/pages/Business/CommercialGroup.tsx b/src/pages/Business/CommercialGroup.tsx
index 8fc1353..8d52460 100644
--- a/src/pages/Business/CommercialGroup.tsx
+++ b/src/pages/Business/CommercialGroup.tsx
@@ -1,9 +1,11 @@
import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useStore } from "@/store";
import styles from "./CommercialGroup.module.css";
import Banner from "@/components/Banner";
-import { Link } from "react-router-dom";
import ParagraphSection from "@/components/layout/ParagraphSection";
-import { useStore } from "@/store";
+import Section from "@/components/layout/Section";
+import TopTabs from "@/components/layout/TopTabsSection/TopTabs";
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
@@ -23,8 +25,8 @@ export default function BusinessCommercialGroup() {
const banner = data.banner;
const section1Data = data.section1Data;
- const tabItems = data.section2Data?.tabItems ?? [];
- const featuresTabItems = data.section3Data?.tabItems ?? [];
+ const section2Data = data.section2Data;
+ const section3Data = data.section3Data;
return (
- {Array.from({
- length: Math.max(0, ...(section3Data?.columns?.map((c) => c.length) ?? [0])),
- }).flatMap((_, rowIndex) =>
- (section3Data?.columns ?? []).map((colItems, colIndex) => (
-
-
- {colItems[rowIndex] ? {colItems[rowIndex].title} : null}
-
- ))
- )}
-
+ {Array.from({
+ length: Math.max(0, ...(section3Data?.columns?.map((c) => c.length) ?? [0])),
+ }).flatMap((_, rowIndex) =>
+ (section3Data?.columns ?? []).map((colItems, colIndex) => (
+
+
+ {colItems[rowIndex] ? {colItems[rowIndex].title} : null}
+
+ ))
+ )}
+ {section4Data?.title}
+
+
+
@@ -38,28 +40,18 @@ export default function BusinessCommercialGroup() {
{section1Data &&
-
+
-
+
);
}
diff --git a/src/pages/Business/RealtyGroup.tsx b/src/pages/Business/RealtyGroup.tsx
index 9e651b8..5697a57 100644
--- a/src/pages/Business/RealtyGroup.tsx
+++ b/src/pages/Business/RealtyGroup.tsx
@@ -25,10 +25,10 @@ export default function RealtyGroup() {
const rowAccordionData = section3Data
? {
title: section3Data.title,
- items: section3Data.items?.map((i: { title: string; content?: string; image: string }) => ({
+ items: section3Data.items?.map((i: { title: string; content?: string; backgroundImage?: string }) => ({
title: i.title,
content: i.content,
- image: i.image,
+ backgroundImage: i.backgroundImage,
})) ?? [],
}
: null;
diff --git a/src/pages/Business/RuijingGroup.tsx b/src/pages/Business/RuijingGroup.tsx
index ce3cc96..1cfe4fd 100644
--- a/src/pages/Business/RuijingGroup.tsx
+++ b/src/pages/Business/RuijingGroup.tsx
@@ -22,10 +22,10 @@ export default function RuijingGroup() {
const swiperCardData = section2Data
? {
title: section2Data.title,
- cardItems: section2Data.cardItems?.map((c: { title: string; content: string; image: string }) => ({
+ cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
- image: c.image,
+ backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
diff --git a/src/pages/PropertyService/index.tsx b/src/pages/PropertyService/index.tsx
index 3295823..3199191 100644
--- a/src/pages/PropertyService/index.tsx
+++ b/src/pages/PropertyService/index.tsx
@@ -20,10 +20,10 @@ export default function PropertyService() {
const swiperCardData = section2Data
? {
title: section2Data.title,
- cardItems: section2Data.cardItems?.map((c: { title: string; content: string; image: string }) => ({
+ cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
- image: c.image,
+ backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
@@ -31,9 +31,9 @@ export default function PropertyService() {
const rowAccordionData = section3Data
? {
title: section3Data.title,
- items: section3Data.items?.map((i: { title: string; image: string }) => ({
+ items: section3Data.items?.map((i: { title: string; backgroundImage?: string }) => ({
title: i.title,
- image: i.image,
+ backgroundImage: i.backgroundImage,
})) ?? [],
}
: null;
diff --git a/src/pages/Social/Foundation.module.css b/src/pages/Social/Foundation.module.css
index d1b9767..ffa3413 100644
--- a/src/pages/Social/Foundation.module.css
+++ b/src/pages/Social/Foundation.module.css
@@ -1,3 +1,7 @@
+.topTabsSection {
+ padding: 0 !important;
+}
+
/* 公益传播 */
.publicWelfareDataItems {
/* 2列 */
diff --git a/src/pages/Social/Foundation.tsx b/src/pages/Social/Foundation.tsx
index b63f040..49142ef 100644
--- a/src/pages/Social/Foundation.tsx
+++ b/src/pages/Social/Foundation.tsx
@@ -1,12 +1,12 @@
import Banner, { type BannerConfig } from "@/components/Banner";
import { useState } from "react";
import ParagraphSection from "@/components/layout/ParagraphSection";
-import TopTabs from "@/components/layout/TopTabsSection/TopTabs";
import Section from "@/components/layout/Section";
import AnimateTopCard from "@/components/layout/AnimateTopCard";
import BottomTabs from "@/components/layout/BottomTabsSection/BottomTabs";
import { useStore } from "@/store";
import styles from "./Foundation.module.css";
+import TopTabsSection from "@/components/layout/TopTabsSection";
export default function Foundation() {
const appConfig = useStore((s) => s.appConfig);
@@ -20,9 +20,6 @@ export default function Foundation() {
const section2Data = data.section2Data;
const section3Data = data.section3Data;
const section4Data = data.section4Data;
- const section5Data = data.section5Data;
-
- const topTabsData = section2Data ? { tabItems: section2Data.tabItems ?? [] } : null;
return (
- {tabItems.map((item: { label: string }, i: number) => (
-
+ setActiveTabIndex(i)}
- >
- {item.label}
-
- ))}
-
{in77ImgError ? (
setIn77ImgError(true)}
style={{ width: "100%", height: "800px" }}
@@ -67,16 +59,16 @@ export default function BusinessCommercialGroup() {
)}
-
{tabItems[activeTabIndex]?.content}
+{section2Data.tabItems[activeTabIndex]?.content}
查看详情
-
{featuresTabItems[activeFeaturesTabIndex]?.content}
+ {section3Data.tabItems[activeFeaturesTabIndex]?.content}
- {featuresTabItems.map((item: { label: string }, i: number) => (
+ {section3Data.tabItems.map((item: { tabName: string }, i: number) => (
diff --git a/src/pages/Business/CommercialGroupDetail.tsx b/src/pages/Business/CommercialGroupDetail.tsx
index 38ce2e4..dc280bd 100644
--- a/src/pages/Business/CommercialGroupDetail.tsx
+++ b/src/pages/Business/CommercialGroupDetail.tsx
@@ -1,10 +1,15 @@
import Banner, { type BannerConfig } from "@/components/Banner";
import { useStore } from "@/store";
import styles from "./CommercialGroupDetail.module.css";
-
+import ParagraphSection from "@/components/layout/ParagraphSection";
+import { useParams } from "react-router-dom";
+import TopTabsSection from "@/components/layout/TopTabsSection";
export default function BusinessCommercialGroupDetail() {
const appConfig = useStore((s) => s.appConfig);
- const data = appConfig?.business?.commercialGroupDetail;
+ const allData = appConfig?.business?.commercialGroupDetail;
+ const params = useParams()
+ const detailType = params.detailType as string
+ const data = allData?.items.find((item: any) => item.pathname === detailType)
const banner = data?.banner;
if (!data) return null;
@@ -19,11 +24,9 @@ export default function BusinessCommercialGroupDetail() {
backgroundImage={banner?.backgroundImage ?? "/images/bg-commercial-group.png"}
/>
- setActiveFeaturesTabIndex(i)}
>
- {item.label}
+ {item.tabName}
))}
- in77 作为高端商业品牌，汲取了银泰集团优质的商业资源及运营管理能力，旗下项目均位于核心商业圈或国家示范步行街，成为时尚零售业和新消费领域的标杆。 -
-
@@ -37,19 +34,17 @@ export default function Foundation() {
{section1Data && (
- {topTabsData &&
)}
-
- {section3Data && (
+ {section2Data && (
- {section3Data.items?.map((item, index) => (
+ {section2Data.items?.map((item, index) => (
- {section4Data.tabItems?.[activeIndex]?.fileItems?.map((item, index) => (
+ {section3Data.tabItems?.[activeIndex]?.fileItems?.map((item, index) => (
{item.fileName}
@@ -81,7 +76,7 @@ export default function Foundation() {
))}
+ {section4Data && (
+
- {section5Data.items?.map((item, index) => (
+ {section4Data.items?.map((item, index) => (
