zhangjianjun
/
yintai-company-home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ud

This commit is contained in:
zhangjianjun 2026-03-27 18:48:09 +08:00
parent ee3715b0d3
commit ce9ec9b381
31 changed files with 336 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@ -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%;
}

8
src/components/Banner.module.css
View File

@ -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;

11
src/components/Banner.tsx
View File

@ -40,7 +40,7 @@ function BannerSlideVideo({
if (!v) return;
if (active) {
v.currentTime = 0;
void v.play().catch(() => {});
void v.play().catch(() => { });
} else {
v.pause();
}
@ -60,6 +60,7 @@ type Props = {
largedesc?: string;
titleSize?: "large" | "medium" | string;
backgroundImage: string | string[];
icon?: string;
};
export default function Banner({
@ -70,6 +71,7 @@ export default function Banner({
largedesc,
titleSize = "large",
backgroundImage,
icon
}: Props) {
const appConfig = useStore((s) => s.appConfig);
const navItems = appConfig?.navItems ?? [];
@ -115,7 +117,10 @@ export default function Banner({
const heroContent = (
<div className={styles.heroContent} style={{ gap: "1.875rem" }}>
<ScrollReveal preset="slideUp">
<h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
{icon ? <img src={icon} alt="" className={styles.heroIcon} />
:
<h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
}
</ScrollReveal>
{subtitle && <ScrollReveal preset="slideUp" delay={0.2}>
<h2 className={styles.heroSubtitle}>{subtitle}</h2>
@ -128,7 +133,7 @@ export default function Banner({
</ScrollReveal>}
<ScrollReveal preset="fadeIn" delay={0.2}>
<div className={styles.breadcrumb}>
{ !notShowBreadcrumbPaths.includes(location.pathname) &&
{!notShowBreadcrumbPaths.includes(location.pathname) &&
(breadcrumbItems ?? []).map((item, i) => (
<span key={i}>
{i > 0 && <span>{" > "}</span>}

10
src/components/SineWaveTimeline/index.module.css
View File

@ -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;
}

2
src/components/layout/Article/index.module.css
View File

@ -1,6 +1,6 @@
.article {
width: 100%;
/* min-height: 100vh; */
min-height: 100vh;
padding: 7.5rem 0;
.articleHeaderLine, .articleHeader, .articleContent, .articleBottomLine {

3
src/components/layout/BottomTabsSection/index.module.css
View File

@ -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;
}
}

3
src/components/layout/HonorGrids/index.tsx
View File

@ -3,6 +3,7 @@ import styles from './index.module.css';
type Data = {
title: string;
backgroundImage: string;
items: {
largeTitle: string;
title: string;
@ -10,7 +11,7 @@ type Data = {
}
export default function HonorGrids({ data }: { data: Data }) {
return (
<section className={styles.honorGrids}>
<section className={styles.honorGrids} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
<div className={styles.honorGridsTitle}>{data.title}</div>
<div className={styles.honorGridsItems}>

4
src/components/layout/Section/index.module.css
View File

@ -8,8 +8,8 @@
}
.sectionContent {
/* width: 72%; */
/* margin: 0 auto; */
/* width: 72%;
margin: 0 auto; */
}
.mask {

6
src/components/layout/SwiperCardSection/index.module.css
View File

@ -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;
}
}
}

23
src/components/layout/SwiperCardSection/index.tsx
View File

@ -9,6 +9,7 @@ import { useLocation } from "react-router-dom";
import ScrollReveal from "@/components/ScrollReveal";
type Data = {
title: string;
backgroundImage?: string;
cardItems: {
title: string;
desc?: string;
@ -39,7 +40,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
}
}, [hashId, data.cardItems, swiperRef])
return (
<section className={styles.swiperCardSection} id={data.cardItems[activeIndex]?.title}>
<section className={styles.swiperCardSection} id={data.cardItems[activeIndex]?.title} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
<SectionTitle title={data.title} />
<div className={styles.carouselWrapper} >
{activeIndex > 0 && (
@ -48,7 +49,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
className={styles.navBtn}
onClick={() => swiperRef?.slidePrev()}
>
<LeftOutlined color="#14355C" />
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" width="24" height="24"><path d="M737.9 888.2L361.7 512l376.2-376.2c16.4-16.4 16.4-43.1 0-59.5s-43.1-16.4-59.5 0L295.8 458.9c-14.2 14.2-22 33-22 53.1s7.8 38.9 22 53.1l382.6 382.6c16.4 16.4 43.1 16.4 59.5 0 16.4-16.5 16.4-43.1 0-59.5z" fill="#272636" p-id="2822"></path></svg>
</button>
)}
<Swiper
@ -62,16 +63,16 @@ export default function SwiperCardSection({ data }: { data: Data }) {
{data.cardItems.map((item, index) => (
<SwiperSlide key={item.title}>
<ScrollReveal preset="slideUp" amount={0.2} delay={index > 2 ? 0 : index * 0.5}>
<div className={styles.swiperCardItem}>
<img src={item.backgroundImage ?? item.image ?? ""} alt={item.title} />
<div className={styles.swiperMask}></div>
<div className={styles.swiperContent}>
<div className={styles.swiperTitle}>
<span>{item.title}</span>
<div className={styles.swiperCardItem}>
<img src={item.backgroundImage ?? item.image ?? ""} alt={item.title} />
<div className={styles.swiperMask}></div>
<div className={styles.swiperContent}>
<div className={styles.swiperTitle}>
<span>{item.title}</span>
</div>
<p className={styles.swiperDesc}>{item.content ?? item.desc}</p>
</div>
<p className={styles.swiperDesc}>{item.content ?? item.desc}</p>
</div>
</div>
</ScrollReveal>
</SwiperSlide>
))}
@ -82,7 +83,7 @@ export default function SwiperCardSection({ data }: { data: Data }) {
className={`${styles.navBtn} ${styles.nextBtn}`}
onClick={() => swiperRef?.slideNext()}
>
<RightOutlined color="#14355C" />
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1638" width="24" height="24"><path d="M318.57 223.95l322.99 322.99c21.87 21.87 57.33 21.87 79.2 0 21.87-21.87 21.87-57.33 0-79.2l-323-322.99c-21.87-21.87-57.33-21.87-79.2 0-21.86 21.87-21.86 57.33 0.01 79.2z" fill="#14355C" p-id="1639"></path><path d="M729.75 555.95L406.76 878.93c-21.87 21.87-57.33 21.87-79.2 0-21.87-21.87-21.87-57.33 0-79.2l322.99-322.99c21.87-21.87 57.33-21.87 79.2 0 21.87 21.88 21.87 57.34 0 79.21z" fill="#14355C" p-id="1640"></path></svg>
</button>
)}
</div>

12
src/components/layout/TopTabsSection/index.module.css
View File

@ -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 {

7
src/components/layout/TopTabsSection/index.tsx
View File

@ -79,8 +79,11 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
</div>
</div>
<ScrollReveal preset="slideUp" delay={0.9} duration={1.1}>
<p className={styles.topTabsContentLeftDesc}>
{data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content}
<p className={`${styles.topTabsContentLeftDesc} normal-p`}
dangerouslySetInnerHTML={{ __html: data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content as any }}
>
{/* {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} */}
</p>
</ScrollReveal>
</div>

2
src/layouts/Footer.module.css
View File

@ -24,7 +24,7 @@
.footerTitle {
font-size: .875rem;
font-weight: 600;
color: #333;
color: #222;
margin-bottom: .25rem;
}

4
src/layouts/Header.module.css
View File

@ -258,6 +258,10 @@
line-height: 3.125rem;
color: #222222;
text-decoration: none;
&:hover {
color: #14355C;
}
}
@media (max-width: 64rem) {

26
src/pages/About/Founder.module.css
View File

@ -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;
}
}

99
src/pages/About/Founder.tsx
View File

@ -101,6 +101,12 @@ export default function AboutFounder() {
function TimeLineComponent({ section4Data }: { section4Data: any }) {
const refElement = useRef<HTMLDivElement>(null);
const sectionRef = useRef<HTMLElement>(null);
const virtualBarRef = useRef<HTMLDivElement>(null);
const [thumbLeft, setThumbLeft] = useState(0);
const [thumbWidth, setThumbWidth] = useState(0);
const [isDraggingThumb, setIsDraggingThumb] = useState(false);
const dragStartX = useRef(0);
const dragStartScrollLeft = useRef(0);
const [isSectionInView, setIsSectionInView] = useState(false);
useEffect(() => {
@ -133,6 +139,40 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
smoothWheel: true,
});
const updateVirtualScrollBar = () => {
const bar = virtualBarRef.current;
if (!bar) return;
const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
const maxThumbTravel = bar.clientWidth;
if (wrapper.scrollWidth <= 0 || bar.clientWidth <= 0) return;
if (totalScrollable <= 0) {
setThumbWidth(bar.clientWidth);
setThumbLeft(0);
return;
}
const nextThumbWidth = Math.max(
(wrapper.clientWidth / wrapper.scrollWidth) * bar.clientWidth,
72
);
const maxLeft = Math.max(maxThumbTravel - nextThumbWidth, 0);
const nextLeft = (wrapper.scrollLeft / totalScrollable) * maxLeft;
setThumbWidth(nextThumbWidth);
setThumbLeft(nextLeft);
};
const resizeObserver = new ResizeObserver(() => {
updateVirtualScrollBar();
});
resizeObserver.observe(wrapper);
if (content) resizeObserver.observe(content);
if (virtualBarRef.current) resizeObserver.observe(virtualBarRef.current);
wrapper.addEventListener("scroll", updateVirtualScrollBar, { passive: true });
updateVirtualScrollBar();
let rafId = 0;
const raf = (time: number) => {
lenis.raf(time);
@ -143,9 +183,61 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
return () => {
cancelAnimationFrame(rafId);
wrapper.removeEventListener("scroll", updateVirtualScrollBar);
resizeObserver.disconnect();
lenis.destroy();
};
}, [isSectionInView]);
const handleTrackClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (!refElement.current || !virtualBarRef.current) return;
const wrapper = refElement.current;
const barRect = virtualBarRef.current.getBoundingClientRect();
const clickedX = event.clientX - barRect.left;
const desiredThumbLeft = clickedX - thumbWidth / 2;
const maxLeft = Math.max(barRect.width - thumbWidth, 0);
const clampedThumbLeft = Math.max(0, Math.min(desiredThumbLeft, maxLeft));
const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
if (totalScrollable <= 0 || maxLeft <= 0) return;
wrapper.scrollLeft = (clampedThumbLeft / maxLeft) * totalScrollable;
};
const handleThumbMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
if (!refElement.current) return;
setIsDraggingThumb(true);
dragStartX.current = event.clientX;
dragStartScrollLeft.current = refElement.current.scrollLeft;
};
useEffect(() => {
if (!isDraggingThumb) return;
const handleMouseMove = (event: MouseEvent) => {
if (!refElement.current || !virtualBarRef.current) return;
const wrapper = refElement.current;
const bar = virtualBarRef.current;
const totalScrollable = wrapper.scrollWidth - wrapper.clientWidth;
const maxLeft = Math.max(bar.clientWidth - thumbWidth, 0);
if (totalScrollable <= 0 || maxLeft <= 0) return;
const deltaX = event.clientX - dragStartX.current;
const deltaScroll = (deltaX / maxLeft) * totalScrollable;
wrapper.scrollLeft = dragStartScrollLeft.current + deltaScroll;
};
const handleMouseUp = () => {
setIsDraggingThumb(false);
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [isDraggingThumb, thumbWidth]);
return (
<>
{section4Data && (
@ -157,6 +249,13 @@ function TimeLineComponent({ section4Data }: { section4Data: any }) {
<div className={styles.section4Title}>{section4Data?.title}</div>
<div className={styles.timelineWrapper}>
<SineWaveTimeline items={section4Data?.items ?? []} refElement={refElement} />
<div className={styles.virtualScrollBar} ref={virtualBarRef} onClick={handleTrackClick}>
<div
className={styles.virtualScrollBarInner}
onMouseDown={handleThumbMouseDown}
style={{ width: `${thumbWidth}px`, transform: `translateX(${thumbLeft}px)` }}
/>
</div>
</div>
</section>
)}

7
src/pages/About/History.module.css
View File

@ -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;

2
src/pages/About/History.tsx
View File

@ -58,6 +58,7 @@ export default function AboutHistory() {
/>
<section className={styles.section}>
<div className={styles.sectionInner}>
<div className={styles.headRow}>
<YearPicker placeholder="年份" value={year} onChange={handleYearChange} />
</div>
@ -66,6 +67,7 @@ export default function AboutHistory() {
selectedYear={year}
onYearChange={setYear}
/>
</div>
</section>
</div>
);

12
src/pages/Business/BaseGroup.tsx
View File

@ -20,15 +20,7 @@ export default function BaseGroup() {
const section5Data = data.section5Data;
const swiperCardData = section2Data
? {
title: section2Data.title,
cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
const rowAccordionData = section3Data
? {
@ -49,8 +41,8 @@ export default function BaseGroup() {
{section1Data && <ParagraphSection data={section1Data} />}
{swiperCardData && <SwiperCardSection data={swiperCardData} />}
{rowAccordionData && <RowAccordion data={rowAccordionData} placement="top" />}
{section4Data && <HonorGrids data={section4Data} />}
{section5Data && <BottomTabsSection data={section5Data} />}
{section4Data && <HonorGrids data={section4Data} />}
</div>
);
}

2
src/pages/Business/CommercialGroup.tsx
View File

@ -130,7 +130,7 @@ export default function BusinessCommercialGroup() {
<section
className={`${styles.twoColSection} ${styles.propertyServices}`}
style={{
backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}`,
backgroundImage: `url(${section4Data?.backgroundImage}), ${FALLBACK_GRADIENT}`,
}}
>
<div className={styles.propertyServicesContent}>

1
src/pages/Business/CommercialGroupDetail.tsx
View File

@ -18,6 +18,7 @@ export default function BusinessCommercialGroupDetail() {
<div>
<Banner
title={banner?.title ?? ""}
icon={banner?.icon ?? ""}
largedesc={(banner as BannerConfig)?.largeContent}
titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
backgroundImage={banner?.backgroundImage ?? "/images/bg-commercial-group.png"}

32
src/pages/Business/InvestGroup.module.css
View File

@ -1,24 +1,45 @@
.investGroup {
width: 100%;
height: 50rem;
padding: 6.25rem 16.25rem;
padding: 6.25rem 0;
background: rgba(0, 39, 83, 0.7);
background-size: cover;
background-position: center;
background-repeat: repeat;
.investGroupInner {
margin: 0 auto;
width: 72%;
}
.investGroupContent {
color: #FFFFFF;
height: 28.75rem;
margin-top: 7.5rem;
.investGroupContentItems {
display: flex;
height: 28.75rem;
gap: 200px;
position: relative;
.investGroupContentItem:first-child {
&::after {
content: '';
position: absolute;
left: 50%;
top: -10%;
width: 1px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
/* .investGroupContentItem:first-child {
padding-right: 6.25rem;
}
.investGroupContentItem:last-child {
padding-left: 6.25rem;
}
} */
.investGroupContentItem {
flex: 1;
@ -57,6 +78,9 @@
width: 100%;
padding: 6.25rem 16.25rem;
background: rgba(255, 255, 255, 0.6);
background-size: cover;
background-position: center;
background-repeat: repeat;
.equityInvestmentItems {
/* 5列布局 */
@ -81,6 +105,7 @@
}
.industryFoster {
width: 100%;
height: calc(100vh / var(--zoom-compensation, 1));
@ -103,6 +128,7 @@
background: rgba(20, 53, 92, 0.5);
color: #fff;
padding: 3.75rem 3.125rem;
margin-left: 16.25rem;
.industryFosterMaskTitle {
font-weight: 500;

58
src/pages/Business/InvestGroup.tsx
View File

@ -30,37 +30,45 @@ export default function InvestGroup() {
{section1Data && <ParagraphSection data={section1Data} />}
{section2Data && (
<section className={styles.investGroup} id={section2Data.title}>
<SectionTitle title={section2Data.title} color="#fff" />
<div className={styles.investGroupContent}>
<div className={styles.investGroupContentItems}>
{section2Data.items?.map((item: { title: string; content: string }, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
<div className={styles.investGroupContentItem} key={index}>
<div className={styles.investGroupContentItemTitle}>{item.title}</div>
<div className={styles.investGroupContentItemContent}>{item.content}</div>
</div>
</ScrollReveal>
))}
<section className={styles.investGroup} id={section2Data.title} style={{
backgroundImage: `url(${section2Data.backgroundImage})`
}}>
<div className={styles.investGroupInner}>
<SectionTitle title={section2Data.title} color="#fff" />
<div className={styles.investGroupContent}>
<div className={styles.investGroupContentItems}>
{section2Data.items?.map((item: { title: string; content: string }, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
<div className={styles.investGroupContentItem} key={index}>
<div className={styles.investGroupContentItemTitle}>{item.title}</div>
<div className={styles.investGroupContentItemContent}>{item.content}</div>
</div>
</ScrollReveal>
))}
</div>
</div>
</div>
</section>
)}
{section3Data && (
<section className={styles.equityInvestment} id={section3Data.title}>
<section className={styles.equityInvestment} id={section3Data.title}
style={{
backgroundImage: `url(${section3Data.backgroundImage})`
}}
>
<SectionTitle title={section3Data.title} />
<div className={styles.equityInvestmentItems}>
{section3Data.items?.map((item: { logo: string; title: string }, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5}>
<div className={styles.equityInvestmentItem} key={index}>
<img
src={item.logo}
alt={item.title}
className={styles.equityInvestmentItemLogo}
/>
<div className={styles.equityInvestmentItemTitle}>{item.title}</div>
</div>
<div className={styles.equityInvestmentItem} key={index}>
<img
src={item.logo}
alt={item.title}
className={styles.equityInvestmentItemLogo}
/>
<div className={styles.equityInvestmentItemTitle}>{item.title}</div>
</div>
</ScrollReveal>
))}
</div>
@ -76,10 +84,10 @@ export default function InvestGroup() {
height="100vh"
>
<ScrollReveal preset="slideUp" amount={0.2}>
<div className={styles.industryFosterMask}>
<div className={styles.industryFosterMaskTitle}>{section4Data.title}</div>
<div className={styles.industryFosterMaskContent}>{section4Data.content}</div>
</div>
<div className={styles.industryFosterMask}>
<div className={styles.industryFosterMaskTitle}>{section4Data.title}</div>
<div className={styles.industryFosterMaskContent}>{section4Data.content}</div>
</div>
</ScrollReveal>
</Section>
</div>

4
src/pages/Business/RealtyGroup.tsx
View File

@ -18,9 +18,8 @@ export default function RealtyGroup() {
const section2Data = data.section2Data;
const section3Data = data.section3Data;
const section4Data = data.section4Data;
const section5Data = data.section5Data;
const topTabsData = section2Data ? { tabItems: section2Data.tabItems ?? [] } : null;
const topTabsData = section2Data
const rowAccordionData = section3Data
? {
@ -46,7 +45,6 @@ export default function RealtyGroup() {
{topTabsData && <TopTabsSection data={topTabsData} />}
{rowAccordionData && <RowAccordion data={rowAccordionData} />}
{section4Data && <HonorGrids data={section4Data} />}
{section5Data && <BottomTabsSection data={section5Data} />}
</div>
);
}

26
src/pages/Business/RuijingGroup.tsx
View File

@ -21,15 +21,7 @@ export default function RuijingGroup() {
const section4Data = data.section4Data;
const swiperCardData = section2Data
? {
title: section2Data.title,
cardItems: section2Data.cardItems?.map((c: { title: string; content: string; backgroundImage?: string }) => ({
title: c.title,
content: c.content,
backgroundImage: c.backgroundImage,
})) ?? [],
}
: null;
return (
<div>
@ -48,15 +40,17 @@ export default function RuijingGroup() {
title={section3Data.title}
subtitle={section3Data.subtitle}
titleColor="#fff"
background="/images/bg-overview.png"
background={section3Data.backgroundImage}
maskBackground="rgba(2,17,48,0.5)"
>
<ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
<div className={styles.businessFeatureContent}>{section3Data.content}</div>
</ScrollReveal>
{section3Data.statsData && (
<StatsRow data={section3Data.statsData} color="#fff" />
)}
<div className="w-72-inner">
<ScrollReveal preset="slideUp" amount={0.2} delay={0.5}>
<div className={styles.businessFeatureContent}>{section3Data.content}</div>
</ScrollReveal>
{section3Data.statsData && (
<StatsRow data={section3Data.statsData} color="#fff" />
)}
</div>
</Section>
)}

3
src/pages/Home/Home.module.css
View File

@ -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;
}

2
src/pages/Join/Campus.tsx
View File

@ -110,7 +110,7 @@ export default function JoinCampus() {
/>
<Section maskBackground="#FFFFFF">
<div className={styles.campusRow}>
<div className={`${styles.campusRow} w-72-inner`}>
<div className={styles.campusColLeft}>
<SearchInput value={searchValue} placeholder="搜索职位" onChange={setSearchValue} onEnter={refreshData} />

12
src/pages/Join/Culture.tsx
View File

@ -20,16 +20,16 @@ export default function Culture() {
title={banner?.title ?? ""}
content={(banner as BannerConfig)?.content}
titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
backgroundImage={banner?.backgroundImage ?? ""}
/>
{section1Data && (
<Section
title={section1Data.title}
background="/images/bg-overview.png"
maskBackground="#D8D8D8"
background={section1Data.backgroundImage ?? ""}
maskBackground="transparent"
>
<div className={styles.cultureItems}>
<div className={`${styles.cultureItems} w-72-inner`}>
{section1Data.items?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.cultureItem}>
<div
@ -52,10 +52,10 @@ export default function Culture() {
{section2Data && (
<Section
title={section2Data.title}
background=""
background={section2Data.backgroundImage ?? ""}
maskBackground="rgba(216,216,216,0.6)"
>
<div className={styles.valuesItems}>
<div className={`${styles.valuesItems}`} style={{ margin: "0 auto", width: "60%" }}>
{section2Data.items?.map((item: { title: string; content?: string; icon?: string }, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.cultureItem}>
<div key={index} className={styles.valuesItem}>

6
src/pages/News/Media.tsx
View File

@ -20,11 +20,11 @@ export default function Media() {
title={banner?.title ?? ""}
content={(banner as BannerConfig)?.content}
titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
backgroundImage={banner?.backgroundImage ?? ""}
/>
<Section background="/images/bg-overview.png" maskBackground="rgba(1,11,72,0.8)">
<div className={styles.mediaItems}>
<Section background={section1Data.backgroundImage ?? ""} maskBackground="rgba(1,11,72,0.8)">
<div className={`${styles.mediaItems} w-72-inner`}>
{items.map((item: { title: string; content?: string }, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index} className={styles.mediaItem}>
<div className={styles.mediaItemTitle}>{item.title}</div>

47
src/pages/Social/Foundation.tsx
View File

@ -28,10 +28,11 @@ export default function Foundation() {
return newsList.filter((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
}, [newsList, locale])
const getNewsList = useCallback(() => {
appApi.getNewsList({ page: 1, size: 1000, sort: "create_time DESC",
appApi.getNewsList({
page: 1, size: 1000, sort: "create_time DESC",
category_id: String(categoryList?.find((item: any) => item.name.includes('【银泰公益基金会】公益传播'))?.id ?? ''),
}).then((res:any) => {
setNewsList(res.data.items.map((item:any) => {
}).then((res: any) => {
setNewsList(res.data.items.map((item: any) => {
return {
id: item.id,
title: item.title,
@ -54,11 +55,11 @@ export default function Foundation() {
const getFileList = useCallback(async () => {
const res = await appApi.getDocList({
page: 1,
page: 1,
size: 1000,
// category_id: String(categoryList?.find((item: any) => item.name.includes('社会责任报告'))?.id ?? '')
})
const items = res.data.items.filter((item:any) => item.category_name.includes("信息公开"))
const items = res.data.items.filter((item: any) => item.category_name.includes("信息公开"))
console.log("------items-----", items)
setFileList(items)
}, [])
@ -85,10 +86,10 @@ export default function Foundation() {
{section2Data && (
<Section
title={section2Data.title}
background=""
background={section2Data.backgroundImage ?? ""}
maskBackground="rgba(255,255,255,0.3)"
>
<div className={styles.publicWelfareDataItems}>
<div className={`${styles.publicWelfareDataItems} w-72-inner`}>
{localNewsList?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
key={index}
@ -97,8 +98,8 @@ export default function Foundation() {
<AnimateTopCard data={item} />
</ScrollReveal>
))}
<div style={{ marginBottom: "3.125rem" }} />
</div>
<div style={{ marginBottom: "3.125rem" }} />
</Section>
)}
@ -110,19 +111,19 @@ export default function Foundation() {
maskBackground="rgba(255,255,255,0.1)"
height="47.5rem"
>
<div className={styles.informationPublicDataContent}>
<div className={`${styles.informationPublicDataContent} w-72-inner`}>
<div className={styles.informationPublicDataItems}>
{localFileList
.filter((item:any) => item.category_name.includes(
section3Data.tabItems?.[activeIndex]?.tabName ?? ''
))
.map((item: any, index: number) => (
<div key={index} className={styles.informationPublicDataItem}>
<li onClick={() => window.open(item.path, '_blank')}>
<span>{item.name}</span>
</li>
</div>
))}
.filter((item: any) => item.category_name.includes(
section3Data.tabItems?.[activeIndex]?.tabName ?? ''
))
.map((item: any, index: number) => (
<div key={index} className={styles.informationPublicDataItem}>
<li onClick={() => window.open(item.path, '_blank')}>
<span>{item.name}</span>
</li>
</div>
))}
</div>
<BottomTabs
tabItems={section3Data.tabItems ?? []}
@ -135,12 +136,12 @@ export default function Foundation() {
{section4Data && (
<Section title={section4Data.title} background="" maskBackground="#F7FBFF">
<div className={styles.partnerItems}>
<div className={`${styles.partnerItems} w-72-inner`}>
{section4Data.items?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.5} key={index}>
<div key={index} className={styles.partnerItem}>
<img src={item.logo} alt="logo" />
</div>
<div key={index} className={styles.partnerItem}>
<img src={item.logo} alt="logo" />
</div>
</ScrollReveal>
))}
</div>

38
src/pages/Social/Sustainability.tsx
View File

@ -83,7 +83,7 @@ export default function Sustainability() {
}, [reportItems, locale])
const getReportList = useCallback(async () => {
const res = await appApi.getDocList({
page,
page,
size,
category_id: String(categoryList?.find((item: any) => item.name.includes('社会责任报告'))?.id ?? '')
})
@ -93,7 +93,7 @@ export default function Sustainability() {
const resItems: any[] = []
// 去重 id lang 相同
items.forEach((item: any) => {
if(!resItems.some((i: any) => i.id === item.id && i.lang === item.lang)) {
if (!resItems.some((i: any) => i.id === item.id && i.lang === item.lang)) {
resItems.push(item)
}
})
@ -121,29 +121,31 @@ export default function Sustainability() {
{section1Data && (
<ParagraphSection data={section1Data}>
<div style={{ width: "100%", height: "100px" }}></div>
<ColumnXGrids items={columnXGridsData} />
</ParagraphSection>
)}
{section3Data && (
<Section
title={section3Data.title}
background=""
maskBackground="rgba(255,255,255,0.3)"
>
<p className={styles.socialResponsibilityCaseDataContent}>
{section3Data.content}
</p>
<div className={styles.socialResponsibilityCaseDataItems}>
{localNewsItems?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
key={index}
className={styles.socialResponsibilityCaseDataItem}
>
<AnimateTopCard data={item} />
</ScrollReveal>
))}
<div className="w-72-inner">
<p className={styles.socialResponsibilityCaseDataContent}>
{section3Data.content}
</p>
<div className={styles.socialResponsibilityCaseDataItems}>
{localNewsItems?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={(index % 2) * 0.5}
key={index}
className={styles.socialResponsibilityCaseDataItem}
>
<AnimateTopCard data={item} />
</ScrollReveal>
))}
</div>
</div>
</Section>
)}
@ -154,6 +156,7 @@ export default function Sustainability() {
background=""
maskBackground="#F7FBFF"
>
<div className="w-72-inner">
<div className={styles.socialResponsibilityReportData}>
{localReportItems?.map((item: any, index: number) => (
<ScrollReveal preset="slideUp" amount={0.2} delay={(index % 4) * 0.5}
@ -176,7 +179,7 @@ export default function Sustainability() {
<div
className={styles.socialResponsibilityReportItemMore}
onClick={() => {
if(localReportItems.length < total) {
if (localReportItems.length < total) {
setPage(page + 1)
} else {
setReportItems(prev => [...prev.slice(0, 8)])
@ -186,6 +189,7 @@ export default function Sustainability() {
>
{localReportItems.length < total ? "了解更多" : "收起"}
</div>
</div>
</Section>
)}
</div>