save
This commit is contained in:
parent
e323eef00d
commit
c2943dea99
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Binary file not shown.
46
src/App.css
46
src/App.css
|
|
@ -66,13 +66,30 @@ ul, li {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
/* 数字字体 */
|
||||
.font-num {
|
||||
font-family: D-DIN-PRO, D-DIN-PRO;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 60px;
|
||||
padding: 0 3.75rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.header-row {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-row {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
background: #f0f2f4;
|
||||
|
|
@ -92,30 +109,17 @@ body {
|
|||
|
||||
.container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* html {
|
||||
font-size: 16px;
|
||||
.normal-p p {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
} */
|
||||
|
|
@ -7,6 +7,7 @@ import AboutHistory from "@/pages/About/History";
|
|||
import AboutFounder from "@/pages/About/Founder";
|
||||
import Business from "@/pages/Business/index";
|
||||
import BusinessCommercialGroup from "@/pages/Business/CommercialGroup";
|
||||
import BusinessCommercialGroupDetail from "@/pages/Business/CommercialGroupDetail";
|
||||
import BusinessBaseGroup from "@/pages/Business/BaseGroup";
|
||||
import BusinessRealtyGroup from "@/pages/Business/RealtyGroup";
|
||||
import BusinessInvestGroup from "@/pages/Business/InvestGroup";
|
||||
|
|
@ -20,6 +21,7 @@ import NewsMedia from "@/pages/News/Media";
|
|||
import Join from "@/pages/Join/index";
|
||||
import JoinCulture from "@/pages/Join/Culture";
|
||||
import JoinCampus from "@/pages/Join/Campus";
|
||||
import PropertyService from "@/pages/PropertyService/index";
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
|
|
@ -34,6 +36,7 @@ const routes: RouteObject[] = [
|
|||
// 集团业务
|
||||
{ path: "business", element: <Business /> },
|
||||
{ path: "business/commercial-group", element: <BusinessCommercialGroup /> },
|
||||
{ path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> },
|
||||
{ path: "business/base-group", element: <BusinessBaseGroup /> },
|
||||
{ path: "business/realty-group", element: <BusinessRealtyGroup /> },
|
||||
{ path: "business/invest-group", element: <BusinessInvestGroup /> },
|
||||
|
|
@ -50,6 +53,9 @@ const routes: RouteObject[] = [
|
|||
{ path: "join", element: <Join /> },
|
||||
{ path: "join/culture", element: <JoinCulture /> },
|
||||
{ path: "join/campus", element: <JoinCampus /> },
|
||||
|
||||
// 物业服务
|
||||
{ path: "property-service", element: <PropertyService /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
min-height: 100vh;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: 3.125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -24,8 +24,7 @@
|
|||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 24px;
|
||||
/* padding-top: 400px; */
|
||||
padding: 0 1.5rem;
|
||||
padding-left: 13.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -33,31 +32,33 @@
|
|||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 60px;
|
||||
font-size: 3.75rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
/* margin: 0 0 50px; */
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.heroTitleMedium {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
/* margin: 0 0 16px; */
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.heroDesc {
|
||||
max-width: 900px;
|
||||
font-size: 20px;
|
||||
max-width: 56.25rem;
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin: 0;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.heroLargeDesc {
|
||||
font-size: 34px;
|
||||
font-size: 2.125rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin: 0;
|
||||
letter-spacing: 0.02em;
|
||||
|
|
@ -66,10 +67,10 @@
|
|||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
gap: 0.3125rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
margin-top: 100px;
|
||||
font-size: 1rem;
|
||||
margin-top: 6.25rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
.wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 140px;
|
||||
min-width: 8.75rem;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 11px;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.6875rem;
|
||||
background: #14355C;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 6px;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -55,13 +55,13 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.clear:hover {
|
||||
|
|
@ -80,38 +80,38 @@
|
|||
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
top: calc(100% + 0.25rem);
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
min-width: 220px;
|
||||
padding: 12px;
|
||||
min-width: 13.75rem;
|
||||
padding: 0.75rem;
|
||||
background: #14355C;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.navBtn:hover:not(:disabled) {
|
||||
|
|
@ -125,26 +125,26 @@
|
|||
|
||||
.decadeLabel {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.yearGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.yearCell {
|
||||
min-width: 56px;
|
||||
height: 32px;
|
||||
min-width: 3.5rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,19 @@ import { Link } from "react-router-dom";
|
|||
import styles from "./Banner.module.css";
|
||||
const FALLBACK_GRADIENT = "linear-gradient(135deg, #1a2a4a 0%, #2d4a7c 100%)";
|
||||
|
||||
type BreadcrumbItem = { label: string; to: string };
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
desc?: string;
|
||||
largedesc?: string;
|
||||
showBreadcrumb?: boolean;
|
||||
breadcrumbItems?: BreadcrumbItem[];
|
||||
titleSize?: "large" | "medium";
|
||||
backgroundImage: string;
|
||||
}
|
||||
export default function Banner({ title, subtitle, desc, largedesc, showBreadcrumb, backgroundImage }: Props) {
|
||||
export default function Banner({ title, subtitle, desc, largedesc, showBreadcrumb, breadcrumbItems, titleSize = "large", backgroundImage }: Props) {
|
||||
return (
|
||||
<section
|
||||
className={styles.hero}
|
||||
|
|
@ -20,17 +24,18 @@ export default function Banner({ title, subtitle, desc, largedesc, showBreadcrum
|
|||
>
|
||||
<div className={styles.heroOverlay} />
|
||||
<div className={styles.heroContent} style={{gap: '30px'}}>
|
||||
<h1 className={styles.heroTitle}>{title}</h1>
|
||||
<h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
|
||||
{subtitle && <h2 className={styles.heroSubtitle}>{subtitle}</h2>}
|
||||
{desc && <p className={styles.heroDesc}>{desc}</p>}
|
||||
{largedesc && <p className={styles.heroLargeDesc}>{largedesc}</p>}
|
||||
{showBreadcrumb && (
|
||||
<div className={styles.breadcrumb}>
|
||||
<Link to="/">首页</Link>
|
||||
<span>{'>'}</span>
|
||||
<Link to="/about">关于银泰</Link>
|
||||
{showBreadcrumb && (breadcrumbItems ?? []).map((item, i) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <span>{' > '}</span>}
|
||||
{item.to ? <Link to={item.to}>{item.label}</Link> : <span>{item.label}</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.sectionTitle {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import styles from "./index.module.css";
|
||||
|
||||
export default function SectionTitle({ title }: { title: string }) {
|
||||
return (
|
||||
<div className={styles.sectionTitle}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.statsRow {
|
||||
margin-top: 9.375rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
width: 17rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: .625rem;
|
||||
}
|
||||
|
||||
.statItem:not(:last-child) {
|
||||
border-right: 1px solid #222222;
|
||||
}
|
||||
|
||||
.statNum {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.statNumDesc {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import styles from "./StatsRow.module.css";
|
||||
|
||||
type StatsData = {
|
||||
num: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export default function StatsRow({ statsData }: { statsData: StatsData[] }) {
|
||||
return (
|
||||
<div className={styles.statsRow}>
|
||||
{statsData.map((item, i) => (
|
||||
<div key={i} className={styles.statItem}>
|
||||
<div>
|
||||
<span className={`${styles.statNum} font-num`}>
|
||||
{item.num.split(' ')[0] + ' '}
|
||||
</span>
|
||||
<span className={`${styles.statNumDesc}`}>
|
||||
{item.num.split(' ')[1]}
|
||||
</span>
|
||||
</div>
|
||||
<span className={styles.statLabel}>{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.swiperCardSection {
|
||||
min-height: 100vh;
|
||||
padding: 100px 260px;
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
|
||||
.swiperCardList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
.swiperCardItem {
|
||||
position: relative;
|
||||
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);
|
||||
}
|
||||
|
||||
.swiperContent {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.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);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
border-bottom: 3px solid #14355C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import SectionTitle from "../SectionTitle";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
type Data = {
|
||||
title: string;
|
||||
cardItems: {
|
||||
title: string;
|
||||
desc: string;
|
||||
image: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function SwiperCardSection({ data }: { data: Data }) {
|
||||
return (
|
||||
<section className={styles.swiperCardSection}>
|
||||
<SectionTitle title={data.title} />
|
||||
<div className={styles.swiperCardList}>
|
||||
{data.cardItems.map((item) => (
|
||||
<div key={item.title} className={styles.swiperCardItem}>
|
||||
<img src={item.image} alt={item.title} />
|
||||
<div className={styles.swiperMask}></div>
|
||||
<div className={styles.swiperContent}>
|
||||
<div className={styles.swiperTitle}>
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
{/* <p>{item.desc}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,38 @@
|
|||
/* rem 基准：以 16px 为设计稿基准 */
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
|
@ -13,6 +48,10 @@ code {
|
|||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alimama ShuHeiTi';
|
||||
src: url('https://cdn.batiao8.com/static/ttf/%E9%98%BF%E9%87%8C%E5%A6%88%E5%A6%88%E6%95%B0%E9%BB%91%E4%BD%93.ttf');
|
||||
font-family: 'D-DIN-PRO';
|
||||
src: url('/public/ttf/D-DIN-PRO-400-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Source Han Sans';
|
||||
src: url('/public/ttf/SourceHanSansCN-Normal.otf');
|
||||
}
|
||||
|
|
@ -4,32 +4,32 @@
|
|||
}
|
||||
|
||||
.footerUpper {
|
||||
padding: 60px;
|
||||
padding: 3.75rem;
|
||||
}
|
||||
|
||||
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr) auto;
|
||||
gap: 24px;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.footerColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.footerTitle {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
font-size: 13px;
|
||||
font-size: 0.8125rem;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -42,25 +42,25 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 1rem;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
right: 3.75rem;
|
||||
}
|
||||
|
||||
.footerLogo {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.socialIcons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.socialIcon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
display: flex;
|
||||
|
|
@ -68,13 +68,13 @@
|
|||
justify-content: center;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footerLower {
|
||||
background: #031229;
|
||||
color: #fff;
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footerLowerLinks {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.footerLowerLink {
|
||||
|
|
@ -100,3 +100,44 @@
|
|||
.footerLowerLink:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.footerUpper {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.footerGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.footerRight {
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footerUpper {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.footerGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footerRight {
|
||||
position: static;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footerLower {
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footerLowerInner {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
height: 120px;
|
||||
height: 7.5rem;
|
||||
width: 100%;
|
||||
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.625rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
.headerInner::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 60px;
|
||||
left: 3.75rem;
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 120px);
|
||||
width: calc(100% - 7.5rem);
|
||||
box-sizing: border-box;
|
||||
height: 1px;
|
||||
background: #FFFFFF;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
.headerRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -66,11 +66,11 @@
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 30px;
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
padding: 0 30px;
|
||||
padding: 0 1.875rem;
|
||||
}
|
||||
|
||||
.navLink {
|
||||
|
|
@ -90,14 +90,14 @@
|
|||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-left: 30px;
|
||||
gap: 1rem;
|
||||
margin-left: 1.875rem;
|
||||
}
|
||||
|
||||
.langTrigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 0.25rem;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -121,10 +121,10 @@
|
|||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
height: 23.75rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -136,8 +136,71 @@
|
|||
|
||||
.dropPanelLink {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 3.125rem;
|
||||
color: #222222;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.header {
|
||||
height: 5.5rem;
|
||||
}
|
||||
|
||||
.headerInner::after {
|
||||
left: 1.5rem;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
|
||||
.navItem {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.headerInner::after {
|
||||
left: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.navItem {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.dropPanel {
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dropPanelLink {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -80,7 +80,7 @@ export default function Header() {
|
|||
>
|
||||
<div className={`header-row ${styles.headerInner}`}>
|
||||
<Link to="/" className={styles.logo}>
|
||||
<img src="/images/logo.png" alt="logo" style={{ width: "92px", height: "55px" }} />
|
||||
<img src="/images/logo.png" alt="logo" style={{ width: "5.75rem", height: "3.4375rem" }} />
|
||||
</Link>
|
||||
<div className={styles.headerRight}>
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 5%;
|
||||
max-width: 560px;
|
||||
max-width: 35rem;
|
||||
}
|
||||
|
||||
.contentRight {
|
||||
|
|
@ -39,23 +39,23 @@
|
|||
/* Dark blue semi-transparent text box */
|
||||
.textBox {
|
||||
background: rgba(20,53,92,0.5);
|
||||
padding: 40px;
|
||||
border-radius: 4px;
|
||||
padding: 2.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0 0 30px;
|
||||
margin: 0 0 1.875rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin: 0 0 60px;
|
||||
margin: 0 0 3.75rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
@ -63,9 +63,9 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0 40px;
|
||||
gap: 0 2.5rem;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.links a {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,54 @@
|
|||
.section {
|
||||
background: rgba(255,255,255,0.6);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border-radius: 0;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 100px 15.6%;
|
||||
padding: 6.25rem 16.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 1.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-top: 100px;
|
||||
gap: 2.5rem;
|
||||
margin-top: 6.25rem;
|
||||
|
||||
.imageItem {
|
||||
width: 100%;
|
||||
aspect-ratio: 680 / 800;
|
||||
}
|
||||
}
|
||||
.images img{
|
||||
width: 100%;
|
||||
aspect-ratio: 680 / 800;
|
||||
background: rgba(0,0,0,0.3);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.images .imageItem {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.imageOverlay {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.images .imageItem:hover .imageOverlay {
|
||||
top: 0;
|
||||
background: rgba(20,53,92,0.8);
|
||||
.imageOverlayDesc {
|
||||
opacity: 1;
|
||||
}
|
||||
.imageOverlayTitle span {
|
||||
border-bottom: 3px solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
.images .imageMask {
|
||||
position: absolute;
|
||||
|
|
@ -44,58 +60,60 @@
|
|||
}
|
||||
.images .imageOverlay {
|
||||
position: absolute;
|
||||
top: 74%;
|
||||
top: 78%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding: 60px 40px;
|
||||
background: rgba(20,53,92,0.8);
|
||||
padding: 3.75rem 2.5rem;
|
||||
transition: top 0.3s ease-in-out;
|
||||
.imageOverlayDesc {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.images .imageOverlayTitle {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
height: 70px;
|
||||
height: 4.375rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
.images .imageOverlayTitle span {
|
||||
display: inline-block;
|
||||
height: 71px;
|
||||
border-bottom: 3px solid #FFFFFF;
|
||||
height: 4.4375rem;
|
||||
border-bottom: 3px solid #14355C;
|
||||
}
|
||||
.images .imageOverlayDesc {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
margin-top: 50px;
|
||||
margin-top: 3.125rem;
|
||||
}
|
||||
|
||||
.sectionFounder{
|
||||
padding: 100px 0 150px;
|
||||
padding: 6.25rem 0 9.375rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.founderIntroduction h2 {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 3.125rem;
|
||||
text-align: center;
|
||||
}
|
||||
.founderIntroduction p {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 1.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
}
|
||||
.founderPhoto{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 100px;
|
||||
margin-top: 100px;
|
||||
gap: 6.25rem;
|
||||
margin-top: 6.25rem;
|
||||
}
|
||||
|
||||
.founderPhoto img{
|
||||
|
|
@ -104,13 +122,40 @@
|
|||
aspect-ratio: 680 / 800;
|
||||
}
|
||||
.founderPhotoContent{
|
||||
padding-top: 100px;
|
||||
padding-right: 100px;
|
||||
padding-top: 6.25rem;
|
||||
padding-right: 6.25rem;
|
||||
}
|
||||
.founderPhotoContent p {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 1.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.images {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.sectionFounder {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.founderPhoto {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.founderPhotoContent {
|
||||
padding-top: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
);
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 100px 300px;
|
||||
padding: 6.25rem 18.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 6.25rem;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
|
|
@ -47,16 +47,16 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
min-height: 96px;
|
||||
margin-bottom: 16px;
|
||||
min-height: 6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timelineItem .side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px 24px;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -75,18 +75,18 @@
|
|||
}
|
||||
|
||||
.year {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #222;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
max-width: 540px;
|
||||
margin-top: 30px;
|
||||
max-width: 33.75rem;
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.timelineItem.left .desc {
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
.dotWrapper {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -107,21 +107,21 @@
|
|||
}
|
||||
|
||||
.dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background: #3875FF;
|
||||
}
|
||||
|
||||
.dotWrapper.selected {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
background: #e8eaed;
|
||||
}
|
||||
|
||||
.dotWrapper.selected .dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: #14355C;
|
||||
}
|
||||
|
||||
|
|
@ -131,8 +131,8 @@
|
|||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
border: 2px solid #14355C;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
|
|
@ -143,7 +143,27 @@
|
|||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
width: 0.375rem;
|
||||
min-height: 0;
|
||||
background: #14355C;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.section {
|
||||
padding: 4rem 4rem;
|
||||
}
|
||||
|
||||
.headRow {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.headRow {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,302 @@
|
|||
/* Overview Section */
|
||||
.overview {
|
||||
background: #f0f2f4;
|
||||
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23e8eaed' fill-opacity='0.5' d='M0 50 Q 25 30 50 50 T 100 50 L 100 100 L 0 100 Z'/%3E%3C/svg%3E"); */
|
||||
padding: 6.25rem 16.25rem;
|
||||
}
|
||||
|
||||
.overviewInner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.overviewTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.overviewDesc {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: #222;
|
||||
margin: 0 0 2.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Two-column Section */
|
||||
.twoColSection {
|
||||
/* display: flex; */
|
||||
align-items: stretch;
|
||||
min-height: 28rem;
|
||||
padding: 6.25rem 0 9.375rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.twoColSection.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.twoColSectionTabs {
|
||||
height: 4.125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 8.125rem;
|
||||
border-bottom: 1px solid #D5D8DC;
|
||||
margin: 0 16.25rem;
|
||||
margin-bottom: 3.75rem;
|
||||
}
|
||||
|
||||
.twoColSectionTab {
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: #14355C;
|
||||
line-height: 34px;
|
||||
}
|
||||
.twoColSectionTab.active {
|
||||
border-bottom: 2px solid #14355C;
|
||||
}
|
||||
.twoColSectionContent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.twoColImage {
|
||||
min-width: 0;
|
||||
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
.twoColImage img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.twoColImage .placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.twoColText {
|
||||
padding: 100px 260px 150px 80px;
|
||||
background: #F0F2F4;
|
||||
}
|
||||
|
||||
.twoColTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.twoColDesc {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: #222;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.twoColDesc + .twoColDesc {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
margin-top: 6.25rem;
|
||||
display: inline-block;
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #333333;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btnPrimary:hover {
|
||||
background: #0f2847;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.featuresHero {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 260px;
|
||||
}
|
||||
|
||||
.featuresHeroContent {
|
||||
height: 690px;
|
||||
width: 100%;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.featuresHeroTabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 200px;
|
||||
border-top: 1px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.featuresHeroTab {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.featuresHeroTab.active {
|
||||
border-top: 2px solid #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.propertyServices {
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
padding: 0 260px;
|
||||
}
|
||||
|
||||
.propertyServicesContent {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.propertyServicesTitle {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
}
|
||||
.propertyServicesSubtitle {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.propertyServicesBtn {
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #FFFFFF;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.propertyServicesBtn:hover {
|
||||
background: #14355C;
|
||||
border-color: #14355C;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 16rem;
|
||||
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.overview {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
||||
.statsRow {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.twoColText {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.overview {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.overviewTitle {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.statNum {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.statsRow {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.twoColSection {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.twoColSection.reverse {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.twoColImage {
|
||||
aspect-ratio: 16/9;
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
.twoColText {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.twoColTitle {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.featuresHero {
|
||||
min-height: 14rem;
|
||||
}
|
||||
|
||||
.featuresHeroTitle {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.featureBlock {
|
||||
min-height: 18rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.featureBlockTitle {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,138 @@
|
|||
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>
|
||||
<Banner title="银泰商业集团" largedesc="传统零售业的推动者和变革者" showBreadcrumb={true} backgroundImage="/images/bg-commercial-group.png" />
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
.twoColSection {
|
||||
padding: 100px 260px;
|
||||
}
|
||||
|
||||
.twoColSection p {
|
||||
font-size: 18px;
|
||||
color: #222;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.threeColSection {
|
||||
padding: 100px 260px;
|
||||
width: 100%;
|
||||
height: 966px;
|
||||
background: rgba(216, 216, 216, 0.5);
|
||||
}
|
||||
|
||||
.threeColTabs {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 70px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #D5D8DC;
|
||||
}
|
||||
|
||||
.threeColTabItem {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.threeColTabItem.active {
|
||||
border-bottom: 2px solid #000000;
|
||||
color: #14355C;
|
||||
}
|
||||
|
||||
.threeColContent {
|
||||
padding: 150px 0;
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.threeColContentLeft {
|
||||
flex: 6;
|
||||
margin: auto 0;
|
||||
.threeColContentLeftHead {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.threeColContentLeftTitle {
|
||||
.threeColContentLeftTitleMain {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.threeColContentLeftTitleSub {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #14355C;
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.threeColContentLeftDesc {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.threeColContentRight {
|
||||
flex: 8;
|
||||
img {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import Banner from "@/components/banner";
|
||||
import styles from "./CommercialGroupDetail.module.css";
|
||||
import { useState } from "react";
|
||||
export default function BusinessCommercialGroupDetail() {
|
||||
const [tabItems, setTabItems] = useState([
|
||||
{ label: "北京银泰中心in01", icon: "", title: '北京银泰中心', subtitle: '精致优雅的典范', sideImg: '/images/bg-overview.png' },
|
||||
{ label: "杭州湖滨银泰in77", icon: "", title: '杭州湖滨银泰', subtitle: '潮流时尚的聚集地', sideImg: '/images/bg-overview.png' },
|
||||
{ label: "北京王府井银泰in88", icon: "", title: '北京王府井银泰', subtitle: '时尚购物的理想选择', sideImg: '/images/bg-overview.png' },
|
||||
{ label: "成都银泰中心in99", icon: "", title: '成都银泰中心', subtitle: '现代都市的活力中心', sideImg: '/images/bg-overview.png' },
|
||||
{ label: "合肥银泰中心in77", icon: "", title: '合肥银泰中心', subtitle: '城市商业的璀璨明珠', sideImg: '/images/bg-overview.png' },
|
||||
]);
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Banner
|
||||
title="in77"
|
||||
largedesc="地标型高端商业综合体"
|
||||
titleSize="large"
|
||||
showBreadcrumb={true}
|
||||
breadcrumbItems={[
|
||||
{ label: "首页", to: "/" },
|
||||
{ label: "集团业务", to: "/business" },
|
||||
{ label: "银泰商业集团", to: "/business/commercial-group" },
|
||||
{ label: "in77", to: "" },
|
||||
]}
|
||||
backgroundImage={`/images/bg-commercial-group.png`}
|
||||
/>
|
||||
|
||||
<section className={styles.twoColSection}>
|
||||
<p>in77 作为高端商业品牌，汲取了银泰集团优质的商业资源及运营管理能力，旗下项目均位于核心商业圈或国家示范步行街，成为时尚零售业和新消费领域的标杆。目前有北京银泰中心in01、杭州湖滨银泰in77、北京王府井银泰in88、合肥银泰in77及成都银泰中心in99等项目。每个项目都融入“唤醒真正的自我”的理念，同时亦不乏各自特色与个性。</p>
|
||||
<p>2024年，“in77”正式升级为高端产品线，标志着银泰商业集团在商业领域的深化运营与转型发展迈入新阶段。新系列产品以 “全球商业标杆、时尚购物打卡地、年轻人社交聚集地”为核心理念，旨在加速银泰商业集团全国商业布局，推动集团化快速发展。</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.threeColSection}>
|
||||
<div className={styles.threeColTabs}>
|
||||
{tabItems.map((item, index) => (
|
||||
<div key={index} className={`${styles.threeColTabItem} ${activeTab === index ? styles.active : ''}`} onClick={() => setActiveTab(index)}>
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.threeColContent}>
|
||||
<div className={styles.threeColContentLeft}>
|
||||
<div className={styles.threeColContentLeftHead}>
|
||||
<img src="" alt="" style={{width: '100px', height: '100px'}} />
|
||||
<div className={styles.threeColContentLeftTitle}>
|
||||
<div className={styles.threeColContentLeftTitleMain}>{tabItems[activeTab].title}</div>
|
||||
<div className={styles.threeColContentLeftTitleSub}>{tabItems[activeTab].subtitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className={styles.threeColContentLeftDesc}>
|
||||
地处CBD核心的北京银泰中心in01，是集思想性、艺术性于一体的高端购物中心，更是引领潮流和定制尊享的目的地。in01倡导美、个性和活力，打造了一个集潮奢品牌、时尚运动、独特购物体验于一体的商业艺术空间，目前拥有Chrome Hears、alexanderwang、RICHARD MILLE 、Burton、华为等品牌首店或旗舰店，为客人带来高品质的全新生活方式和购物体验，同时也诠释了优雅的in式服务概念。
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.threeColContentRight}>
|
||||
<img src={tabItems[activeTab].sideImg} alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -20,21 +20,21 @@
|
|||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 24px;
|
||||
padding-top: 550px;
|
||||
padding: 0 1.5rem;
|
||||
padding-top: 34.375rem;
|
||||
padding-left: 13.5%;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 48px;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin: 0;
|
||||
letter-spacing: 0.02em;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.commercialContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 260px;
|
||||
margin: 0 16.25rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -77,57 +77,56 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 135px;
|
||||
padding-left: 16px;
|
||||
padding-bottom: 8.4375rem;
|
||||
padding-left: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.commercialItem:last-child {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.commercialTitle {
|
||||
font-size: 40px;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 1.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commercialDesc {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
max-width: 560px;
|
||||
max-width: 35rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.commercialLinks {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
margin-top: 100px;
|
||||
margin-top: 6.25rem;
|
||||
}
|
||||
|
||||
.commercialLink {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.cards {
|
||||
padding: 150px 100px;
|
||||
padding: 9.375rem 6.25rem;
|
||||
background: url('/public/images/bg-mask-card.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.cardsInner {
|
||||
max-width: 1720px;
|
||||
max-width: 107.5rem;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -139,10 +138,70 @@
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.commercialContent {
|
||||
margin: 0 4rem;
|
||||
}
|
||||
|
||||
.newsFeaturedImgWrap {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.news {
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cardsInner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cards {
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
padding-top: 20rem;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.commercialContent {
|
||||
margin: 0 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.commercialItem {
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.commercialLinks {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.news {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.newsTitle {
|
||||
margin: 1rem 0 2rem;
|
||||
}
|
||||
|
||||
.newsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.newsFeaturedImgWrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newsItem {
|
||||
padding: 1rem 1.25rem;
|
||||
height: auto;
|
||||
min-height: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBg {
|
||||
|
|
@ -169,18 +228,18 @@
|
|||
.cardContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 32px;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
opacity: 0.95;
|
||||
|
|
@ -193,7 +252,7 @@
|
|||
|
||||
/* News */
|
||||
.news {
|
||||
padding: 80px 60px;
|
||||
padding: 5rem 3.75rem;
|
||||
}
|
||||
|
||||
.newsInner {
|
||||
|
|
@ -201,17 +260,17 @@
|
|||
}
|
||||
|
||||
.newsTitle {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
text-align: center;
|
||||
margin: 20px 0 80px;
|
||||
margin: 1.25rem 0 5rem;
|
||||
}
|
||||
|
||||
.newsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
|
@ -220,7 +279,8 @@
|
|||
}
|
||||
|
||||
.newsFeaturedImgWrap {
|
||||
width: 950px;
|
||||
width: 59.375rem;
|
||||
max-width: 100%;
|
||||
aspect-ratio: 950 / 560;
|
||||
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
|
||||
overflow: hidden;
|
||||
|
|
@ -236,10 +296,10 @@
|
|||
|
||||
.newsFeaturedCaption {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
left: 40px;
|
||||
bottom: 1.375rem;
|
||||
left: 2.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
width: 80%;
|
||||
}
|
||||
|
|
@ -247,13 +307,13 @@
|
|||
.newsList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.newsItem {
|
||||
box-sizing: border-box;
|
||||
padding: 24px 30px 20px 30px;
|
||||
height: 180px;
|
||||
padding: 1.5rem 1.875rem 1.25rem 1.875rem;
|
||||
height: 11.25rem;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -262,10 +322,10 @@
|
|||
|
||||
|
||||
.newsItemTitle {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -279,9 +339,9 @@
|
|||
}
|
||||
|
||||
.newsItemSnippet {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.6;
|
||||
|
||||
display: -webkit-box;
|
||||
|
|
@ -292,6 +352,6 @@
|
|||
}
|
||||
|
||||
.newsItemDate {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
color: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.propertyService {
|
||||
padding: 100px 260px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import Banner from "@/components/banner";
|
||||
import styles from "./PropertyService.module.css";
|
||||
import StatsRow from "@/components/layout/StatsRow/StatsRow";
|
||||
import { useState } from "react";
|
||||
import SectionTitle from "@/components/layout/SectionTitle";
|
||||
import SwiperCardSection from "@/components/layout/SwiperCardSection";
|
||||
|
||||
export default function PropertyService() {
|
||||
const [statsData] = useState([
|
||||
{ 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" },
|
||||
],
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Banner
|
||||
title="物业服务"
|
||||
desc="国内一流物业服务品牌"
|
||||
titleSize="medium"
|
||||
showBreadcrumb={false}
|
||||
backgroundImage={`/images/bg-overview.png`}
|
||||
/>
|
||||
|
||||
<section className={`${styles.propertyService} normal-p`}>
|
||||
<div className={styles.propertyServiceContent}>
|
||||
<p>银泰智享物业 管理有限公司是一家集品质物业服务、资产托管运营、智慧物联管理、科技平台创新运维为一体的专业化物业服务企业，致力于商办类物业运营管理、打造资产全周期生态服务。</p>
|
||||
<p>凭借银泰集团多年城市商业地产运营经验不断深化创新，银泰智享积极拓展业务深度与广度，做强基础物业服务，深耕客户卓越服务体验，创造企业多元化价值。核心业务涵盖资产全托管服务、资产顾问服务、资产设施服务、物业品牌合作等，着力实现服务体系化、标准化、精细化、智慧化“四化合一”，打造国内一流的物业管理品牌。</p>
|
||||
</div>
|
||||
<StatsRow statsData={statsData} />
|
||||
</section>
|
||||
|
||||
<SwiperCardSection data={swiperCardData} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
menus: [
|
||||
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue