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

ud

This commit is contained in:
zhangjianjun 2026-03-26 18:36:37 +08:00
parent 6317a635f6
commit ee3715b0d3
34 changed files with 1555 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,3 +107,71 @@
margin-top: 6.25rem; margin-top: 6.25rem;
} }
@media (max-width: 48rem) {
.heroContent {
padding-left: 5%;
padding-right: 5%;
}
.heroTitle {
font-size: 2rem;
}
.heroTitleMedium {
font-size: 1.5rem;
}
.heroSubtitle {
font-size: 1.5rem;
}
.heroDesc {
max-width: none;
font-size: 1rem;
}
.heroLargeDesc {
font-size: 1.5rem;
}
.breadcrumb {
margin-top: 3rem;
}
}
@media (max-width: 30rem) {
.hero {
padding-bottom: 2rem;
}
.heroContent {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.heroTitle {
font-size: 1.75rem;
}
.heroTitleMedium {
font-size: 1.25rem;
}
.heroSubtitle {
font-size: 1.25rem;
}
.heroDesc {
font-size: 0.875rem;
}
.heroLargeDesc {
font-size: 1.25rem;
}
.breadcrumb {
margin-top: 2rem;
font-size: 0.875rem;
}
}

12
src/components/ScreenOpen/index.module.css
View File

@ -34,4 +34,16 @@
} }
} }
}
@media (max-width: 48rem) {
.screenOpen .screenOpenContent img {
width: 4rem;
}
}
@media (max-width: 30rem) {
.screenOpen .screenOpenContent img {
width: 3rem;
}
} }

54
src/components/layout/BottomTabsSection/index.module.css
View File

@ -96,4 +96,56 @@
line-height: 3.75rem; line-height: 3.75rem;
height: 3.75rem; height: 3.75rem;
} }
} }
@media (max-width: 48rem) {
.bottomTabsSection {
height: auto;
min-height: auto;
padding: 4rem 0;
}
.bottomTabsSectionContent {
width: calc(100% - 8rem);
height: auto;
margin-top: 4rem;
gap: 3rem;
}
.bottomTabsSectionContentTabs {
flex-wrap: wrap;
gap: 0;
}
.bottomTabsSectionContentTab {
font-size: 1rem;
line-height: 3rem;
height: 3rem;
span {
line-height: 3rem;
height: 3rem;
}
}
}
@media (max-width: 30rem) {
.bottomTabsSectionContent {
width: calc(100% - 2.5rem);
margin-top: 2rem;
gap: 2rem;
}
.bottomTabsSectionContentContent .contentTitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
.bottomTabsSectionContentContent .contentText {
font-size: 1rem;
}
.bottomTabsSectionContentTab {
font-size: 0.875rem;
}
}

33
src/components/layout/JobPage/index.module.css
View File

@ -67,4 +67,37 @@
text-transform: none; text-transform: none;
white-space: pre-line; white-space: pre-line;
} }
}
@media (max-width: 48rem) {
.jobPage {
padding: 6rem 3rem;
}
.jobPage .jobPageHeader {
padding: 2.5rem 2rem;
}
.jobPage .jobPageContent {
padding: 0 2rem;
}
}
@media (max-width: 30rem) {
.jobPage {
padding: 5rem 1.25rem;
}
.jobPage .jobPageHeader {
padding: 2rem 0;
}
.jobPage .jobPageContent {
padding: 0;
}
.jobPage .jobPageHeaderLine {
height: auto;
padding-bottom: 1rem;
}
} }

37
src/components/layout/ParagraphSection/index.module.css
View File

@ -37,4 +37,41 @@
background: #F0F2F4; background: #F0F2F4;
border-radius: 20.375rem 20.375rem 20.375rem 20.375rem; border-radius: 20.375rem 20.375rem 20.375rem 20.375rem;
} }
}
@media (max-width: 48rem) {
.paragraphSection {
padding: 4rem 4rem;
}
.tags {
gap: 1.25rem;
margin-top: 3rem;
}
.tags .tag {
padding: 1rem 1.5rem;
font-size: 1.25rem;
}
}
@media (max-width: 30rem) {
.paragraphSection {
padding: 3rem 1.25rem;
}
.paragraphSectionContent .paragraphSectionTitle {
font-size: 1.75rem;
line-height: 2.25rem;
}
.tags {
gap: 0.75rem;
margin-top: 2rem;
}
.tags .tag {
padding: 0.75rem 1.25rem;
font-size: 1rem;
}
} }

82
src/components/layout/RowAccordion/index.module.css
View File

