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

save

This commit is contained in:
zhangjianjun 2026-03-24 13:35:52 +08:00
parent fabe5c893f
commit 4b0cee8ddb
7 changed files with 288 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -26,3 +26,4 @@ yarn.lock
pnpm-lock.yaml
package-lock.json
.env
public/video/banner.mp4

12
src/App.tsx
View File

@ -1,5 +1,5 @@
// App.js
import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
import { BrowserRouter as Router, RouterProvider, useRoutes } from 'react-router-dom';
import "./App.css"
import routes from "@/Routes";
import { useCallback, useEffect, useState } from "react";
@ -8,9 +8,9 @@ import { useStore } from "@/store";
import { parsePageConfig } from "@/utils/parsePageConfig";
import type { I18nData, SupportLocale } from "@/type";
function AppRoutes() {
return useRoutes(routes);
}
// function AppRoutes() {
// return useRoutes(routes);
// }
function App() {
const [init, setInit] = useState(false);
@ -87,9 +87,7 @@ function App() {
return (
<>
<div>
<Router>
<AppRoutes />
</Router>
<RouterProvider router={routes} />
</div>
</>
);

285
src/Routes.tsx
View File

@ -1,7 +1,16 @@
import Home from "@/pages/Home/index";
import MainLayout from "@/layouts/MainLayout";
import { Navigate, type RouteObject } from "react-router-dom";
import { Navigate, createBrowserRouter } from "react-router-dom";
import { lazy, Suspense } from "react";
import { KeepAlive } from "react-activation";
import TermsOfUse from "@/pages/Others/TermsOfUse";
import PrivacyPolicy from "@/pages/Others/PrivacyPolicy";
import AuditReport from "@/pages/Others/AuditReport";
import SiteMap from "@/pages/Others/SiteMap";
import Search from "@/pages/Others/Search";
import NavigateReplace from "@/utils/NavigateReplace";
import About from "@/pages/About/overview";
import AboutHistory from "@/pages/About/History";
import AboutFounder from "@/pages/About/Founder";
@ -20,57 +29,255 @@ import JoinCulture from "@/pages/Join/Culture";
import JoinCampus from "@/pages/Join/Campus";
import JoinCampusDetail from "@/pages/Join/CampusDetail";
import PropertyService from "@/pages/PropertyService/index";
import TermsOfUse from "@/pages/Others/TermsOfUse";
import PrivacyPolicy from "@/pages/Others/PrivacyPolicy";
import AuditReport from "@/pages/Others/AuditReport";
import SiteMap from "@/pages/Others/SiteMap";
import Search from "@/pages/Others/Search";
import NavigateReplace from "@/utils/NavigateReplace";
const routes: RouteObject[] = [
const routes = createBrowserRouter([
{
path: "/",
element: <MainLayout></MainLayout>,
children: [
{ index: true, element: <Home /> },
{ index: true, element: <KeepAlive id="home"><Home /></KeepAlive> },
// 关于银泰
{ path: "about", element: <NavigateReplace path="/about/overview"><About /></NavigateReplace> },
{ path: "about/overview", element: <About /> }, //集团概览
{ path: "about/history", element: <AboutHistory /> },
{ path: "about/founder", element: <AboutFounder /> },
{
path: "about",
element: (
<NavigateReplace path="/about/overview">
<About />
</NavigateReplace>
),
},
{
path: "about/overview",
element: (
<KeepAlive id="about-overview">
<Suspense fallback={null}>
<About />
</Suspense>
</KeepAlive>
),
},
{
path: "about/history",
element: (
<KeepAlive id="about-history">
<Suspense fallback={null}>
<AboutHistory />
</Suspense>
</KeepAlive>
),
},
{
path: "about/founder",
element: (
<KeepAlive id="about-founder">
<Suspense fallback={null}>
<AboutFounder />
</Suspense>
</KeepAlive>
),
},
// 集团业务
{ path: "business", element: <NavigateReplace path="/business/commercial-group"><BusinessCommercialGroup /></NavigateReplace> },
{ path: "business/commercial-group", element: <BusinessCommercialGroup /> },
{ path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> },
{ path: "business/base-group", element: <BusinessBaseGroup /> },
{ path: "business/realty-group", element: <BusinessRealtyGroup /> },
{ path: "business/invest-group", element: <BusinessInvestGroup /> },
{ path: "business/ruijing-group", element: <BusinessRujingGroup /> },
{
path: "business",
element: (
<NavigateReplace path="/business/commercial-group">
<Suspense fallback={null}>
<BusinessCommercialGroup />
</Suspense>
</NavigateReplace>
),
},
{
path: "business/commercial-group",
element: (
<KeepAlive id="business-commercial-group">
<Suspense fallback={null}>
<BusinessCommercialGroup />
</Suspense>
</KeepAlive>
),
},
{
path: "business/commercial-group/:detailType",
element: (
<KeepAlive id="business-commercial-group-detail">
<Suspense fallback={null}>
<BusinessCommercialGroupDetail />
</Suspense>
</KeepAlive>
),
},
{
path: "business/base-group",
element: (
<KeepAlive id="business-base-group">
<Suspense fallback={null}>
<BusinessBaseGroup />
</Suspense>
</KeepAlive>
),
},
{
path: "business/realty-group",
element: (
<KeepAlive id="business-realty-group">
<Suspense fallback={null}>
<BusinessRealtyGroup />
</Suspense>
</KeepAlive>
),
},
{
path: "business/invest-group",
element: (
<KeepAlive id="business-invest-group">
<Suspense fallback={null}>
<BusinessInvestGroup />
</Suspense>
</KeepAlive>
),
},
{
path: "business/ruijing-group",
element: (
<KeepAlive id="business-ruijing-group">
<Suspense fallback={null}>
<BusinessRujingGroup />
</Suspense>
</KeepAlive>
),
},
// 社会责任
{ path: "social", element: <NavigateReplace path="/social/sustainability"><SocialSustainability /></NavigateReplace> },
{ path: "social/sustainability", element: <SocialSustainability /> },
{ path: "social/foundation", element: <SocialFoundation /> },
{
path: "social",
element: (
<NavigateReplace path="/social/sustainability">
<Suspense fallback={null}>
<SocialSustainability />
</Suspense>
</NavigateReplace>
),
},
{
path: "social/sustainability",
element: (
<KeepAlive id="social-sustainability">
<Suspense fallback={null}>
<SocialSustainability />
</Suspense>
</KeepAlive>
),
},
{
path: "social/foundation",
element: (
<KeepAlive id="social-foundation">
<Suspense fallback={null}>
<SocialFoundation />
</Suspense>
</KeepAlive>
),
},
// 新闻中心
{ path: "news", element: <NavigateReplace path="/news/public"><NewsPublic /></NavigateReplace> },
{ path: "news/public", element: <NewsPublic /> },
{ path: "news/media", element: <NewsMedia /> },
{ path: "news/detail/:id", element: <NewsDetail /> },
{
path: "news",
element: (
<NavigateReplace path="/news/public">
<Suspense fallback={null}>
<NewsPublic />
</Suspense>
</NavigateReplace>
),
},
{
path: "news/public",
element: (
<KeepAlive id="news-public">
<Suspense fallback={null}>
<NewsPublic />
</Suspense>
</KeepAlive>
),
},
{
path: "news/media",
element: (
<KeepAlive id="news-media">
<Suspense fallback={null}>
<NewsMedia />
</Suspense>
</KeepAlive>
),
},
{
path: "news/detail/:id",
element: (
<KeepAlive id="news-detail">
<Suspense fallback={null}>
<NewsDetail />
</Suspense>
</KeepAlive>
),
},
// 加入银泰
{ path: "join", element: <NavigateReplace path="/join/culture"><JoinCulture /></NavigateReplace> },
{ path: "join/culture", element: <JoinCulture /> },
{ path: "join/campus", element: <JoinCampus /> },
{ path: "join/campus/detail/:id", element: <JoinCampusDetail /> },
{
path: "join",
element: (
<NavigateReplace path="/join/culture">
<Suspense fallback={null}>
<JoinCulture />
</Suspense>
</NavigateReplace>
),
},
{
path: "join/culture",
element: (
<KeepAlive id="join-culture">
<Suspense fallback={null}>
<JoinCulture />
</Suspense>
</KeepAlive>
),
},
{
path: "join/campus",
element: (
<KeepAlive id="join-campus">
<Suspense fallback={null}>
<JoinCampus />
</Suspense>
</KeepAlive>
),
},
{
path: "join/campus/detail/:id",
element: (
<KeepAlive id="join-campus-detail">
<Suspense fallback={null}>
<JoinCampusDetail />
</Suspense>
</KeepAlive>
),
},
// 其它
// 物业服务
{ path: "/property-service", element: <PropertyService /> },
{
path: "/property-service",
element: (
<KeepAlive id="property-service">
<Suspense fallback={null}>
<PropertyService />
</Suspense>
</KeepAlive>
),
},
// 搜索
{ path: "/search", element: <Search /> },
{ path: "/search", element: <KeepAlive id="search"><Search /></KeepAlive> },
// 使用条款 隐私保护 审计举报 网站地图
{ path: "/terms-of-use", element: <TermsOfUse /> },
{ path: "/privacy-policy", element: <PrivacyPolicy /> },
{ path: "/audit-report", element: <AuditReport /> },
{ path: "/site-map", element: <SiteMap /> },
{ path: "/terms-of-use", element: <KeepAlive id="terms-of-use"><TermsOfUse /></KeepAlive> },
{ path: "/privacy-policy", element: <KeepAlive id="privacy-policy"><PrivacyPolicy /></KeepAlive> },
{ path: "/audit-report", element: <KeepAlive id="audit-report"><AuditReport /></KeepAlive> },
{ path: "/site-map", element: <KeepAlive id="site-map"><SiteMap /></KeepAlive> },
{ path: "/contact-us", element: <Navigate to="/news/media"></Navigate> },
],
},
@ -78,6 +285,6 @@ const routes: RouteObject[] = [
path: '*',
element: <div>404 Not Found</div>
}
];
])
export default routes;

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

@ -31,6 +31,16 @@
background-position: center;
}
/* 视频铺满：等价于背景图 cover，需配合父级有明确宽高（.hero / .bgSwiper 已占满） */
.bgVideo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.heroOverlay {
position: absolute;
inset: 0;

17
src/components/banner.tsx
View File

@ -100,6 +100,8 @@ export default function Banner({
</ScrollReveal>
</div>
);
const videoExtension = ["mp4", "webm", "ogg"];
return (
<section
className={styles.hero}
@ -114,19 +116,32 @@ export default function Banner({
className={styles.bgSwiper}
modules={[Autoplay, EffectFade]}
effect="slide"
autoplay={{ delay: 3000, disableOnInteraction: false }}
autoplay={{ delay: 5000, disableOnInteraction: true }}
allowTouchMove={false}
slidesPerView={1}
loop={true}
>
{images.map((img, i) => (
<SwiperSlide key={i}>
{/* 图片后缀 */}
{videoExtension.includes(img.split(".").pop() ?? "") ? (
<video
src={img}
className={styles.bgVideo}
autoPlay
muted
loop
playsInline
/>
) : (
<div
className={styles.bgSlide}
style={{
backgroundImage: `url(${img}), ${FALLBACK_GRADIENT}`,
}}
/>
)}
{/* 视频 */}
</SwiperSlide>
))}
</Swiper>

2
src/index.tsx
View File

@ -8,9 +8,7 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function

2
src/layouts/MainLayout.tsx
View File

@ -17,7 +17,9 @@ export default function MainLayout() {
<div className="layout">
<Header />
<main className="container">
<AliveScope>
<Outlet />
</AliveScope>
</main>
<Footer />
</div>