{lowerLinks.map((link, index) => (
< >
-
+
{link.label}
{index !== lowerLinks.length - 1 &&
·}
diff --git a/src/layouts/Header.module.css b/src/layouts/Header.module.css
index 360de75..f94de8d 100644
--- a/src/layouts/Header.module.css
+++ b/src/layouts/Header.module.css
@@ -153,6 +153,7 @@
display: inline-flex;
flex-direction: column;
text-align: center;
+ transform: translateX(-50%);
}
.dropPanelLink {
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index 82b095a..ae9017e 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -3,29 +3,29 @@ import { Dropdown } from "antd";
import styles from "./Header.module.css";
import { useEffect, useMemo, useState } from "react";
import { useStore } from "@/store";
-import type { NavChild } from "@/api/mockData";
-import type { LocaleKey } from "@/store";
+import type { NavChild, LocaleKey, SupportLocale } from "@/type";
const DEFAULT_NAV_ITEMS: { path: string; label: string; children?: NavChild[] }[] = [];
-const DEFAULT_LANG_ITEMS = [{ key: "zh", label: "中文" }, { key: "en", label: "English" }];
export default function Header() {
const location = useLocation();
const appConfig = useStore((s) => s.appConfig);
const locale = useStore((s) => s.locale);
const setLocale = useStore((s) => s.setLocale);
+ const supportLocales = useStore((s) => s.supportLocales);
const navItems = appConfig?.header?.navItems?.filter((item) => !item.index) ?? DEFAULT_NAV_ITEMS;
- const langMenuItems = appConfig?.header?.langMenuItems ?? DEFAULT_LANG_ITEMS;
+ const langMenuItems: SupportLocale[] = supportLocales || [];
const logo = appConfig?.logo ?? "/images/logo.png";
const [activeNav, setActiveNav] = useState("");
const [showDropPanel, setShowDropPanel] = useState(false);
const [hoverElLeft, setHoverElLeft] = useState(0);
const handleNavEnter = (e: any, path: string) => {
- // left + 元素宽度的一半
const left = e.target.offsetLeft;
- setHoverElLeft(left);
+ // 计算元素宽度
+ const width = e.target.offsetWidth;
+ setHoverElLeft(left + width / 2);
setActiveNav(path);
setShowDropPanel(true);
}
@@ -87,9 +87,9 @@ export default function Header() {
({
+ items: langMenuItems.map((item: SupportLocale) => ({
...item,
- onClick: () => setLocale(item.key as LocaleKey),
+ onClick: () => setLocale(item.key),
})),
}}
placement="bottomRight"
@@ -97,7 +97,7 @@ export default function Header() {
>
diff --git a/src/pages/About/Founder.module.css b/src/pages/About/Founder.module.css
index f9a1885..51a696a 100644
--- a/src/pages/About/Founder.module.css
+++ b/src/pages/About/Founder.module.css
@@ -1,5 +1,5 @@
.section {
- background: rgba(255,255,255,0.6);
+ background: rgba(255, 255, 255, 0.6);
border-radius: 0;
min-height: 100vh;
width: 100%;
@@ -26,38 +26,45 @@
aspect-ratio: 680 / 800;
}
}
-.images img{
+
+.images img {
width: 100%;
aspect-ratio: 680 / 800;
- background: rgba(0,0,0,0.3);
+ background: rgba(0, 0, 0, 0.3);
object-fit: cover;
}
.images .imageItem {
position: relative;
overflow: hidden;
+
.imageOverlay {
background: transparent;
}
}
+
.images .imageItem:hover .imageOverlay {
top: 0;
- background: rgba(20,53,92,0.8);
+ background: rgba(20, 53, 92, 0.8);
+
.imageOverlayDesc {
opacity: 1;
}
+
.imageOverlayTitle span {
border-bottom: 3px solid #FFFFFF;
}
}
+
.images .imageMask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
- background: rgba(0,0,0,0.3);
+ background: rgba(0, 0, 0, 0.3);
}
+
.images .imageOverlay {
position: absolute;
top: 78%;
@@ -67,33 +74,38 @@
color: #fff;
padding: 3.75rem 2.5rem;
transition: top 0.3s ease-in-out;
+
.imageOverlayDesc {
opacity: 0;
}
}
+
.images .imageOverlayTitle {
font-size: 1.5rem;
font-weight: 500;
height: 4.375rem;
color: #fff;
text-align: center;
- border-bottom: 1px solid rgba(255,255,255,0.3);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
+
.images .imageOverlayTitle span {
display: inline-block;
height: 4.4375rem;
border-bottom: 3px solid #14355C;
}
+
.images .imageOverlayDesc {
font-size: 1rem;
color: #fff;
margin-top: 3.125rem;
}
-.sectionFounder{
+.sectionFounder {
padding: 6.25rem 0 9.375rem;
min-height: 100vh;
}
+
.founderIntroduction h2 {
font-size: 2.5rem;
font-weight: 700;
@@ -101,6 +113,7 @@
margin-bottom: 3.125rem;
text-align: center;
}
+
.founderIntroduction p {
font-size: 1.125rem;
line-height: 1.5;
@@ -109,22 +122,25 @@
letter-spacing: 0.05em;
text-align: center;
}
-.founderPhoto{
+
+.founderPhoto {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6.25rem;
margin-top: 6.25rem;
}
-.founderPhoto img{
+.founderPhoto img {
flex: 1;
width: 100%;
aspect-ratio: 680 / 800;
}
-.founderPhotoContent{
+
+.founderPhotoContent {
padding-top: 6.25rem;
padding-right: 6.25rem;
}
+
.founderPhotoContent p {
font-size: 1rem;
line-height: 1.5;
@@ -133,6 +149,28 @@
letter-spacing: 0.05em;
}
+.section3Content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-rows: auto;
+ align-items: start;
+ gap: 16px;
+}
+
+.section3Item {
+ width: 100%;
+ height: 100%;
+ color: #fff;
+
+ li {
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 22px;
+ list-style: disc;
+ }
+}
+
@media (max-width: 768px) {
.section {
padding: 2rem 1rem;
diff --git a/src/pages/About/Founder.tsx b/src/pages/About/Founder.tsx
index 91c2a9c..0bd1b3f 100644
--- a/src/pages/About/Founder.tsx
+++ b/src/pages/About/Founder.tsx
@@ -2,6 +2,7 @@ import Banner from "@/components/Banner";
import styles from "./Founder.module.css";
import ParagraphSection from "@/components/layout/ParagraphSection";
import { useStore } from "@/store";
+import Section from "@/components/layout/Section";
export default function AboutFounder() {
const appConfig = useStore((s) => s.appConfig);
@@ -10,6 +11,8 @@ export default function AboutFounder() {
const banner = founder?.banner;
const section1Data = founder?.section1Data;
const section2Data = founder?.section2Data;
+ const section3Data = founder?.section3Data;
+ const section4Data = founder?.section4Data;
if (!founder) return null;
@@ -63,6 +66,26 @@ export default function AboutFounder() {