@ -146,4 +146,86 @@
} }
} }
} }
}
@media (max-width: 48rem) {
.rowAccordion {
height: auto;
min-height: auto;
}
.rowAccordion .headerRow,
.rowAccordion .contentRow {
width: 90%;
}
.rowAccordion .headerRow {
height: 8rem;
.title {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
.rowAccordion .contentRow {
flex-direction: column;
height: auto;
.contentItem {
flex: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
&:last-child {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.contentItemTitle {
height: auto;
white-space: normal;
font-size: 1.25rem;
}
.contentItemContainer {
min-height: auto;
}
.contentItemContainer::before {
height: 100%;
}
}
.contentItem.active {
flex: none;
padding-bottom: 2.5rem;
.contentItemTitle {
font-size: 1.5rem;
}
.contentItemContentWrapper {
height: auto;
}
}
}
}
@media (max-width: 30rem) {
.rowAccordion .headerRow,
.rowAccordion .contentRow {
width: 100%;
padding: 0 1.25rem;
}
.rowAccordion .headerRow {
height: 6rem;
.title {
font-size: 1.5rem;
}
}
} }

38
src/components/layout/Section/index.module.css Normal file
View File

@ -0,0 +1,38 @@
.section {
padding: 6.25rem 0;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sectionContent {
/* width: 72%; */
/* margin: 0 auto; */
}
.mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.inner {
position: relative;
z-index: 1;
}
@media (max-width: 48rem) {
.section {
padding: 4rem 4rem;
}
}
@media (max-width: 30rem) {
.section {
padding: 3rem 1.25rem;
}
}

44
src/components/layout/Section/index.tsx
View File

@ -1,4 +1,5 @@
import SectionTitle from "../SectionTitle"; import SectionTitle from "../SectionTitle";
import styles from "./index.module.css";
type Props = { type Props = {
title?: string; title?: string;
@ -11,32 +12,27 @@ type Props = {
className?: string; className?: string;
} }
export default function Section({ export default function Section({
title, subtitle, height, titleColor, children, title, subtitle, height, titleColor, children,
background, maskBackground, className }: Props) { background, maskBackground, className }: Props) {
return ( return (
<section style={{ <section
padding: '6.25rem 16.25rem', className={`${styles.section} ${className || ''}`}
width: '100%', style={{
height: height || 'auto', height: height || 'auto',
position: 'relative', backgroundImage: background ? `url(${background})` : undefined,
backgroundImage: background ? `url(${background})` : 'transparent', }}
backgroundRepeat: 'no-repeat', >
backgroundSize: 'cover', <div className={styles.sectionContent}>
backgroundPosition: 'center', <div
}} className={className}> className={styles.mask}
<div style={{ style={{ background: maskBackground || 'rgba(20,53,92,0.4)' }}
width: '100%', />
height: '100%', <div className={styles.inner}>
position: 'absolute', {title && <SectionTitle title={title} subtitle={subtitle} color={titleColor || '#222'} />}
top: 0, {children}
left: 0, </div>
background: maskBackground || 'rgba(20,53,92,0.4);',
}}></div>
<div style={{ position: 'relative', zIndex: 1 }}>
{title && <SectionTitle title={title} subtitle={subtitle} color={titleColor || '#222'} />}
{children}
</div> </div>
</section> </section>
) )
} }

2
src/components/layout/SectionTitle/index.module.css
View File

@ -1,5 +1,5 @@
.sectionTitle { .sectionTitle {
font-weight: 700; font-weight: 900;
font-size: 2.5rem; font-size: 2.5rem;
line-height: 3.125rem; line-height: 3.125rem;
text-align: center; text-align: center;

33
src/components/layout/SwiperCardSection/index.module.css
View File

@ -120,4 +120,37 @@
opacity: 0; opacity: 0;
} }
} }
}
@media (max-width: 48rem) {
.swiperCardSection {
padding: 4rem 4rem;
min-height: auto;
}
.navBtn {
left: -3rem;
}
.nextBtn {
left: auto;
right: -3rem;
}
}
@media (max-width: 30rem) {
.swiperCardSection {
padding: 3rem 1.25rem;
}
.navBtn {
width: 2.5rem;
height: 2.5rem;
left: -0.5rem;
}
.nextBtn {
left: auto;
right: -0.5rem;
}
} }

55
src/components/layout/TopTabsSection/index.module.css
View File

@ -73,9 +73,9 @@
.topTabsBottomLine { .topTabsBottomLine {
position: absolute; position: absolute;
bottom: 0; bottom: -1px;
height: .125rem; height: .125rem;
background: #000000; background: #14355C;
transition: left 0.25s ease, width 0.25s ease; transition: left 0.25s ease, width 0.25s ease;
} }
@ -85,6 +85,7 @@
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
color: #222222; color: #222222;
font-weight: 500;
} }
.topTabsTabItem.active { .topTabsTabItem.active {
@ -178,4 +179,54 @@
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
}
@media (max-width: 48rem) {
.topTabsSection {
padding: 4rem 4rem 6rem 4rem;
}
.topTabsTabsScroll {
gap: 3rem;
}
.topTabsContent {
padding-top: 4rem;
flex-direction: column;
gap: 2.5rem;
}
.topTabsContentRight img {
width: 100%;
height: auto;
}
.topTabsContentItems {
width: 100%;
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 30rem) {
.topTabsSection {
padding: 3rem 1.25rem 4rem 1.25rem;
}
.topTabsTabsScroll {
gap: 1.5rem;
}
.topTabsContent {
padding-top: 2.5rem;
gap: 1.5rem;
}
.topTabsContentLeft .topTabsContentLeftHead .topTabsContentLeftTitle .topTabsContentLeftTitleMain {
font-size: 1.75rem;
line-height: 2.25rem;
}
.topTabsContentItems {
grid-template-columns: 1fr;
}
} }

4
src/index.css
View File

@ -29,13 +29,13 @@ html {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
html { html {
--design-rem-base: 12px; --design-rem-base: 10px;
} }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
html { html {
--design-rem-base: 12px; --design-rem-base: 8px;
} }
} }

46
src/layouts/Footer.module.css
View File

