139 lines
6.7 KiB
TypeScript
139 lines
6.7 KiB
TypeScript
import { useState } from "react";
|
||
import styles from "./CommercialGroup.module.css";
|
||
import Banner from "@/components/banner";
|
||
import { Link } from "react-router-dom";
|
||
import StatsRow from "@/components/layout/StatsRow/StatsRow";
|
||
|
||
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 <div className={styles.placeholder}>占位图</div>;
|
||
}
|
||
|
||
export default function BusinessCommercialGroup() {
|
||
const [in77ImgError, setIn77ImgError] = useState(false);
|
||
const [propertyImgError, setPropertyImgError] = useState(false);
|
||
|
||
const [tabItems, setTabItems] = useState([
|
||
{ label: 'in77', content: 'in77 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/in77' },
|
||
{ label: 'inPARK', content: 'inPARK 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/inPARK' },
|
||
{ label: '银泰城购物中心', content: '银泰城 内容', image: '/images/bg-overview.png', path: '/business/commercial-group/shopping-center' },
|
||
])
|
||
const [activeTabIndex, setActiveTabIndex] = useState(0);
|
||
|
||
const [featuresTabItems, setFeaturesTabItems] = useState([
|
||
{ label: '深耕运营', content: '全域营销 内容', image: '/images/bg-overview.png',},
|
||
{ label: '行业领先', content: '数字化运营 内容', image: '/images/bg-overview.png', },
|
||
{ label: '创新变革', content: '全球品牌合作 内容', image: '/images/bg-overview.png', },
|
||
{ label: '数字生态', content: '全球品牌合作 内容', image: '/images/bg-overview.png', },
|
||
])
|
||
const [activeFeaturesTabIndex, setActiveFeaturesTabIndex] = useState(0);
|
||
|
||
return (
|
||
<div>
|
||
{/* 1. Hero Banner */}
|
||
<Banner
|
||
title="银泰商业集团"
|
||
desc="传统零售业的推动者和典范"
|
||
titleSize="medium"
|
||
showBreadcrumb={true}
|
||
breadcrumbItems={[
|
||
{ label: "首页", to: "/" },
|
||
{ label: "集团业务", to: "/business" },
|
||
{ label: "银泰商业集团", to: "" },
|
||
]}
|
||
backgroundImage={`${PUBLIC_URL}/images/bg-commercial-group.png`}
|
||
/>
|
||
|
||
{/* 2. Overview + Stats */}
|
||
<section className={styles.overview}>
|
||
<div className={styles.overviewInner}>
|
||
<p className={styles.overviewDesc}>
|
||
<span className={styles.overviewTitle}>银泰商业集团</span>
|
||
作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
|
||
</p>
|
||
<p className={styles.overviewDesc}>
|
||
作为一家大型商业集团，品牌涵盖地标型高端商业综合体in77、景观地标型商业综合体inPARK、区域型品质商业生活中心银泰城等，是一家持续推动传统零售业创新与互联网转型融合的典范性企业。其中，in77系列购物中心位于核心商业圈和国家示范步行街，是时尚零售业和新消费领域的标杆；inPARK系列购物中心致力于打造“街区+shopping mall + 微景观”的公园商业新形态，通过创新营销催化人气聚集，构建新年轻生活方式；银泰城购物中心融合购物、餐饮、休闲、娱乐、社交等多元业态于一体，充分满足一站式消费需求。
|
||
</p>
|
||
<StatsRow statsData={statsData} />
|
||
</div>
|
||
</section>
|
||
|
||
{/* 3. in77 Section - Image Left, Text Right */}
|
||
<section className={styles.twoColSection}
|
||
style={{ backgroundImage: 'url(/images/bg-in.png)' }}
|
||
>
|
||
<div className={styles.twoColSectionTabs}>
|
||
{tabItems.map((item, i) => (
|
||
<div key={i} className={`${styles.twoColSectionTab} ${activeTabIndex === i ? styles.active : ''}`} onClick={() => setActiveTabIndex(i)}>
|
||
<span>{item.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className={styles.twoColSectionContent}>
|
||
<div className={styles.twoColImage}>
|
||
{in77ImgError ? (
|
||
<PlaceholderImage />
|
||
) : (
|
||
<img
|
||
src={tabItems[activeTabIndex].image}
|
||
alt="in77 杭州湖滨银泰"
|
||
onError={() => setIn77ImgError(true)}
|
||
style={{ width: '100%', height: '800px' }}
|
||
/>
|
||
)}
|
||
</div>
|
||
<div className={styles.twoColText}>
|
||
<p className={styles.twoColDesc}>{tabItems[activeTabIndex].content}</p>
|
||
<a href={tabItems[activeTabIndex].path} className={styles.btnPrimary}>
|
||
查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 4. Features Section - Hero + 3 Blocks */}
|
||
<section className={styles.featuresHero} style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}>
|
||
<div className={styles.featuresHeroContent}>
|
||
<div>{featuresTabItems[activeFeaturesTabIndex].content}</div>
|
||
</div>
|
||
<div className={styles.featuresHeroTabs}>
|
||
{featuresTabItems.map((item, i) => (
|
||
<div key={i} className={`${styles.featuresHeroTab} ${activeFeaturesTabIndex === i ? styles.active : ''}`} onClick={() => setActiveFeaturesTabIndex(i)}>
|
||
<span>{item.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
|
||
{/* 5. Property Services - Text Left, Image Right */}
|
||
<section className={`${styles.twoColSection} ${styles.propertyServices}`}
|
||
style={{ backgroundImage: `url(/images/bg-overview.png), ${FALLBACK_GRADIENT}` }}
|
||
>
|
||
<div className={styles.propertyServicesContent}>
|
||
<div className={styles.propertyServicesTitle}>
|
||
物业服务
|
||
</div>
|
||
<p className={styles.propertyServicesSubtitle}>
|
||
国内一流物业服务品牌
|
||
</p>
|
||
<Link to="/property-service" className={styles.propertyServicesBtn}>
|
||
查看详情
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|