69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import Banner from "@/components/Banner";
|
|
import styles from "./Founder.module.css";
|
|
import ParagraphSection from "@/components/layout/ParagraphSection";
|
|
import { useStore } from "@/store";
|
|
|
|
export default function AboutFounder() {
|
|
const appConfig = useStore((s) => s.appConfig);
|
|
const founder = appConfig?.about?.founder;
|
|
|
|
const banner = founder?.banner;
|
|
const section1Data = founder?.section1Data;
|
|
const section2Data = founder?.section2Data;
|
|
|
|
if (!founder) return null;
|
|
|
|
return (
|
|
<div>
|
|
<Banner
|
|
title={banner?.title ?? ""}
|
|
subtitle={banner?.subtitle}
|
|
desc={banner?.content}
|
|
showBreadcrumb={banner?.showBreadcrumb ?? false}
|
|
backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
|
|
/>
|
|
|
|
{section1Data && (
|
|
<ParagraphSection data={section1Data}>
|
|
<div className={styles.images}>
|
|
{section1Data.items?.map((item, index) => (
|
|
<div className={styles.imageItem} key={item.title}>
|
|
<img src={item.image} alt={item.title} />
|
|
<div className={styles.imageMask} />
|
|
<div className={styles.imageOverlay}>
|
|
<div className={styles.imageOverlayTitle}>
|
|
<span>{item.title}</span>
|
|
</div>
|
|
<div className={styles.imageOverlayDesc}>{item.content}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ParagraphSection>
|
|
)}
|
|
|
|
{section2Data && (
|
|
<section
|
|
className={styles.sectionFounder}
|
|
style={{
|
|
backgroundImage: section2Data.backgroundImage
|
|
? `url(${section2Data.backgroundImage})`
|
|
: undefined,
|
|
}}
|
|
>
|
|
<div className={styles.founderIntroduction}>
|
|
<h2>{section2Data.title}</h2>
|
|
<p>{section2Data.subtitle}</p>
|
|
</div>
|
|
<div className={styles.founderPhoto}>
|
|
<img src={section2Data.sideImage} alt="个人照" />
|
|
<div className={styles.founderPhotoContent}>
|
|
<p dangerouslySetInnerHTML={{ __html: section2Data.content ?? "" }} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|