@ -89,6 +89,12 @@
font-size: .875rem; font-size: .875rem;
} }
.footerLowerCopyright {
display: flex;
flex-direction: row;
gap: 3.125rem;
}
.footerLowerLinks { .footerLowerLinks {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
@ -142,4 +148,44 @@
flex-direction: column; flex-direction: column;
gap: .5rem; gap: .5rem;
} }
.footerLowerCopyright {
flex-direction: column !important;
gap: 0.25rem !important;
text-align: center;
font-size: 0.75rem;
}
.footerLowerLinks {
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
}
@media (max-width: 30rem) {
.footerUpper {
padding: 1rem;
}
.footerGrid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.footerTitle {
font-size: 0.8125rem;
}
.footerLink {
font-size: 0.75rem;
}
.footerLower {
padding: 0.75rem;
}
.footerLowerInner {
font-size: 0.75rem;
}
} }

2
src/layouts/Footer.tsx
View File

@ -79,7 +79,7 @@ function FooterLower({
return ( return (
<div className={styles.footerLower}> <div className={styles.footerLower}>
<div className={`header-row ${styles.footerLowerInner}`}> <div className={`header-row ${styles.footerLowerInner}`}>
<div style={{ display: "flex", flexDirection: "row", gap: "3.125rem" }}> <div className={styles.footerLowerCopyright}>
<span>{`${copyright} | ${companyName}`}</span> <span>{`${copyright} | ${companyName}`}</span>
<span>{icpNumber}</span> <span>{icpNumber}</span>
</div> </div>

191
src/layouts/Header.module.css
View File

@ -287,6 +287,172 @@
} }
} }
/* Hamburger button - hidden on desktop */
.hamburger {
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0.25rem;
position: relative;
z-index: 1;
width: 2.5rem;
height: 2.5rem;
}
.hamburgerBar {
display: block;
width: 1.5rem;
height: 2px;
background: #fff;
position: relative;
transition: background 0.3s;
}
.hamburgerBar::before,
.hamburgerBar::after {
content: '';
display: block;
width: 1.5rem;
height: 2px;
background: #fff;
position: absolute;
left: 0;
transition: transform 0.3s, top 0.3s;
}
.hamburgerBar::before {
top: -0.45rem;
}
.hamburgerBar::after {
top: 0.45rem;
}
.hamburgerOpen .hamburgerBar {
background: transparent;
}
.hamburgerOpen .hamburgerBar::before {
top: 0;
transform: rotate(45deg);
background: #222;
}
.hamburgerOpen .hamburgerBar::after {
top: 0;
transform: rotate(-45deg);
background: #222;
}
.whiteMode .hamburgerBar,
.whiteMode .hamburgerBar::before,
.whiteMode .hamburgerBar::after,
.keepNavDark .hamburgerBar,
.keepNavDark .hamburgerBar::before,
.keepNavDark .hamburgerBar::after {
background: #222;
}
.hamburgerOpen .hamburgerBar {
background: transparent !important;
}
/* Mobile drawer */
.mobileDrawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: #fff;
z-index: 999;
padding-top: 4rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.35s ease;
}
.mobileDrawerOpen {
transform: translateX(0);
}
.mobileNavList {
list-style: none;
margin: 0;
padding: 1.5rem 1.25rem;
}
.mobileNavItem {
border-bottom: 1px solid #eee;
}
.mobileNavLink {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
font-size: 1.125rem;
font-weight: 600;
color: #222;
text-decoration: none;
cursor: pointer;
}
.mobileNavArrow {
font-size: 0.75rem;
transition: transform 0.3s;
color: #999;
}
.mobileNavArrowOpen {
transform: rotate(90deg);
}
.mobileSubList {
list-style: none;
margin: 0;
padding: 0 0 0.5rem 1rem;
}
.mobileSubLink {
display: block;
padding: 0.625rem 0;
font-size: 1rem;
font-weight: 400;
color: #555;
text-decoration: none;
}
.mobileSubLink:active {
color: #14355C;
}
.mobileDrawerActions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.25rem;
border-top: 1px solid #eee;
margin-top: 1rem;
}
.mobileDrawerActions .searchBtn {
color: #222;
}
.mobileDrawerActions .searchBtn svg,
.mobileDrawerActions .searchBtn svg path {
fill: #222 !important;
}
.mobileDrawerActions .langTrigger {
color: #222;
}
@media (max-width: 48rem) { @media (max-width: 48rem) {
.header { .header {
height: 4rem; height: 4rem;
@ -297,28 +463,17 @@
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
.navItem { .nav,
padding: 0 .5rem; .actions,
.crossYline {
display: none;
} }
.headerRight { .hamburger {
gap: .5rem; display: flex;
}
.nav {
margin-right: .5rem;
}
.actions {
margin-left: .5rem;
} }
.dropPanel { .dropPanel {
height: 0; display: none;
/* padding: 1rem; */
}
.dropPanelLink {
line-height: 2.5rem;
} }
} }

124
src/layouts/Header.tsx
View File

@ -90,12 +90,27 @@ export default function Header() {
} }
}; };
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
useEffect(() => {
if (mobileMenuOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => { document.body.style.overflow = ''; };
}, [mobileMenuOpen]);
useEffect(() => {
setMobileMenuOpen(false);
}, [location.pathname]);
return ( return (
<header className={`${styles.header} <header className={`${styles.header}
${showWhiteMode ? styles.whiteMode : ''} ${showWhiteMode || mobileMenuOpen ? styles.whiteMode : ''}
${showDropPanel ? styles.showDropPanel : ''} ${showDropPanel ? styles.showDropPanel : ''}
${keepNavDark ? styles.keepNavDark : ''} ${keepNavDark ? styles.keepNavDark : ''}
${!showWhiteMode && !showDropPanel ? styles.commonMode : ''} ${!showWhiteMode && !showDropPanel && !mobileMenuOpen ? styles.commonMode : ''}
`} `}
onMouseLeave={handleHeaderMouseLeave} onMouseLeave={handleHeaderMouseLeave}
onMouseEnter={handleHeaderMouseEnter} onMouseEnter={handleHeaderMouseEnter}
@ -103,7 +118,7 @@ export default function Header() {
<div className={`header-row ${styles.headerInner} ${animateHeader ? styles.animate : ""}`}> <div className={`header-row ${styles.headerInner} ${animateHeader ? styles.animate : ""}`}>
<Link to="/" className={styles.logo}> <Link to="/" className={styles.logo}>
<img src={logo} alt="logo" style={{ width: "5.75rem", height: "3.4375rem" }} <img src={logo} alt="logo" style={{ width: "5.75rem", height: "3.4375rem" }}
className={(showDropPanel || showWhiteMode) ? "logo-dark" : ""} className={(showDropPanel || showWhiteMode || mobileMenuOpen) ? "logo-dark" : ""}
/> />
</Link> </Link>
<div className={styles.headerRight}> <div className={styles.headerRight}>
@ -141,6 +156,14 @@ export default function Header() {
</button> </button>
</Dropdown> </Dropdown>
</div> </div>
{/* Mobile hamburger */}
<button
className={`${styles.hamburger} ${mobileMenuOpen ? styles.hamburgerOpen : ''}`}
onClick={() => setMobileMenuOpen((v) => !v)}
aria-label="菜单"
>
<span className={styles.hamburgerBar} />
</button>
</div> </div>
</div> </div>
@ -153,9 +176,104 @@ export default function Header() {
}} }}
show={showDropPanel && activePanelItem.length > 0} show={showDropPanel && activePanelItem.length > 0}
/> />
{/* Mobile drawer */}
<MobileDrawer
open={mobileMenuOpen}
navItems={navItems}
locale={locale}
langMenuItems={langMenuItems}
setLocale={setLocale}
onClose={() => setMobileMenuOpen(false)}
/>
</header> </header>
); );
} }
function MobileDrawer({ open, navItems, locale, langMenuItems, setLocale, onClose }: {
open: boolean;
navItems: NavItem[];
locale: string;
langMenuItems: SupportLocale[];
setLocale: (key: LocaleKey) => void;
onClose: () => void;
}) {
const [expandedNav, setExpandedNav] = useState<string | null>(null);
const toggleExpand = (path: string) => {
setExpandedNav((prev) => (prev === path ? null : path));
};
return (
<div className={`${styles.mobileDrawer} ${open ? styles.mobileDrawerOpen : ''}`}>
<ul className={styles.mobileNavList}>
{navItems.map((item: NavItem) => {
const hasChildren = item.children && item.children.length > 0;
const isExpanded = expandedNav === item.path;
return (
<li key={item.path} className={styles.mobileNavItem}>
{hasChildren ? (
<>
<div
className={styles.mobileNavLink}
onClick={() => toggleExpand(item.path)}
>
{item.label}
<span className={`${styles.mobileNavArrow} ${isExpanded ? styles.mobileNavArrowOpen : ''}`}>▶</span>
</div>
{isExpanded && (
<ul className={styles.mobileSubList}>
{item.children!.map((child: NavChild) => (
<li key={child.path}>
<Link
to={child.path}
className={styles.mobileSubLink}
onClick={onClose}
>
{child.label}
</Link>
</li>
))}
</ul>
)}
</>
) : (
<Link
to={item.path}
className={styles.mobileNavLink}
onClick={onClose}
>
{item.label}
</Link>
)}
</li>
);
})}
</ul>
<div className={styles.mobileDrawerActions}>
<Link to="/search" className={styles.searchBtn} onClick={onClose} aria-label="搜索">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" width="26" height="26" viewBox="0 0 26 26"><g><path d="M16.739973374999998,17.76985499081421C15.429279375,18.85114099081421,13.749150275,19.50064899081421,11.917317875,19.50064899081421C7.729150975,19.50064899081421,4.333984375,16.105480990814208,4.333984375,11.91731549081421C4.333984375,7.729148590814209,7.729150975,4.333981990814209,11.917317875,4.333981990814209C16.105485375,4.333981990814209,19.500651375,7.729148590814209,19.500651375,11.91731549081421C19.500651375,13.80559489081421,18.810497375,15.532677990814209,17.668674375000002,16.86007799081421L21.741985375,20.93338899081421C21.953518375,21.144921990814208,21.953518375,21.48788599081421,21.741983375,21.69941999081421L21.588777375,21.852625990814207C21.377243375,22.06416099081421,21.034278375,22.06416099081421,20.822744375,21.852625990814207L16.739973374999998,17.76985499081421ZM18.199479375,11.916142890814209C18.199479375,15.38633899081421,15.386343375,18.199475990814207,11.916145775,18.199475990814207C8.445947675,18.199475990814207,5.632812475,15.38633899081421,5.632812475,11.916142890814209C5.632812475,8.44594479081421,8.445947675,5.632810090814209,11.916145775,5.632810090814209C15.386343375,5.632810090814209,18.199479375,8.44594479081421,18.199479375,11.916142890814209Z" fillRule="evenodd" fill="#222222" fillOpacity="1" /></g></svg>
</Link>
<div style={{ display: 'flex', gap: '0.75rem' }}>
{langMenuItems.map((item: SupportLocale) => (
<button
key={item.key}
className={styles.langTrigger}
style={{
color: '#222',
fontWeight: locale === item.key ? 700 : 400,
textDecoration: locale === item.key ? 'underline' : 'none',
}}
onClick={() => setLocale(item.key)}
>
{item.label}
</button>
))}
</div>
</div>
</div>
);
}
function DropPanel({ items, left, onLinkClick, show }: { function DropPanel({ items, left, onLinkClick, show }: {
items: NavChild[]; items: NavChild[];
left: number, left: number,

45
src/pages/About/About.module.css
View File

@ -73,3 +73,48 @@
text-decoration: underline; text-decoration: underline;
} }
@media (max-width: 48rem) {
.section {
min-height: auto;
padding: 6rem 0;
}
.content {
margin: 0 5%;
max-width: none;
}
.contentRight {
margin-right: 5%;
}
.title {
font-size: 1.75rem;
}
.desc {
font-size: 1rem;
margin-bottom: 2rem;
}
.textBox {
padding: 1.5rem;
}
}
@media (max-width: 30rem) {
.content {
margin: 0 1.25rem;
}
.contentRight {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
}

26
src/pages/About/Founder.module.css
View File

@ -226,6 +226,30 @@
padding-right: 0; padding-right: 0;
} }
.timelineWrapper { .section3Content {
grid-template-columns: 1fr;
}
.founderIntroduction h2 {
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.section4Section .section4Title {
font-size: 1.75rem;
}
}
@media (max-width: 30rem) {
.section {
padding: 1.5rem 0.75rem;
}
.sectionFounder {
padding: 1.5rem 0.75rem;
}
.images .imageOverlay {
padding: 1.5rem;
} }
} }

