-
{title}
- {subtitle &&
{subtitle}
}
- {descText &&
{descText}
}
- {largedesc &&
{largedesc}
}
-
- {showBreadcrumb &&
- (breadcrumbItems ?? []).map((item, i) => (
-
- {i > 0 && {" > "}}
- {item.to ? {item.label} : {item.label}}
-
- ))}
-
+
+ {title}
+
+ {subtitle &&
+ {subtitle}
+ }
+ {descText &&
+ {descText}
+ }
+ {largedesc &&
+ {largedesc}
+ }
+
+
+ { !notShowBreadcrumbPaths.includes(location.pathname) &&
+ (breadcrumbItems ?? []).map((item, i) => (
+
+ {i > 0 && {" > "}}
+ {item.to ? {item.label} : {item.label}}
+
+ ))}
+
+
{items.map((item, index) => (
-
+
+
{item.title}
diff --git a/src/components/layout/JobPage/index.module.css b/src/components/layout/JobPage/index.module.css
index 8d23e86..570b187 100644
--- a/src/components/layout/JobPage/index.module.css
+++ b/src/components/layout/JobPage/index.module.css
@@ -44,4 +44,26 @@
font-size: 20px;
padding: 0 160px;
}
+
+ .jobPageContentTitle {
+ font-family: Source Han Sans, Source Han Sans;
+ font-weight: 600;
+ font-size: 24px;
+ color: #222222;
+ line-height: 34px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .jobPageContentText {
+ font-family: Source Han Sans, Source Han Sans;
+ font-weight: 400;
+ font-size: 18px;
+ color: #333333;
+ line-height: 26px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
}
\ No newline at end of file
diff --git a/src/components/layout/JobPage/index.tsx b/src/components/layout/JobPage/index.tsx
index 5382adc..5908151 100644
--- a/src/components/layout/JobPage/index.tsx
+++ b/src/components/layout/JobPage/index.tsx
@@ -9,6 +9,8 @@ type Data = {
recruitNumber: string;
jobLocation: string;
content: string;
+ requirement: string;
+ contact: string;
}
export default function JobPage({ data }: { data: Data }) {
@@ -31,7 +33,16 @@ export default function JobPage({ data }: { data: Data }) {
+
+
)
diff --git a/src/components/layout/RowAccordion/index.module.css b/src/components/layout/RowAccordion/index.module.css
index f746635..cd6a12e 100644
--- a/src/components/layout/RowAccordion/index.module.css
+++ b/src/components/layout/RowAccordion/index.module.css
@@ -12,6 +12,7 @@
position: absolute;
inset: 0;
z-index: 0;
+ background-color: #0a0a0a;
}
.rowAccordionBgLayer {
position: absolute;
@@ -19,7 +20,8 @@
background-size: cover;
background-position: center;
background-repeat: no-repeat;
- transition: opacity var(--duration) ease;
+ transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
+ will-change: opacity;
}
.rowAccordion .headerRow,
.rowAccordion .contentRow {
diff --git a/src/components/layout/RowAccordion/index.tsx b/src/components/layout/RowAccordion/index.tsx
index e974c49..f2b9c7d 100644
--- a/src/components/layout/RowAccordion/index.tsx
+++ b/src/components/layout/RowAccordion/index.tsx
@@ -1,10 +1,37 @@
// 横向手风琴组件
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { motion, useInView, type Variants } from 'motion/react';
import styles from './index.module.css';
import { Link } from 'react-router-dom';
+const contentItemVariants: Variants = {
+ hidden: { opacity: 0, x: 80 },
+ visible: { opacity: 1, x: 0 },
+};
+
const FALLBACK_GRADIENT = "linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%)";
+function smoothScrollTo(targetY: number, duration = 1200) {
+ const startY = window.scrollY;
+ const diff = targetY - startY;
+ if (Math.abs(diff) < 1) return;
+ let startTime: number | null = null;
+
+ function easeInOutCubic(t: number) {
+ return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+ }
+
+ function step(timestamp: number) {
+ if (!startTime) startTime = timestamp;
+ const elapsed = timestamp - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+ window.scrollTo(0, startY + diff * easeInOutCubic(progress));
+ if (progress < 1) requestAnimationFrame(step);
+ }
+
+ requestAnimationFrame(step);
+}
+
type Data = {
title?: string;
items: {
@@ -28,8 +55,18 @@ type Props = {
export default function RowAccordion({ data, placement='bottom' }: Props) {
const [activeIndex, setActiveIndex] = useState(0);
+ const containerRef = useRef
(null);
+ const isInView = useInView(containerRef, { once: true, margin: "0px 0px -20% 0px" });
+
+ useEffect(() => {
+ if (isInView && containerRef.current) {
+ const rect = containerRef.current.getBoundingClientRect();
+ smoothScrollTo(window.scrollY + rect.top, 1200);
+ }
+ }, [isInView]);
+
return (
-
+
{data.items.map((item, index) => (
{data.items.map((item, index) => (
-
setActiveIndex(index)}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true, amount: 0.2 }}
+ variants={contentItemVariants}
+ transition={{
+ duration: 0.6,
+ delay: 0.5 + index * 0.12,
+ ease: [0.25, 0.46, 0.45, 0.94],
+ }}
>
{item.title}
@@ -75,7 +123,7 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
)
}
-
+
))}
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index bbf9199..5103120 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -1,13 +1,14 @@
import { Link } from "react-router-dom";
import styles from "./Footer.module.css";
import { useStore } from "@/store";
+import type { NavItem, NavChild } from "@/type";
export default function Footer() {
const appConfig = useStore((s) => s.appConfig);
const footer = appConfig?.footer;
const header = appConfig?.header;
- const footerColumns = header?.navItems?.filter((item) => !item.index) ?? [];
+ const footerColumns = header?.navItems?.filter((item: NavItem) => item.path !== "/") ?? [];
const lowerLinks = footer?.lowerLinks ?? [];
const socialIcons = footer?.socialIcons ?? [];
const copyright = footer?.copyright ?? "版权声明©2001-{year} | 中国银泰投资有限公司";
@@ -18,10 +19,10 @@ export default function Footer() {
- {footerColumns.map((col) => (
+ {footerColumns.map((col: NavItem) => (
{col.label}
- {col.children?.map((link) => (
+ {col.children?.map((link: NavChild) => (
))}
- {socialIcons.map((icon) => (
+ {socialIcons.map((icon: { src: string; alt: string }) => (
s.setLocale);
const supportLocales = useStore((s) => s.supportLocales);
- const navItems = appConfig?.header?.navItems?.filter((item) => !item.index) ?? DEFAULT_NAV_ITEMS;
+ const navItems = appConfig?.header?.navItems?.filter((item: NavItem) => item.path !== "/") ?? DEFAULT_NAV_ITEMS;
const langMenuItems: SupportLocale[] = supportLocales || [];
- const logo = appConfig?.logo ?? "/images/logo.png";
+ const logo = appConfig?.company?.logo ?? "/images/logo.png";
const [activeNav, setActiveNav] = useState("");
const [showDropPanel, setShowDropPanel] = useState(false);
@@ -31,38 +32,33 @@ export default function Header() {
}
const activePanelItem = useMemo(() => {
- return navItems.find((item) => item.path === activeNav)?.children || [];
+ return navItems.find((item: NavItem) => item.path === activeNav)?.children || [];
}, [activeNav]);
const [showWhiteMode, setShowWhiteMode] = useState(false);
+ const isDetailPage = location.pathname.includes("/detail/");
+ const isDetailPageRef = useRef(isDetailPage);
+ isDetailPageRef.current = isDetailPage;
useEffect(() => {
- const path = location.pathname;
- if (path.includes("/detail/")) {
+ if (isDetailPage) {
setShowWhiteMode(true);
- } else {
- setShowWhiteMode(false);
+ return;
}
- }, [location.pathname]);
+ setShowWhiteMode(window.scrollY > 100);
+ }, [isDetailPage]);
- // 监听滚动
useEffect(() => {
const handleScroll = () => {
- const scrollTop = window.scrollY;
- if (scrollTop > 100) {
- setShowWhiteMode(true);
- } else {
- setShowWhiteMode(false);
- }
- }
- window.addEventListener("scroll", handleScroll);
- return () => {
- window.removeEventListener("scroll", handleScroll);
+ if (isDetailPageRef.current) return;
+ setShowWhiteMode(window.scrollY > 100);
};
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
-
+