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 pnpm-lock.yaml
package-lock.json package-lock.json
.env .env
public/video/banner.mp4

12
src/App.tsx
View File

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

285
src/Routes.tsx
View File

@ -1,7 +1,16 @@
import Home from "@/pages/Home/index"; import Home from "@/pages/Home/index";
import MainLayout from "@/layouts/MainLayout"; 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 About from "@/pages/About/overview";
import AboutHistory from "@/pages/About/History"; import AboutHistory from "@/pages/About/History";
import AboutFounder from "@/pages/About/Founder"; import AboutFounder from "@/pages/About/Founder";
@ -20,57 +29,255 @@ import JoinCulture from "@/pages/Join/Culture";
import JoinCampus from "@/pages/Join/Campus"; import JoinCampus from "@/pages/Join/Campus";
import JoinCampusDetail from "@/pages/Join/CampusDetail"; import JoinCampusDetail from "@/pages/Join/CampusDetail";
import PropertyService from "@/pages/PropertyService/index"; 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 = createBrowserRouter([
const routes: RouteObject[] = [
{ {
path: "/", path: "/",
element: <MainLayout></MainLayout>, element: <MainLayout></MainLayout>,
children: [ 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",
{ path: "about/history", element: <AboutHistory /> }, element: (
{ path: "about/founder", element: <AboutFounder /> }, <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",
{ path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> }, element: (
{ path: "business/base-group", element: <BusinessBaseGroup /> }, <NavigateReplace path="/business/commercial-group">
{ path: "business/realty-group", element: <BusinessRealtyGroup /> }, <Suspense fallback={null}>
{ path: "business/invest-group", element: <BusinessInvestGroup /> }, <BusinessCommercialGroup />
{ path: "business/ruijing-group", element: <BusinessRujingGroup /> }, </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",
{ path: "social/foundation", element: <SocialFoundation /> }, 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",
{ path: "news/media", element: <NewsMedia /> }, element: (
{ path: "news/detail/:id", element: <NewsDetail /> }, <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",
{ path: "join/campus", element: <JoinCampus /> }, element: (
{ path: "join/campus/detail/:id", element: <JoinCampusDetail /> }, <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: "/terms-of-use", element: <KeepAlive id="terms-of-use"><TermsOfUse /></KeepAlive> },
{ path: "/privacy-policy", element: <PrivacyPolicy /> }, { path: "/privacy-policy", element: <KeepAlive id="privacy-policy"><PrivacyPolicy /></KeepAlive> },
{ path: "/audit-report", element: <AuditReport /> }, { path: "/audit-report", element: <KeepAlive id="audit-report"><AuditReport /></KeepAlive> },
{ path: "/site-map", element: <SiteMap /> }, { path: "/site-map", element: <KeepAlive id="site-map"><SiteMap /></KeepAlive> },
{ path: "/contact-us", element: <Navigate to="/news/media"></Navigate> }, { path: "/contact-us", element: <Navigate to="/news/media"></Navigate> },
], ],
}, },
@ -78,6 +285,6 @@ const routes: RouteObject[] = [
path: '*', path: '*',
element: <div>404 Not Found</div> element: <div>404 Not Found</div>
} }
]; ])
export default routes; export default routes;

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

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

29
src/components/banner.tsx
View File

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

4
src/index.tsx
View File

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

4
src/layouts/MainLayout.tsx
View File

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