68
src/pages/About/History.module.css
View File

@ -185,9 +185,77 @@
@media (max-width: 48rem) { @media (max-width: 48rem) {
.section { .section {
padding: 2rem 1rem; padding: 2rem 1rem;
min-height: auto;
} }
.headRow { .headRow {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.timelineLine {
left: 1.875rem;
}
.timelineItem {
flex-direction: row !important;
}
.timelineItem .side:first-child {
display: none;
}
.timelineItem .side:last-child {
text-align: left !important;
align-items: flex-start !important;
}
.timelineItem.left .desc {
text-align: left;
margin-left: 1.25rem;
margin-right: 0;
list-style: disc;
}
.timelineItem.left li {
justify-content: flex-start;
}
.timelineItem.left li.desc::after {
display: none;
}
.dotWrapper {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
}
.dotWrapper.selected {
width: 2.5rem;
height: 2.5rem;
}
.dotWrapper.selected::before {
width: 2.5rem;
height: 2.5rem;
}
.year {
font-size: 1.75rem;
}
.desc {
font-size: 1rem;
max-width: none;
}
}
@media (max-width: 30rem) {
.section {
padding: 1.5rem 0.75rem;
}
.year {
font-size: 1.5rem;
}
} }

90
src/pages/Business/CommercialGroup.module.css
View File

@ -70,18 +70,17 @@
.twoColImage { .twoColImage {
min-width: 0; min-width: 0;
background: #f0f2f4; background: transparent;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
aspect-ratio: 4/3; background-size: cover;
width: 100%;
aspect-ratio: 962 / 800;
background-position: center;
background-repeat: no-repeat;
} }
.twoColImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.twoColImage .placeholder { .twoColImage .placeholder {
width: 100%; width: 100%;
@ -90,7 +89,7 @@
} }
.twoColText { .twoColText {
padding: 6.25rem 16.25rem 9.375rem 5rem; padding: 6.25rem 16.25rem 0 5rem;
background: #F0F2F4; background: #F0F2F4;
} }
@ -356,4 +355,79 @@
.featureBlockTitle { .featureBlockTitle {
font-size: 1.875rem; font-size: 1.875rem;
} }
.twoColSectionTabs {
margin: 0 1rem;
flex-wrap: wrap;
height: auto;
gap: 0.5rem;
}
.twoColSectionContent {
grid-template-columns: 1fr;
}
.featuresHero {
height: auto;
padding: 4rem 1rem;
}
.featuresHeroContent {
margin-top: 4rem;
height: auto;
}
.featuresHeroTabRow {
flex-wrap: wrap;
gap: 0;
}
.featuresHeroTab {
font-size: 1rem;
height: 3rem;
}
.propertyServices {
height: auto;
padding: 6rem 1rem;
}
.propertyServicesTitle {
font-size: 1.75rem;
text-align: center;
}
.propertyServicesBtn {
margin-top: 3rem;
}
}
@media (max-width: 30rem) {
.overview {
padding: 1.5rem 0.75rem;
}
.overviewTitle {
font-size: 1.5rem;
}
.twoColSectionTabs {
margin: 0 0.75rem;
}
.twoColSectionTab {
font-size: 1.125rem;
}
.featuresHero {
padding: 3rem 0.75rem;
}
.featuresHeroContentTitle {
font-size: 1.25rem;
}
.propertyServices {
padding: 4rem 0.75rem;
}
} }

