From ce9ec9b38120474c2de1d4b8d058750c681a4f8b Mon Sep 17 00:00:00 2001 From: zhangjianjun Date: Fri, 27 Mar 2026 18:48:09 +0800 Subject: [PATCH] ud --- src/App.css | 5 + src/components/Banner.module.css | 8 ++ src/components/Banner.tsx | 11 ++- .../SineWaveTimeline/index.module.css | 10 +- .../layout/Article/index.module.css | 2 +- .../layout/BottomTabsSection/index.module.css | 3 +- src/components/layout/HonorGrids/index.tsx | 3 +- .../layout/Section/index.module.css | 4 +- .../layout/SwiperCardSection/index.module.css | 6 +- .../layout/SwiperCardSection/index.tsx | 23 ++--- .../layout/TopTabsSection/index.module.css | 12 +-- .../layout/TopTabsSection/index.tsx | 7 +- src/layouts/Footer.module.css | 2 +- src/layouts/Header.module.css | 4 + src/pages/About/Founder.module.css | 26 ++++- src/pages/About/Founder.tsx | 99 +++++++++++++++++++ src/pages/About/History.module.css | 7 +- src/pages/About/History.tsx | 2 + src/pages/Business/BaseGroup.tsx | 12 +-- src/pages/Business/CommercialGroup.tsx | 2 +- src/pages/Business/CommercialGroupDetail.tsx | 1 + src/pages/Business/InvestGroup.module.css | 32 +++++- src/pages/Business/InvestGroup.tsx | 58 ++++++----- src/pages/Business/RealtyGroup.tsx | 4 +- src/pages/Business/RuijingGroup.tsx | 26 ++--- src/pages/Home/Home.module.css | 3 +- src/pages/Join/Campus.tsx | 2 +- src/pages/Join/Culture.tsx | 12 +-- src/pages/News/Media.tsx | 6 +- src/pages/Social/Foundation.tsx | 47 ++++----- src/pages/Social/Sustainability.tsx | 38 +++---- 31 files changed, 336 insertions(+), 141 deletions(-) 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 = (
-

{title}

+ {icon ? + : +

{title}

+ } {subtitle &&

{subtitle}

@@ -128,7 +133,7 @@ export default function Banner({ }
- { !notShowBreadcrumbPaths.includes(location.pathname) && + {!notShowBreadcrumbPaths.includes(location.pathname) && (breadcrumbItems ?? []).map((item, i) => ( {i > 0 && {" > "}} 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 ( -
+
{data.title}
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 ( -
+
{activeIndex > 0 && ( @@ -48,7 +49,7 @@ export default function SwiperCardSection({ data }: { data: Data }) { className={styles.navBtn} onClick={() => swiperRef?.slidePrev()} > - + )} ( 2 ? 0 : index * 0.5}> -
- {item.title} -
-
-
- {item.title} +
+ {item.title} +
+
+
+ {item.title} +
+

{item.content ?? item.desc}

-

{item.content ?? item.desc}

-
))} @@ -82,7 +83,7 @@ export default function SwiperCardSection({ data }: { data: Data }) { className={`${styles.navBtn} ${styles.nextBtn}`} onClick={() => swiperRef?.slideNext()} > - + )}
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
-

- {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} +

+ {/* {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} */}

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(null); const sectionRef = useRef(null); + const virtualBarRef = useRef(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) => { + 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) => { + 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 }) {
{section4Data?.title}
+
+
+
)} 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() { />
+
@@ -66,6 +67,7 @@ export default function AboutHistory() { selectedYear={year} onYearChange={setYear} /> +
); 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 && } {swiperCardData && } {rowAccordionData && } - {section4Data && } {section5Data && } + {section4Data && }
); } 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() {
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() {
} {section2Data && ( -
- -
-
- {section2Data.items?.map((item: { title: string; content: string }, index: number) => ( - -
-
{item.title}
-
{item.content}
-
- - ))} +
+
+ +
+
+ {section2Data.items?.map((item: { title: string; content: string }, index: number) => ( + +
+
{item.title}
+
{item.content}
+
+ + ))} +
)} {section3Data && ( -
+
{section3Data.items?.map((item: { logo: string; title: string }, index: number) => ( -
- {item.title} -
{item.title}
-
+
+ {item.title} +
{item.title}
+
))}
@@ -76,10 +84,10 @@ export default function InvestGroup() { height="100vh" > -
-
{section4Data.title}
-
{section4Data.content}
-
+
+
{section4Data.title}
+
{section4Data.content}
+
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 && } {rowAccordionData && } {section4Data && } - {section5Data && }
); } 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 (
@@ -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)" > - -
{section3Data.content}
- - {section3Data.statsData && ( - - )} +
+ +
{section3Data.content}
+ + {section3Data.statsData && ( + + )} +
)} 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() { />
-
+
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 && (
-
+
{section1Data.items?.map((item: any, index: number) => (
-
+
{section2Data.items?.map((item: { title: string; content?: string; icon?: string }, index: number) => (
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 ?? ""} /> -
-
+
+
{items.map((item: { title: string; content?: string }, index: number) => (
{item.title}
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 && (
-
+
{localNewsList?.map((item: any, index: number) => ( ))} +
-
)} @@ -110,19 +111,19 @@ export default function Foundation() { maskBackground="rgba(255,255,255,0.1)" height="47.5rem" > -
+
{localFileList - .filter((item:any) => item.category_name.includes( - section3Data.tabItems?.[activeIndex]?.tabName ?? '' - )) - .map((item: any, index: number) => ( -
-
  • window.open(item.path, '_blank')}> - {item.name} -
    • -
    - ))} + .filter((item: any) => item.category_name.includes( + section3Data.tabItems?.[activeIndex]?.tabName ?? '' + )) + .map((item: any, index: number) => ( +
    +
  • window.open(item.path, '_blank')}> + {item.name} +
    • +
    + ))}
    -
    +
    {section4Data.items?.map((item: any, index: number) => ( -
    - logo -
    +
    + logo +
    ))}
    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 && ( +
    )} - {section3Data && (
    -

    - {section3Data.content} -

    -
    - {localNewsItems?.map((item: any, index: number) => ( - - - - - ))} +
    +

    + {section3Data.content} +

    +
    + {localNewsItems?.map((item: any, index: number) => ( + + + + + ))} +
    )} @@ -154,6 +156,7 @@ export default function Sustainability() { background="" maskBackground="#F7FBFF" > +
    {localReportItems?.map((item: any, index: number) => ( { - 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 ? "了解更多" : "收起"}
    +
    )}