From ee3715b0d3a3c68fbf49b027d91036af63f06d06 Mon Sep 17 00:00:00 2001 From: zhangjianjun Date: Thu, 26 Mar 2026 18:36:37 +0800 Subject: [PATCH] ud --- src/components/Banner.module.css | 68 +++++++ src/components/ScreenOpen/index.module.css | 12 ++ .../layout/BottomTabsSection/index.module.css | 54 ++++- .../layout/JobPage/index.module.css | 33 +++ .../layout/ParagraphSection/index.module.css | 37 ++++ .../layout/RowAccordion/index.module.css | 82 ++++++++ .../layout/Section/index.module.css | 38 ++++ src/components/layout/Section/index.tsx | 44 ++-- .../layout/SectionTitle/index.module.css | 2 +- .../layout/SwiperCardSection/index.module.css | 33 +++ .../layout/TopTabsSection/index.module.css | 55 ++++- src/index.css | 4 +- src/layouts/Footer.module.css | 46 +++++ src/layouts/Footer.tsx | 2 +- src/layouts/Header.module.css | 191 ++++++++++++++++-- src/layouts/Header.tsx | 124 +++++++++++- src/pages/About/About.module.css | 45 +++++ src/pages/About/Founder.module.css | 26 ++- src/pages/About/History.module.css | 68 +++++++ src/pages/Business/CommercialGroup.module.css | 90 ++++++++- src/pages/Business/CommercialGroup.tsx | 24 +-- .../Business/CommercialGroupDetail.module.css | 57 ++++++ src/pages/Business/InvestGroup.module.css | 82 ++++++++ src/pages/Business/RuijingGroup.module.css | 14 ++ src/pages/Home/Home.module.css | 106 +++++++--- src/pages/Join/Campus.module.css | 34 ++++ src/pages/Join/Culture.module.css | 31 +++ src/pages/News/Media.module.css | 42 ++++ src/pages/News/NewsPublic.module.css | 34 +++- src/pages/Others/AuditReport.module.css | 17 ++ src/pages/Others/Search.module.css | 43 ++++ src/pages/Others/SiteMap.module.css | 43 ++++ src/pages/Social/Foundation.module.css | 35 ++++ src/pages/Social/Sustainability.module.css | 40 ++++ 34 files changed, 1555 insertions(+), 101 deletions(-) create mode 100644 src/components/layout/Section/index.module.css diff --git a/src/components/Banner.module.css b/src/components/Banner.module.css index ad1be89..d655dd2 100644 --- a/src/components/Banner.module.css +++ b/src/components/Banner.module.css @@ -107,3 +107,71 @@ 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; + } +} + diff --git a/src/components/ScreenOpen/index.module.css b/src/components/ScreenOpen/index.module.css index 688ce9e..d61ff99 100644 --- a/src/components/ScreenOpen/index.module.css +++ b/src/components/ScreenOpen/index.module.css @@ -34,4 +34,16 @@ } } +} + +@media (max-width: 48rem) { + .screenOpen .screenOpenContent img { + width: 4rem; + } +} + +@media (max-width: 30rem) { + .screenOpen .screenOpenContent img { + width: 3rem; + } } \ No newline at end of file diff --git a/src/components/layout/BottomTabsSection/index.module.css b/src/components/layout/BottomTabsSection/index.module.css index 0fa5539..bf2c083 100644 --- a/src/components/layout/BottomTabsSection/index.module.css +++ b/src/components/layout/BottomTabsSection/index.module.css @@ -96,4 +96,56 @@ line-height: 3.75rem; height: 3.75rem; } - } \ No newline at end of file + } + +@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; + } +} \ No newline at end of file diff --git a/src/components/layout/JobPage/index.module.css b/src/components/layout/JobPage/index.module.css index febaeae..cd8f850 100644 --- a/src/components/layout/JobPage/index.module.css +++ b/src/components/layout/JobPage/index.module.css @@ -67,4 +67,37 @@ text-transform: none; 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; + } } \ No newline at end of file diff --git a/src/components/layout/ParagraphSection/index.module.css b/src/components/layout/ParagraphSection/index.module.css index 02789c6..dc9894a 100644 --- a/src/components/layout/ParagraphSection/index.module.css +++ b/src/components/layout/ParagraphSection/index.module.css @@ -37,4 +37,41 @@ background: #F0F2F4; 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; + } } \ No newline at end of file diff --git a/src/components/layout/RowAccordion/index.module.css b/src/components/layout/RowAccordion/index.module.css index f422344..820bb68 100644 --- a/src/components/layout/RowAccordion/index.module.css +++ b/src/components/layout/RowAccordion/index.module.css @@ -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; + } + } } \ No newline at end of file diff --git a/src/components/layout/Section/index.module.css b/src/components/layout/Section/index.module.css new file mode 100644 index 0000000..61b90ec --- /dev/null +++ b/src/components/layout/Section/index.module.css @@ -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; + } +} diff --git a/src/components/layout/Section/index.tsx b/src/components/layout/Section/index.tsx index beb9420..a78c486 100644 --- a/src/components/layout/Section/index.tsx +++ b/src/components/layout/Section/index.tsx @@ -1,4 +1,5 @@ import SectionTitle from "../SectionTitle"; +import styles from "./index.module.css"; type Props = { title?: string; @@ -11,32 +12,27 @@ type Props = { className?: string; } -export default function Section({ - title, subtitle, height, titleColor, children, +export default function Section({ + title, subtitle, height, titleColor, children, background, maskBackground, className }: Props) { return ( -
-
-
- {title && } - {children} +
+
+
+
+ {title && } + {children} +
) -} \ No newline at end of file +} diff --git a/src/components/layout/SectionTitle/index.module.css b/src/components/layout/SectionTitle/index.module.css index 2f44bb6..e0c406a 100644 --- a/src/components/layout/SectionTitle/index.module.css +++ b/src/components/layout/SectionTitle/index.module.css @@ -1,5 +1,5 @@ .sectionTitle { - font-weight: 700; + font-weight: 900; font-size: 2.5rem; line-height: 3.125rem; text-align: center; diff --git a/src/components/layout/SwiperCardSection/index.module.css b/src/components/layout/SwiperCardSection/index.module.css index 4c8dad8..3f812be 100644 --- a/src/components/layout/SwiperCardSection/index.module.css +++ b/src/components/layout/SwiperCardSection/index.module.css @@ -120,4 +120,37 @@ 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; + } } \ No newline at end of file diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css index 1717f20..54abd29 100644 --- a/src/components/layout/TopTabsSection/index.module.css +++ b/src/components/layout/TopTabsSection/index.module.css @@ -73,9 +73,9 @@ .topTabsBottomLine { position: absolute; - bottom: 0; + bottom: -1px; height: .125rem; - background: #000000; + background: #14355C; transition: left 0.25s ease, width 0.25s ease; } @@ -85,6 +85,7 @@ flex-shrink: 0; cursor: pointer; color: #222222; + font-weight: 500; } .topTabsTabItem.active { @@ -178,4 +179,54 @@ text-align: left; font-style: normal; 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; + } } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 9afc74d..9cbe560 100644 --- a/src/index.css +++ b/src/index.css @@ -29,13 +29,13 @@ html { @media screen and (max-width: 768px) { html { - --design-rem-base: 12px; + --design-rem-base: 10px; } } @media screen and (max-width: 480px) { html { - --design-rem-base: 12px; + --design-rem-base: 8px; } } diff --git a/src/layouts/Footer.module.css b/src/layouts/Footer.module.css index d7eb07c..a429431 100644 --- a/src/layouts/Footer.module.css +++ b/src/layouts/Footer.module.css @@ -89,6 +89,12 @@ font-size: .875rem; } +.footerLowerCopyright { + display: flex; + flex-direction: row; + gap: 3.125rem; +} + .footerLowerLinks { display: flex; gap: 1.25rem; @@ -142,4 +148,44 @@ flex-direction: column; 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; + } } diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx index 6f247a4..adb73c9 100644 --- a/src/layouts/Footer.tsx +++ b/src/layouts/Footer.tsx @@ -79,7 +79,7 @@ function FooterLower({ return (
-
+
{`${copyright} | ${companyName}`} {icpNumber}
diff --git a/src/layouts/Header.module.css b/src/layouts/Header.module.css index 39c0ec0..0631ad5 100644 --- a/src/layouts/Header.module.css +++ b/src/layouts/Header.module.css @@ -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) { .header { height: 4rem; @@ -297,28 +463,17 @@ width: calc(100% - 2rem); } - .navItem { - padding: 0 .5rem; + .nav, + .actions, + .crossYline { + display: none; } - .headerRight { - gap: .5rem; - } - - .nav { - margin-right: .5rem; - } - - .actions { - margin-left: .5rem; + .hamburger { + display: flex; } .dropPanel { - height: 0; - /* padding: 1rem; */ - } - - .dropPanelLink { - line-height: 2.5rem; + display: none; } } \ No newline at end of file diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 990b9a2..26af86c 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -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 (
logo
@@ -141,6 +156,14 @@ export default function Header() {
+ {/* Mobile hamburger */} +
@@ -153,9 +176,104 @@ export default function Header() { }} show={showDropPanel && activePanelItem.length > 0} /> + + {/* Mobile drawer */} + setMobileMenuOpen(false)} + /> ); } +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(null); + + const toggleExpand = (path: string) => { + setExpandedNav((prev) => (prev === path ? null : path)); + }; + + return ( +
+
    + {navItems.map((item: NavItem) => { + const hasChildren = item.children && item.children.length > 0; + const isExpanded = expandedNav === item.path; + return ( +
  • + {hasChildren ? ( + <> +
    toggleExpand(item.path)} + > + {item.label} + ▶ +
    + {isExpanded && ( +
      + {item.children!.map((child: NavChild) => ( +
    • + + {child.label} + +
      • + ))} +
    + )} + + ) : ( + + {item.label} + + )} +
    • + ); + })} +