24
src/pages/Business/CommercialGroup.tsx
View File

@ -103,17 +103,13 @@ export default function BusinessCommercialGroup() {
> >
<TopTabs className={styles.twoColSectionTabs} data={section2Data} activeIndex={activeTabIndex} setActiveIndex={setActiveTabIndex} /> <TopTabs className={styles.twoColSectionTabs} data={section2Data} activeIndex={activeTabIndex} setActiveIndex={setActiveTabIndex} />
<div className={styles.twoColSectionContent}> <div className={styles.twoColSectionContent}>
<div className={styles.twoColImage}> <ScrollReveal preset="slideRight" duration={1}>
{( <div className={styles.twoColImage} style={{
<ScrollReveal preset="slideRight" duration={1}> backgroundImage: `url(${section2Data.tabItems[activeTabIndex]?.sideImage as string})`,
<img }}>
src={section2Data.tabItems[activeTabIndex]?.sideImage as string} </div>
alt="" </ScrollReveal>
style={{ width: "100%", height: "50rem" }}
/>
</ScrollReveal>
)}
</div>
<div className={styles.twoColText}> <div className={styles.twoColText}>
<ScrollReveal preset="slideUp" delay={0.5} > <ScrollReveal preset="slideUp" delay={0.5} >
<p className={styles.twoColDesc} dangerouslySetInnerHTML={{ __html: section2Data.tabItems[activeTabIndex]?.content ?? "" }}></p> <p className={styles.twoColDesc} dangerouslySetInnerHTML={{ __html: section2Data.tabItems[activeTabIndex]?.content ?? "" }}></p>
@ -141,9 +137,9 @@ export default function BusinessCommercialGroup() {
<div className={styles.propertyServicesTitle}>{section4Data?.title}</div> <div className={styles.propertyServicesTitle}>{section4Data?.title}</div>
<p className={styles.propertyServicesSubtitle}>{section4Data?.content}</p> <p className={styles.propertyServicesSubtitle}>{section4Data?.content}</p>
<ScrollReveal preset="slideUp" className={styles.propertyServicesBtn}> <ScrollReveal preset="slideUp" className={styles.propertyServicesBtn}>
<Link to={section4Data?.path ?? "#"} > <Link to={section4Data?.path ?? "#"} >
{viewDetail} {viewDetail}
</Link> </Link>
</ScrollReveal> </ScrollReveal>
</div> </div>
</section> </section>

57
src/pages/Business/CommercialGroupDetail.module.css
View File

@ -93,4 +93,61 @@
width: 50rem; width: 50rem;
height: 31.25rem; height: 31.25rem;
} }
}
@media (max-width: 48rem) {
.twoColSection,
.threeColSection {
padding: 2rem 4rem;
}
.threeColSection {
height: auto;
min-height: 0;
}
.threeColTabs {
gap: 2rem;
flex-wrap: wrap;
font-size: 1.25rem;
}
.threeColContent {
flex-direction: column;
padding: 4rem 0;
gap: 2.5rem;
}
.threeColContentRight img {
width: 100%;
max-width: 50rem;
height: auto;
}
.threeColContentLeft .threeColContentLeftTitleMain {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (max-width: 30rem) {
.twoColSection,
.threeColSection {
padding: 1.25rem;
}
.threeColTabs {
gap: 1rem;
font-size: 1.125rem;
}
.threeColContent {
padding: 2rem 0;
gap: 1.5rem;
}
.threeColContentLeft .threeColContentLeftTitleMain {
font-size: 1.5rem;
line-height: 1.875rem;
}
} }

82
src/pages/Business/InvestGroup.module.css
View File

@ -125,4 +125,86 @@
text-transform: none; text-transform: none;
} }
} }
}
@media (max-width: 48rem) {
.investGroup {
height: auto;
padding: 4rem 2rem;
}
.investGroup .investGroupContent .investGroupContentItems {
flex-direction: column;
height: auto;
gap: 2rem;
.investGroupContentItem {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding: 2rem 0 !important;
}
.investGroupContentItem:last-child {
border-bottom: none;
}
}
.equityInvestment {
padding: 4rem 2rem;
}
.equityInvestment .equityInvestmentItems {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.equityInvestment .equityInvestmentItems .equityInvestmentItem .equityInvestmentItemLogo {
width: 100%;
height: auto;
}
.industryFoster {
height: auto;
padding: 4rem 2rem;
}
.industryFoster .industryFosterMask {
width: 100%;
min-height: auto;
padding: 2rem;
}
.industryFoster .industryFosterMask .industryFosterMaskTitle {
font-size: 1.75rem;
}
}
@media (max-width: 30rem) {
.investGroup {
padding: 3rem 1.25rem;
}
.equityInvestment {
padding: 3rem 1.25rem;
}
.equityInvestment .equityInvestmentItems {
grid-template-columns: repeat(2, 1fr);
}
.industryFoster {
padding: 3rem 1.25rem;
}
.industryFoster .industryFosterMask {
padding: 1.5rem;
}
.industryFoster .industryFosterMask .industryFosterMaskTitle {
font-size: 1.5rem;
}
.investGroup .investGroupContent .investGroupContentItems .investGroupContentItem .investGroupContentItemTitle {
font-size: 1.75rem;
}
} }

