102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
import Banner, { type BannerConfig } from "@/components/Banner";
|
|
import { useState } from "react";
|
|
import ParagraphSection from "@/components/layout/ParagraphSection";
|
|
import ColumnXGrids from "@/components/layout/ColumnXGrids";
|
|
import Section from "@/components/layout/Section";
|
|
import AnimateTopCard from "@/components/layout/AnimateTopCard";
|
|
import { useStore } from "@/store";
|
|
import styles from "./Sustainability.module.css";
|
|
|
|
export default function Sustainability() {
|
|
const appConfig = useStore((s) => s.appConfig);
|
|
const data = appConfig?.social?.sustainability;
|
|
const [sliceIndex, setSliceIndex] = useState(4);
|
|
|
|
if (!data) return null;
|
|
|
|
const banner = data.banner;
|
|
const section1Data = data.section1Data;
|
|
const section2Data = data.section2Data?.items ?? [];
|
|
const section3Data = data.section3Data;
|
|
const section4Data = data.section4Data;
|
|
|
|
const columnXGridsData = section2Data;
|
|
|
|
return (
|
|
<div>
|
|
<Banner
|
|
title={banner?.title ?? ""}
|
|
content={(banner as BannerConfig)?.content}
|
|
titleSize={(banner as BannerConfig)?.titleSize ?? "medium"}
|
|
backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
|
|
/>
|
|
|
|
{section1Data && (
|
|
<ParagraphSection data={section1Data}>
|
|
<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}>
|
|
{section3Data.items?.map((item: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className={styles.socialResponsibilityCaseDataItem}
|
|
style={{ backgroundImage: `url(${item.backgroundImage})` }}
|
|
>
|
|
<AnimateTopCard data={item} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
|
|
{section4Data && (
|
|
<Section
|
|
title={section4Data.title}
|
|
background=""
|
|
maskBackground="#F7FBFF"
|
|
>
|
|
<div className={styles.socialResponsibilityReportData}>
|
|
{section4Data.items?.slice(0, sliceIndex).map((item: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className={styles.socialResponsibilityReportItem}
|
|
>
|
|
<div
|
|
className={styles.socialResponsibilityReportItemCover}
|
|
style={{ backgroundImage: `url(${item.coverImage})` }}
|
|
/>
|
|
<div className={styles.socialResponsibilityReportItemTitle}>
|
|
{item.title}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div
|
|
className={styles.socialResponsibilityReportItemMore}
|
|
onClick={() =>
|
|
setSliceIndex(
|
|
sliceIndex < (section4Data.items?.length ?? 0)
|
|
? sliceIndex + 4
|
|
: 4
|
|
)
|
|
}
|
|
>
|
|
{sliceIndex < (section4Data.items?.length ?? 0) ? "了解更多" : "收起"}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|