+
+ + + +
+ {langMenuItems.map((item: SupportLocale) => ( + + ))} +
+
+
+ ); +} + function DropPanel({ items, left, onLinkClick, show }: { items: NavChild[]; left: number, diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css index dfbab10..1a4137a 100644 --- a/src/pages/About/About.module.css +++ b/src/pages/About/About.module.css @@ -73,3 +73,48 @@ 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; + } +} + diff --git a/src/pages/About/Founder.module.css b/src/pages/About/Founder.module.css index 293935d..e3d2ad1 100644 --- a/src/pages/About/Founder.module.css +++ b/src/pages/About/Founder.module.css @@ -226,6 +226,30 @@ 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; } } \ No newline at end of file diff --git a/src/pages/About/History.module.css b/src/pages/About/History.module.css index 7e2cd56..ca68389 100644 --- a/src/pages/About/History.module.css +++ b/src/pages/About/History.module.css @@ -185,9 +185,77 @@ @media (max-width: 48rem) { .section { padding: 2rem 1rem; + min-height: auto; } .headRow { 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; + } } diff --git a/src/pages/Business/CommercialGroup.module.css b/src/pages/Business/CommercialGroup.module.css index 69aea49..dacb674 100644 --- a/src/pages/Business/CommercialGroup.module.css +++ b/src/pages/Business/CommercialGroup.module.css @@ -70,18 +70,17 @@ .twoColImage { min-width: 0; - background: #f0f2f4; + background: transparent; display: flex; align-items: 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 { width: 100%; @@ -90,7 +89,7 @@ } .twoColText { - padding: 6.25rem 16.25rem 9.375rem 5rem; + padding: 6.25rem 16.25rem 0 5rem; background: #F0F2F4; } @@ -356,4 +355,79 @@ .featureBlockTitle { 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; + } } \ No newline at end of file diff --git a/src/pages/Business/CommercialGroup.tsx b/src/pages/Business/CommercialGroup.tsx index b0c57d9..813f04b 100644 --- a/src/pages/Business/CommercialGroup.tsx +++ b/src/pages/Business/CommercialGroup.tsx @@ -103,17 +103,13 @@ export default function BusinessCommercialGroup() { >
-
- {( - - - - )} -
+ +
+
+ +

@@ -141,9 +137,9 @@ export default function BusinessCommercialGroup() {
{section4Data?.title}

{section4Data?.content}

- - {viewDetail} - + + {viewDetail} +
diff --git a/src/pages/Business/CommercialGroupDetail.module.css b/src/pages/Business/CommercialGroupDetail.module.css index 5037b1b..0d16491 100644 --- a/src/pages/Business/CommercialGroupDetail.module.css +++ b/src/pages/Business/CommercialGroupDetail.module.css @@ -93,4 +93,61 @@ width: 50rem; 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; + } } \ No newline at end of file diff --git a/src/pages/Business/InvestGroup.module.css b/src/pages/Business/InvestGroup.module.css index c52832a..4167fb9 100644 --- a/src/pages/Business/InvestGroup.module.css +++ b/src/pages/Business/InvestGroup.module.css @@ -125,4 +125,86 @@ 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; + } } \ No newline at end of file diff --git a/src/pages/Business/RuijingGroup.module.css b/src/pages/Business/RuijingGroup.module.css index 5f50719..7886026 100644 --- a/src/pages/Business/RuijingGroup.module.css +++ b/src/pages/Business/RuijingGroup.module.css @@ -4,4 +4,18 @@ .businessFeatureContent { 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; + } } \ No newline at end of file diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css index 324a326..8c15082 100644 --- a/src/pages/Home/Home.module.css +++ b/src/pages/Home/Home.module.css @@ -9,12 +9,10 @@ .heroOverlay { position: absolute; inset: 0; - background: linear-gradient( - to right, - rgba(0, 0, 0, 0.5) 0%, - rgba(0, 0, 0, 0.2) 60%, - transparent 100% - ); + background: linear-gradient(to right, + rgba(0, 0, 0, 0.5) 0%, + rgba(0, 0, 0, 0.2) 60%, + transparent 100%); } .heroContent { @@ -53,12 +51,10 @@ .commercialOverlay { position: absolute; inset: 0; - background: linear-gradient( - to right, - rgba(0, 0, 0, 0.55) 0%, - rgba(0, 0, 0, 0.15) 70%, - transparent 100% - ); + background: linear-gradient(to right, + rgba(0, 0, 0, 0.55) 0%, + rgba(0, 0, 0, 0.15) 70%, + transparent 100%); } .commercialContent { @@ -81,9 +77,11 @@ padding-left: 1rem; box-sizing: border-box; } + .commercialItem:last-child { border-right: .0625rem solid #fff; } + .commercialTitle { font-size: 1.25rem; font-weight: 700; @@ -202,6 +200,67 @@ height: auto; 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 { @@ -217,12 +276,10 @@ .cardOverlay { position: absolute; inset: 0; - background: linear-gradient( - to top, - rgba(0, 0, 0, 0.75) 0%, - rgba(0, 0, 0, 0.3) 50%, - transparent 100% - ); + background: linear-gradient(to top, + rgba(0, 0, 0, 0.75) 0%, + rgba(0, 0, 0, 0.3) 50%, + transparent 100%); } .cardContent { @@ -252,10 +309,11 @@ /* News */ .newsGrid { - display: grid; - grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; + display: flex; + width: 72%; + margin: 0 auto; } .newsFeatured { @@ -319,9 +377,11 @@ color: #14355C; font-weight: 600; } + .newsItemSnippet { color: #333; } + .newsItemArrowIcon { color: #14355C; } @@ -369,8 +429,4 @@ .newsItemDate { font-size: 0.875rem; color: #999; -} - - - - +} \ No newline at end of file diff --git a/src/pages/Join/Campus.module.css b/src/pages/Join/Campus.module.css index a0d2435..331d48a 100644 --- a/src/pages/Join/Campus.module.css +++ b/src/pages/Join/Campus.module.css @@ -208,4 +208,38 @@ .selectDownIcon { margin-left: .3125rem; 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; + } } \ No newline at end of file diff --git a/src/pages/Join/Culture.module.css b/src/pages/Join/Culture.module.css index 568b3e6..40f31e5 100644 --- a/src/pages/Join/Culture.module.css +++ b/src/pages/Join/Culture.module.css @@ -100,4 +100,35 @@ 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; + } } \ No newline at end of file diff --git a/src/pages/News/Media.module.css b/src/pages/News/Media.module.css index 4550fe8..b9a5eec 100644 --- a/src/pages/News/Media.module.css +++ b/src/pages/News/Media.module.css @@ -36,4 +36,46 @@ 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; + } } \ No newline at end of file diff --git a/src/pages/News/NewsPublic.module.css b/src/pages/News/NewsPublic.module.css index 5a74ae4..808c0e7 100644 --- a/src/pages/News/NewsPublic.module.css +++ b/src/pages/News/NewsPublic.module.css @@ -1,5 +1,6 @@ .searchInputRow { - + width: 72%; + margin: 0 auto; display: flex; justify-content: flex-end; @@ -40,11 +41,13 @@ .newList { /* 3列 */ min-height: 12.5rem; + margin: 0 auto; margin-top: 6.25rem; margin-bottom: 6.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.375rem 1.875rem; + width: 72%; .newItem { /* 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; + } } \ No newline at end of file diff --git a/src/pages/Others/AuditReport.module.css b/src/pages/Others/AuditReport.module.css index 39145bb..c5294bd 100644 --- a/src/pages/Others/AuditReport.module.css +++ b/src/pages/Others/AuditReport.module.css @@ -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; + } } \ No newline at end of file diff --git a/src/pages/Others/Search.module.css b/src/pages/Others/Search.module.css index b1cdff9..dec8db7 100644 --- a/src/pages/Others/Search.module.css +++ b/src/pages/Others/Search.module.css @@ -108,4 +108,47 @@ 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; + } } \ No newline at end of file diff --git a/src/pages/Others/SiteMap.module.css b/src/pages/Others/SiteMap.module.css index fc0aefe..1677eb1 100644 --- a/src/pages/Others/SiteMap.module.css +++ b/src/pages/Others/SiteMap.module.css @@ -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; + } } \ No newline at end of file diff --git a/src/pages/Social/Foundation.module.css b/src/pages/Social/Foundation.module.css index 122c1ed..fc4a2d2 100644 --- a/src/pages/Social/Foundation.module.css +++ b/src/pages/Social/Foundation.module.css @@ -74,4 +74,39 @@ 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; + } } \ No newline at end of file diff --git a/src/pages/Social/Sustainability.module.css b/src/pages/Social/Sustainability.module.css index 2510554..110d07d 100644 --- a/src/pages/Social/Sustainability.module.css +++ b/src/pages/Social/Sustainability.module.css @@ -174,4 +174,44 @@ background: #14355C; 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; + } } \ No newline at end of file