14
src/pages/Business/RuijingGroup.module.css
View File

@ -4,4 +4,18 @@
.businessFeatureContent { .businessFeatureContent {
color: #fff; color: #fff;
}
@media (max-width: 48rem) {
.RuijingGroup {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (max-width: 30rem) {
.RuijingGroup {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
} }

106
src/pages/Home/Home.module.css
View File

@ -9,12 +9,10 @@
.heroOverlay { .heroOverlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(to right,
to right, rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 60%,
rgba(0, 0, 0, 0.2) 60%, transparent 100%);
transparent 100%
);
} }
.heroContent { .heroContent {
@ -53,12 +51,10 @@
.commercialOverlay { .commercialOverlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(to right,
to right, rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 70%,
rgba(0, 0, 0, 0.15) 70%, transparent 100%);
transparent 100%
);
} }
.commercialContent { .commercialContent {
@ -81,9 +77,11 @@
padding-left: 1rem; padding-left: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
.commercialItem:last-child { .commercialItem:last-child {
border-right: .0625rem solid #fff; border-right: .0625rem solid #fff;
} }
.commercialTitle { .commercialTitle {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
@ -202,6 +200,67 @@
height: auto; height: auto;
min-height: 6rem; min-height: 6rem;
} }
.commercial {
height: auto;
min-height: auto;
padding: 4rem 0 2rem;
}
.commercialItem {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.commercialItem:last-child {
border-right: none;
}
.newsFeaturedImgWrap {
width: 100%;
}
.newsFeaturedCaption {
font-size: 1.125rem;
left: 1rem;
width: 85%;
}
}
@media (max-width: 30rem) {
.heroContent {
padding-top: 14rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.heroTitle {
font-size: 1.75rem;
}
.heroSubtitle {
font-size: 1rem;
}
.cards {
padding: 2.5rem 1.25rem;
}
.card {
aspect-ratio: 4 / 3;
}
.cardTitle {
font-size: 1.25rem;
}
.newsItemSnippet {
height: auto;
}
.newsItem {
min-height: auto;
}
} }
.cardBg { .cardBg {
@ -217,12 +276,10 @@
.cardOverlay { .cardOverlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(to top,
to top, rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0.3) 50%, transparent 100%);
transparent 100%
);
} }
.cardContent { .cardContent {
@ -252,10 +309,11 @@
/* News */ /* News */
.newsGrid { .newsGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem; gap: 1.25rem;
align-items: start; align-items: start;
display: flex;
width: 72%;
margin: 0 auto;
} }
.newsFeatured { .newsFeatured {
@ -319,9 +377,11 @@
color: #14355C; color: #14355C;
font-weight: 600; font-weight: 600;
} }
.newsItemSnippet { .newsItemSnippet {
color: #333; color: #333;
} }
.newsItemArrowIcon { .newsItemArrowIcon {
color: #14355C; color: #14355C;
} }
@ -369,8 +429,4 @@
.newsItemDate { .newsItemDate {
font-size: 0.875rem; font-size: 0.875rem;
color: #999; color: #999;
} }

34
src/pages/Join/Campus.module.css
View File

@ -208,4 +208,38 @@
.selectDownIcon { .selectDownIcon {
margin-left: .3125rem; margin-left: .3125rem;
color: #999999; color: #999999;
}
@media (max-width: 48rem) {
.campusRow {
flex-direction: column;
gap: 2rem;
}
.campusColRight .jobList {
width: 100%;
max-width: 100%;
padding-bottom: 3rem;
}
.searchInput,
.selectFormItemBox,
.resetButton {
width: 100%;
max-width: 21.25rem;
}
}
@media (max-width: 30rem) {
.searchInput,
.selectFormItemBox,
.resetButton {
max-width: none;
}
.jobItemTitleRow {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
} }

31
src/pages/Join/Culture.module.css
View File

@ -100,4 +100,35 @@
line-height: 1.625rem; line-height: 1.625rem;
} }
} }
}
@media (max-width: 48rem) {
.cultureItems {
grid-template-columns: repeat(2, 1fr);
}
.valuesItems {
flex-direction: column;
gap: 2rem;
margin: 0 2rem;
}
}
@media (max-width: 30rem) {
.cultureItems {
grid-template-columns: 1fr;
}
.valuesItems {
margin: 0 1.25rem;
}
.cultureItem .cultureItemInner {
padding: 1.25rem;
}
.cultureItem .cultureItemTitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
} }

