- {item.title} -
-{item.snippet}
- {item.date} -
-
+ {isCarousel && (
+
+ {images.map((img, i) => (
+
+
+
+ ))}
+
+ )}
+
+ {heroContent}
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/layout/AnimateTopCard/index.module.css b/src/components/layout/AnimateTopCard/index.module.css
new file mode 100644
index 0000000..8608cbf
--- /dev/null
+++ b/src/components/layout/AnimateTopCard/index.module.css
@@ -0,0 +1,130 @@
+.card {
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ .cardMask {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ &:hover {
+ .cardInner {
+ top: 0;
+ background: rgba(20, 53, 92, 0.9);
+ justify-content: flex-start;
+ transition-delay: 0s;
+
+ .cardTitle span {
+ left: 30px;
+ transform: translateX(0);
+ transition-delay: 0s;
+ }
+ }
+
+ .cardContent {
+ opacity: 1;
+ transition: opacity 0.3s ease 0.3s;
+ }
+
+ .cardTitleUnderline::before {
+ left: 30px;
+ transform: translateX(0);
+ transition-delay: 0s;
+ }
+ }
+
+ .cardInner {
+ padding: 50px;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ transition: all 0.3s ease;
+ transition-delay: 0.2s;
+ position: absolute;
+ top: calc(100% - 170px);
+
+
+ }
+
+ .cardTitle {
+ position: relative;
+ font-weight: 500;
+ font-size: 24px;
+ color: #FFFFFF;
+ height: 34px;
+ line-height: 34px;
+ font-style: normal;
+ text-transform: none;
+ padding: 0 30px;
+
+ span {
+ transition: all 0.3s ease;
+ transition-delay: 0.2s;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+
+ .cardTitleUnderline {
+ position: relative;
+ width: 100%;
+ height: 1px;
+ background: rgba(255,255,255,0.3);
+ margin-top: 30px;
+
+ &::before {
+ content: '';
+ display: block;
+ width: 300px;
+ height: 3px;
+ background: rgba(255,255,255,1);
+ position: absolute;
+ left: 50%;
+ top: -1px;
+ transform: translateX(-50%);
+ transition: all 0.3s ease;
+ transition-delay: 0.2s;
+ }
+ }
+
+ .cardContent {
+ margin-top: 20px;
+ padding: 0 30px;
+ font-weight: 400;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 34px;
+ text-align: justify;
+ font-style: normal;
+ text-transform: none;
+ opacity: 0;
+ transition: opacity 0.2s ease 0s;
+
+ .cardMore {
+ display: inline-block;
+ margin-top: 60px;
+ width: 104px;
+ height: 38px;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #FFFFFF;
+
+ font-weight: 400;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 22px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background: #FFFFFF;
+ color: #14355C;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/AnimateTopCard/index.tsx b/src/components/layout/AnimateTopCard/index.tsx
new file mode 100644
index 0000000..b022ca6
--- /dev/null
+++ b/src/components/layout/AnimateTopCard/index.tsx
@@ -0,0 +1,24 @@
+import styles from './index.module.css';
+import { Link } from 'react-router-dom';
+type Data = {
+ title: string;
+ content: string;
+ backgroundImage: string;
+ link: string;
+}
+
+export default function AnimateTopCard({ data }: { data: Data }) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/JobPage/index.module.css b/src/components/layout/JobPage/index.module.css
new file mode 100644
index 0000000..8d23e86
--- /dev/null
+++ b/src/components/layout/JobPage/index.module.css
@@ -0,0 +1,47 @@
+.jobPage {
+ width: 100%;
+ min-height: 100vh;
+ padding: 120px 100px;
+
+ .jobPageHeaderLine {
+ height: 100px;
+ border-bottom: 1px solid #222222;
+ display: flex;
+
+ .jobPageHeaderLineBack {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ }
+ }
+
+ .jobPageHeader {
+ padding: 60px 160px;
+
+ .jobPageHeaderTitle {
+ font-weight: 700;
+ font-size: 32px;
+ color: #222222;
+ line-height: 42px;
+ /* text-align: center; */
+ font-style: normal;
+ text-transform: none;
+ margin-bottom: 20px;
+ }
+
+ .jobPageHeaderTimeLine {
+ font-weight: 400;
+ font-size: 20px;
+ color: #333333;
+ line-height: 30px;
+ display: flex;
+ gap: 30px;
+ }
+
+ }
+
+ .jobPageContent {
+ font-size: 20px;
+ padding: 0 160px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/JobPage/index.tsx b/src/components/layout/JobPage/index.tsx
new file mode 100644
index 0000000..5382adc
--- /dev/null
+++ b/src/components/layout/JobPage/index.tsx
@@ -0,0 +1,38 @@
+import styles from "./index.module.css";
+
+
+type Data = {
+ title: string;
+ jobType: string;
+ businessArea: string;
+ businessPlate: string;
+ recruitNumber: string;
+ jobLocation: string;
+ content: string;
+}
+
+export default function JobPage({ data }: { data: Data }) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/RowAccordion/index.module.css b/src/components/layout/RowAccordion/index.module.css
new file mode 100644
index 0000000..5dad5fa
--- /dev/null
+++ b/src/components/layout/RowAccordion/index.module.css
@@ -0,0 +1,141 @@
+:root {
+ --duration: 0.4s;
+}
+.rowAccordion {
+ position: relative;
+ overflow-anchor: none;
+ padding: 0 260px;
+ width: 100%;
+ height: 100vh;
+}
+.rowAccordionBgContainer {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+}
+.rowAccordionBgLayer {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: opacity var(--duration) ease;
+}
+.rowAccordion .headerRow,
+.rowAccordion .contentRow {
+ position: relative;
+ z-index: 1;
+}
+.rowAccordion {
+ .headerRow {
+ width: 100%;
+ height: 250px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .title {
+ font-weight: 700;
+ font-size: 40px;
+ color: #FFFFFF;
+ line-height: 50px;
+ }
+ }
+ .contentRow {
+ height: 100%;
+ display: flex;
+ color: #fff;
+ .contentItem {
+ flex: 1;
+ transition: flex var(--duration) ease, padding-bottom var(--duration) ease;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ padding-top: 100px;
+ padding-bottom: 100px;
+ border-left: 1px solid #fff;
+ &:last-child {
+ border-right: 1px solid #fff;
+ }
+ .contentItemContainer {
+ padding: 0 20px;
+ min-height: 100px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: -3px;
+ transition: all var(--duration) ease-in-out;
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 5px;
+ height: 100px;
+ background: #14355C;
+ }
+ }
+
+
+ .contentItemTitle {
+ height: 100px;
+ font-weight: 500;
+ font-size: 24px;
+ color: #FFFFFF;
+ transition: all var(--duration) ease-in-out;
+ margin-bottom: 6px;
+ display: flex;
+ align-items: center;
+ }
+ .contentItemSubtitle {
+ font-size: 20px;
+ transition: font-size var(--duration) ease-in-out;
+ }
+
+ .contentItemContentWrapper {
+ height: 0;
+ opacity: 0;
+ transition: all var(--duration) ease-in-out;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 60px 0;
+ }
+ .contentItemContent {
+ font-size: 16px;
+ margin-top: 40px;
+ }
+
+ .contentItemLinks {
+ font-weight: 700;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 30px;
+ text-decoration-line: underline;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 30px 20px;
+ }
+ }
+ .contentItem.active {
+ flex: 2;
+ padding-bottom: 200px;
+ .contentItemContainer {
+ padding: 0 40px;
+ }
+ .contentItemTitle {
+ font-size: 40px;
+ }
+ .contentItemSubtitle {
+ font-size: 24px;
+ }
+
+ .contentItemContentWrapper {
+ height: 300px;
+ opacity: 1;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/RowAccordion/index.tsx b/src/components/layout/RowAccordion/index.tsx
new file mode 100644
index 0000000..48a7fee
--- /dev/null
+++ b/src/components/layout/RowAccordion/index.tsx
@@ -0,0 +1,81 @@
+// 横向手风琴组件
+import { useState } from 'react';
+import styles from './index.module.css';
+import { Link } from 'react-router-dom';
+
+const FALLBACK_GRADIENT = "linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%)";
+
+type Data = {
+ title?: string;
+ items: {
+ title: string;
+ subtitle?: string;
+ content?: string;
+ links?: {
+ text: string;
+ path: string;
+ }[];
+ image: string;
+ }[];
+}
+
+type Props = {
+ data: Data;
+ placement?: 'top' | 'bottom';
+}
+
+export default function RowAccordion({ data, placement='bottom' }: Props) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ return (
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/SectionTitle/index.module.css b/src/components/layout/SectionTitle/index.module.css
index 20e1a49..c905b8f 100644
--- a/src/components/layout/SectionTitle/index.module.css
+++ b/src/components/layout/SectionTitle/index.module.css
@@ -1,8 +1,20 @@
.sectionTitle {
font-weight: 700;
font-size: 40px;
- color: #222222;
line-height: 50px;
text-align: center;
margin-bottom: 100px;
+ display: flex;
+ flex-direction: column;
+
+
+ .sectionTitleSubtitle {
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 30px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ margin-top: 20px;
+ }
}
\ No newline at end of file
diff --git a/src/components/layout/SectionTitle/index.tsx b/src/components/layout/SectionTitle/index.tsx
index 6816d8c..5dcac20 100644
--- a/src/components/layout/SectionTitle/index.tsx
+++ b/src/components/layout/SectionTitle/index.tsx
@@ -1,9 +1,16 @@
import styles from "./index.module.css";
-export default function SectionTitle({ title }: { title: string }) {
+type Props = {
+ title: string;
+ subtitle?: string;
+ color?: string;
+}
+
+export default function SectionTitle({ title, subtitle, color }: Props) {
return (
-
{title}
- {subtitle &&{subtitle}
} - {desc &&{desc}
} - {largedesc &&{largedesc}
} -
- {showBreadcrumb && (breadcrumbItems ?? []).map((item, i) => (
+ backgroundImage: string | string[];
+};
+
+export default function Banner({
+ title,
+ subtitle,
+ desc,
+ largedesc,
+ showBreadcrumb,
+ breadcrumbItems,
+ titleSize = "large",
+ backgroundImage,
+}: Props) {
+ const images = Array.isArray(backgroundImage) ? backgroundImage : [backgroundImage];
+ const isCarousel = images.length > 1;
+ console.log('isCarousel', isCarousel)
+
+ const heroContent = (
+
+ );
+
+ return (
+
+
+ {title}
+ {subtitle &&{subtitle}
} + {desc &&{desc}
} + {largedesc &&{largedesc}
} +
+ {showBreadcrumb &&
+ (breadcrumbItems ?? []).map((item, i) => (
- {i > 0 && {' > '}}
+ {i > 0 && {" > "}}
{item.to ? {item.label} : {item.label}}
))}
-
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/Article/index.module.css b/src/components/layout/Article/index.module.css
new file mode 100644
index 0000000..fd8f682
--- /dev/null
+++ b/src/components/layout/Article/index.module.css
@@ -0,0 +1,50 @@
+.article {
+ width: 100%;
+ min-height: 100vh;
+ padding: 120px 100px;
+
+ .articleHeaderLine {
+ height: 100px;
+ border-bottom: 1px solid #222222;
+ display: flex;
+
+ .articleHeaderLineBack {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ }
+ }
+
+ .articleHeader {
+ padding: 60px 0;
+ margin-bottom: 60px;
+
+ .articleHeaderTitle {
+ font-weight: 700;
+ font-size: 32px;
+ color: #222222;
+ line-height: 42px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ margin-bottom: 20px;
+ }
+
+ .articleHeaderTimeLine {
+ font-weight: 400;
+ font-size: 16px;
+ color: #666666;
+ line-height: 22px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ display: flex;
+ gap: 40px;
+ }
+
+ }
+
+ .articleContent {
+ font-size: 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/Article/index.tsx b/src/components/layout/Article/index.tsx
new file mode 100644
index 0000000..163e283
--- /dev/null
+++ b/src/components/layout/Article/index.tsx
@@ -0,0 +1,32 @@
+import styles from "./index.module.css";
+
+
+type Data = {
+ title: string;
+ createTime: string;
+ readTimes: string;
+ content: string;
+}
+
+export default function Article({ data }: { data: Data }) {
+ return (
+
+
+ {data.title}
+
+
+
+ {data.content}
+ 了解更多
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/BottomTabsSection/BottomTabs.tsx b/src/components/layout/BottomTabsSection/BottomTabs.tsx
new file mode 100644
index 0000000..c9914f9
--- /dev/null
+++ b/src/components/layout/BottomTabsSection/BottomTabs.tsx
@@ -0,0 +1,20 @@
+import { useState } from "react";
+import styles from "./index.module.css";
+
+type TabItems = {
+ tabName: string;
+ [key: string]: any;
+}[]
+
+export default function BottomTabs({ tabItems, activeIndex, setActiveIndex }: { tabItems: TabItems, activeIndex: number, setActiveIndex: (index: number) => void }) {
+
+ return (
+
+
+ window.history.back()}>
+ 
+ 返回
+
+
+ 返回
+
+
+ {data.title}
+
+ 发布时间：{data.createTime}
+ 阅读次数：{data.readTimes}
+
+
+
+
+
+ {tabItems.map((item, i) => (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/BottomTabsSection/index.module.css b/src/components/layout/BottomTabsSection/index.module.css
new file mode 100644
index 0000000..8ada4e9
--- /dev/null
+++ b/src/components/layout/BottomTabsSection/index.module.css
@@ -0,0 +1,67 @@
+.bottomTabsSection {
+ width: 100%;
+ /* height: 1080px; */
+ height: 100vh;
+ padding: 100px 260px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ color: #fff;
+ box-sizing: border-box;
+}
+
+/* Features Section */
+.bottomTabsSectionContent {
+ width: 100%;
+ height: 500px;
+ margin-top: 200px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .bottomTabsSectionContentContent {
+ width: 100%;
+ color: #FFFFFF;
+
+ .contentTitle {
+ font-weight: 500;
+ font-size: 30px;
+ line-height: 40px;
+ }
+
+ .contentText {
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 26px;
+ margin-top: 20px;
+ }
+ }
+
+ .bottomTabsSectionContentTabs {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: auto;
+ border-top: 1px solid rgba(255,255,255,0.5);
+ padding: 0 200px;
+ }
+
+ .bottomTabsSectionContentTab {
+ flex: 1;
+ font-weight: 500;
+ font-size: 20px;
+ color: #FFFFFF;
+ line-height: 60px;
+ height: 60px;
+ cursor: pointer;
+
+ span {
+ display: inline-block;
+ line-height: 60px;
+ height: 60px;
+ }
+ }
+ .bottomTabsSectionContentTab.active span {
+ border-top: 2px solid #FFFFFF;
+ }
\ No newline at end of file
diff --git a/src/components/layout/BottomTabsSection/index.tsx b/src/components/layout/BottomTabsSection/index.tsx
new file mode 100644
index 0000000..b798dca
--- /dev/null
+++ b/src/components/layout/BottomTabsSection/index.tsx
@@ -0,0 +1,31 @@
+import styles from './index.module.css';
+import SectionTitle from '../SectionTitle';
+import { useState } from 'react';
+import BottomTabs from './BottomTabs';
+
+type Data = {
+ title: string;
+ tabItems: {
+ tabName: string;
+ contentTitle: string;
+ contentText: string;
+ image: string;
+ }[]
+}
+
+export default function BottomTabsSection({ data }: { data: Data }) {
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ return (
+ setActiveIndex(i)}>
+ {item.tabName}
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/ColumnXGrids/index.module.css b/src/components/layout/ColumnXGrids/index.module.css
new file mode 100644
index 0000000..7bf1a30
--- /dev/null
+++ b/src/components/layout/ColumnXGrids/index.module.css
@@ -0,0 +1,59 @@
+.columnXGrids {
+ /* 3列 */
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 30px;
+
+ .columnXGridsItem {
+ color: #fff;
+ aspect-ratio: 446/430;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+ overflow: hidden;
+
+ .mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ .columnXGridsItemInner {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ padding: 60px 40px;
+ transition: background 0.3s ease;
+
+ &:hover {
+ background: rgba(20,53,92,0.7);
+ .columnXGridsItemContent {
+ opacity: 1;
+ }
+ }
+
+ .columnXGridsItemTitle {
+ font-weight: 500;
+ font-size: 24px;
+ color: #FFFFFF;
+ line-height: 34px;
+ margin-bottom: 10px;
+ }
+
+ .columnXGridsItemContent {
+ font-weight: 500;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 34px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/ColumnXGrids/index.tsx b/src/components/layout/ColumnXGrids/index.tsx
new file mode 100644
index 0000000..b92a7e3
--- /dev/null
+++ b/src/components/layout/ColumnXGrids/index.tsx
@@ -0,0 +1,25 @@
+import styles from "./index.module.css";
+
+type Props = {
+ items: {
+ title: string;
+ content: string;
+ backgroundImage: string;
+ }[];
+}
+
+export default function ColumnXGrids({ items }: Props) {
+ return (
+
+
+
+
+ {data.tabItems[activeIndex].contentTitle}
+ {data.tabItems[activeIndex].contentText}
+
+ {items.map((item, index) => (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/HonorGrids/index.module.css b/src/components/layout/HonorGrids/index.module.css
new file mode 100644
index 0000000..2e30e83
--- /dev/null
+++ b/src/components/layout/HonorGrids/index.module.css
@@ -0,0 +1,38 @@
+.honorGrids {
+ width: 100%;
+ padding: 100px 300px;
+ background: rgba(216,216,216,0.5);
+
+ .honorGridsTitle {
+ font-family: Source Han Sans, Source Han Sans;
+ font-weight: 700;
+ font-size: 40px;
+ color: #222222;
+ line-height: 50px;
+ margin-bottom: 100px;
+ text-align: center;
+ }
+
+ .honorGridsItems {
+ /* 4*n */
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 60px;
+
+ .honorGridsItem {
+ height: 116px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #666;
+
+ .honorGridsTitle {
+ font-weight: 400;
+ font-size: 20px;
+ color: #222222;
+ line-height: 30px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/HonorGrids/index.tsx b/src/components/layout/HonorGrids/index.tsx
new file mode 100644
index 0000000..0936a97
--- /dev/null
+++ b/src/components/layout/HonorGrids/index.tsx
@@ -0,0 +1,23 @@
+import styles from './index.module.css';
+
+type Data = {
+ title: string;
+ items: {
+ title: string;
+ }[];
+}
+export default function HonorGrids({ data }: {data: Data}) {
+ return (
+
+
+
+ ))}
+
+
+ {item.title}
+ {item.content}
+ {data.title}
+
+
+ {data.items.map((item) => (
+
+
+
+ ))}
+ {item.title}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/ParagraphSection/index.module.css b/src/components/layout/ParagraphSection/index.module.css
new file mode 100644
index 0000000..04c494a
--- /dev/null
+++ b/src/components/layout/ParagraphSection/index.module.css
@@ -0,0 +1,21 @@
+.paragraphSection {
+ padding: 100px 260px;
+ background: rgba(255, 255, 255, 0.8);
+ background-size: cover;
+ background-position: center;
+ background-repeat: repeat;
+}
+
+.paragraphSectionContent {
+ white-space: pre-line;
+
+ .paragraphSectionTitle {
+ font-weight: 500;
+ font-size: 40px;
+ color: #14355C;
+ line-height: 50px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/ParagraphSection/index.tsx b/src/components/layout/ParagraphSection/index.tsx
new file mode 100644
index 0000000..0fb123f
--- /dev/null
+++ b/src/components/layout/ParagraphSection/index.tsx
@@ -0,0 +1,22 @@
+import StatsRow from '../StatsRow/StatsRow';
+import styles from './index.module.css';
+
+type Data = {
+ title: string;
+ content: string;
+ statsData?: { num: string; label: string }[];
+ backgroundImage?: string;
+}
+
+export default function ParagraphSection({ data, children }: {data: Data, children?: React.ReactNode}) {
+ return (
+
+
+ window.history.back()}>
+
+ 返回
+
+
+ 返回
+
+
+ {data.title}
+
+ 职位类别：{data.jobType}
+ 业务领域：{data.businessArea}
+ 所属板块：{data.businessPlate}
+ 招聘人数：{data.recruitNumber}
+ 工作地点：{data.jobLocation}
+
+
+
+
+
+
+ {data.statsData && {data.title}{data.content}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/Section/index.tsx b/src/components/layout/Section/index.tsx
new file mode 100644
index 0000000..ecbc6dd
--- /dev/null
+++ b/src/components/layout/Section/index.tsx
@@ -0,0 +1,40 @@
+import SectionTitle from "../SectionTitle";
+
+type Props = {
+ title?: string;
+ subtitle?: string;
+ height?: string;
+ titleColor?: string;
+ children?: React.ReactNode;
+ background?: string;
+ maskBackground?: string;
+ className?: string;
+}
+
+export default function Section({ title, subtitle, height, titleColor, children, background, maskBackground, className }: Props) {
+ return (
+
+ {data.items.map((item, index) => (
+
+ ))}
+
+ {
+ data.title && (
+
+
+ )
+ }
+ {data.title}
+
+ {data.items.map((item, index) => (
+
+ setActiveIndex(index)}
+ >
+
+ ))}
+
+
+ {item.title}
+ {item.subtitle && {item.subtitle}
}
+ {
+ (item.content || (item.links || []).length > 0) && (
+
+ {item.content && (
+
+ )
+ }
+ {item.content}
+ )}
+ {item.links && (
+
+ {item.links?.map((link) => (
+ {link.text}
+ ))}
+
+ )}
+
+ {title &&
+
+
{title}
+ {subtitle && {subtitle}}
)
}
\ No newline at end of file
diff --git a/src/components/layout/StatsRow/StatsRow.module.css b/src/components/layout/StatsRow/StatsRow.module.css
index d30f5e4..fb6cd93 100644
--- a/src/components/layout/StatsRow/StatsRow.module.css
+++ b/src/components/layout/StatsRow/StatsRow.module.css
@@ -17,21 +17,22 @@
}
.statItem:not(:last-child) {
- border-right: 1px solid #222222;
+ border-right: 1px solid var(--stats-color);
}
.statNum {
font-size: 2.5rem;
font-weight: 700;
- color: #222;
+ color: var(--stats-color);
line-height: 1.2;
}
.statNumDesc {
font-size: 1.875rem;
+ color: var(--stats-color);
}
.statLabel {
font-size: 1rem;
- color: #666;
+ color: var(--stats-label-color);
}
\ No newline at end of file
diff --git a/src/components/layout/StatsRow/StatsRow.tsx b/src/components/layout/StatsRow/StatsRow.tsx
index 22c0f55..00d0b7b 100644
--- a/src/components/layout/StatsRow/StatsRow.tsx
+++ b/src/components/layout/StatsRow/StatsRow.tsx
@@ -1,14 +1,24 @@
import styles from "./StatsRow.module.css";
-type StatsData = {
+type Data = {
num: string;
label: string;
}
-export default function StatsRow({ statsData }: { statsData: StatsData[] }) {
+type Props = {
+ data: Data[];
+ color?: string;
+}
+
+export default function StatsRow({ data, color }: Props) {
return (
-
- {statsData.map((item, i) => (
+
+ {data.map((item, i) => (
diff --git a/src/components/layout/SwiperCardSection/index.module.css b/src/components/layout/SwiperCardSection/index.module.css
index 0d4961d..b91def8 100644
--- a/src/components/layout/SwiperCardSection/index.module.css
+++ b/src/components/layout/SwiperCardSection/index.module.css
@@ -1,57 +1,123 @@
.swiperCardSection {
min-height: 100vh;
- padding: 100px 260px;
+ padding: 6.25rem 16.25rem;
background: #D8D8D8;
}
+.carouselWrapper {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ position: relative;
+}
+
+.navBtn {
+ flex-shrink: 0;
+ width: 50px;
+ height: 50px;
+ background: #FFFFFF;
+ box-shadow: 0px 0 12px 0px rgba(20, 53, 92, 0.2);
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: -90px;
+ z-index: 99;
+}
+
+.nextBtn {
+ left: auto;
+ right: -90px;
+}
.swiperCardList {
- display: flex;
- flex-direction: row;
- gap: 15px;
- .swiperCardItem {
- position: relative;
+ flex: 1;
+ overflow: hidden;
+}
+
+.swiperCardList .swiperCardItem {
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ aspect-ratio: 457 / 630;
+
+ img {
width: 100%;
aspect-ratio: 457 / 630;
- img {
- width: 100%;
- aspect-ratio: 457 / 630;
- object-fit: cover;
- }
- .swiperMask {
- width: 100%;
- aspect-ratio: 457 / 630;
- position: absolute;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.2);
- }
+ object-fit: cover;
+ }
+ .swiperMask {
+ width: 100%;
+ aspect-ratio: 457 / 630;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ &:hover {
.swiperContent {
- color: #fff;
- position: absolute;
- top: 80%;
- left: 0;
- width: 100%;
- height: 100%;
+ background: rgba(20, 53, 92, 0.8);
+ top: 0;
.swiperTitle {
- font-weight: 500;
- font-size: 24px;
- color: #FFFFFF;
- line-height: 80px;
- height: 80px;
- margin: 0 30px;
- text-align: center;
- border-bottom: 1px solid rgba(255,255,255,0.3);
+ padding: 0 30px;
span {
- display: inline-block;
- line-height: 80px;
- height: 80px;
- border-bottom: 3px solid #14355C;
+ left: 30px;
+ transform: translateX(0);
+ border-color: #fff;
}
}
+ .swiperDesc {
+ opacity: 1;
+ }
+ }
+ }
+
+ .swiperContent {
+ color: #fff;
+ position: absolute;
+ top: 75%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transition: top 0.3s ease-in-out;
+
+ .swiperTitle {
+ position: relative;
+ font-weight: 500;
+ font-size: 24px;
+ color: #FFFFFF;
+ line-height: 80px;
+ height: 80px;
+ margin: 0 30px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+
+
+ span {
+ display: inline-block;
+ position: absolute;
+ left: 50%;
+ line-height: 80px;
+ height: 80px;
+ border-bottom: 3px solid #14355C;
+ transform: translateX(-50%);
+ transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
+ white-space: nowrap;
+ }
+ }
+
+ .swiperDesc {
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 24px;
+ margin: 40px 60px;
+ opacity: 0;
}
}
}
\ No newline at end of file
diff --git a/src/components/layout/SwiperCardSection/index.tsx b/src/components/layout/SwiperCardSection/index.tsx
index bbe0b09..aa9b0d8 100644
--- a/src/components/layout/SwiperCardSection/index.tsx
+++ b/src/components/layout/SwiperCardSection/index.tsx
@@ -1,6 +1,10 @@
+import { useCallback, useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import type { Swiper as SwiperType } from "swiper";
+import "swiper/css";
import SectionTitle from "../SectionTitle";
import styles from "./index.module.css";
-
+import { RightOutlined, LeftOutlined } from "@ant-design/icons";
type Data = {
title: string;
cardItems: {
@@ -11,23 +15,57 @@ type Data = {
}
export default function SwiperCardSection({ data }: { data: Data }) {
+ const [swiperRef, setSwiperRef] = useState(null);
+ const [activeIndex, setActiveIndex] = useState(0);
+ const onSwiperChange = useCallback((e: any) => {
+ setActiveIndex(e.activeIndex);
+ }, [])
return (
- {data.cardItems.map((item) => (
-
- 
-
-
+
+ )
+}
\ No newline at end of file
diff --git a/src/layouts/Footer.module.css b/src/layouts/Footer.module.css
index 4ed245d..e6f41d3 100644
--- a/src/layouts/Footer.module.css
+++ b/src/layouts/Footer.module.css
@@ -1,5 +1,5 @@
.footer {
- background: #fff;
+ background: #F6F6F6;
color: #333;
}
diff --git a/src/layouts/Header.module.css b/src/layouts/Header.module.css
index bb2ea9a..360de75 100644
--- a/src/layouts/Header.module.css
+++ b/src/layouts/Header.module.css
@@ -13,16 +13,35 @@
text-align: left;
font-style: normal;
text-transform: none;
+
+ transition: background 0.3s ease;
}
.hoverMenu.header {
background: #fff;
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1);
+ border-bottom: 1px solid #eee;
}
+
.hoverMenu .navLink {
color: #222222;
}
+.hoverMenu {
+ .searchBtn {
+ color: #222222;
+ }
+
+ .langTrigger {
+ color: #222222;
+ }
+
+ svg,
+ svg path {
+ fill: #222222 !important;
+ }
+}
+
.activeNav .navLink {
color: #14355C;
}
@@ -34,6 +53,7 @@
height: 100%;
width: 100%;
}
+
.headerInner::after {
position: absolute;
bottom: 0;
@@ -79,6 +99,7 @@
white-space: nowrap;
cursor: pointer;
}
+
.navLink:hover {
color: #14355C !important;
}
@@ -122,7 +143,7 @@
left: 0;
width: 100%;
height: 23.75rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 1.25rem;
z-index: 1000;
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index ad3867a..9f75a60 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -1,12 +1,14 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
import { Dropdown } from "antd";
import styles from "./Header.module.css";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
type NavChild = { path: string; label: string };
type NavItem = { path: string; label: string; children?: NavChild[] };
export default function Header() {
+ const location = useLocation();
+
const navItems: NavItem[] = [
{
label: "关于银泰",
@@ -40,7 +42,7 @@ export default function Header() {
label: "新闻中心",
path: "/news",
children: [
- { path: "/news/consult", label: "银泰咨询" },
+ { path: "/news/public", label: "集团发布" },
{ path: "/news/media", label: "媒体垂询" },
],
},
@@ -63,7 +65,7 @@ export default function Header() {
const [showDropPanel, setShowDropPanel] = useState(false);
const [hoverElLeft, setHoverElLeft] = useState(0);
const handleNavEnter = (e: any, path: string) => {
- console.log(e,e.target.offsetWidth)
+ console.log(e, e.target.offsetWidth)
// left + 元素宽度的一半
const left = e.target.offsetLeft;
setHoverElLeft(left);
@@ -74,8 +76,36 @@ export default function Header() {
const activePanelItem = useMemo(() => {
return navItems.find((item) => item.path === activeNav)?.children || [];
}, [activeNav]);
+
+ const [showWhiteMode, setShowWhiteMode] = useState(false);
+
+ useEffect(() => {
+ const path = location.pathname;
+ if (path.includes("/detail/")) {
+ setShowWhiteMode(true);
+ } else {
+ setShowWhiteMode(false);
+ }
+ }, [location.pathname]);
+
+ // 监听滚动
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+ if (scrollTop > 100) {
+ setShowWhiteMode(true);
+ } else {
+ setShowWhiteMode(false);
+ }
+ }
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
return (
- setShowDropPanel(false)}
>
-
- )
+ );
}
\ No newline at end of file
diff --git a/src/components/layout/TopTabsSection/TopTabs.tsx b/src/components/layout/TopTabsSection/TopTabs.tsx
new file mode 100644
index 0000000..68a81ce
--- /dev/null
+++ b/src/components/layout/TopTabsSection/TopTabs.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import styles from './index.module.css';
+
+type Data = {
+ tabItems: {
+ icon?: string;
+ tabName: string;
+ contentTitle: string;
+ contentSubtitle: string;
+ contentText: string;
+ image: string;
+ }[]
+}
+export default function TopTabs({ data }: { data: Data }) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ return (
+
- {item.title}
+
- ))}
+
+ ))}
+
+ {activeIndex < data.cardItems.length - 1 && (
+
+ )}
+ {activeIndex > 0 && (
+
+ )}
+
+ {data.cardItems.map((item) => (
+
+
-
+
+
+
- {/*
+
+ {item.title}
+
+ {item.desc}
+{item.desc}
*/} -
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
new file mode 100644
index 0000000..a222c0a
--- /dev/null
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -0,0 +1,95 @@
+.topTabsSection {
+ padding: 100px 260px 150px 260px;
+ width: 100%;
+ min-height: 100vh;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.topTabsTabs {
+ height: 60px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ justify-content: space-between;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 34px;
+ border-bottom: 1px solid #D5D8DC;
+ padding: 0 260px;
+}
+
+.topTabsTabItem {
+ height: 60px;
+ cursor: pointer;
+ color: #222222;
+}
+
+.topTabsTabItem.active {
+ border-bottom: 2px solid #000000;
+ color: #14355C;
+}
+
+.topTabsContent {
+ padding-top: 150px;
+ display: flex;
+ gap: 80px;
+ flex-direction: row;
+}
+
+.topTabsContentLeft {
+ flex: 6;
+ margin: auto 0;
+
+ .topTabsContentLeftHead {
+ margin-bottom: 30px;
+ display: flex;
+ gap: 10px;
+
+ .topTabsContentLeftTitle {
+ display: flex;
+ align-items: flex-end;
+ gap: 10px;
+
+ .topTabsContentLeftTitleMain {
+ font-weight: 700;
+ font-size: 40px;
+ color: #222222;
+ line-height: 50px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .topTabsContentLeftTitleSub {
+ font-weight: 400;
+ font-size: 18px;
+ color: #14355C;
+ line-height: 26px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+ }
+ }
+
+ .topTabsContentLeftDesc {
+ font-weight: 400;
+ font-size: 18px;
+ color: #222222;
+ line-height: 34px;
+ text-align: justify;
+ font-style: normal;
+ text-transform: none;
+ }
+}
+
+.topTabsContentRight {
+ flex: 8;
+
+ img {
+ width: 800px;
+ height: 500px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
new file mode 100644
index 0000000..18cb02b
--- /dev/null
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import styles from './index.module.css';
+import TopTabs from './TopTabs';
+
+type Data = {
+ tabItems: {
+ icon?: string;
+ tabName: string;
+ contentTitle: string;
+ contentSubtitle: string;
+ contentText: string;
+ image: string;
+ }[]
+}
+
+export default function TopTabsSection({ data }: { data: Data }) {
+ return (
+
+ {data.tabItems.map((item, index) => (
+
+ setActiveIndex(index)}>
+ {item.tabName}
+
+ ))}
+
+
+
+
+
+ {
+ data.tabItems[activeIndex].icon && (
+ 
+ )
+ }
+
+
+
+ {data.tabItems[activeIndex].contentTitle}
+ {data.tabItems[activeIndex].contentSubtitle}
+ + {data.tabItems[activeIndex].contentText} +
+
+ 
+
+
@@ -104,7 +134,7 @@ export default function Header() {
trigger={["click"]}
>
@@ -117,8 +147,9 @@ export default function Header() {
);
}
function DropPanel({ items, left }: { items: NavChild[]; left: number }) {
+
return (
-
+
{items.map((item) => (
diff --git a/src/pages/About/Founder.tsx b/src/pages/About/Founder.tsx
index db034bd..fe3ad12 100644
--- a/src/pages/About/Founder.tsx
+++ b/src/pages/About/Founder.tsx
@@ -1,8 +1,14 @@
-import Banner from "@/components/banner";
+import Banner from "@/components/Banner";
import styles from "./Founder.module.css";
import { useState } from "react";
+import ParagraphSection from "@/components/layout/ParagraphSection";
export default function AboutFounder() {
+ const [paragraphSectionData] = useState({
+ title: "沈国军",
+ content: "汉族，博士，高级经济师。中国人民政治协商会议第十一届、十三届全国委员会委员、中国人民政治协商会议第十三届全国委员会提案委员会委员、中国致公党第十四届、十五届、十六届中央委员会常委、第一届浙商（全球）总会执行会长、第一届甬商（全球）总会会长。\n\n 银泰集团（全称“中国银泰投资有限公司”）创始人兼董事长、银泰公益基金会创始人及荣誉理事长、桃花源生态保护基金会董事局执行主席。",
+ })
+
const intoductionList = [
{
title: "商业领域",
@@ -21,16 +27,11 @@ export default function AboutFounder() {
}
return (
-
-
+
+
-
- 沈国军
-
+ 汉族，博士，高级经济师。中国人民政治协商会议第十一届、十三届全国委员会委员、中国人民政治协商会议第十三届全国委员会提案委员会委员、中国致公党第十四届、十五届、十六届中央委员会常委、第一届浙商（全球）总会执行会长、第一届甬商（全球）总会会长。
-银泰集团（全称“中国银泰投资有限公司”）创始人兼董事长、银泰公益基金会创始人及荣誉理事长、桃花源生态保护基金会董事局执行主席。
-
{intoductionList.map((item, index) => (
-
@@ -45,20 +46,21 @@ export default function AboutFounder() {
))}
-
- 企业家精神
-一个优秀的企业家，要传承、弘扬传统优秀的商道，继续开创新的商业文明。创新与变革、勤奋与进取、分享与合作、诚信与责任是沈国军所倡导的企业家精神。
-
- 
-
);
diff --git a/src/pages/About/History.tsx b/src/pages/About/History.tsx
index 910e729..2c60669 100644
--- a/src/pages/About/History.tsx
+++ b/src/pages/About/History.tsx
@@ -1,4 +1,4 @@
-import Banner from "@/components/banner";
+import Banner from "@/components/Banner";
import YearPicker from "@/components/YearPicker";
import styles from "./History.module.css";
import { useState, useRef, useLayoutEffect } from "react";
diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
index 536a995..998e601 100644
--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@@ -1,6 +1,6 @@
import { Link } from "react-router-dom";
import styles from "./About.module.css";
-import Banner from "@/components/banner";
+import Banner from "@/components/Banner";
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
@@ -17,7 +17,7 @@ const sectionData: SectionItem[] = [
title: "银泰商业集团",
desc: "涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK区域型品质商业生活中心银泰城等品牌的大型商业集团，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。",
bgImg: '/images/bg-commercial-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
+ links: [{ label: 'in77', to: '/business/commercial-group/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
},
{
title: "银泰基业集团",
@@ -52,6 +52,7 @@ export default function About() {
title="集团概览"
desc="银泰集团（全称“中国银泰投资有限公司”）由沈国军先生于1997年创立，立足实业发展与产业投资，业务涵盖商业零售、商业地产运营与开发、股权投资等领域，在境内外拥有多家控股、参股公司，已发展成为一家主业突出、多元发展的现代企业集团。"
showBreadcrumb={true}
+ breadcrumbItems={[{ label: '关于银泰', to: '/about' }, { label: '集团概览', to: '' }]}
backgroundImage={'/images/bg-overview.png'} />
{sectionData.map((item, index) => (
@@ -62,7 +63,6 @@ export default function About() {
backgroundImage: `url(${item.bgImg}), ${FALLBACK_GRADIENT}`,
}}
>
- {/* */}
-
-
+ · 关于创新与变革
-“每个人心中都是卧虎藏龙的，释放你心中的龙和虎，到市场上去捕食，让这个社会、这个市场有更多的创新和变革，这样才能带来进步。”
-
+
+ 企业家精神
+一个优秀的企业家，要传承、弘扬传统优秀的商道，继续开创新的商业文明。创新与变革、勤奋与进取、分享与合作、诚信与责任是沈国军所倡导的企业家精神。
+
+
+
+
+
+ · 关于创新与变革
+“每个人心中都是卧虎藏龙的，释放你心中的龙和虎，到市场上去捕食，让这个社会、这个市场有更多的创新和变革，这样才能带来进步。”
diff --git a/src/pages/Business/BaseGroup.tsx b/src/pages/Business/BaseGroup.tsx
index 961043a..bb25761 100644
--- a/src/pages/Business/BaseGroup.tsx
+++ b/src/pages/Business/BaseGroup.tsx
@@ -1,8 +1,93 @@
-export default function BusinessBaseGroup() {
+import Banner from "@/components/Banner";
+import { useState } from "react";
+import SwiperCardSection from "@/components/layout/SwiperCardSection";
+import RowAccordion from "@/components/layout/RowAccordion";
+import HonorGrids from "@/components/layout/HonorGrids";
+import ParagraphSection from "@/components/layout/ParagraphSection";
+import BottomTabsSection from "@/components/layout/BottomTabsSection";
+
+export default function BaseGroup() {
+ const [paragraphSectionData] = useState({
+ title: "银泰基业集团",
+ content: "管理有限公司是一家集品质物业服务、资产托管运营、智慧物联管理、科技平台创新运维为一体的专业化物业服务企业，致力于商办类物业运营管理、打造资产全周期生态服务。\n\n 凭借银泰集团多年城市商业地产运营经验不断深化创新，银泰智享积极拓展业务深度与广度，做强基础物业服务，深耕客户卓越服务体验，创造企业多元化价值。核心业务涵盖资产全托管服务、资产顾问服务、资产设施服务、物业品牌合作等，着力实现服务体系化、标准化、精细化、智慧化“四化合一”，打造国内一流的物业管理品牌。",
+ statsData: [
+ { num: "32 个", label: "全国在管项目" },
+ { num: "475 万平方", label: "总建筑面积" },
+ { num: "3 亿人次", label: "客流每年超" },
+ { num: "350 亿元", label: "销售额每年" },
+ { num: "5000 +", label: "合作品牌" },
+ ],
+ })
+
+ const swiperCardData = {
+ title: "四大区域",
+ cardItems: [
+ { title: "服务业态1", desc: "服务业态1", image: "/images/bg-overview.png" },
+ { title: "服务业态2", desc: "服务业态2", image: "/images/bg-overview.png" },
+ { title: "服务业态3", desc: "服务业态3", image: "/images/bg-overview.png" },
+ { title: "服务业态4", desc: "服务业态3", image: "/images/bg-overview.png" },
+ { title: "服务业态5", desc: "服务业态3", image: "/images/bg-overview.png" },
+ ],
+ }
+
+ const rowAccordionData = {
+ title: "标杆项目",
+ items: [
+ { title: "北京", subtitle: "北京银泰中心", image: "/images/bg-overview.png", links:[
+ { text: 'in01', path: ''},
+ { text: '超甲级写字楼', path: ''},
+ { text: '北京柏悦酒店', path: ''},
+ { text: '柏悦府', path: ''},
+ { text: '柏悦居', path: ''},
+ ] },
+ { title: "四川", subtitle: "成都银泰中心", image: "/images/bg-overview.png" },
+ { title: "浙江", subtitle: "杭州湖滨银泰in77", image: "/images/bg-overview.png" },
+ { title: "上海", subtitle: "上海中骏广场", image: "/images/bg-overview.png" },
+ ],
+ }
+ const honorsData = {
+ title: "企业价值",
+ items: [
+ { title: "荣誉资质1" },
+ { title: "荣誉资质2" },
+ { title: "荣誉资质3" },
+ { title: "荣誉资质4" },
+ { title: "荣誉资质5" },
+ { title: "荣誉资质6" },
+ { title: "荣誉资质7" },
+ { title: "荣誉资质8" },
+ ],
+ }
+ const bottomTabsData = {
+ title: "业务特色",
+ tabItems: [
+ { tabName: "精细化运营", contentTitle: "精细化运营——运筹帷幄·精于心", contentText: "通过精细化管理赋能运营，稳步提升商业资产价值。关注租金的成长性和租户的良性表现，实现产品逐步升级，服务稳健提升，实现商业资产整体增值。", image: "/images/bg-overview.png" },
+ { tabName: "数智化管理", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ { tabName: "生态化发展", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ { tabName: "品牌化升级", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ ],
+ }
return (
-
+ {/* 2. Overview */}
+
-
+
+
+ {/* 股权投资 */}
+
+
+
+ {/* 产业孵化 */}
+
+
);
}
+
+
diff --git a/src/pages/Business/RealtyGroup.tsx b/src/pages/Business/RealtyGroup.tsx
index dcb1ae3..05a6728 100644
--- a/src/pages/Business/RealtyGroup.tsx
+++ b/src/pages/Business/RealtyGroup.tsx
@@ -1,8 +1,87 @@
-export default function BusinessRealtyGroup() {
+import Banner from "@/components/Banner";
+import { useState } from "react";
+import SwiperCardSection from "@/components/layout/SwiperCardSection";
+import RowAccordion from "@/components/layout/RowAccordion";
+import HonorGrids from "@/components/layout/HonorGrids";
+import ParagraphSection from "@/components/layout/ParagraphSection";
+import BottomTabsSection from "@/components/layout/BottomTabsSection";
+import TopTabsSection from "@/components/layout/TopTabsSection";
+
+export default function RealtyGroup() {
+ const [paragraphSectionData] = useState({
+ title: "银泰置地集团",
+ content: "专注于大型综合性商业地产项目和小镇开发，涵盖高端购物中心、酒店、公寓、超甲级写字楼等业态，旗下囊括“银泰中心”“银泰城”“柏悦府”“柏悦居”等产品线。公司秉承绿色建筑理念和楼宇智慧运营管理，成为中国高端商业地产的领军企业。目前，银泰置地集团在全国拥有100余个建成及在建项目，遍布北京、杭州、成都等七十多个城市，总开发面积近二千万平方米。\n\n近年来，银泰置地集团紧密结合国家产业政策，控制开发规模，探索“租售并举+轻资产运作”的商业模式，成为商业地产领域创新变革与健康良性发展的代表性企业。",
+ statsData: [
+ { num: "32 个", label: "全国在管项目" },
+ { num: "475 万平方", label: "总建筑面积" },
+ { num: "3 亿人次", label: "客流每年超" },
+ { num: "350 亿元", label: "销售额每年" },
+ { num: "5000 +", label: "合作品牌" },
+ ],
+ })
+ const topTabsData = {
+ tabItems: [
+ { tabName: "银泰中心", contentTitle: "银泰中心1", contentSubtitle: "城市封面地标", contentText: "北京银泰中心是银泰置地集团在北京的核心项目，是集高端购物中心、酒店、公寓、超甲级写字楼等业态于一体的综合性商业地产项目。", image: "/images/bg-overview.png" },
+ { tabName: "银泰城", contentTitle: "银泰中心2", contentSubtitle: "城市封面地标", contentText: "北京银泰中心是银泰置地集团在北京的核心项目，是集高端购物中心、酒店、公寓、超甲级写字楼等业态于一体的综合性商业地产项目。", image: "/images/bg-overview.png" },
+ { tabName: "高级酒店与公寓", contentTitle: "银泰中心3", contentSubtitle: "城市封面地标", contentText: "北京银泰中心是银泰置地集团在北京的核心项目，是集高端购物中心、酒店、公寓、超甲级写字楼等业态于一体的综合性商业地产项目。", image: "/images/bg-overview.png" },
+ { tabName: "文旅小镇", contentTitle: "银泰中心", contentSubtitle: "城市封面地标", contentText: "北京银泰中心是银泰置地集团在北京的核心项目，是集高端购物中心、酒店、公寓、超甲级写字楼等业态于一体的综合性商业地产项目。", image: "/images/bg-overview.png" },
+ ],
+ }
+
+
+ const rowAccordionData = {
+ title: "标杆项目",
+ items: [
+ { title: "杭州银泰中心", content: "位于杭州未来科技城地块，与余杭区政府合作开发建设，规划投资数十亿元，建设总建筑面积约60万方的高端TOD城市综合体，推动区域向“国际化消费中心”转型，打造百亿级商圈。", image: "/images/bg-overview.png"},
+ { title: "丽水银泰城", content: "位于杭州未来科技城地块，与余杭区政府合作开发建设，规划投资数十亿元，建设总建筑面积约60万方的高端TOD城市综合体，推动区域向“国际化消费中心”转型，打造百亿级商圈。", image: "/images/bg-overview.png"},
+ { title: "杭州银泰喜来登大酒店", content: "位于杭州未来科技城地块，与余杭区政府合作开发建设，规划投资数十亿元，建设总建筑面积约60万方的高端TOD城市综合体，推动区域向“国际化消费中心”转型，打造百亿级商圈。", image: "/images/bg-overview.png"},
+ { title: "杭州银泰仙女湖小镇", content: "位于杭州未来科技城地块，与余杭区政府合作开发建设，规划投资数十亿元，建设总建筑面积约60万方的高端TOD城市综合体，推动区域向“国际化消费中心”转型，打造百亿级商圈。", image: "/images/bg-overview.png"},
+ ],
+ }
+ const honorsData = {
+ title: "荣誉奖项",
+ items: [
+ { title: "荣誉资质1" },
+ { title: "荣誉资质2" },
+ { title: "荣誉资质3" },
+ { title: "荣誉资质4" },
+ { title: "荣誉资质5" },
+ { title: "荣誉资质6" },
+ { title: "荣誉资质7" },
+ { title: "荣誉资质8" },
+ ],
+ }
+ const bottomTabsData = {
+ title: "业务特色",
+ tabItems: [
+ { tabName: "精细化运营", contentTitle: "精细化运营——运筹帷幄·精于心", contentText: "通过精细化管理赋能运营，稳步提升商业资产价值。关注租金的成长性和租户的良性表现，实现产品逐步升级，服务稳健提升，实现商业资产整体增值。", image: "/images/bg-overview.png" },
+ { tabName: "数智化管理", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ { tabName: "生态化发展", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ { tabName: "品牌化升级", contentTitle: "内容标题2", contentText: "内容文本2", image: "/images/bg-overview.png" },
+ ],
+ }
return (
-
);
}
+
+
diff --git a/src/pages/Business/CommercialGroup.module.css b/src/pages/Business/CommercialGroup.module.css
index 91ecde8..2a961fe 100644
--- a/src/pages/Business/CommercialGroup.module.css
+++ b/src/pages/Business/CommercialGroup.module.css
@@ -56,11 +56,12 @@
cursor: pointer;
font-weight: 500;
font-size: 24px;
- color: #14355C;
+ color: #222;
line-height: 34px;
}
.twoColSectionTab.active {
border-bottom: 2px solid #14355C;
+ color: #14355C;
}
.twoColSectionContent {
display: grid;
diff --git a/src/pages/Business/CommercialGroup.tsx b/src/pages/Business/CommercialGroup.tsx
index 06f5641..6fc170e 100644
--- a/src/pages/Business/CommercialGroup.tsx
+++ b/src/pages/Business/CommercialGroup.tsx
@@ -1,20 +1,12 @@
import { useState } from "react";
import styles from "./CommercialGroup.module.css";
-import Banner from "@/components/banner";
+import Banner from "@/components/Banner";
import { Link } from "react-router-dom";
-import StatsRow from "@/components/layout/StatsRow/StatsRow";
+import ParagraphSection from "@/components/layout/ParagraphSection";
const PUBLIC_URL = process.env.PUBLIC_URL || "";
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
-const statsData = [
- { num: "32 个", label: "全国在管项目" },
- { num: "475 万平方", label: "总建筑面积" },
- { num: "3 亿人次", label: "客流每年超" },
- { num: "350 亿元", label: "销售额每年" },
- { num: "5000 +", label: "合作品牌" },
-];
-
function PlaceholderImage() {
return 银泰基业集团
-本页面为占位内容，敬请期待。
+占位图
;
@@ -22,7 +14,18 @@ function PlaceholderImage() {
export default function BusinessCommercialGroup() {
const [in77ImgError, setIn77ImgError] = useState(false);
- const [propertyImgError, setPropertyImgError] = useState(false);
+
+ const [paragraphSectionData] = useState({
+ title: "银泰商业集团",
+ content: "作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。",
+ statsData: [
+ { num: "32 个", label: "全国在管项目" },
+ { num: "475 万平方", label: "总建筑面积" },
+ { num: "3 亿人次", label: "客流每年超" },
+ { num: "350 亿元", label: "销售额每年" },
+ { num: "5000 +", label: "合作品牌" },
+ ],
+ })
const [tabItems, setTabItems] = useState([
{ label: 'in77', content: 'in77 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/in77' },
@@ -55,19 +58,8 @@ export default function BusinessCommercialGroup() {
backgroundImage={`${PUBLIC_URL}/images/bg-commercial-group.png`}
/>
- {/* 2. Overview + Stats */}
-
-
- - 银泰商业集团 - 作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。 -
-- 作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。 -
-银泰投资集团
-本页面为占位内容，敬请期待。
+
+
+
+ {investGroupContentData.items.map((item, index) => (
+
+
+
+ ))}
+ {item.title}
+ {item.content}
+
+ {equityInvestmentData.items.map((item, index) => (
+
+
+ 
+
+ ))}
+ {item.title}
+
+
+ {industryFosterData.title}
+ {industryFosterData.content}
+
-
);
}
+
+
diff --git a/src/pages/Business/RuijingGroup.module.css b/src/pages/Business/RuijingGroup.module.css
new file mode 100644
index 0000000..5f50719
--- /dev/null
+++ b/src/pages/Business/RuijingGroup.module.css
@@ -0,0 +1,7 @@
+.RuijingGroup {
+
+}
+
+.businessFeatureContent {
+ color: #fff;
+}
\ No newline at end of file
diff --git a/src/pages/Business/RuijingGroup.tsx b/src/pages/Business/RuijingGroup.tsx
new file mode 100644
index 0000000..3c9e83a
--- /dev/null
+++ b/src/pages/Business/RuijingGroup.tsx
@@ -0,0 +1,90 @@
+import Banner from "@/components/Banner";
+import { useState } from "react";
+import SwiperCardSection from "@/components/layout/SwiperCardSection";
+import HonorGrids from "@/components/layout/HonorGrids";
+import ParagraphSection from "@/components/layout/ParagraphSection";
+import Section from "@/components/layout/Section";
+import styles from "./RuijingGroup.module.css";
+import StatsRow from "@/components/layout/StatsRow/StatsRow";
+
+export default function RuijingGroup() {
+ const [paragraphSectionData] = useState({
+ title: "瑞京资产",
+ content: "（全称“江西瑞京金融资产管理有限公司”） 成立于2018年1月，公司是经江西省人民政府批准设立、中国银行保险监督管理委员会备案通过，由银泰集团、赣州发展集团联合发起设立的江西省第二家、赣州市唯一一家地方资产管理公司（AMC），实缴注册资本金15亿元人民币。\n\n瑞京资产秉承服务实体经济的战略定位，以不良资产的收购和处置为核心业务，通过主动式资产管理，纾困问题企业，协助地方政府有效化解金融风险，助力实体企业健康发展。",
+ statsData: [
+ { num: "32 个", label: "全国在管项目" },
+ { num: "475 万平方", label: "总建筑面积" },
+ { num: "3 亿人次", label: "客流每年超" },
+ ],
+ })
+
+ const swiperCardData = {
+ title: "业务架构",
+ cardItems: [
+ { title: "不良债权收购", desc: "服务业态1", image: "/images/bg-overview.png" },
+ { title: "债务重组", desc: "服务业态2", image: "/images/bg-overview.png" },
+ { title: "投资管理", desc: "服务业态3", image: "/images/bg-overview.png" },
+ { title: "金融服务", desc: "服务业态4", image: "/images/bg-overview.png" },
+ { title: "个贷不良", desc: "服务业态5", image: "/images/bg-overview.png" },
+ { title: "企业纾困", desc: "服务业态5", image: "/images/bg-overview.png" },
+ { title: "问题企业流动性支持", desc: "服务业态5", image: "/images/bg-overview.png" },
+ ],
+ }
+
+ const businessFeatureData = {
+ title: "业务特色",
+ subtitle: "发展个贷业务，支持青年重返信用体系",
+ content: "2024年，瑞京资产成功竞得捷信264.64亿元资产包，成为个人贷款批转业务史上规模最大的单次资产交易。此次交易标志着瑞京资产在个人贷款批转业务管理规模上突破300亿本金，排名行业前三甲。深入挖掘资产背后“人”的价值，支持全国特殊青年群体修复征信，重返社会信用体系，使更多青年赶上共同富裕的浪潮。",
+ statsData: [
+ { num: '260 万+户', label: '减免债务惠及人群'},
+ { num: '4 万+笔', label: '累计处置债务纠纷'},
+ ]
+ }
+
+ const honorsData = {
+ title: "荣誉奖项",
+ items: [
+ { title: "荣誉资质1" },
+ { title: "荣誉资质2" },
+ { title: "荣誉资质3" },
+ { title: "荣誉资质4" },
+ { title: "荣誉资质5" },
+ { title: "荣誉资质6" },
+ { title: "荣誉资质7" },
+ { title: "荣誉资质8" },
+ ],
+ }
+
+ return (
+ 银泰置地集团
-本页面为占位内容，敬请期待。
+
+
+
+
+
+ );
+}
+
+
diff --git a/src/pages/Business/RujingGroup.tsx b/src/pages/Business/RujingGroup.tsx
deleted file mode 100644
index 69bec8a..0000000
--- a/src/pages/Business/RujingGroup.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function BusinessRujingGroup() {
- return (
- {businessFeatureData.content}
+
+
-
- );
-}
diff --git a/src/pages/Business/index.tsx b/src/pages/Business/index.tsx
deleted file mode 100644
index e1acc02..0000000
--- a/src/pages/Business/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function Business() {
- return (
- 瑞京集团
-本页面为占位内容，敬请期待。
-
-
- );
-}
diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css
index ca33dee..77d6532 100644
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -251,22 +251,6 @@
}
/* News */
-.news {
- padding: 5rem 3.75rem;
-}
-
-.newsInner {
- margin: 0 auto;
-}
-
-.newsTitle {
- font-size: 2.5rem;
- font-weight: 700;
- color: #222222;
- text-align: center;
- margin: 1.25rem 0 5rem;
-}
-
.newsGrid {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -280,9 +264,9 @@
.newsFeaturedImgWrap {
width: 59.375rem;
- max-width: 100%;
aspect-ratio: 950 / 560;
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
+ background: red;
overflow: hidden;
position: relative;
}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 0498f35..f71ec23 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,105 +1,81 @@
import { useState } from "react";
import styles from "./Home.module.css";
-import Banner from "@/components/banner";
-
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+import RowAccordion from "@/components/layout/RowAccordion";
const PUBLIC_URL = process.env.PUBLIC_URL || "";
const HERO_IMG = `${PUBLIC_URL}/images/bg-overview.png`;
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
-const newsData = [
- {
- title: "银泰百货×敦煌研究院联名新品限量首发",
- snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
- date: "2024-01-15",
- path: "/news/1",
- },
- {
- title: "银泰中国区总裁陈晓：我们是长期主义者",
- snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
- date: "2024-01-10",
- path: "/news/2",
- },
- {
- title: "中国青年发展基金会 | 银泰公益基金会合作签约",
- snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
- date: "2023-11-20",
- path: "/news/3",
- },
-];
+
export default function Home() {
- const [commercialList] = useState([
+ const [commercialData] = useState({
+ items: [
+ {
+ title: "银泰商业集团",
+ content: "涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK区域型品质商业生活中心银泰城等品牌的大型商业集团，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。",
+ image: '/images/bg-commercial-group.png',
+ links: [{ text: 'in77', path: '/in77' }, { text: 'inPARK', path: '/inPARK' }, { text: '银泰城购物中心', path: '/shopping-center' },]
+ },
+ {
+ title: "银泰基业集团",
+ content: "银泰基业集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
+ image: '/images/bg-base-group.png',
+ links: [{ text: 'in77', path: '/in77' }, { text: 'inPARK', path: '/inPARK' }, { text: '银泰城购物中心', path: '/shopping-center' },]
+ },
+ {
+ title: "银泰置地集团",
+ content: "银泰置地集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
+ image: '/images/bg-realty-group.png',
+ links: [{ text: 'in77', path: '/in77' }, { text: 'inPARK', path: '/inPARK' }, { text: '银泰城购物中心', path: '/shopping-center' },]
+ },
+ {
+ title: "银泰投资集团",
+ content: "银泰投资集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
+ image: '/images/bg-invest-group.png',
+ links: [{ text: 'in77', path: '/in77' }, { text: 'inPARK', path: '/inPARK' }, { text: '银泰城购物中心', path: '/shopping-center' },]
+ },
+ {
+ title: "瑞京资产",
+ content: "瑞京集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
+ image: '/images/bg-ruijing-group.png',
+ links: [{ text: 'in77', path: '/in77' }, { text: 'inPARK', path: '/inPARK' }, { text: '银泰城购物中心', path: '/shopping-center' },]
+ },
+ ]
+ })
+
+ const [newsData] = useState([
{
- title: "银泰商业集团",
- desc: "涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK区域型品质商业生活中心银泰城等品牌的大型商业集团，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。",
- bgImg: '/images/bg-commercial-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
+ title: "银泰百货×敦煌研究院联名新品限量首发",
+ snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
+ date: "2024-01-15",
+ path: "/news/1",
},
{
- title: "银泰基业集团",
- desc: "银泰基业集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
- bgImg: '/images/bg-base-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
+ title: "银泰中国区总裁陈晓：我们是长期主义者",
+ snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
+ date: "2024-01-10",
+ path: "/news/2",
},
{
- title: "银泰置地集团",
- desc: "银泰置地集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
- bgImg: '/images/bg-realty-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
+ title: "中国青年发展基金会 | 银泰公益基金会合作签约",
+ snippet: "10月28日，在杭州余杭区委城市工作会议暨城市新中心中轴线创新发展大会上，银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中银泰集团正式宣布银泰杭州新中心项目定名为“杭州银泰中",
+ date: "2023-11-20",
+ path: "/news/3",
},
- {
- title: "银泰投资集团",
- desc: "银泰投资集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
- bgImg: '/images/bg-invest-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
- },
- {
- title: "瑞京集团",
- desc: "瑞京集团是银泰集团旗下核心业务板块，深耕商业地产与零售领域多年，致力于打造高品质商业空间，引领现代消费体验。集团旗下拥有银泰百货、银泰城等多个知名商业品牌，在全国多个核心城市布局，持续为消费者创造美好生活。",
- bgImg: '/images/bg-ruijing-group.png',
- links: [{ label: 'in77', to: '/in77' }, { label: 'inPARK', to: '/inPARK' }, { label: '银泰城购物中心', to: '/shopping-center' },]
- },
- ])
- const [activeCommercialIndex, setActiveCommercialIndex] = useState(0);
+ ]);
return (
集团业务
-本页面为占位内容，敬请期待。
-
{/* Hero */}
-
-
-
+
+
-
+
{/* News */}
-
-
- {commercialList.map((item, index) => (
-
-
-
- ))}
- setActiveCommercialIndex(index)}>{item.title}
- {index === activeCommercialIndex && ( - <> -{item.desc}
-
- {item.links.map((link) => (
- {link.label}
- ))}
-
-
- )}
-
-
-
新闻资讯
-
- ([]);
+
+ const refreshData = useCallback(debounce(() => {
+ console.log('refreshData2');
+ setJobList([
+ { id: 1, title: '职位1', content: '工作职责：1、为集团的各类投资项目提供法律支持，包括：组织外部律师进行尽职调查、审阅及起草交易文件、必要时参与法律谈判、提示法律风险等；2、协助完善集团本部的规章制度和合规体系；3、审阅集团各部门提交法务部审阅的日常业务法务部审阅的日常业务法务部审阅的日常业务', labels: ['标签1', '标签2'] },
+ { id: 2, title: '职位2', content: '职位2内容', labels: ['标签1', '标签2'] },
+ { id: 3, title: '职位3', content: '职位3内容', labels: ['标签1', '标签2'] },
+ ])
+ }, 500), []);
+
+ useEffect(() => {
+ refreshData();
+ }, [searchValue, jobType, businessArea, businessPlate, page, size]);
+
+ const handleReset = useCallback(() => {
+ setSearchValue('');
+ setJobType('');
+ setBusinessArea('');
+ setBusinessPlate('');
+ setPage(1);
+ }, []);
+
return (
-
+
-
-
- 
{
- (e.target as HTMLImageElement).style.display = "none";
- }}
- />
-
- {
- (e.target as HTMLImageElement).style.display = "none";
- }}
- />
- - 银泰集团联合钱塘产业集团竞得杭州东部湾新城地块 -
-
- {newsData.map((item) => (
-
-
- ))}
+
+
+
);
}
diff --git a/src/pages/Join/Campus.module.css b/src/pages/Join/Campus.module.css
new file mode 100644
index 0000000..9ad5bbf
--- /dev/null
+++ b/src/pages/Join/Campus.module.css
@@ -0,0 +1,211 @@
+.campusRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .campusColLeft {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+
+ .resetButton {
+ width: 340px;
+ height: 50px;
+ border-radius: 6px 6px 6px 6px;
+ border: 1px solid #14355C;
+ cursor: pointer;
+
+ font-weight: 400;
+ font-size: 16px;
+ color: #14355C;
+ line-height: 50px;
+ outline: none;
+ }
+ }
+
+ .campusColRight {
+ .jobList {
+ padding-bottom: 100px;
+ width: 960px;
+ min-height: 500px;
+ }
+ .jobItem {
+ width: 100%;
+ height: 200px;
+ border-radius: 0px 0px 0px 0px;
+ border-bottom: 1px solid #E5E5E5;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ padding: 30px 20px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: #14355C;
+
+ .jobItemTitle {
+ color: #14355C !important;
+ }
+
+ .jobItemTitleRight {
+ color: #14355C !important;
+ }
+ }
+
+ .jobItemTitleRow {
+ display: flex;
+ justify-content: space-between;
+
+ .jobItemTitle {
+ font-weight: 500;
+ font-size: 20px;
+ color: #222222;
+ line-height: 26px;
+ transition: all 0.3s ease;
+ }
+
+ .jobItemTitleRight {
+ font-weight: 400;
+ font-size: 16px;
+ color: #999999;
+ line-height: 22px;
+ transition: all 0.3s ease;
+ }
+ }
+
+
+
+ .jobItemLabels {
+ font-weight: 400;
+ font-size: 18px;
+ color: #333333;
+ line-height: 24px;
+ display: flex;
+ gap: 10px;
+
+ }
+
+ .jobItemContent {
+ font-weight: 400;
+ font-size: 16px;
+ color: #666666;
+ line-height: 30px;
+ /* 超过2行省略 */
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ }
+ }
+}
+
+
+.searchInput {
+ width: 340px;
+ height: 50px;
+ border-radius: 6px 6px 6px 6px;
+ border: 1px solid #B6C0CB;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+ overflow: hidden;
+
+ .searchIcon {
+ width: 24px;
+ height: 24px;
+ }
+
+ input {
+ border: none;
+ width: 100%;
+ height: 50px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+
+ &::placeholder {
+ font-weight: 400;
+ font-size: 16px;
+ color: #999999;
+ line-height: 22px;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+}
+
+
+.selectFormItem {
+ display: flex;
+ flex-direction: column;
+}
+
+.selectFormItemLabel {
+ font-size: 16px;
+ color: #666666;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.selectFormItemBox {
+ width: 340px;
+ height: 50px;
+ border-radius: 6px;
+ border: 1px solid #B6C0CB;
+ padding: 0 14px;
+ display: flex;
+ align-items: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ background: #FFFFFF;
+}
+
+.selectFilterIcon {
+ margin-right: 5px;
+ color: #666666;
+}
+
+.selectFormItemSelect {
+ flex: 1;
+ min-width: 0;
+}
+
+.selectFormItemSelect:global(.ant-select) {
+ width: 100%;
+ height: 100%;
+}
+
+.selectFormItemSelect :global(.ant-select-selector) {
+ border: none !important;
+ background: transparent !important;
+ padding: 0 !important;
+ height: 100% !important;
+ min-height: auto !important;
+ box-shadow: none !important;
+ align-items: center;
+}
+
+.selectFormItemSelect :global(.ant-select-selection-placeholder),
+.selectFormItemSelect :global(.ant-select-selection-item) {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #222222;
+}
+
+.selectFormItemSelect :global(.ant-select-selection-placeholder) {
+ color: #999999;
+}
+
+.selectDownIcon {
+ margin-left: 5px;
+ color: #999999;
+}
\ No newline at end of file
diff --git a/src/pages/Join/Campus.tsx b/src/pages/Join/Campus.tsx
index bf9ed45..1b007b2 100644
--- a/src/pages/Join/Campus.tsx
+++ b/src/pages/Join/Campus.tsx
@@ -1,8 +1,174 @@
+import { useCallback, useEffect, useState } from "react";
+import styles from "./Campus.module.css";
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+import { SearchOutlined, FilterOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
+import { Empty, Select } from "antd";
+import Pagination from "@/components/Pagination";
+import { Link } from "react-router-dom";
+import { debounce } from "@/utils";
+
+type JobItem = {
+ id: number;
+ title: string;
+ content: string;
+ labels: string[];
+}
+
export default function JoinCampus() {
+ const [searchValue, setSearchValue] = useState('');
+
+ // 职业类别 业务领域 所属板块
+ const [jobType, setJobType] = useState('');
+ const [jobTypeOptions, setJobTypeOptions] = useState([
+ { label: "全部", value: "" },
+ { label: "职业类别1", value: "1" },
+ { label: "职业类别2", value: "2" },
+ { label: "职业类别3", value: "3" },
+ ]);
+ const [businessArea, setBusinessArea] = useState('');
+ const [businessAreaOptions, setBusinessAreaOptions] = useState([]);
+ const [businessPlate, setBusinessPlate] = useState('');
+ const [businessPlateOptions, setBusinessPlateOptions] = useState([]);
+
+ const [page, setPage] = useState(1);
+ const [size] = useState(9);
+ const [total, setTotal] = useState(1000);
+
+
+ const [jobList, setJobList] = useState
+
-
+
+
+ 
{
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+
{
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+ + 银泰集团联合钱塘产业集团竞得杭州东部湾新城地块 +
+ {newsData.map((item) => (
+
+
+ ))}
+
+ {item.title} +
+{item.snippet}
+ {item.date} +
-
+
+
+ );
+}
+
+
+type SearchInputProps = {
+ value: string;
+ placeholder: string;
+ onChange: (value: string) => void;
+ onEnter: () => void;
+}
+function SearchInput(
+ { value, placeholder, onChange, onEnter }: SearchInputProps) {
+ return (
+ 招贤纳士
-本页面为占位内容，敬请期待。
+
+
+
+
+
+
+
+ {/* 没有数据时显示 */}
+ {jobList.length === 0 && (
+
+
+
+ )}
+ {jobList.map(item => (
+
+
+
+ ))}
+
+
+ {item.title}
+ 查看详情
+
+ {item.labels.map(label => (
+
+ • {label}
+ ))}
+ {item.content}
+
+
+ onChange(e.target.value)}
+ onKeyDown={e => {
+ if (e.key === 'Enter') {
+ onEnter();
+ }
+ }}
+ />
+
+ );
+}
+
+type SelectFormItemProps = {
+ value: string;
+ options: { label: string; value: string }[];
+ label: string;
+ onChange: (value: string) => void;
+}
+function SelectFormItem({ value, options, label, onChange }: SelectFormItemProps) {
+ return (
+
+
+
);
}
diff --git a/src/pages/Join/CampusDetail.tsx b/src/pages/Join/CampusDetail.tsx
new file mode 100644
index 0000000..86eb63b
--- /dev/null
+++ b/src/pages/Join/CampusDetail.tsx
@@ -0,0 +1,18 @@
+import JobPage from "@/components/layout/JobPage";
+
+export default function CampusDetail() {
+ const data = {
+ title: "项目营销总监",
+ jobType: "营销总监",
+ businessArea: "营销",
+ businessPlate: "营销",
+ recruitNumber: "2",
+ jobLocation: "杭州",
+ content: "国以才立，政以才治，业以才兴，做好新形势下立法工作，保障立法质量，人才队伍是关键。自2020年起，在银泰公益基金会的支持下，浙江立法研究院、浙江大学立法研究院联合浙江大学光华法学院致力于助推立法学科建设，经过一年多时间的不懈努力，获批增设立法学二级学科，并面向全国招收立法学专业硕士、博士研究生，旨在积极响应新时代下国家对立法学理论研究和人才培养的需求，践行依法护航经济社会发展的理念，不断开展探索，助推立法工作更好地为中国特色社会主义法治建设服务。",
+ }
+ return (
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Join/Culture.module.css b/src/pages/Join/Culture.module.css
new file mode 100644
index 0000000..bce5bfb
--- /dev/null
+++ b/src/pages/Join/Culture.module.css
@@ -0,0 +1,103 @@
+.cultureItems {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+
+ .cultureItem {
+ color: #fff;
+ /* width: 457px;
+ height: 560px; */
+ aspect-ratio: 457 / 560;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ position: relative;
+
+ .cultureItemMaks {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease-in-out;
+ }
+
+ .cultureItemInner {
+ position: absolute;
+ inset: 0;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+
+
+ .cultureItemTitle {
+ font-weight: 700;
+ font-size: 24px;
+ color: #FFFFFF;
+ line-height: 34px;
+ }
+
+ .cultureItemContent {
+ font-weight: 400;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 40px;
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
+ transition: all 0.3s ease-in-out;
+ }
+ }
+
+
+ &:hover {
+ .cultureItemMaks {
+ background: rgba(20, 53, 92, 0.5);
+ }
+
+ .cultureItemContent {
+ height: 40px;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+
+.valuesItems {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0 140px;
+
+ .valuesItem {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+
+ .valuesItemIcon {
+ width: 100px;
+ height: 100px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-bottom: 15px;
+ }
+
+ .valuesItemTitle {
+ font-weight: 500;
+ font-size: 24px;
+ color: #222222;
+ line-height: 34px;
+ }
+
+ .valuesItemContent {
+ font-weight: 500;
+ font-size: 18px;
+ color: #222222;
+ line-height: 26px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Join/Culture.tsx b/src/pages/Join/Culture.tsx
index 4453680..0848189 100644
--- a/src/pages/Join/Culture.tsx
+++ b/src/pages/Join/Culture.tsx
@@ -1,8 +1,65 @@
-export default function JoinCulture() {
+import styles from "./Culture.module.css";
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+
+export default function Culture() {
+
+ const cultureItems = {
+ title: '企业文化',
+ items: [
+ { title: '使命', content: '做新商业典范，律正合作共享', backgroundImage: '/images/bg-overview.png' },
+ { title: '愿景', content: '成为世界级商业地产集团', backgroundImage: '/images/bg-overview.png' },
+ { title: '核心价值观', content: '诚信、合作、创新、共赢', backgroundImage: '/images/bg-overview.png' },
+ ]
+ }
+
+ // 价值观
+ const valuesItems = {
+ title: '价值观',
+ items: [
+ { title: '简单', content: '以心境简单 促问题解决', icon: '/images/bg-overview.png' },
+ { title: '担当', content: '以心境简单 促问题解决', icon: '/images/bg-overview.png' },
+ { title: '创新', content: '以心境简单 促问题解决', icon: '/images/bg-overview.png' },
+ ]
+ }
+
return (
-
+
+
+
+
);
}
+
+
diff --git a/src/pages/Join/index.tsx b/src/pages/Join/index.tsx
deleted file mode 100644
index a38b18a..0000000
--- a/src/pages/Join/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function Join() {
- return (
- 企业文化
-本页面为占位内容，敬请期待。
+
+ {cultureItems.items.map((item, index) => (
+
+
+
+
+ ))}
+
+
+ {item.title}
+ {item.content}
+
+ {valuesItems.items.map((item, index) => (
+
+
+
+
+ ))}
+ {item.title}
+ {item.content}
+
-
- );
-}
diff --git a/src/pages/News/Consult.tsx b/src/pages/News/Consult.tsx
deleted file mode 100644
index 699544c..0000000
--- a/src/pages/News/Consult.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function NewsConsult() {
- return (
- 加入银泰
-本页面为占位内容，敬请期待。
-
-
- );
-}
diff --git a/src/pages/News/Detail.tsx b/src/pages/News/Detail.tsx
new file mode 100644
index 0000000..f7d76a8
--- /dev/null
+++ b/src/pages/News/Detail.tsx
@@ -0,0 +1,15 @@
+import Article from "@/components/layout/Article";
+
+export default function NewsDetail() {
+ const data = {
+ title: "汇聚立法智慧，培育立法人才",
+ createTime: "2026-03-03",
+ readTimes: "100",
+ content: "国以才立，政以才治，业以才兴，做好新形势下立法工作，保障立法质量，人才队伍是关键。自2020年起，在银泰公益基金会的支持下，浙江立法研究院、浙江大学立法研究院联合浙江大学光华法学院致力于助推立法学科建设，经过一年多时间的不懈努力，获批增设立法学二级学科，并面向全国招收立法学专业硕士、博士研究生，旨在积极响应新时代下国家对立法学理论研究和人才培养的需求，践行依法护航经济社会发展的理念，不断开展探索，助推立法工作更好地为中国特色社会主义法治建设服务。",
+ }
+ return (
+ 银泰咨询
-本页面为占位内容，敬请期待。
-
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/News/Media.module.css b/src/pages/News/Media.module.css
new file mode 100644
index 0000000..e0c4775
--- /dev/null
+++ b/src/pages/News/Media.module.css
@@ -0,0 +1,39 @@
+.mediaItems {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ height: 500px;
+
+ .mediaItem {
+ height: 100%;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ &:first-child {
+ border-right: 1px solid rgba(255,255,255,0.5);
+ padding-right: 60px;
+ }
+ &:last-child {
+ padding-left: 60px;
+ }
+
+ .mediaItemTitle {
+ font-weight: 500;
+ font-size: 40px;
+ color: #FFFFFF;
+ line-height: 50px;
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .mediaItemContent {
+ font-weight: 400;
+ font-size: 24px;
+ color: #FFFFFF;
+ line-height: 40px;
+ text-align: center;
+ white-space: pre-line;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/News/Media.tsx b/src/pages/News/Media.tsx
index 7a4e636..c8649e1 100644
--- a/src/pages/News/Media.tsx
+++ b/src/pages/News/Media.tsx
@@ -1,8 +1,37 @@
-export default function NewsMedia() {
+import styles from "./Media.module.css";
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+
+export default function NewsPublic() {
+
+ const data = {
+ items: [
+ { title: '新闻、采访拍摄', content: '如希望对银泰集团领导或具体项目进行采访、拍摄，请拟写采访申请并附上采访提纲后，提前10个工作日发送至 yintai.brand@china-yintai.com.cn' },
+ { title: '联系我们', content: '综合类事项需求，请联系：(86-10) 8540 5700\n有采访类需求，请联系：(86-10) 8540 5757' },
+ ]
+ }
return (
-
+
);
}
+
+
diff --git a/src/pages/News/NewsPublic.module.css b/src/pages/News/NewsPublic.module.css
new file mode 100644
index 0000000..7c0e636
--- /dev/null
+++ b/src/pages/News/NewsPublic.module.css
@@ -0,0 +1,110 @@
+.searchInputRow {
+
+ display: flex;
+ justify-content: flex-end;
+
+ .searchInput {
+ width: 340px;
+ height: 50px;
+ background: #FFFFFF;
+ border-radius: 6px 6px 6px 6px;
+ border: 1px solid #B6C0CB;
+ padding: 0 16px;
+ position: relative;
+
+ input {
+ width: 100%;
+ height: 100%;
+ border: none;
+ outline: none;
+ background: transparent;
+
+ font-weight: 500;
+ font-size: 18px;
+ color: #222222;
+ line-height: 26px;
+ }
+
+ .searchIcon {
+ position: absolute;
+ right: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 16px;
+ color: #333;
+ }
+ }
+}
+
+
+.newList {
+ /* 3列 */
+ margin-top: 100px;
+ margin-bottom: 100px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 22px 30px;
+
+ .newItem {
+ /* height: 500px;
+ width: 452px; */
+ aspect-ratio: 452 / 500;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+
+ img {
+ width: 100%;
+ /* height: 300px; */
+ aspect-ratio: 452 / 300;
+ object-fit: cover;
+ cursor: pointer;
+ }
+
+ &:hover {
+ .newItemContent {
+ background: #14355C;
+ }
+
+ .newItemTitle,
+ .newItemCreateTime {
+ color: #fff !important;
+ }
+ }
+
+ .newItemContent {
+ width: 100%;
+ aspect-ratio: 452 / 200;
+ background: #fff;
+ padding: 20px 20px 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+
+ .newItemTitle {
+ font-weight: 500;
+ font-size: 20px;
+ color: #222222;
+ line-height: 30px;
+ text-align: justify;
+ font-style: normal;
+ text-transform: none;
+ transition: all 0.3s ease;
+ }
+
+ .newItemCreateTime {
+ font-weight: 400;
+ font-size: 16px;
+ color: #666666;
+ line-height: 22px;
+ text-align: justify;
+ font-style: normal;
+ text-transform: none;
+ transition: all 0.3s ease;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/News/NewsPublic.tsx b/src/pages/News/NewsPublic.tsx
new file mode 100644
index 0000000..1b247a2
--- /dev/null
+++ b/src/pages/News/NewsPublic.tsx
@@ -0,0 +1,79 @@
+import { useCallback, useState } from "react";
+import styles from "./NewsPublic.module.css";
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+import { SearchOutlined } from "@ant-design/icons";
+import Pagination from "@/components/Pagination";
+import { Link } from "react-router-dom";
+
+export default function NewsPublic() {
+ const [newList] = useState([
+ {
+ id: 1,
+ title: "新闻标题",
+ createTime: "2026-03-03",
+ image: "/images/bg-overview.png",
+ },
+ {
+ id: 1,
+ title: "新闻标题",
+ createTime: "2026-03-03",
+ image: "/images/bg-overview.png",
+ },
+ {
+ id: 1,
+ title: "新闻标题",
+ createTime: "2026-03-03",
+ image: "/images/bg-overview.png",
+ },
+ ]);
+ const [searchValue, setSearchValue] = useState('');
+ const handleSearch = useCallback(() => {
+ console.log('search', searchValue);
+ }, [searchValue]);
+
+ const [page, setPage] = useState(1);
+ const [size] = useState(9);
+ const [total, setTotal] = useState(1000);
+
+ return (
+ 媒体垂询
-本页面为占位内容，敬请期待。
+
+ {data.items.map((item, index) => (
+
+
+
+ ))}
+ {item.title}
+ {item.content}
+
+
+
+
+ );
+}
+
+
diff --git a/src/pages/News/index.tsx b/src/pages/News/index.tsx
deleted file mode 100644
index afd8db7..0000000
--- a/src/pages/News/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function News() {
- return (
-
+
+
+
+ setSearchValue(e.target.value)} type="text" placeholder="搜索关键词" onKeyDown={e => {
+ if (e.key === 'Enter') {
+ handleSearch();
+ }
+ }} />
+
+
+ {newList.map((item, index) => (
+
+
+
+
+
+
+
+ ))}
+ {item.title}
+ {item.createTime}
+
-
- );
-}
diff --git a/src/pages/Others/AuditReport.module.css b/src/pages/Others/AuditReport.module.css
new file mode 100644
index 0000000..2a9df64
--- /dev/null
+++ b/src/pages/Others/AuditReport.module.css
@@ -0,0 +1,42 @@
+.auditReport {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 200px;
+ .auditReportP {
+ font-size: 18px;
+ line-height: 34px;
+ color: #333333;
+ }
+
+ .auditReportQrCodeWrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .auditReportQrCode {
+ width: 189px;
+ height: 241px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .auditReportQrCodeTitle {
+ font-size: 24px;
+ margin-bottom: 20px;
+ }
+
+ .auditReportQrCodeImg {
+ width: 160px;
+ height: 160px;
+ }
+
+ .auditReportQrCodeText {
+ font-size: 14px;
+ color: #222;
+ margin-top: 5px;
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/Others/AuditReport.tsx b/src/pages/Others/AuditReport.tsx
new file mode 100644
index 0000000..d58af23
--- /dev/null
+++ b/src/pages/Others/AuditReport.tsx
@@ -0,0 +1,43 @@
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+import styles from "./AuditReport.module.css";
+export default function AuditReport() {
+ const data = {
+ content: `
+ 新闻中心
-本页面为占位内容，敬请期待。
-使用条款
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+ `, + qrCode: '/images/bg-overview.png' + } + return ( +
+
+
+
+ );
+}
+
+
diff --git a/src/pages/Others/PrivacyPolicy.tsx b/src/pages/Others/PrivacyPolicy.tsx
new file mode 100644
index 0000000..2edd9af
--- /dev/null
+++ b/src/pages/Others/PrivacyPolicy.tsx
@@ -0,0 +1,29 @@
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+
+export default function PrivacyPolicy() {
+ const data = {
+ content: `
+
+
+ {
+ data.qrCode && (
+
+
+
+ )
+ }
+
+ 审计举报
+ 
+ 打开微信扫一扫
+
+ 使用条款
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+ ` + } + return ( +
+
+
+
+
+ );
+}
+
+
diff --git a/src/pages/Others/SiteMap.module.css b/src/pages/Others/SiteMap.module.css
new file mode 100644
index 0000000..a1806f8
--- /dev/null
+++ b/src/pages/Others/SiteMap.module.css
@@ -0,0 +1,106 @@
+.siteMap {
+ .siteMapTitle {
+ font-weight: 700;
+ font-size: 24px;
+ color: #14355C;
+ line-height: 34px;
+ }
+
+
+ .siteMapItems {
+ margin-top: 60px;
+ border-top: 1px solid #DDDDDD;
+ padding: 0 50px;
+ /* 主网格：标签列 + 5列子项，列宽固定以实现跨行对齐 */
+ /* 第一列为180px */
+ display: grid;
+ grid-template-columns: 182px repeat(5, minmax(140px, 1fr));
+
+ .siteMapItem {
+ padding: 50px 0;
+ border-bottom: 1px solid #DDDDDD;
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-column: 1 / -1;
+
+ .siteMapItemLabel {
+ padding-left: 50px;
+ font-weight: 700;
+ font-size: 18px;
+ color: #14355C;
+ position: relative;
+
+ &::after {
+ content: '';
+ display: block;
+ height: 30px;
+ width: 1px;
+ background: #DDDDDD;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ }
+
+ .siteMapItemChildren {
+ padding: 0 20px 0 60px;
+ display: grid;
+ grid-column: 2 / -1;
+ grid-template-columns: subgrid;
+ column-gap: 20px;
+
+ .siteMapItemChildLabel {
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 22px;
+ cursor: pointer;
+
+ &:hover {
+ color: #14355C;
+ }
+ }
+
+ .siteMapItemChildChildren {
+ font-weight: 400;
+ font-size: 18px;
+ color: #666666;
+ line-height: 22px;
+ display: flex;
+ flex-flow: column;
+ gap: 10px;
+ margin-top: 10px;
+
+ .siteMapItemChildChild {
+ cursor: pointer;
+
+ &:hover {
+ color: #14355C;
+ }
+ }
+ }
+ }
+
+ /* 每个子项占据对应列，实现表格对齐 */
+ .siteMapItemChild:nth-child(1) {
+ grid-column: 1;
+ }
+
+ .siteMapItemChild:nth-child(2) {
+ grid-column: 2;
+ }
+
+ .siteMapItemChild:nth-child(3) {
+ grid-column: 3;
+ }
+
+ .siteMapItemChild:nth-child(4) {
+ grid-column: 4;
+ }
+
+ .siteMapItemChild:nth-child(5) {
+ grid-column: 5;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Others/SiteMap.tsx b/src/pages/Others/SiteMap.tsx
new file mode 100644
index 0000000..66361d3
--- /dev/null
+++ b/src/pages/Others/SiteMap.tsx
@@ -0,0 +1,129 @@
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+import styles from "./SiteMap.module.css";
+import { Link } from "react-router-dom";
+export default function SiteMap() {
+ const data = {
+ title: '网站地图',
+ // 菜单
+ items: [
+ {
+ label: "关于银泰",
+ path: "/about",
+ children: [
+ { path: "/about", label: "集团概览" },
+ { path: "/about/history", label: "发展历程" },
+ { path: "/about/founder", label: "创始人介绍" },
+ ],
+ },
+ {
+ label: "集团业务",
+ path: "/business",
+ children: [
+ {
+ path: "/business/commercial-group", label: "银泰商业集团",
+ children: [
+ { path: "/business/commercial-group/in77", label: "in77" },
+ { path: "/business/commercial-group/inPARK", label: "inPARK" },
+ { path: "/business/commercial-group/银泰城购物中心", label: "银泰城购物中心" },
+ ]
+ },
+ { path: "/business/base-group", label: "银泰基业集团",
+ children: [
+ { path: "/business/base-group#北京", label: "北京" },
+ { path: "/business/base-group#上海", label: "上海" },
+ { path: "/business/base-group#浙江", label: "浙江" },
+ { path: "/business/base-group#四川", label: "四川" },
+ ]
+ },
+ { path: "/business/realty-group", label: "银泰置地集团",
+ children: [
+ { path: "/business/realty-group#北京", label: "北京" },
+ { path: "/business/realty-group#上海", label: "上海" },
+ { path: "/business/realty-group#浙江", label: "浙江" },
+ { path: "/business/realty-group#四川", label: "四川" },
+ ]
+ },
+ { path: "/business/invest-group", label: "银泰投资集团",
+ children: [
+ { path: "/business/invest-group#发起设立", label: "发起设立" },
+ { path: "/business/invest-group#股权投资", label: "股权投资" },
+ { path: "/business/invest-group#产业孵化", label: "产业孵化" },
+ ]
+ },
+ { path: "/business/ruijing-group", label: "瑞京集团" },
+ ],
+ },
+ {
+ label: "社会责任",
+ path: "/social",
+ children: [
+ { path: "/social/sustainability", label: "可持续发展" },
+ { path: "/social/foundation", label: "银泰公益基金会" },
+ ],
+ },
+ {
+ label: "新闻中心",
+ path: "/news",
+ children: [
+ { path: "/news/public", label: "集团发布" },
+ { path: "/news/media", label: "媒体垂询" },
+ ],
+ },
+ {
+ label: "其它",
+ path: "/others",
+ children: [
+ { path: "/join/campus", label: "加入银泰" },
+ { path: "/terms-of-use", label: "使用条款" },
+ { path: "/privacy-policy", label: "隐私保护" },
+ ],
+ },
+ ]
+ }
+ return (
+
+
+
+
+ );
+}
+
+
diff --git a/src/pages/Others/TermsOfUse.tsx b/src/pages/Others/TermsOfUse.tsx
new file mode 100644
index 0000000..bc2e274
--- /dev/null
+++ b/src/pages/Others/TermsOfUse.tsx
@@ -0,0 +1,29 @@
+import Banner from "@/components/Banner";
+import Section from "@/components/layout/Section";
+
+export default function TermsOfUse() {
+ const data = {
+ content: `
+
+
+ 网站地图
+
+
+ {
+ data.items.map((item) => (
+
+
+
+ ))
+ }
+ {item.label}
+
+ {
+ item.children.map((child) => (
+
+
+ {child.label}
+
+ ))
+ }
+
+ {
+ child?.children && child?.children.map((childChild) => (
+ {childChild.label}
+ ))
+ }
+
+ 使用条款
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+本网站由银泰集团(以下简称“本公司”)运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。
+ ` + } + return ( +
+
+
+
+
+ );
+}
+
+
diff --git a/src/pages/PropertyService/PropertyService.module.css b/src/pages/PropertyService/PropertyService.module.css
deleted file mode 100644
index e1e436e..0000000
--- a/src/pages/PropertyService/PropertyService.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.propertyService {
- padding: 100px 260px;
- background: rgba(255, 255, 255, 0.8);
-}
-
diff --git a/src/pages/PropertyService/index.tsx b/src/pages/PropertyService/index.tsx
index 54931c8..5941300 100644
--- a/src/pages/PropertyService/index.tsx
+++ b/src/pages/PropertyService/index.tsx
@@ -1,18 +1,22 @@
-import Banner from "@/components/banner";
-import styles from "./PropertyService.module.css";
-import StatsRow from "@/components/layout/StatsRow/StatsRow";
+import Banner from "@/components/Banner";
import { useState } from "react";
-import SectionTitle from "@/components/layout/SectionTitle";
import SwiperCardSection from "@/components/layout/SwiperCardSection";
+import RowAccordion from "@/components/layout/RowAccordion";
+import HonorGrids from "@/components/layout/HonorGrids";
+import ParagraphSection from "@/components/layout/ParagraphSection";
export default function PropertyService() {
- const [statsData] = useState([
- { num: "32 个", label: "全国在管项目" },
- { num: "475 万平方", label: "总建筑面积" },
- { num: "3 亿人次", label: "客流每年超" },
- { num: "350 亿元", label: "销售额每年" },
- { num: "5000 +", label: "合作品牌" },
- ])
+ const [paragraphSectionData] = useState({
+ title: "银泰智享物业",
+ content: "管理有限公司是一家集品质物业服务、资产托管运营、智慧物联管理、科技平台创新运维为一体的专业化物业服务企业，致力于商办类物业运营管理、打造资产全周期生态服务。\n\n 凭借银泰集团多年城市商业地产运营经验不断深化创新，银泰智享积极拓展业务深度与广度，做强基础物业服务，深耕客户卓越服务体验，创造企业多元化价值。核心业务涵盖资产全托管服务、资产顾问服务、资产设施服务、物业品牌合作等，着力实现服务体系化、标准化、精细化、智慧化“四化合一”，打造国内一流的物业管理品牌。",
+ statsData: [
+ { num: "32 个", label: "全国在管项目" },
+ { num: "475 万平方", label: "总建筑面积" },
+ { num: "3 亿人次", label: "客流每年超" },
+ { num: "350 亿元", label: "销售额每年" },
+ { num: "5000 +", label: "合作品牌" },
+ ],
+ })
const swiperCardData = {
title: "服务业态",
@@ -24,6 +28,30 @@ export default function PropertyService() {
{ title: "服务业态5", desc: "服务业态3", image: "/images/bg-overview.png" },
],
}
+
+ const rowAccordionData = {
+ title: "标杆项目",
+ items: [
+ { title: "北京银泰中心", image: "/images/bg-overview.png" },
+ { title: "北京银泰吉祥大厦", image: "/images/bg-overview.png" },
+ { title: "杭州城西银泰城", image: "/images/bg-overview.png" },
+ { title: "杭州千岛湖银泰城", image: "/images/bg-overview.png" },
+ { title: "桐庐银泰城", image: "/images/bg-overview.png" },
+ ],
+ }
+ const honorsData = {
+ title: "企业价值",
+ items: [
+ { title: "荣誉资质1" },
+ { title: "荣誉资质2" },
+ { title: "荣誉资质3" },
+ { title: "荣誉资质4" },
+ { title: "荣誉资质5" },
+ { title: "荣誉资质6" },
+ { title: "荣誉资质7" },
+ { title: "荣誉资质8" },
+ ],
+ }
return (
-
- 银泰智享物业 管理有限公司是一家集品质物业服务、资产托管运营、智慧物联管理、科技平台创新运维为一体的专业化物业服务企业，致力于商办类物业运营管理、打造资产全周期生态服务。
-凭借银泰集团多年城市商业地产运营经验不断深化创新，银泰智享积极拓展业务深度与广度，做强基础物业服务，深耕客户卓越服务体验，创造企业多元化价值。核心业务涵盖资产全托管服务、资产顾问服务、资产设施服务、物业品牌合作等，着力实现服务体系化、标准化、精细化、智慧化“四化合一”，打造国内一流的物业管理品牌。
-
-
+
+
+
+ {/* 公益传播 */}
+
+
+
+ {/* 信息公开 */}
+
+
+
+ {/* 公益伙伴 */}
+
+
);
}
+
+
diff --git a/src/pages/Social/Sustainability.module.css b/src/pages/Social/Sustainability.module.css
index 76f8f4e..1f973f7 100644
--- a/src/pages/Social/Sustainability.module.css
+++ b/src/pages/Social/Sustainability.module.css
@@ -20,36 +20,62 @@
background-repeat: no-repeat;
color: #fff;
position: relative;
+ overflow: hidden;
.mask {
position: absolute;
width: 100%;
height: 100%;
- background: rgba(0,0,0,0.1);
+ background: rgba(0, 0, 0, 0.1);
}
&:hover {
.socialResponsibilityCaseDataItemContentInner {
- background: rgba(20,53,92,0.9);
+ top: 0;
+ background: rgba(20, 53, 92, 0.9);
justify-content: flex-start;
+ transition-delay: 0s;
+
.socialResponsibilityCaseDataItemTitle {
- text-align: left;
+ left: 50px;
+ transform: translateX(0);
+ transition-delay: 0s;
}
}
.socialResponsibilityCaseDataItemContent {
- display: block;
+ opacity: 1;
+ transition: opacity 0.3s ease 0.3s;
}
}
+
.socialResponsibilityCaseDataItemContentInner {
padding: 50px;
width: 100%;
height: 100%;
background: transparent;
transition: all 0.3s ease;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
+ transition-delay: 0.2s;
+ position: absolute;
+ top: 75%;
+
+ .socialResponsibilityCaseDataItemMore {
+ display: inline-block;
+ margin-top: 60px;
+ width: 104px;
+ height: 38px;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #FFFFFF;
+
+ font-weight: 400;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 22px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.socialResponsibilityCaseDataItemTitle {
@@ -57,9 +83,11 @@
font-size: 24px;
color: #FFFFFF;
line-height: 34px;
- text-align: center;
font-style: normal;
text-transform: none;
+ transition: all 0.3s ease;
+ transition-delay: 0.2s;
+ transform: translateX(50%);
}
.socialResponsibilityCaseDataItemContent {
@@ -71,8 +99,12 @@
text-align: justify;
font-style: normal;
text-transform: none;
- display: none;
+ opacity: 0;
+ transition: opacity 0.2s ease 0s;
}
+
+
+
}
/* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
@@ -88,4 +120,57 @@
.socialResponsibilityCaseDataItem:nth-child(4n + 3) {
flex-basis: calc((100% - 30px) * 560 / 1370);
aspect-ratio: 560 / 480;
+}
+
+
+.socialResponsibilityReportData {
+ /* 4列 */
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 33px;
+
+ .socialResponsibilityReportItem {
+ /* width: 325px; */
+
+ .socialResponsibilityReportItemCover {
+ /* width: 325px; */
+ /* height: 439px; */
+ aspect-ratio: 325 / 439;
+ box-shadow: 0px 0px 20px 0px rgba(0, 16, 32, 0.2);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+
+ .socialResponsibilityReportItemTitle {
+ font-weight: 500;
+ font-size: 18px;
+ color: #222222;
+ line-height: 26px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ margin-top: 40px;
+ }
+ }
+
+
+}
+
+.socialResponsibilityReportItemMore {
+ width: 104px;
+ height: 38px;
+ line-height: 38px;
+ text-align: center;
+ border: 1px solid #333333;
+ font-size: 16px;
+ color: #333333;
+ cursor: pointer;
+ margin: 0 auto;
+ margin-top: 100px;
+
+ &:hover {
+ background: #14355C;
+ color: #fff;
+ }
}
\ No newline at end of file
diff --git a/src/pages/Social/Sustainability.tsx b/src/pages/Social/Sustainability.tsx
index 829af25..64d6f49 100644
--- a/src/pages/Social/Sustainability.tsx
+++ b/src/pages/Social/Sustainability.tsx
@@ -1,8 +1,122 @@
-export default function SocialSustainability() {
+import Banner from "@/components/Banner";
+import { useState } from "react";
+import ParagraphSection from "@/components/layout/ParagraphSection";
+import ColumnXGrids from "@/components/layout/ColumnXGrids";
+import Section from "@/components/layout/Section";
+import styles from "./Sustainability.module.css";
+import { Link } from "react-router-dom";
+import AnimateTopCard from "@/components/layout/AnimateTopCard";
+
+export default function Sustainability() {
+ const [paragraphSectionData] = useState({
+ title: "银泰集团",
+ content: "始终秉持“创造价值，服务社会”的使命，将社会责任融入企业发展的各个环节，形成了以合规治理、实业报国、经典品质、人才发展、绿色低碳、公益向善为核心的六大责任方向。银泰积极践行新发展理念，深度融入国家发展大局，持续投身乡村振兴、儿童关爱、社区共建等公益事业，以实际行动诠释企业担当，为实现人与自然、社会和谐共生的美好未来贡献力量",
+ })
+
+ const columnXGridsData = [
+ {
+ title: "合规治理",
+ content: "银泰集团夯实治理基础，持续提升数字化、智慧化管理水平。坚守合规经营，加强风险管理，以良好的企业治理作为公司健康、稳定、持续发展的基石。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ {
+ title: "实业报国",
+ content: "银泰集团坚定实业报国，积极投身国家重大战略和重点领域。通过优化产业布局，强化创新驱动，提升核心竞争力，为国家经济发展贡献力量。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ {
+ title: "经典品质",
+ content: "银泰集团夯实治理基础，持续提升数字化、智慧化管理水平。坚守合规经营，加强风险管理，以良好的企业治理作为公司健康、稳定、持续发展的基石。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ {
+ title: "人才发展",
+ content: "银泰集团夯实治理基础，持续提升数字化、智慧化管理水平。坚守合规经营，加强风险管理，以良好的企业治理作为公司健康、稳定、持续发展的基石。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ {
+ title: "绿色低碳",
+ content: "银泰集团夯实治理基础，持续提升数字化、智慧化管理水平。坚守合规经营，加强风险管理，以良好的企业治理作为公司健康、稳定、持续发展的基石。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ {
+ title: "公益向善",
+ content: "银泰集团夯实治理基础，持续提升数字化、智慧化管理水平。坚守合规经营，加强风险管理，以良好的企业治理作为公司健康、稳定、持续发展的基石。",
+ backgroundImage: "/images/bg-overview.png",
+ },
+ ]
+
+ const socialResponsibilityCaseData = {
+ title: "社会责任案例集",
+ content: "银泰集团通过挖掘内部员工，外部消费者、品牌方、合作伙伴、受益人等不同利益相关方的案例故事，希望以一个个真实、鲜活的人物为线索，全方位展现银泰的责任担当，让大家感受到“爱@在一起”的温暖和力量。",
+ items: [
+ {title: "案例1向浙江大学教育基金会", content: "2019年，银泰公益基金会向浙江大学教育基金会捐赠资金250万元，专项支持浙江立法研究院的发展建设，助力汇聚立法智慧、培育立法人才、引领智能立法、致力于建成全国性的立法研究高地和人才培养基地。", link: '', backgroundImage: "/images/bg-overview.png"},
+ {title: "案例2", content: "不管是从响应国家的绿色战略还是从企业自身长远发展的维度进行考量，提倡节能减排、绿色环保，都势在必行。", link: '', backgroundImage: "/images/bg-overview.png"},
+ {title: "案例3", content: "案例3内容", link: '', backgroundImage: "/images/bg-overview.png"},
+ {title: "案例4", content: "案例4内容", link: '', backgroundImage: "/images/bg-overview.png"},
+ ]
+ }
+
+ const socialResponsibilityReportData = {
+ title: '社会责任报告',
+ items: [
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ {title: "2024年度报告.pdf", coverImage: "/images/bg-overview.png", link: ''},
+ ]
+ }
+ const [sliceIndex, setSliceIndex] = useState(4)
+
return (
银泰公益基金会
-本页面为占位内容，敬请期待。
+
+ {publicWelfareData.items.map((item, index) => (
+
+
+
+
+ ))}
+
+
+
+ {
+ informationPublicData.tabItems[activeIndex].fileItems.map((item, index) => (
+
+
+ {item.fileName}
+
+ ))
+ }
+
+ {partnerData.items.map((item, index) => (
+
+
+
+
+ ))}
+
-
+
+
+ {/* 社会责任案例集 */}
+
+
+
+ {/* 社会责任报告 */}
+
+
);
}
+
+
diff --git a/src/pages/Social/index.tsx b/src/pages/Social/index.tsx
deleted file mode 100644
index da23687..0000000
--- a/src/pages/Social/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function Social() {
- return (
- 可持续发展
-本页面为占位内容，敬请期待。
++ {socialResponsibilityCaseData.content} +
+ +
+ {socialResponsibilityCaseData.items.map((item,index) => (
+
+
+
+ ))}
+
+ {socialResponsibilityReportData.items.slice(0, sliceIndex).map((item,index) => (
+
+
+
+
+ ))}
+ {item.title}
+ setSliceIndex(sliceIndex < socialResponsibilityReportData.items.length ? sliceIndex + 4 : 4)}>
+ {sliceIndex < socialResponsibilityReportData.items.length ? "了解更多" : "收起"}
+
+
-
- );
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..1b05bd7
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,8 @@
+// debounce
+export const debounce = (func: (...args: any[]) => void, delay: number) => {
+ let timeout: NodeJS.Timeout;
+ return (...args: any[]) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func(...args), delay);
+ };
+};
\ No newline at end of file
社会责任
-本页面为占位内容，敬请期待。
-