42
src/pages/News/Media.module.css
View File

@ -36,4 +36,46 @@
white-space: pre-line; white-space: pre-line;
} }
} }
}
@media (max-width: 48rem) {
.mediaItems {
grid-template-columns: 1fr;
height: auto;
}
.mediaItem:first-child {
border-right: none;
border-bottom: .0625rem solid rgba(255, 255, 255, 0.5);
padding-right: 0;
padding-bottom: 2rem;
}
.mediaItem:last-child {
padding-left: 0;
padding-top: 2rem;
}
.mediaItem .mediaItemTitle {
font-size: 1.875rem;
line-height: 2.25rem;
}
.mediaItem .mediaItemContent {
font-size: 1.25rem;
line-height: 2rem;
}
}
@media (max-width: 30rem) {
.mediaItem .mediaItemTitle {
font-size: 1.5rem;
line-height: 1.875rem;
margin-bottom: 1.5rem;
}
.mediaItem .mediaItemContent {
font-size: 1.125rem;
line-height: 1.75rem;
}
} }

34
src/pages/News/NewsPublic.module.css
View File

@ -1,5 +1,6 @@
.searchInputRow { .searchInputRow {
width: 72%;
margin: 0 auto;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -40,11 +41,13 @@
.newList { .newList {
/* 3列 */ /* 3列 */
min-height: 12.5rem; min-height: 12.5rem;
margin: 0 auto;
margin-top: 6.25rem; margin-top: 6.25rem;
margin-bottom: 6.25rem; margin-bottom: 6.25rem;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1.375rem 1.875rem; gap: 1.375rem 1.875rem;
width: 72%;
.newItem { .newItem {
/* height: 31.25rem; /* height: 31.25rem;
@ -113,4 +116,33 @@
} }
} }
} }
}
@media (max-width: 48rem) {
.searchInputRow {
justify-content: stretch;
}
.searchInputRow .searchInput {
width: 100%;
max-width: 100%;
}
.newList {
grid-template-columns: repeat(2, 1fr);
margin-top: 3rem;
margin-bottom: 3rem;
gap: 1rem 1.25rem;
}
}
@media (max-width: 30rem) {
.newList {
grid-template-columns: 1fr;
}
.newItem .newItemContent .newItemTitle {
font-size: 1rem;
line-height: 1.5rem;
}
} }

17
src/pages/Others/AuditReport.module.css
View File

@ -39,4 +39,21 @@
} }
}
@media (max-width: 48rem) {
.auditReport {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 30rem) {
.auditReport {
gap: 1.25rem;
}
.auditReportQrCode .auditReportQrCodeTitle {
font-size: 1.25rem;
}
} }

43
src/pages/Others/Search.module.css
View File

@ -108,4 +108,47 @@
overflow: hidden; overflow: hidden;
} }
} }
}
@media (max-width: 48rem) {
.searchRow {
height: auto;
min-height: 12rem;
padding: 2rem 1rem;
}
.searchRow .searchRowInner {
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
width: 100%;
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.searchRowInner .searchInputWrapper .searchInput {
width: 100%;
max-width: 100%;
}
.searchRowInner .searchBtn {
width: 100%;
}
.searchItemList {
margin-bottom: 4rem;
gap: 2rem;
}
}
@media (max-width: 30rem) {
.searchRowInner .searchRowTitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
.searchItem .searchItemTitleRow .searchItemTitle {
font-size: 1.25rem;
}
} }

43
src/pages/Others/SiteMap.module.css
View File

@ -103,4 +103,47 @@
} }
} }
} }
}
@media (max-width: 48rem) {
.siteMap .siteMapItems {
padding: 0 2rem;
display: block;
}
.siteMap .siteMapItems .siteMapItem {
display: block;
}
.siteMap .siteMapItems .siteMapItem .siteMapItemLabel {
padding-left: 0;
}
.siteMap .siteMapItems .siteMapItem .siteMapItemChildren {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.25rem 0;
grid-column: auto;
grid-template-columns: none;
}
.siteMap .siteMapItems .siteMapItem .siteMapItemChild:nth-child(1),
.siteMap .siteMapItems .siteMapItem .siteMapItemChild:nth-child(2),
.siteMap .siteMapItems .siteMapItem .siteMapItemChild:nth-child(3),
.siteMap .siteMapItems .siteMapItem .siteMapItemChild:nth-child(4),
.siteMap .siteMapItems .siteMapItem .siteMapItemChild:nth-child(5) {
grid-column: auto;
}
}
@media (max-width: 30rem) {
.siteMap .siteMapItems {
padding: 0 1.25rem;
}
.siteMap .siteMapTitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
} }

35
src/pages/Social/Foundation.module.css
View File

@ -74,4 +74,39 @@
object-fit: cover; object-fit: cover;
} }
} }
}
@media (max-width: 48rem) {
.publicWelfareDataItems {
grid-template-columns: 1fr;
}
.informationPublicDataItems {
padding: 0 2rem 4rem;
grid-template-columns: repeat(2, 1fr);
}
.partnerItems {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
justify-items: center;
}
.partnerItems .partnerItem {
width: 100%;
max-width: 15.625rem;
}
}
@media (max-width: 30rem) {
.informationPublicDataItems {
padding: 0 1.25rem 3rem;
grid-template-columns: 1fr;
font-size: 1.125rem;
line-height: 1.75rem;
}
.partnerItems {
grid-template-columns: 1fr;
}
} }

40
src/pages/Social/Sustainability.module.css
View File

@ -174,4 +174,44 @@
background: #14355C; background: #14355C;
color: #fff; color: #fff;
} }
}
@media (max-width: 48rem) {
.socialResponsibilityCaseDataContent {
margin-top: 0;
margin-bottom: 3rem;
}
.socialResponsibilityCaseDataItem:nth-child(n) {
flex-basis: 100%;
max-width: 100%;
}
.socialResponsibilityCaseDataItem .socialResponsibilityCaseDataItemContentInner {
padding: 2rem;
}
.socialResponsibilityReportData {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.socialResponsibilityReportItemMore {
margin-top: 3rem;
}
}
@media (max-width: 30rem) {
.socialResponsibilityReportData {
grid-template-columns: 1fr;
}
.socialResponsibilityCaseDataItem .socialResponsibilityCaseDataItemTitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
.socialResponsibilityCaseDataItem .socialResponsibilityCaseDataItemContentInner {
padding: 1.25rem;
}
} }