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-25 15:54:53 +08:00
parent 4d1861373a
commit 56bfd84606
50 changed files with 699 additions and 639 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Pagination/index.module.css
View File

@ -2,23 +2,23 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: .5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.item, .item,
.itemActive, .itemActive,
.arrow { .arrow {
width: 45px; width: 2.8125rem;
height: 45px; height: 2.8125rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: .3125rem;
border: 1px solid #e0e0e0; border: .0625rem solid #e0e0e0;
background: #fff; background: #fff;
color: #222; color: #222;
font-size: 14px; font-size: .875rem;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
@ -54,13 +54,13 @@
} }
.ellipsis { .ellipsis {
width: 45px; width: 2.8125rem;
height: 45px; height: 2.8125rem;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 1.25rem;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
line-height: 45px; line-height: 2.8125rem;
letter-spacing: 2px; letter-spacing: .125rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;

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

@ -15,7 +15,7 @@
flex-direction: row; flex-direction: row;
overflow: hidden; overflow: hidden;
img { img {
width: 100px; width: 6.25rem;
} }
} }

18
src/components/SineWaveTimeline/index.module.css
View File

@ -48,18 +48,18 @@
.labelBlock { .labelBlock {
position: absolute; position: absolute;
pointer-events: auto; pointer-events: auto;
min-width: 160px; min-width: 10rem;
max-width: 550px; max-width: 34.375rem;
min-height: 200px; min-height: 12.5rem;
padding: 0 20px; padding: 0 1.25rem;
} }
.labelBlock.top { .labelBlock.top {
margin-bottom: 4px; margin-bottom: .25rem;
} }
.labelBlock.bottom { .labelBlock.bottom {
margin-top: 4px; margin-top: .25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@ -69,20 +69,20 @@
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: #14355c; color: #14355c;
margin-bottom: 6px; margin-bottom: .375rem;
line-height: 1.3; line-height: 1.3;
} }
.labelList { .labelList {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: .875rem;
line-height: 1.6; line-height: 1.6;
color: #333; color: #333;
list-style: disc; list-style: disc;
} }
.labelList li { .labelList li {
margin-bottom: 4px; margin-bottom: .25rem;
list-style: disc; list-style: disc;
margin-left: 1.25em; margin-left: 1.25em;
} }

34
src/components/YearPicker/YearPicker.module.css
View File

@ -8,12 +8,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: .5rem;
padding: 0.5rem 0.6875rem; padding: .5rem .6875rem;
background: #14355C; background: #14355C;
color: #fff; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0.375rem; border-radius: .375rem;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
@ -58,10 +58,10 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem; font-size: .875rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
border-radius: 0.125rem; border-radius: .125rem;
} }
.clear:hover { .clear:hover {
@ -80,23 +80,23 @@
.panel { .panel {
position: absolute; position: absolute;
top: calc(100% + 0.25rem); top: calc(100% + .25rem);
left: 0; left: 0;
z-index: 1050; z-index: 1050;
min-width: 13.75rem; min-width: 13.75rem;
padding: 0.75rem; padding: .75rem;
background: #14355C; background: #14355C;
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0.5rem; border-radius: .5rem;
box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3); box-shadow: 0 .375rem 1rem rgba(0, 0, 0, 0.3);
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.75rem; margin-bottom: .75rem;
padding: 0 0.25rem; padding: 0 .25rem;
} }
.navBtn { .navBtn {
@ -109,9 +109,9 @@
background: transparent; background: transparent;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0.25rem; border-radius: .25rem;
cursor: pointer; cursor: pointer;
font-size: 0.75rem; font-size: .75rem;
} }
.navBtn:hover:not(:disabled) { .navBtn:hover:not(:disabled) {
@ -125,14 +125,14 @@
.decadeLabel { .decadeLabel {
color: #fff; color: #fff;
font-size: 0.875rem; font-size: .875rem;
font-weight: 500; font-weight: 500;
} }
.yearGrid { .yearGrid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.25rem; gap: .25rem;
} }
.yearCell { .yearCell {
@ -142,9 +142,9 @@
background: transparent; background: transparent;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0.25rem; border-radius: .25rem;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: .875rem;
transition: background 0.2s; transition: background 0.2s;
} }

2
src/components/YearPicker/index.tsx
View File

@ -94,7 +94,7 @@ export default function YearPicker({
{value != null ? `${value}年` : placeholder} {value != null ? `${value}年` : placeholder}
</span> </span>
<div className={styles.icons}> <div className={styles.icons}>
<img className={`${styles.arrow} ${open ? styles.arrowOpen : ""}`} src="/images/icons/icon-arrow-down.png" alt="arrow-down" style={{ width: "24px", height: "24px" }} /> <img className={`${styles.arrow} ${open ? styles.arrowOpen : ""}`} src="/images/icons/icon-arrow-down.png" alt="arrow-down" style={{ width: "1.5rem", height: "1.5rem" }} />
</div> </div>
</div> </div>

48
src/components/layout/AnimateTopCard/index.module.css
View File

@ -29,7 +29,7 @@
transition-delay: 0s; transition-delay: 0s;
.cardTitle span { .cardTitle span {
left: 30px; left: 1.875rem;
transform: translateX(0); transform: translateX(0);
text-align: left; text-align: left;
transition-delay: 0s; transition-delay: 0s;
@ -42,33 +42,33 @@
} }
.cardTitleUnderline::before { .cardTitleUnderline::before {
left: 30px; left: 1.875rem;
transform: translateX(0); transform: translateX(0);
transition-delay: 0s; transition-delay: 0s;
} }
} }
.cardInner { .cardInner {
padding: 50px; padding: 3.125rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: transparent; background: transparent;
transition: all 0.3s ease; transition: all 0.3s ease;
transition-delay: 0.2s; transition-delay: 0.2s;
position: absolute; position: absolute;
top: calc(100% - 170px); top: calc(100% - 10.625rem);
} }
.cardTitle { .cardTitle {
position: relative; position: relative;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
height: 34px; height: 2.125rem;
line-height: 34px; line-height: 2.125rem;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding: 0 30px; padding: 0 1.875rem;
span { span {
display: inline-block; display: inline-block;
@ -91,19 +91,19 @@
.cardTitleUnderline { .cardTitleUnderline {
position: relative; position: relative;
width: 100%; width: 100%;
height: 1px; height: .0625rem;
background: rgba(255,255,255,0.3); background: rgba(255,255,255,0.3);
margin-top: 30px; margin-top: 1.875rem;
&::before { &::before {
content: ''; content: '';
display: block; display: block;
width: 300px; width: 18.75rem;
height: 3px; height: .1875rem;
background: rgba(255,255,255,1); background: rgba(255,255,255,1);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -1px; top: -0.0625rem;
transform: translateX(-50%); transform: translateX(-50%);
transition: all 0.3s ease; transition: all 0.3s ease;
transition-delay: 0.2s; transition-delay: 0.2s;
@ -111,12 +111,12 @@
} }
.cardContent { .cardContent {
margin-top: 20px; margin-top: 1.25rem;
padding: 0 30px; padding: 0 1.875rem;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -125,16 +125,16 @@
.cardMore { .cardMore {
display: inline-block; display: inline-block;
margin-top: 60px; margin-top: 3.75rem;
width: 104px; width: 6.5rem;
height: 38px; height: 2.375rem;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
border: 1px solid #FFFFFF; border: .0625rem solid #FFFFFF;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px; line-height: 1.375rem;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;

29
src/components/layout/Article/index.module.css
View File

@ -1,11 +1,16 @@
.article { .article {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
padding: 120px auto; padding: 7.5rem 0;
.articleHeaderLine, .articleHeader, .articleContent {
width: 90%;
margin: 0 auto;
}
.articleHeaderLine { .articleHeaderLine {
height: 100px; height: 6.25rem;
border-bottom: 1px solid #222222; border-bottom: .0625rem solid #222222;
display: flex; display: flex;
.articleHeaderLineBack { .articleHeaderLineBack {
@ -16,35 +21,35 @@
} }
.articleHeader { .articleHeader {
padding: 60px 0; padding: 3.75rem 0;
margin-bottom: 60px; margin-bottom: 3.75rem;
.articleHeaderTitle { .articleHeaderTitle {
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 2rem;
color: #222222; color: #222222;
line-height: 42px; line-height: 2.625rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.articleHeaderTimeLine { .articleHeaderTimeLine {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #666666; color: #666666;
line-height: 22px; line-height: 1.375rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
display: flex; display: flex;
gap: 40px; gap: 2.5rem;
} }
} }
.articleContent { .articleContent {
font-size: 20px; font-size: 1.25rem;
} }
} }

2
src/components/layout/Article/index.tsx
View File

@ -13,7 +13,7 @@ export default function Article({ data }: { data: Data }) {
<div className={styles.article}> <div className={styles.article}>
<div className={styles.articleHeaderLine}> <div className={styles.articleHeaderLine}>
<div className={styles.articleHeaderLineBack} onClick={() => window.history.back()}> <div className={styles.articleHeaderLineBack} onClick={() => window.history.back()}>
<img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "20px", height: "20px" }} /> <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "1.25rem", height: "1.25rem" }} />
<span>返回</span> <span>返回</span>
</div> </div>
</div> </div>

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

@ -2,9 +2,9 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
/* height: 1080px; */ /* height: 67.5rem; */
height: 100vh; height: 100vh;
padding: 100px 0; padding: 6.25rem 0;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -32,10 +32,10 @@
.bottomTabsSectionContent { .bottomTabsSectionContent {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: calc(100% - 520px); width: calc(100% - 32.5rem);
margin: 0 auto; margin: 0 auto;
height: 500px; height: 31.25rem;
margin-top: 200px; margin-top: 12.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -47,15 +47,15 @@
.contentTitle { .contentTitle {
font-weight: 500; font-weight: 500;
font-size: 30px; font-size: 1.875rem;
line-height: 40px; line-height: 2.5rem;
} }
.contentText { .contentText {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
line-height: 26px; line-height: 1.625rem;
margin-top: 20px; margin-top: 1.25rem;
} }
} }
@ -65,7 +65,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-evenly;
gap: auto; gap: auto;
border-top: 1px solid rgba(255,255,255,0.5); border-top: .0625rem solid rgba(255,255,255,0.5);
padding: 0 auto; padding: 0 auto;
} }
@ -77,7 +77,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 2px; height: .125rem;
background-color: #fff; background-color: #fff;
transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
pointer-events: none; pointer-events: none;
@ -85,15 +85,15 @@
.bottomTabsSectionContentTab { .bottomTabsSectionContentTab {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 1.25rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 60px; line-height: 3.75rem;
height: 60px; height: 3.75rem;
cursor: pointer; cursor: pointer;
span { span {
display: inline-block; display: inline-block;
line-height: 60px; line-height: 3.75rem;
height: 60px; height: 3.75rem;
} }
} }

14
src/components/layout/ColumnXGrids/index.module.css
View File

@ -7,7 +7,7 @@
/* 3列 */ /* 3列 */
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 30px; gap: 1.875rem;
.columnXGridsItem { .columnXGridsItem {
color: #fff; color: #fff;
@ -43,7 +43,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
padding: 60px 40px; padding: 3.75rem 2.5rem;
transition: background var(--duration) ease; transition: background var(--duration) ease;
&:hover { &:hover {
@ -55,17 +55,17 @@
.columnXGridsItemTitle { .columnXGridsItemTitle {
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
margin-bottom: 10px; margin-bottom: .625rem;
} }
.columnXGridsItemContent { .columnXGridsItemContent {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
opacity: 0; opacity: 0;
transition: opacity var(--duration) ease; transition: opacity var(--duration) ease;
} }

28
src/components/layout/HonorGrids/index.module.css
View File

@ -1,55 +1,55 @@
.honorGrids { .honorGrids {
width: 100%; width: 100%;
padding: 100px 0; padding: 6.25rem 0;
background: rgba(216, 216, 216, 0.5); background: rgba(216, 216, 216, 0.5);
.honorGridsTitle { .honorGridsTitle {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #222222; color: #222222;
line-height: 50px; line-height: 3.125rem;
text-align: center; text-align: center;
width: 1320px; width: 82.5rem;
margin: 0 auto; margin: 0 auto;
margin-bottom: 100px; margin-bottom: 6.25rem;
} }
.honorGridsItems { .honorGridsItems {
width: 1320px; width: 82.5rem;
margin: 0 auto; margin: 0 auto;
/* 4*n */ /* 4*n */
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
gap: 60px; gap: 3.75rem;
.honorGridsItem { .honorGridsItem {
height: 116px; height: 7.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
padding: 0 50px; padding: 0 3.125rem;
text-align: center; text-align: center;
.honorGridsTitle { .honorGridsTitle {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #222222; color: #222222;
} }
.honorGridsItemLargeTitle { .honorGridsItemLargeTitle {
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 1.25rem;
color: #222222; color: #222222;
line-height: 30px; line-height: 1.875rem;
} }
.honorGridsItemBgleft, .honorGridsItemBgleft,
.honorGridsItemBgright { .honorGridsItemBgright {
width: 70px; width: 4.375rem;
height: 116px; height: 7.25rem;
position: absolute; position: absolute;
background-size: cover; background-size: cover;
background-position: left; background-position: left;

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

@ -1,11 +1,11 @@
.jobPage { .jobPage {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
padding: 120px 100px; padding: 7.5rem 6.25rem;
.jobPageHeaderLine { .jobPageHeaderLine {
height: 100px; height: 6.25rem;
border-bottom: 1px solid #222222; border-bottom: .0625rem solid #222222;
display: flex; display: flex;
.jobPageHeaderLineBack { .jobPageHeaderLineBack {
@ -16,41 +16,41 @@
} }
.jobPageHeader { .jobPageHeader {
padding: 60px 160px; padding: 3.75rem 10rem;
.jobPageHeaderTitle { .jobPageHeaderTitle {
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 2rem;
color: #222222; color: #222222;
line-height: 42px; line-height: 2.625rem;
/* text-align: center; */ /* text-align: center; */
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.jobPageHeaderTimeLine { .jobPageHeaderTimeLine {
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 1.25rem;
color: #333333; color: #333333;
line-height: 30px; line-height: 1.875rem;
display: flex; display: flex;
gap: 30px; gap: 1.875rem;
} }
} }
.jobPageContent { .jobPageContent {
font-size: 20px; font-size: 1.25rem;
padding: 0 160px; padding: 0 10rem;
} }
.jobPageContentTitle { .jobPageContentTitle {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 1.5rem;
color: #222222; color: #222222;
line-height: 34px; line-height: 2.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -59,9 +59,9 @@
.jobPageContentText { .jobPageContentText {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #333333; color: #333333;
line-height: 26px; line-height: 1.625rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;

6
src/components/layout/JobPage/index.tsx
View File

@ -18,7 +18,7 @@ export default function JobPage({ data }: { data: Data }) {
<div className={styles.jobPage}> <div className={styles.jobPage}>
<div className={styles.jobPageHeaderLine}> <div className={styles.jobPageHeaderLine}>
<div className={styles.jobPageHeaderLineBack} onClick={() => window.history.back()}> <div className={styles.jobPageHeaderLineBack} onClick={() => window.history.back()}>
<img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "20px", height: "20px" }} /> <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "1.25rem", height: "1.25rem" }} />
<span>返回</span> <span>返回</span>
</div> </div>
</div> </div>
@ -36,11 +36,11 @@ export default function JobPage({ data }: { data: Data }) {
<div className={styles.jobPageContentTitle}>岗位描述</div> <div className={styles.jobPageContentTitle}>岗位描述</div>
<p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.content }}></p> <p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.content }}></p>
</div> </div>
<div className={styles.jobPageContent} style={{ marginTop: "50px" }}> <div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
<div className={styles.jobPageContentTitle}>任职需求</div> <div className={styles.jobPageContentTitle}>任职需求</div>
<p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.requirement }}></p> <p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.requirement }}></p>
</div> </div>
<div className={styles.jobPageContent} style={{ marginTop: "50px" }}> <div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
<div className={styles.jobPageContentTitle}>联系方式</div> <div className={styles.jobPageContentTitle}>联系方式</div>
<p className={styles.jobPageContentText}>{data.contact}</p> <p className={styles.jobPageContentText}>{data.contact}</p>
</div> </div>

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

@ -1,5 +1,5 @@
.paragraphSection { .paragraphSection {
padding: 100px 260px; padding: 6.25rem 16.25rem;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -11,9 +11,9 @@
.paragraphSectionTitle { .paragraphSectionTitle {
font-weight: 500; font-weight: 500;
font-size: 40px; font-size: 2.5rem;
color: #14355C; color: #14355C;
line-height: 50px; line-height: 3.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -24,17 +24,17 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 40px; gap: 2.5rem;
margin-top: 100px; margin-top: 6.25rem;
.tag { .tag {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #14355C; color: #14355C;
line-height: 30px; line-height: 1.875rem;
padding: 24px 40px; padding: 1.5rem 2.5rem;
background: #F0F2F4; background: #F0F2F4;
border-radius: 326px 326px 326px 326px; border-radius: 20.375rem 20.375rem 20.375rem 20.375rem;
} }
} }

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

@ -4,7 +4,7 @@
.rowAccordion { .rowAccordion {
position: relative; position: relative;
overflow-anchor: none; overflow-anchor: none;
padding: 0 260px; /* padding: 0 16.25rem; */
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
@ -27,44 +27,47 @@
.rowAccordion .contentRow { .rowAccordion .contentRow {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 80%;
margin: 0 auto;
} }
.rowAccordion { .rowAccordion {
.headerRow { .headerRow {
width: 100%; width: 100%;
height: 250px; height: 15.625rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.title { .title {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 50px; line-height: 3.125rem;
} }
} }
.contentRow { .contentRow {
height: 100%; height: 100%;
display: flex; display: flex;
color: #fff; color: #fff;
.contentItem { .contentItem {
flex: 1; flex: 1;
transition: flex var(--duration) ease, padding-bottom var(--duration) ease; transition: flex var(--duration) ease, padding-bottom var(--duration) ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
padding-top: 100px; padding-top: 6.25rem;
padding-bottom: 100px; padding-bottom: 6.25rem;
border-left: 1px solid #fff; border-left: .0625rem solid #fff;
&:last-child { &:last-child {
border-right: 1px solid #fff; border-right: .0625rem solid #fff;
} }
.contentItemContainer { .contentItemContainer {
padding: 0 20px; padding: 0 1.25rem;
min-height: 100px; min-height: 6.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-left: -3px; margin-left: -0.1875rem;
transition: all var(--duration) ease-in-out; transition: all var(--duration) ease-in-out;
position: relative; position: relative;
&::before { &::before {
@ -72,26 +75,26 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 5px; width: .3125rem;
height: 100px; height: 6.25rem;
background: #14355C; background: #14355C;
} }
} }
.contentItemTitle { .contentItemTitle {
height: 100px; height: 6.25rem;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
transition: all var(--duration) ease-in-out; transition: all var(--duration) ease-in-out;
margin-bottom: 6px; margin-bottom: .375rem;
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
} }
.contentItemSubtitle { .contentItemSubtitle {
font-size: 20px; font-size: 1.25rem;
transition: font-size var(--duration) ease-in-out; transition: font-size var(--duration) ease-in-out;
} }
@ -104,41 +107,41 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
/* padding: 60px 0; */ /* padding: 3.75rem 0; */
margin-top: 20px; margin-top: 1.25rem;
} }
.contentItemContent { .contentItemContent {
font-size: 16px; font-size: 1rem;
/* margin-top: 40px; */ /* margin-top: 2.5rem; */
} }
.contentItemLinks { .contentItemLinks {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 30px; line-height: 1.875rem;
text-decoration-line: underline; text-decoration-line: underline;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 30px 20px; gap: 1.875rem 1.25rem;
} }
} }
.contentItem.active { .contentItem.active {
flex: 2; flex: 2;
padding-bottom: 200px; padding-bottom: 12.5rem;
.contentItemContainer { .contentItemContainer {
padding: 0 40px; padding: 0 2.5rem;
} }
.contentItemTitle { .contentItemTitle {
font-size: 40px; font-size: 2.5rem;
} }
.contentItemSubtitle { .contentItemSubtitle {
font-size: 24px; font-size: 1.5rem;
} }
.contentItemContentWrapper { .contentItemContentWrapper {
height: 300px; height: 18.75rem;
opacity: 1; opacity: 1;
} }
} }

2
src/components/layout/RowAccordion/index.tsx
View File

@ -90,7 +90,7 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
</div> </div>
) )
} }
<div className={styles.contentRow} style={{ height: data.title ? 'calc(100% - 250px)' : '100%' }}> <div className={styles.contentRow} style={{ height: data.title ? 'calc(100% - 15.625rem)' : '100%' }}>
{data.items.map((item, index) => ( {data.items.map((item, index) => (
<motion.div <motion.div
className={`${styles.contentItem} ${activeIndex === index && styles.active}`} className={`${styles.contentItem} ${activeIndex === index && styles.active}`}

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

@ -16,7 +16,7 @@ export default function Section({
background, maskBackground, className }: Props) { background, maskBackground, className }: Props) {
return ( return (
<section style={{ <section style={{
padding: '100px 260px', padding: '6.25rem 16.25rem',
width: '100%', width: '100%',
height: height || 'auto', height: height || 'auto',
position: 'relative', position: 'relative',

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

@ -1,31 +1,31 @@
.sectionTitle { .sectionTitle {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
line-height: 50px; line-height: 3.125rem;
text-align: center; text-align: center;
margin-bottom: 100px; margin-bottom: 6.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.sectionTitleSubtitle { .sectionTitleSubtitle {
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
line-height: 30px; line-height: 1.875rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-top: 20px; margin-top: 1.25rem;
} }
.sectionTitleSubcontent { .sectionTitleSubcontent {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
line-height: 30px; line-height: 1.875rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-top: 20px; margin-top: 1.25rem;
} }
} }

2
src/components/layout/SectionTitle/index.tsx
View File

@ -9,7 +9,7 @@ type Props = {
export default function SectionTitle({ title, subtitle, color, subcontent }: Props) { export default function SectionTitle({ title, subtitle, color, subcontent }: Props) {
return ( return (
<div className={styles.sectionTitle} style={{ color: color || '#222', marginBottom: subtitle ? '60px' : '100px' }}> <div className={styles.sectionTitle} style={{ color: color || '#222', marginBottom: subtitle ? '3.75rem' : '6.25rem' }}>
<span>{title}</span> <span>{title}</span>
{subtitle && <span className={styles.sectionTitleSubtitle}>{subtitle}</span>} {subtitle && <span className={styles.sectionTitleSubtitle}>{subtitle}</span>}
{subcontent && <span className={styles.sectionTitleSubcontent}>{subcontent}</span>} {subcontent && <span className={styles.sectionTitleSubcontent}>{subcontent}</span>}

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

@ -7,16 +7,16 @@
.carouselWrapper { .carouselWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 1.25rem;
position: relative; position: relative;
} }
.navBtn { .navBtn {
flex-shrink: 0; flex-shrink: 0;
width: 50px; width: 3.125rem;
height: 50px; height: 3.125rem;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0 12px 0px rgba(20, 53, 92, 0.2); box-shadow: 0rem 0 .75rem 0rem rgba(20, 53, 92, 0.2);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@ -24,13 +24,13 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
left: -90px; left: -5.625rem;
z-index: 99; z-index: 99;
} }
.nextBtn { .nextBtn {
left: auto; left: auto;
right: -90px; right: -5.625rem;
} }
.swiperCardList { .swiperCardList {
@ -65,10 +65,10 @@
top: 0; top: 0;
.swiperTitle { .swiperTitle {
padding: 0 30px; padding: 0 1.875rem;
span { span {
left: 30px; left: 1.875rem;
transform: translateX(0); transform: translateX(0);
border-color: #fff; border-color: #fff;
} }
@ -91,21 +91,21 @@
.swiperTitle { .swiperTitle {
position: relative; position: relative;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 80px; line-height: 5rem;
height: 80px; height: 5rem;
margin: 0 30px; margin: 0 1.875rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-bottom: .0625rem solid rgba(255, 255, 255, 0.3);
span { span {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 50%; left: 50%;
line-height: 80px; line-height: 5rem;
height: 80px; height: 5rem;
border-bottom: 3px solid #14355C; border-bottom: .1875rem solid #14355C;
transform: translateX(-50%); transform: translateX(-50%);
transition: left 0.3s ease-in-out, transform 0.3s ease-in-out; transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
white-space: nowrap; white-space: nowrap;
@ -113,10 +113,10 @@
} }
.swiperDesc { .swiperDesc {
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 24px; line-height: 1.5rem;
margin: 40px 60px; margin: 2.5rem 3.75rem;
opacity: 0; opacity: 0;
} }
} }

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

@ -1,5 +1,5 @@
.topTabsSection { .topTabsSection {
padding: 100px 260px 150px 260px; padding: 6.25rem 16.25rem 9.375rem 16.25rem;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-size: cover; background-size: cover;
@ -9,11 +9,11 @@
.topTabsTabs { .topTabsTabs {
position: relative; position: relative;
height: 60px; height: 3.75rem;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 1.5rem;
line-height: 34px; line-height: 2.125rem;
border-bottom: 1px solid #D5D8DC; border-bottom: .0625rem solid #D5D8DC;
width: 100%; width: 100%;
} }
@ -22,8 +22,8 @@
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
width: 36px; width: 2.25rem;
height: 36px; height: 2.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -32,7 +32,7 @@
color: #14355C; color: #14355C;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, 0.15);
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
} }
@ -42,11 +42,11 @@
} }
.topTabsNavBtnLeft { .topTabsNavBtnLeft {
left: 0px; left: 0rem;
} }
.topTabsNavBtnRight { .topTabsNavBtnRight {
right: 0px; right: 0rem;
} }
.topTabsTabsScroll { .topTabsTabsScroll {
@ -54,7 +54,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 130px; gap: 8.125rem;
height: 100%; height: 100%;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -74,14 +74,14 @@
.topTabsBottomLine { .topTabsBottomLine {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 2px; height: .125rem;
background: #000000; background: #000000;
transition: left 0.25s ease, width 0.25s ease; transition: left 0.25s ease, width 0.25s ease;
} }
.topTabsTabItem { .topTabsTabItem {
/* height: 90px; /* height: 5.625rem;
line-height: 90px; */ line-height: 5.625rem; */
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
color: #222222; color: #222222;
@ -92,9 +92,9 @@
} }
.topTabsContent { .topTabsContent {
padding-top: 150px; padding-top: 9.375rem;
display: flex; display: flex;
gap: 80px; gap: 5rem;
flex-direction: row; flex-direction: row;
} }
@ -103,20 +103,20 @@
margin: auto 0; margin: auto 0;
.topTabsContentLeftHead { .topTabsContentLeftHead {
margin-bottom: 30px; margin-bottom: 1.875rem;
display: flex; display: flex;
gap: 10px; gap: .625rem;
.topTabsContentLeftTitle { .topTabsContentLeftTitle {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 10px; gap: .625rem;
.topTabsContentLeftTitleMain { .topTabsContentLeftTitleMain {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #222222; color: #222222;
line-height: 50px; line-height: 3.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -124,9 +124,9 @@
.topTabsContentLeftTitleSub { .topTabsContentLeftTitleSub {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #14355C; color: #14355C;
line-height: 26px; line-height: 1.625rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -142,9 +142,9 @@
.topTabsContentLeftDesc { .topTabsContentLeftDesc {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 34px; line-height: 2.125rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -155,26 +155,26 @@
flex: 8; flex: 8;
img { img {
width: 800px; width: 50rem;
height: 500px; height: 31.25rem;
} }
} }
.topTabsContentItems { .topTabsContentItems {
width: 920px; width: 57.5rem;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 1.25rem;
} }
.topTabsContentItem { .topTabsContentItem {
list-style: disc; list-style: disc;
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 1.25rem;
color: #222222; color: #222222;
line-height: 30px; line-height: 1.875rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;

2
src/components/layout/TopTabsSection/index.tsx
View File

@ -60,7 +60,7 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
<ScrollReveal preset="slideRight" delay={0.3} > <ScrollReveal preset="slideRight" delay={0.3} >
{ {
data.tabItems[activeIndex].icon && ( data.tabItems[activeIndex].icon && (
<img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '100px', height: '100px' }} /> <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem' }} />
) )
} }
</ScrollReveal> </ScrollReveal>

20
src/index.css
View File

@ -1,35 +1,40 @@
/* rem 基准：以 16px 为设计稿基准 */ /* rem 基准：以设计稿 16px 为基准；再按 --ui-scale 抵消 Windows 显示缩放带来的物理尺寸偏大 */
:root {
--design-rem-base: 16px;
--ui-scale: 1;
}
html { html {
font-size: 16px; font-size: calc(var(--design-rem-base) * var(--ui-scale));
} }
@media screen and (max-width: 1920px) { @media screen and (max-width: 1920px) {
html { html {
font-size: 16px; --design-rem-base: 16px;
} }
} }
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
html { html {
font-size: 14px; --design-rem-base: 14px;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
html { html {
font-size: 12px; --design-rem-base: 12px;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
html { html {
font-size: 12px; --design-rem-base: 12px;
} }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
html { html {
font-size: 12px; --design-rem-base: 12px;
} }
} }
@ -41,6 +46,7 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
} }
code { code {

14
src/index.tsx
View File

@ -3,12 +3,24 @@ import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
const dpr = window.devicePixelRatio || 1;
// 用 UI 缩放因子抵消 Windows 显示缩放导致的“物理尺寸变大”。
// 例如：dpr=1.25 时 uiScale=0.8，rem 会整体变小 20%。
const uiScale = 1 / dpr;
document.documentElement.style.setProperty('--ui-scale', String(uiScale));
// antd cssinjs 内部 px->rem 转换的 rootValue：rootValue 越大，rem 越小。
const rootValue = 16 * dpr;
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
); );
root.render( root.render(
<App /> <StyleProvider >
<App />
</StyleProvider>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

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

@ -18,18 +18,18 @@
.footerColumn { .footerColumn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: .75rem;
} }
.footerTitle { .footerTitle {
font-size: 0.875rem; font-size: .875rem;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 0.25rem; margin-bottom: .25rem;
} }
.footerLink { .footerLink {
font-size: 0.8125rem; font-size: .8125rem;
color: #666; color: #666;
text-decoration: none; text-decoration: none;
} }
@ -42,7 +42,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 40px; gap: 2.5rem;
position: absolute; position: absolute;
right: 3.75rem; right: 3.75rem;
} }
@ -57,7 +57,7 @@
.socialIcons { .socialIcons {
display: flex; display: flex;
gap: 0.75rem; gap: .75rem;
} }
.socialIcon { .socialIcon {
@ -70,7 +70,7 @@
justify-content: center; justify-content: center;
color: #666; color: #666;
text-decoration: none; text-decoration: none;
font-size: 0.75rem; font-size: .75rem;
} }
.footerLower { .footerLower {
@ -86,7 +86,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 0.875rem; font-size: .875rem;
} }
.footerLowerLinks { .footerLowerLinks {
@ -103,7 +103,7 @@
color: #fff; color: #fff;
} }
@media (max-width: 1024px) { @media (max-width: 64rem) {
.footerUpper { .footerUpper {
padding: 2rem; padding: 2rem;
} }
@ -118,7 +118,7 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.footerUpper { .footerUpper {
padding: 1.5rem; padding: 1.5rem;
} }
@ -140,6 +140,6 @@
.footerLowerInner { .footerLowerInner {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: .5rem;
} }
} }

6
src/layouts/Footer.tsx
View File

@ -41,14 +41,14 @@ export default function Footer() {
<img <img
src={icon.src} src={icon.src}
alt={icon.alt} alt={icon.alt}
style={{ width: "26px", height: "26px" }} style={{ width: "1.625rem", height: "1.625rem" }}
/> />
</Link> </Link>
))} ))}
<img <img
src={logo} src={logo}
alt="logo" alt="logo"
style={{ width: "92px", height: "56px" }} style={{ width: "5.75rem", height: "3.5rem" }}
className="logo-dark" className="logo-dark"
/> />
</div> </div>
@ -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: "50px" }}> <div style={{ display: "flex", flexDirection: "row", gap: "3.125rem" }}>
<span>{`${copyright} | ${companyName}`}</span> <span>{`${copyright} | ${companyName}`}</span>
<span>{icpNumber}</span> <span>{icpNumber}</span>
</div> </div>

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

@ -42,13 +42,13 @@
.whiteMode.header { .whiteMode.header {
/* background: rgba(255, 255, 255, 1); */ /* background: rgba(255, 255, 255, 1); */
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 0 .625rem 0 rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.2);
transition-delay: none; transition-delay: none;
} }
.keepNavDark.header::before { .keepNavDark.header::before {
height: 120px; height: 7.5rem;
} }
.whiteMode .navLink, .whiteMode .navLink,
@ -103,7 +103,7 @@
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
height: 1px; height: .0625rem;
background: #FFFFFF; background: #FFFFFF;
transform: scaleX(0); transform: scaleX(0);
transform-origin: 90% 0; transform-origin: 90% 0;
@ -191,7 +191,7 @@
} }
.crossYline { .crossYline {
width: 1px; width: .0625rem;
height: 0%; height: 0%;
background: #FFFFFF; background: #FFFFFF;
align-self: flex-end; align-self: flex-end;
@ -204,7 +204,7 @@
.langTrigger { .langTrigger {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: .25rem;
color: #fff; color: #fff;
background: transparent; background: transparent;
border: none; border: none;
@ -216,7 +216,7 @@
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0.25rem; padding: .25rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -230,7 +230,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.1);
padding: 0; padding: 0;
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
@ -259,7 +259,7 @@
text-decoration: none; text-decoration: none;
} }
@media (max-width: 1024px) { @media (max-width: 64rem) {
.header { .header {
height: 5.5rem; height: 5.5rem;
} }
@ -286,7 +286,7 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.header { .header {
height: 4rem; height: 4rem;
} }
@ -297,19 +297,19 @@
} }
.navItem { .navItem {
padding: 0 0.5rem; padding: 0 .5rem;
} }
.headerRight { .headerRight {
gap: 0.5rem; gap: .5rem;
} }
.nav { .nav {
margin-right: 0.5rem; margin-right: .5rem;
} }
.actions { .actions {
margin-left: 0.5rem; margin-left: .5rem;
} }
.dropPanel { .dropPanel {

2
src/layouts/Header.tsx
View File

@ -134,7 +134,7 @@ export default function Header() {
trigger={["click"]} trigger={["click"]}
> >
<button className={styles.langTrigger} type="button"> <button className={styles.langTrigger} type="button">
<span style={{ fontSize: "18px" }}> <span style={{ fontSize: "1.125rem" }}>
{langMenuItems.find((i: SupportLocale) => i.key === locale)?.label ?? "中文"} {langMenuItems.find((i: SupportLocale) => i.key === locale)?.label ?? "中文"}
</span> </span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g transform="matrix(0,1,-1,0,24,-24)"><path d="M46.720364062499996,30.4020875C46.720364062499996,30.4020875,45.6597041625,31.462787499999997,45.6597041625,31.462787499999997C45.6597041625,31.462787499999997,39.8815300725,25.6845775,39.8815300725,25.6845775C39.4910054655,25.2940474,39.4910053615,24.6608877,39.8815300725,24.2703576C39.8815300725,24.2703576,45.6597041625,18.4921875,45.6597041625,18.4921875C45.6597041625,18.4921875,46.720364062499996,19.5528475,46.720364062499996,19.5528475C46.720364062499996,19.5528475,41.2957440625,24.9774675,41.2957440625,24.9774675C41.2957440625,24.9774675,46.720364062499996,30.4020875,46.720364062499996,30.4020875C46.720364062499996,30.4020875,46.720364062499996,30.4020875,46.720364062499996,30.4020875Z" fillRule="evenodd" fill="#FFFFFF" fillOpacity="1" transform="matrix(-1,0,0,-1,79.173828125,36.984375)" /></g></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g transform="matrix(0,1,-1,0,24,-24)"><path d="M46.720364062499996,30.4020875C46.720364062499996,30.4020875,45.6597041625,31.462787499999997,45.6597041625,31.462787499999997C45.6597041625,31.462787499999997,39.8815300725,25.6845775,39.8815300725,25.6845775C39.4910054655,25.2940474,39.4910053615,24.6608877,39.8815300725,24.2703576C39.8815300725,24.2703576,45.6597041625,18.4921875,45.6597041625,18.4921875C45.6597041625,18.4921875,46.720364062499996,19.5528475,46.720364062499996,19.5528475C46.720364062499996,19.5528475,41.2957440625,24.9774675,41.2957440625,24.9774675C41.2957440625,24.9774675,46.720364062499996,30.4020875,46.720364062499996,30.4020875C46.720364062499996,30.4020875,46.720364062499996,30.4020875,46.720364062499996,30.4020875Z" fillRule="evenodd" fill="#FFFFFF" fillOpacity="1" transform="matrix(-1,0,0,-1,79.173828125,36.984375)" /></g></svg>

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

@ -40,7 +40,7 @@
.textBox { .textBox {
background: rgba(20,53,92,0.5); background: rgba(20,53,92,0.5);
padding: 2.5rem; padding: 2.5rem;
border-radius: 0.25rem; border-radius: .25rem;
} }
.title { .title {

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

@ -52,7 +52,7 @@
} }
.imageOverlayTitle span { .imageOverlayTitle span {
border-bottom: 3px solid #FFFFFF; border-bottom: .1875rem solid #FFFFFF;
} }
} }
@ -86,13 +86,13 @@
height: 4.375rem; height: 4.375rem;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-bottom: .0625rem solid rgba(255, 255, 255, 0.3);
} }
.images .imageOverlayTitle span { .images .imageOverlayTitle span {
display: inline-block; display: inline-block;
height: 4.4375rem; height: 4.4375rem;
border-bottom: 3px solid #14355C; border-bottom: .1875rem solid #14355C;
} }
.images .imageOverlayDesc { .images .imageOverlayDesc {
@ -102,8 +102,8 @@
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
li { li {
list-style: disc; list-style: disc;
margin: 10px 0; margin: .625rem 0;
margin-left: 20px; margin-left: 1.25rem;
} }
} }
@ -147,8 +147,8 @@
padding-right: 6.25rem; padding-right: 6.25rem;
li { li {
list-style: disc; list-style: disc;
margin: 8px 0; margin: .5rem 0;
margin-left: 20px; margin-left: 1.25rem;
} }
} }
@ -165,7 +165,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto; grid-auto-rows: auto;
align-items: start; align-items: start;
gap: 16px; gap: 1rem;
} }
.section3Item { .section3Item {
@ -175,22 +175,22 @@
li { li {
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px; line-height: 1.375rem;
list-style: disc; list-style: disc;
} }
} }
.section4Section { .section4Section {
padding-top: 100px; padding-top: 6.25rem;
.section4Title { .section4Title {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #222222; color: #222222;
line-height: 50px; line-height: 3.125rem;
text-align: center; text-align: center;
} }
.timelineWrapper { .timelineWrapper {
@ -200,7 +200,7 @@
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.section { .section {
padding: 2rem 1rem; padding: 2rem 1rem;
} }

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

@ -3,14 +3,14 @@
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
90deg, 90deg,
transparent, transparent,
transparent 2px, transparent .125rem,
rgba(200, 200, 205, 0.3) 2px, rgba(200, 200, 205, 0.3) .125rem,
rgba(200, 200, 205, 0.3) 4px rgba(200, 200, 205, 0.3) .25rem
); );
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: 6.25rem auto; padding: 6.25rem auto;
padding-bottom: 100px; padding-bottom: 6.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -33,7 +33,7 @@
left: 50%; left: 50%;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 2px; width: .125rem;
background: #828F9E; background: #828F9E;
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -50,15 +50,15 @@
align-items: flex-start; align-items: flex-start;
min-height: 6rem; min-height: 6rem;
margin-bottom: 1rem; margin-bottom: 1rem;
scroll-margin-top: 120px; scroll-margin-top: 7.5rem;
} }
.timelineItem .side { .timelineItem .side {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: .5rem;
padding: 0.5rem 1.5rem; padding: .5rem 1.5rem;
min-width: 0; min-width: 0;
} }
@ -73,7 +73,7 @@
} }
.timelineItem .side:empty { .timelineItem .side:empty {
min-height: 1px; min-height: .0625rem;
} }
.year { .year {
@ -87,18 +87,18 @@
line-height: 1.6; line-height: 1.6;
color: #333; color: #333;
margin: 0; margin: 0;
max-width: 600px; max-width: 37.5rem;
margin-top: 20px; margin-top: 1.25rem;
list-style: disc; list-style: disc;
margin-left: 20px; margin-left: 1.25rem;
} }
.timelineItem.left .desc { .timelineItem.left .desc {
text-align: right; text-align: right;
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
margin-right: 20px; margin-right: 1.25rem;
} }
@ -154,7 +154,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 3.75rem; width: 3.75rem;
height: 3.75rem; height: 3.75rem;
border: 2px solid #14355C; border: .125rem solid #14355C;
border-radius: 50%; border-radius: 50%;
background: transparent; background: transparent;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
@ -165,14 +165,14 @@
left: 50%; left: 50%;
top: 100%; top: 100%;
transform: translateX(-50%); transform: translateX(-50%);
width: 0.375rem; width: .375rem;
min-height: 0; min-height: 0;
background: #14355C; background: #14355C;
transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;
} }
@media (max-width: 1024px) { @media (max-width: 64rem) {
.section { .section {
padding: 4rem 4rem; padding: 4rem 4rem;
} }
@ -182,7 +182,7 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.section { .section {
padding: 2rem 1rem; padding: 2rem 1rem;
} }

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

@ -35,7 +35,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 100px 0 !important; padding: 6.25rem 0 !important;
} }
.twoColSection.reverse { .twoColSection.reverse {
@ -52,20 +52,20 @@
.twoColSectionTab { .twoColSectionTab {
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #222; color: #222;
line-height: 34px; line-height: 2.125rem;
} }
.twoColSectionTab.active { .twoColSectionTab.active {
border-bottom: 2px solid #14355C; border-bottom: .125rem solid #14355C;
color: #14355C; color: #14355C;
} }
.twoColSectionContent { .twoColSectionContent {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin-top: 60px; margin-top: 3.75rem;
} }
.twoColImage { .twoColImage {
@ -90,7 +90,7 @@
} }
.twoColText { .twoColText {
padding: 100px 260px 150px 80px; padding: 6.25rem 16.25rem 9.375rem 5rem;
background: #F0F2F4; background: #F0F2F4;
} }
@ -115,13 +115,13 @@
.btnPrimary { .btnPrimary {
margin-top: 6.25rem; margin-top: 6.25rem;
display: inline-block; display: inline-block;
width: 104px; width: 6.5rem;
height: 38px; height: 2.375rem;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
border: 1px solid #333333; border: .0625rem solid #333333;
font-size: 16px; font-size: 1rem;
color: #333333; color: #333333;
line-height: 38px; line-height: 2.375rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
@ -138,7 +138,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 100px 260px; padding: 6.25rem 16.25rem;
position: relative; position: relative;
} }
@ -161,8 +161,8 @@
} }
.featuresHeroContent { .featuresHeroContent {
margin-top: 160px; margin-top: 10rem;
height: 400px; height: 25rem;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
color: #FFFFFF; color: #FFFFFF;
@ -172,29 +172,29 @@
.featuresHeroContentTitle { .featuresHeroContentTitle {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 600; font-weight: 600;
font-size: 30px; font-size: 1.875rem;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 30px; margin-bottom: 1.875rem;
} }
.featuresHeroContentDesc { .featuresHeroContentDesc {
font-family: Source Han Sans, Source Han Sans; font-family: Source Han Sans, Source Han Sans;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 40px; line-height: 2.5rem;
} }
.featuresHeroTabs { .featuresHeroTabs {
position: relative; position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.5); border-top: .0625rem solid rgba(255, 255, 255, 0.5);
} }
.featuresHeroTabIndicator { .featuresHeroTabIndicator {
position: absolute; position: absolute;
top: -1px; top: -0.0625rem;
left: 0; left: 0;
height: 2px; height: .125rem;
background: #ffffff; background: #ffffff;
pointer-events: none; pointer-events: none;
transition: transition:
@ -207,14 +207,14 @@
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-direction: row; flex-direction: row;
/* gap: 100px; */ /* gap: 6.25rem; */
} }
.featuresHeroTab { .featuresHeroTab {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 1.25rem;
color: #FFFFFF; color: #FFFFFF;
height: 60px; height: 3.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -225,7 +225,7 @@
.propertyServices { .propertyServices {
height: 100vh; height: 100vh;
color: #fff; color: #fff;
padding: 0 260px; padding: 0 16.25rem;
} }
.propertyServicesContent { .propertyServicesContent {
@ -239,34 +239,34 @@
.propertyServicesTitle { .propertyServicesTitle {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 50px; line-height: 3.125rem;
} }
.propertyServicesSubtitle { .propertyServicesSubtitle {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 26px; line-height: 1.625rem;
margin-top: 20px; margin-top: 1.25rem;
} }
.propertyServicesBtn { .propertyServicesBtn {
width: 104px; width: 6.5rem;
height: 38px; height: 2.375rem;
line-height: 38px; line-height: 2.375rem;
text-align: center; text-align: center;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
border: 1px solid #FFFFFF; border: .0625rem solid #FFFFFF;
margin-top: 100px; margin-top: 6.25rem;
} }
.propertyServicesBtn:hover { .propertyServicesBtn:hover {
background: #14355C; background: #14355C;
border-color: #14355C; border-color: #14355C;
color: #FFFFFF; color: #FFFFFF;
border: 1px solid #FFFFFF; border: .0625rem solid #FFFFFF;
} }
@ -279,11 +279,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #999; color: #999;
font-size: 0.875rem; font-size: .875rem;
} }
/* Responsive */ /* Responsive */
@media (max-width: 1024px) { @media (max-width: 64rem) {
.overview { .overview {
padding: 3rem 2rem; padding: 3rem 2rem;
} }
@ -301,7 +301,7 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.overview { .overview {
padding: 2rem 1rem; padding: 2rem 1rem;
} }

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

@ -109,7 +109,7 @@ export default function BusinessCommercialGroup() {
<img <img
src={section2Data.tabItems[activeTabIndex]?.sideImage as string} src={section2Data.tabItems[activeTabIndex]?.sideImage as string}
alt="" alt=""
style={{ width: "100%", height: "800px" }} style={{ width: "100%", height: "50rem" }}
/> />
</ScrollReveal> </ScrollReveal>
)} )}

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

@ -1,49 +1,49 @@
.twoColSection { .twoColSection {
padding: 100px 260px; padding: 6.25rem 16.25rem;
} }
.twoColSection p { .twoColSection p {
font-size: 18px; font-size: 1.125rem;
color: #222; color: #222;
line-height: 24px; line-height: 1.5rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.threeColSection { .threeColSection {
padding: 100px 260px; padding: 6.25rem 16.25rem;
width: 100%; width: 100%;
height: 966px; height: 60.375rem;
background: rgba(216, 216, 216, 0.5); background: rgba(216, 216, 216, 0.5);
} }
.threeColTabs { .threeColTabs {
height: 60px; height: 3.75rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
gap: 70px; gap: 4.375rem;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 1.5rem;
line-height: 34px; line-height: 2.125rem;
border-bottom: 1px solid #D5D8DC; border-bottom: .0625rem solid #D5D8DC;
} }
.threeColTabItem { .threeColTabItem {
height: 60px; height: 3.75rem;
cursor: pointer; cursor: pointer;
color: #222222; color: #222222;
} }
.threeColTabItem.active { .threeColTabItem.active {
border-bottom: 2px solid #000000; border-bottom: .125rem solid #000000;
color: #14355C; color: #14355C;
} }
.threeColContent { .threeColContent {
padding: 150px 0; padding: 9.375rem 0;
display: flex; display: flex;
gap: 80px; gap: 5rem;
flex-direction: row; flex-direction: row;
} }
@ -51,25 +51,25 @@
flex: 6; flex: 6;
margin: auto 0; margin: auto 0;
.threeColContentLeftHead { .threeColContentLeftHead {
margin-bottom: 30px; margin-bottom: 1.875rem;
display: flex; display: flex;
gap: 10px; gap: .625rem;
.threeColContentLeftTitle { .threeColContentLeftTitle {
.threeColContentLeftTitleMain { .threeColContentLeftTitleMain {
font-weight: 700; font-weight: 700;
font-size: 40px; font-size: 2.5rem;
color: #222222; color: #222222;
line-height: 50px; line-height: 3.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
.threeColContentLeftTitleSub { .threeColContentLeftTitleSub {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #14355C; color: #14355C;
line-height: 26px; line-height: 1.625rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -78,9 +78,9 @@
} }
.threeColContentLeftDesc { .threeColContentLeftDesc {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 34px; line-height: 2.125rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -90,7 +90,7 @@
.threeColContentRight { .threeColContentRight {
flex: 8; flex: 8;
img { img {
width: 800px; width: 50rem;
height: 500px; height: 31.25rem;
} }
} }

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

@ -1,23 +1,23 @@
.investGroup { .investGroup {
width: 100%; width: 100%;
height: 800px; height: 50rem;
padding: 100px 260px; padding: 6.25rem 16.25rem;
background: rgba(0, 39, 83, 0.7); background: rgba(0, 39, 83, 0.7);
.investGroupContent { .investGroupContent {
color: #FFFFFF; color: #FFFFFF;
height: 460px; height: 28.75rem;
.investGroupContentItems { .investGroupContentItems {
display: flex; display: flex;
height: 460px; height: 28.75rem;
.investGroupContentItem:first-child { .investGroupContentItem:first-child {
padding-right: 100px; padding-right: 6.25rem;
} }
.investGroupContentItem:last-child { .investGroupContentItem:last-child {
padding-left: 100px; padding-left: 6.25rem;
} }
.investGroupContentItem { .investGroupContentItem {
@ -26,23 +26,23 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 40px; gap: 2.5rem;
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
border-right: 1px solid rgba(255, 255, 255, .5); border-right: .0625rem solid rgba(255, 255, 255, .5);
.investGroupContentItemTitle { .investGroupContentItemTitle {
font-size: 40px; font-size: 2.5rem;
} }
.investGroupContentItemContent { .investGroupContentItemContent {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 30px; line-height: 1.875rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -55,25 +55,25 @@
.equityInvestment { .equityInvestment {
width: 100%; width: 100%;
padding: 100px 260px; padding: 6.25rem 16.25rem;
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
.equityInvestmentItems { .equityInvestmentItems {
/* 5列布局 */ /* 5列布局 */
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 20px 40px; gap: 1.25rem 2.5rem;
.equityInvestmentItem { .equityInvestmentItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; gap: 1.25rem;
.equityInvestmentItemLogo { .equityInvestmentItemLogo {
width: 264px; width: 16.5rem;
height: 157px; height: 9.8125rem;
object-fit: cover; object-fit: cover;
} }
} }
@ -98,28 +98,28 @@
} }
.industryFosterMask { .industryFosterMask {
width: 546px; width: 34.125rem;
min-height: 400px; min-height: 25rem;
background: rgba(20, 53, 92, 0.5); background: rgba(20, 53, 92, 0.5);
color: #fff; color: #fff;
padding: 60px 50px; padding: 3.75rem 3.125rem;
.industryFosterMaskTitle { .industryFosterMaskTitle {
font-weight: 500; font-weight: 500;
font-size: 40px; font-size: 2.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 50px; line-height: 3.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-bottom: 30px; margin-bottom: 1.875rem;
} }
.industryFosterMaskContent { .industryFosterMaskContent {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;

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

@ -73,7 +73,7 @@
.commercialItem { .commercialItem {
flex: 1; flex: 1;
height: 100%; height: 100%;
border-left: 1px solid #fff; border-left: .0625rem solid #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@ -82,7 +82,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.commercialItem:last-child { .commercialItem:last-child {
border-right: 1px solid #fff; border-right: .0625rem solid #fff;
} }
.commercialTitle { .commercialTitle {
font-size: 1.25rem; font-size: 1.25rem;
@ -138,7 +138,7 @@
align-items: flex-end; align-items: flex-end;
} }
@media (max-width: 1024px) { @media (max-width: 64rem) {
.commercialContent { .commercialContent {
margin: 0 4rem; margin: 0 4rem;
} }
@ -152,7 +152,7 @@
} }
} }
@media (max-width: 768px) { @media (max-width: 48rem) {
.cardsInner { .cardsInner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -354,7 +354,7 @@
color: #666; color: #666;
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
line-height: 1.6; line-height: 1.6;
height: 70px; height: 4.375rem;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;

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

@ -6,39 +6,39 @@
.campusColLeft { .campusColLeft {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 30px; gap: 1.875rem;
.resetButton { .resetButton {
width: 340px; width: 21.25rem;
height: 50px; height: 3.125rem;
border-radius: 6px 6px 6px 6px; border-radius: .375rem .375rem .375rem .375rem;
border: 1px solid #14355C; border: .0625rem solid #14355C;
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #14355C; color: #14355C;
line-height: 50px; line-height: 3.125rem;
outline: none; outline: none;
} }
} }
.campusColRight { .campusColRight {
.jobList { .jobList {
padding-bottom: 100px; padding-bottom: 6.25rem;
width: 960px; width: 60rem;
min-height: 500px; min-height: 31.25rem;
} }
.jobItem { .jobItem {
width: 100%; width: 100%;
height: 200px; height: 12.5rem;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
border-bottom: 1px solid #E5E5E5; border-bottom: .0625rem solid #E5E5E5;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: .9375rem;
padding: 30px 20px; padding: 1.875rem 1.25rem;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -60,17 +60,17 @@
.jobItemTitle { .jobItemTitle {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 1.25rem;
color: #222222; color: #222222;
line-height: 26px; line-height: 1.625rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.jobItemTitleRight { .jobItemTitleRight {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #999999; color: #999999;
line-height: 22px; line-height: 1.375rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
} }
@ -79,19 +79,19 @@
.jobItemLabels { .jobItemLabels {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #333333; color: #333333;
line-height: 24px; line-height: 1.5rem;
display: flex; display: flex;
gap: 10px; gap: .625rem;
} }
.jobItemContent { .jobItemContent {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #666666; color: #666666;
line-height: 30px; line-height: 1.875rem;
/* 超过2行省略 */ /* 超过2行省略 */
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -105,34 +105,34 @@
.searchInput { .searchInput {
width: 340px; width: 21.25rem;
height: 50px; height: 3.125rem;
border-radius: 6px 6px 6px 6px; border-radius: .375rem .375rem .375rem .375rem;
border: 1px solid #B6C0CB; border: .0625rem solid #B6C0CB;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 14px; padding: .875rem;
overflow: hidden; overflow: hidden;
.searchIcon { .searchIcon {
width: 24px; width: 1.5rem;
height: 24px; height: 1.5rem;
} }
input { input {
border: none; border: none;
width: 100%; width: 100%;
height: 50px; height: 3.125rem;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
line-height: 22px; line-height: 1.375rem;
&::placeholder { &::placeholder {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #999999; color: #999999;
line-height: 22px; line-height: 1.375rem;
} }
&:focus { &:focus {
@ -148,28 +148,28 @@
} }
.selectFormItemLabel { .selectFormItemLabel {
font-size: 16px; font-size: 1rem;
color: #666666; color: #666666;
display: block; display: block;
margin-bottom: 8px; margin-bottom: .5rem;
} }
.selectFormItemBox { .selectFormItemBox {
width: 340px; width: 21.25rem;
height: 50px; height: 3.125rem;
border-radius: 6px; border-radius: .375rem;
border: 1px solid #B6C0CB; border: .0625rem solid #B6C0CB;
padding: 0 14px; padding: 0 .875rem;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
line-height: 22px; line-height: 1.375rem;
background: #FFFFFF; background: #FFFFFF;
} }
.selectFilterIcon { .selectFilterIcon {
margin-right: 5px; margin-right: .3125rem;
color: #666666; color: #666666;
} }
@ -196,8 +196,8 @@
.selectFormItemSelect :global(.ant-select-selection-placeholder), .selectFormItemSelect :global(.ant-select-selection-placeholder),
.selectFormItemSelect :global(.ant-select-selection-item) { .selectFormItemSelect :global(.ant-select-selection-item) {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
line-height: 22px; line-height: 1.375rem;
color: #222222; color: #222222;
} }
@ -206,6 +206,6 @@
} }
.selectDownIcon { .selectDownIcon {
margin-left: 5px; margin-left: .3125rem;
color: #999999; color: #999999;
} }

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

@ -1,12 +1,12 @@
.cultureItems { .cultureItems {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 15px; gap: .9375rem;
.cultureItem { .cultureItem {
color: #fff; color: #fff;
/* width: 457px; /* width: 28.5625rem;
height: 560px; */ height: 35rem; */
aspect-ratio: 457 / 560; aspect-ratio: 457 / 560;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -23,7 +23,7 @@
.cultureItemInner { .cultureItemInner {
position: absolute; position: absolute;
inset: 0; inset: 0;
padding: 40px; padding: 2.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@ -32,16 +32,16 @@
.cultureItemTitle { .cultureItemTitle {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
} }
.cultureItemContent { .cultureItemContent {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 40px; line-height: 2.5rem;
height: 0; height: 0;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
@ -56,7 +56,7 @@
} }
.cultureItemContent { .cultureItemContent {
height: 40px; height: 2.5rem;
opacity: 1; opacity: 1;
} }
} }
@ -68,36 +68,36 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin: 0 140px; margin: 0 8.75rem;
.valuesItem { .valuesItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 20px; gap: 1.25rem;
.valuesItemIcon { .valuesItemIcon {
width: 100px; width: 6.25rem;
height: 100px; height: 6.25rem;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-bottom: 15px; margin-bottom: .9375rem;
} }
.valuesItemTitle { .valuesItemTitle {
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #222222; color: #222222;
line-height: 34px; line-height: 2.125rem;
} }
.valuesItemContent { .valuesItemContent {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 26px; line-height: 1.625rem;
} }
} }
} }

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

@ -1,7 +1,7 @@
.mediaItems { .mediaItems {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
height: 500px; height: 31.25rem;
.mediaItem { .mediaItem {
height: 100%; height: 100%;
@ -11,27 +11,27 @@
justify-content: center; justify-content: center;
&:first-child { &:first-child {
border-right: 1px solid rgba(255,255,255,0.5); border-right: .0625rem solid rgba(255,255,255,0.5);
padding-right: 60px; padding-right: 3.75rem;
} }
&:last-child { &:last-child {
padding-left: 60px; padding-left: 3.75rem;
} }
.mediaItemTitle { .mediaItemTitle {
font-weight: 500; font-weight: 500;
font-size: 40px; font-size: 2.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 50px; line-height: 3.125rem;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 2.5rem;
} }
.mediaItemContent { .mediaItemContent {
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 40px; line-height: 2.5rem;
text-align: center; text-align: center;
white-space: pre-line; white-space: pre-line;
} }

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

@ -4,12 +4,12 @@
justify-content: flex-end; justify-content: flex-end;
.searchInput { .searchInput {
width: 340px; width: 21.25rem;
height: 50px; height: 3.125rem;
background: #FFFFFF; background: #FFFFFF;
border-radius: 6px 6px 6px 6px; border-radius: .375rem .375rem .375rem .375rem;
border: 1px solid #B6C0CB; border: .0625rem solid #B6C0CB;
padding: 0 16px; padding: 0 1rem;
position: relative; position: relative;
input { input {
@ -20,17 +20,17 @@
background: transparent; background: transparent;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 26px; line-height: 1.625rem;
} }
.searchIcon { .searchIcon {
position: absolute; position: absolute;
right: 16px; right: 1rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 16px; font-size: 1rem;
color: #333; color: #333;
} }
} }
@ -39,16 +39,16 @@
.newList { .newList {
/* 3列 */ /* 3列 */
min-height: 200px; min-height: 12.5rem;
margin-top: 100px; margin-top: 6.25rem;
margin-bottom: 100px; margin-bottom: 6.25rem;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 22px 30px; gap: 1.375rem 1.875rem;
.newItem { .newItem {
/* height: 500px; /* height: 31.25rem;
width: 452px; */ width: 28.25rem; */
aspect-ratio: 452 / 500; aspect-ratio: 452 / 500;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -56,7 +56,7 @@
img, video { img, video {
width: 100%; width: 100%;
/* height: 300px; */ /* height: 18.75rem; */
aspect-ratio: 452 / 300; aspect-ratio: 452 / 300;
object-fit: cover; object-fit: cover;
cursor: pointer; cursor: pointer;
@ -82,7 +82,7 @@
width: 100%; width: 100%;
aspect-ratio: 452 / 200; aspect-ratio: 452 / 200;
background: #fff; background: #fff;
padding: 20px 20px 40px; padding: 1.25rem 1.25rem 2.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -92,9 +92,9 @@
.newItemTitle { .newItemTitle {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 1.25rem;
color: #222222; color: #222222;
line-height: 30px; line-height: 1.875rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -103,9 +103,9 @@
.newItemCreateTime { .newItemCreateTime {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #666666; color: #666666;
line-height: 22px; line-height: 1.375rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;

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

@ -1,10 +1,10 @@
.auditReport { .auditReport {
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
gap: 200px; gap: 12.5rem;
.auditReportP { .auditReportP {
font-size: 18px; font-size: 1.125rem;
line-height: 34px; line-height: 2.125rem;
color: #333333; color: #333333;
} }
@ -15,26 +15,26 @@
} }
.auditReportQrCode { .auditReportQrCode {
width: 189px; width: 11.8125rem;
height: 241px; height: 15.0625rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.auditReportQrCodeTitle { .auditReportQrCodeTitle {
font-size: 24px; font-size: 1.5rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.auditReportQrCodeImg { .auditReportQrCodeImg {
width: 160px; width: 10rem;
height: 160px; height: 10rem;
} }
.auditReportQrCodeText { .auditReportQrCodeText {
font-size: 14px; font-size: .875rem;
color: #222; color: #222;
margin-top: 5px; margin-top: .3125rem;
} }
} }

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

@ -1,6 +1,6 @@
.searchRow { .searchRow {
width: 100%; width: 100%;
height: 288px; height: 18rem;
background: #F0F2F4; background: #F0F2F4;
display: flex; display: flex;
@ -8,35 +8,35 @@
margin: auto; margin: auto;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 30px; gap: 1.875rem;
.searchRowTitle { .searchRowTitle {
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 1.5rem;
color: #222222; color: #222222;
line-height: 34px; line-height: 2.125rem;
} }
.searchInputWrapper { .searchInputWrapper {
position: relative; position: relative;
.searchInput { .searchInput {
width: 600px; width: 37.5rem;
height: 54px; height: 3.375rem;
border: 1px solid #333333; border: .0625rem solid #333333;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 24px; line-height: 1.5rem;
outline: none; outline: none;
padding: 0 20px; padding: 0 1.25rem;
} }
.searchKeyword { .searchKeyword {
position: absolute; position: absolute;
margin-top: 20px; margin-top: 1.25rem;
font-size: 24px; font-size: 1.5rem;
color: #222222; color: #222222;
.searchKeywordKeyword { .searchKeywordKeyword {
@ -48,14 +48,14 @@
} }
.searchBtn { .searchBtn {
width: 128px; width: 8rem;
height: 54px; height: 3.375rem;
background: #14355C; background: #14355C;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
outline: none; outline: none;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
} }
@ -66,13 +66,14 @@
.searchItemList { .searchItemList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 50px; gap: 3.125rem;
margin-bottom: 9.375rem;
.searchItem { .searchItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 1.25rem;
height: 160px; height: 10rem;
border-bottom: 1px solid #D8D8D8; border-bottom: .0625rem solid #D8D8D8;
.searchItemTitleRow { .searchItemTitleRow {
display: flex; display: flex;
@ -80,25 +81,25 @@
justify-content: space-between; justify-content: space-between;
.searchItemTitle { .searchItemTitle {
font-size: 24px; font-size: 1.5rem;
color: #222222; color: #222222;
font-weight: 700; font-weight: 700;
} }
.searchItemCreateTime { .searchItemCreateTime {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #999999; color: #999999;
line-height: 22px; line-height: 1.375rem;
} }
} }
.searchItemContent { .searchItemContent {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #333333; color: #333333;
line-height: 30px; line-height: 1.875rem;
/* 2行文本超出省略 */ /* 2行文本超出省略 */
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;

97
src/pages/Others/Search.tsx
View File

@ -1,46 +1,75 @@
import Banner, { type BannerConfig } from "@/components/Banner"; import Banner, { type BannerConfig } from "@/components/Banner";
import Section from "@/components/layout/Section"; import Section from "@/components/layout/Section";
import styles from "./Search.module.css"; import styles from "./Search.module.css";
import { useCallback, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { dateFormat } from "@/utils"; import { dateFormat } from "@/utils";
import { useStore } from "@/store"; import { useStore } from "@/store";
import appApi from "@/api/app";
import Pagination from "@/components/Pagination";
import { Link } from "react-router-dom";
type SearchData = { type SearchData = {
id: number; id: number;
title: string; title: string;
content: string; content: string;
createTime: string; createTime: string;
lang: "ZH" | "EN";
path: string;
}; };
export default function Search() { export default function Search() {
const appConfig = useStore((s) => s.appConfig); const appConfig = useStore((s) => s.appConfig);
const locale = useStore((s) => s.locale);
const supportLocales = useStore((s) => s.supportLocales);
const categoryList = useStore((s) => s.categoryList);
const data = appConfig?.others?.search; const data = appConfig?.others?.search;
const banner = data?.banner; const banner = data?.banner;
const searchTips = data?.tips || {
keyword: "关键词",
placeholder: "请输入",
search: "搜索",
total: "共",
result: "个结果",
}
const [page, setPage] = useState(1);
const [size] = useState(2 * supportLocales.length);
const [total, setTotal] = useState(0);
const categoryId = String(categoryList?.find((item: any) => item.name.includes('集团发布'))?.id ?? '');
const [searched, setSearched] = useState(false); const [searched, setSearched] = useState(false);
const [searchKeyword, setSearchKeyword] = useState(""); const [searchKeyword, setSearchKeyword] = useState("");
const [total, setTotal] = useState(0);
const [searchData, setSearchData] = useState<SearchData[]>([]); const [searchData, setSearchData] = useState<SearchData[]>([]);
const localSearchData = useMemo(() => {
return searchData.filter((item) => item.lang.toLowerCase() === locale.split('-')[0]);
}, [searchData, locale]);
const handleSearch = useCallback(() => { const handleSearch = useCallback(() => {
setSearched(true); appApi.getNewsList({
setSearchData([ page,
{ size,
id: 1, title: searchKeyword,
title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态", category_id: categoryId,
content: }).then((res) => {
"中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。", setSearched(true);
createTime: "2025-11-25", const data = res.data.items.map((item: any) => {
}, return {
{ id: item.id,
id: 2, title: item.title,
title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态", content: item.content,
content: createTime: item.create_time,
"中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。", lang: item.lang,
createTime: "2025-11-25", path: `/news/detail/${item.id}`,
}, }
]); })
}, [searchKeyword]); setSearchData(data);
setTotal(res.data.total);
});
}, [searchKeyword, page, size, categoryId]);
useEffect(() => {
handleSearch();
}, [page, size]);
return ( return (
<div> <div>
@ -53,11 +82,11 @@ export default function Search() {
<section className={styles.searchRow}> <section className={styles.searchRow}>
<div className={styles.searchRowInner}> <div className={styles.searchRowInner}>
<span className={styles.searchRowTitle}>关键词</span> <span className={styles.searchRowTitle}>{searchTips.keyword}</span>
<div className={styles.searchInputWrapper}> <div className={styles.searchInputWrapper}>
<input <input
type="text" type="text"
placeholder="请输入" placeholder={searchTips.placeholder}
className={styles.searchInput} className={styles.searchInput}
value={searchKeyword} value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)} onChange={(e) => setSearchKeyword(e.target.value)}
@ -67,13 +96,13 @@ export default function Search() {
/> />
{searched && ( {searched && (
<div className={styles.searchKeyword}> <div className={styles.searchKeyword}>
搜索： {searchTips.search}:
<span className={styles.searchKeywordKeyword}> <span className={styles.searchKeywordKeyword}>
{searchKeyword}&nbsp; {searchKeyword}&nbsp;
</span> </span>
共 {searchTips.total}:
<span>{total}</span> <span>{total / 2}</span>
个结果 {searchTips.result}
</div> </div>
)} )}
</div> </div>
@ -82,25 +111,29 @@ export default function Search() {
className={styles.searchBtn} className={styles.searchBtn}
onClick={handleSearch} onClick={handleSearch}
> >
搜索 {searchTips.search}:
</button> </button>
</div> </div>
</section> </section>
<Section background="" maskBackground="#fff"> <Section background="" maskBackground="#fff">
<div className={styles.searchItemList}> <div className={styles.searchItemList}>
{searchData.map((item) => ( {localSearchData.map((item) => (
<div key={item.id} className={styles.searchItem}> <Link to={item.path ?? ''} key={item.id} className={styles.searchItem}>
<div className={styles.searchItemTitleRow}> <div className={styles.searchItemTitleRow}>
<span className={styles.searchItemTitle}>{item.title}</span> <span className={styles.searchItemTitle}>{item.title}</span>
<span className={styles.searchItemCreateTime}> <span className={styles.searchItemCreateTime}>
{dateFormat(item.createTime, "yyyy年MM月dd日")} {locale.startsWith("zh")
? dateFormat(item.createTime, "yyyy年MM月dd日")
: dateFormat(item.createTime, "yyyy-MM-dd")
}
</span> </span>
</div> </div>
<div className={styles.searchItemContent}>{item.content}</div> <div className={styles.searchItemContent}>{item.content}</div>
</div> </Link>
))} ))}
</div> </div>
<Pagination total={total} size={size} page={page} onChange={setPage} />
</Section> </Section>
</div> </div>
); );

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

@ -1,40 +1,40 @@
.siteMap { .siteMap {
.siteMapTitle { .siteMapTitle {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 1.5rem;
color: #14355C; color: #14355C;
line-height: 34px; line-height: 2.125rem;
} }
.siteMapItems { .siteMapItems {
margin-top: 60px; margin-top: 3.75rem;
border-top: 1px solid #DDDDDD; border-top: .0625rem solid #DDDDDD;
padding: 0 50px; padding: 0 3.125rem;
/* 主网格：标签列 + 5列子项，列宽固定以实现跨行对齐 */ /* 主网格：标签列 + 5列子项，列宽固定以实现跨行对齐 */
/* 第一列为180px */ /* 第一列为11.25rem */
display: grid; display: grid;
grid-template-columns: 182px repeat(5, minmax(140px, 1fr)); grid-template-columns: 11.375rem repeat(5, minmax(8.75rem, 1fr));
.siteMapItem { .siteMapItem {
padding: 50px 0; padding: 3.125rem 0;
border-bottom: 1px solid #DDDDDD; border-bottom: .0625rem solid #DDDDDD;
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
grid-column: 1 / -1; grid-column: 1 / -1;
.siteMapItemLabel { .siteMapItemLabel {
padding-left: 50px; padding-left: 3.125rem;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 1.125rem;
color: #14355C; color: #14355C;
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
height: 30px; height: 1.875rem;
width: 1px; width: .0625rem;
background: #DDDDDD; background: #DDDDDD;
position: absolute; position: absolute;
right: 0; right: 0;
@ -43,17 +43,17 @@
} }
.siteMapItemChildren { .siteMapItemChildren {
padding: 0 20px 0 60px; padding: 0 1.25rem 0 3.75rem;
display: grid; display: grid;
grid-column: 2 / -1; grid-column: 2 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
column-gap: 20px; column-gap: 1.25rem;
.siteMapItemChildLabel { .siteMapItemChildLabel {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 22px; line-height: 1.375rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -63,13 +63,13 @@
.siteMapItemChildChildren { .siteMapItemChildChildren {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #666666; color: #666666;
line-height: 22px; line-height: 1.375rem;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 10px; gap: .625rem;
margin-top: 10px; margin-top: .625rem;
.siteMapItemChildChild { .siteMapItemChildChild {
cursor: pointer; cursor: pointer;

4
src/pages/Others/TermsOfUse.tsx
View File

@ -25,8 +25,8 @@ export default function TermsOfUse() {
<Section background="" maskBackground="#fff"> <Section background="" maskBackground="#fff">
<p <p
style={{ style={{
fontSize: "18px", fontSize: "1.125rem",
lineHeight: "34px", lineHeight: "2.125rem",
color: "#333333", color: "#333333",
}} }}
dangerouslySetInnerHTML={{ __html: content }} dangerouslySetInnerHTML={{ __html: content }}

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

@ -7,7 +7,7 @@
/* 2列 */ /* 2列 */
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 30px; gap: 1.875rem;
.publicWelfareDataItem { .publicWelfareDataItem {
position: relative; position: relative;
@ -22,7 +22,7 @@
/* 信息公开 */ /* 信息公开 */
.informationPublicDataContent { .informationPublicDataContent {
min-height: 450px; min-height: 28.125rem;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -30,18 +30,18 @@
} }
.informationPublicDataItems { .informationPublicDataItems {
/* min-height: 400px; */ /* min-height: 25rem; */
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 1.25rem;
line-height: 34px; line-height: 2.125rem;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
padding: 0 90px 150px 90px; padding: 0 5.625rem 9.375rem 5.625rem;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 1.25rem;
li { li {
list-style: disc; list-style: disc;
@ -57,13 +57,13 @@
.partnerItems { .partnerItems {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 38px; gap: 2.375rem;
.partnerItem { .partnerItem {
width: 250px; width: 15.625rem;
height: 120px; height: 7.5rem;
border-radius: 999px; border-radius: 62.4375rem;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.3);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

6
src/pages/Social/Foundation.tsx
View File

@ -78,7 +78,7 @@ export default function Foundation() {
{section1Data && ( {section1Data && (
<ParagraphSection data={section1Data}> <ParagraphSection data={section1Data}>
<div style={{ marginTop: "100px" }} /> <div style={{ marginTop: "6.25rem" }} />
{section1Data.tabItems && <TopTabsSection data={{ tabItems: section1Data.tabItems }} className={styles.topTabsSection} />} {section1Data.tabItems && <TopTabsSection data={{ tabItems: section1Data.tabItems }} className={styles.topTabsSection} />}
</ParagraphSection> </ParagraphSection>
)} )}
@ -98,7 +98,7 @@ export default function Foundation() {
</ScrollReveal> </ScrollReveal>
))} ))}
</div> </div>
<div style={{ marginBottom: "50px" }} /> <div style={{ marginBottom: "3.125rem" }} />
</Section> </Section>
)} )}
@ -108,7 +108,7 @@ export default function Foundation() {
titleColor="#fff" titleColor="#fff"
background={section3Data.backgroundImage ?? "/images/bg-overview.png"} background={section3Data.backgroundImage ?? "/images/bg-overview.png"}
maskBackground="rgba(255,255,255,0.1)" maskBackground="rgba(255,255,255,0.1)"
height="760px" height="47.5rem"
> >
<div className={styles.informationPublicDataContent}> <div className={styles.informationPublicDataContent}>
<div className={styles.informationPublicDataItems}> <div className={styles.informationPublicDataItems}>

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

@ -1,6 +1,6 @@
.socialResponsibilityCaseDataContent { .socialResponsibilityCaseDataContent {
margin-top: -50px; margin-top: -3.125rem;
margin-bottom: 100px; margin-bottom: 6.25rem;
} }
.socialResponsibilityCaseDataItems { .socialResponsibilityCaseDataItems {
@ -11,7 +11,7 @@
*/ */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 30px; gap: 1.875rem;
} }
.socialResponsibilityCaseDataItem { .socialResponsibilityCaseDataItem {
@ -37,7 +37,7 @@
transition-delay: 0s; transition-delay: 0s;
.socialResponsibilityCaseDataItemTitle { .socialResponsibilityCaseDataItemTitle {
left: 50px; left: 3.125rem;
transform: translateX(0); transform: translateX(0);
transition-delay: 0s; transition-delay: 0s;
} }
@ -50,7 +50,7 @@
} }
.socialResponsibilityCaseDataItemContentInner { .socialResponsibilityCaseDataItemContentInner {
padding: 50px; padding: 3.125rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: transparent; background: transparent;
@ -61,16 +61,16 @@
.socialResponsibilityCaseDataItemMore { .socialResponsibilityCaseDataItemMore {
display: inline-block; display: inline-block;
margin-top: 60px; margin-top: 3.75rem;
width: 104px; width: 6.5rem;
height: 38px; height: 2.375rem;
border-radius: 0px 0px 0px 0px; border-radius: 0rem 0rem 0rem 0rem;
border: 1px solid #FFFFFF; border: .0625rem solid #FFFFFF;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 1rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px; line-height: 1.375rem;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
@ -80,9 +80,9 @@
.socialResponsibilityCaseDataItemTitle { .socialResponsibilityCaseDataItemTitle {
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 1.5rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -91,11 +91,11 @@
} }
.socialResponsibilityCaseDataItemContent { .socialResponsibilityCaseDataItemContent {
margin-top: 20px; margin-top: 1.25rem;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
line-height: 34px; line-height: 2.125rem;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
@ -109,16 +109,16 @@
/* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */ /* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
/* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */ /* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */
/* 810+560=1370，每行总宽 = 100% - 30px */ /* 810+560=1370，每行总宽 = 100% - 1.875rem */
.socialResponsibilityCaseDataItem:nth-child(4n + 1), .socialResponsibilityCaseDataItem:nth-child(4n + 1),
.socialResponsibilityCaseDataItem:nth-child(4n + 4) { .socialResponsibilityCaseDataItem:nth-child(4n + 4) {
flex-basis: calc((100% - 30px) * 810 / 1370); flex-basis: calc((100% - 1.875rem) * 810 / 1370);
aspect-ratio: 810 / 480; aspect-ratio: 810 / 480;
} }
.socialResponsibilityCaseDataItem:nth-child(4n + 2), .socialResponsibilityCaseDataItem:nth-child(4n + 2),
.socialResponsibilityCaseDataItem:nth-child(4n + 3) { .socialResponsibilityCaseDataItem:nth-child(4n + 3) {
flex-basis: calc((100% - 30px) * 560 / 1370); flex-basis: calc((100% - 1.875rem) * 560 / 1370);
aspect-ratio: 560 / 480; aspect-ratio: 560 / 480;
} }
@ -127,16 +127,16 @@
/* 4列 */ /* 4列 */
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 33px; gap: 2.0625rem;
.socialResponsibilityReportItem { .socialResponsibilityReportItem {
/* width: 325px; */ /* width: 20.3125rem; */
.socialResponsibilityReportItemCover { .socialResponsibilityReportItemCover {
/* width: 325px; */ /* width: 20.3125rem; */
/* height: 439px; */ /* height: 27.4375rem; */
aspect-ratio: 325 / 439; aspect-ratio: 325 / 439;
box-shadow: 0px 0px 20px 0px rgba(0, 16, 32, 0.2); box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 16, 32, 0.2);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -145,13 +145,13 @@
.socialResponsibilityReportItemTitle { .socialResponsibilityReportItemTitle {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 1.125rem;
color: #222222; color: #222222;
line-height: 26px; line-height: 1.625rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
margin-top: 40px; margin-top: 2.5rem;
} }
} }
@ -159,16 +159,16 @@
} }
.socialResponsibilityReportItemMore { .socialResponsibilityReportItemMore {
width: 104px; width: 6.5rem;
height: 38px; height: 2.375rem;
line-height: 38px; line-height: 2.375rem;
text-align: center; text-align: center;
border: 1px solid #333333; border: .0625rem solid #333333;
font-size: 16px; font-size: 1rem;
color: #333333; color: #333333;
cursor: pointer; cursor: pointer;
margin: 0 auto; margin: 0 auto;
margin-top: 100px; margin-top: 6.25rem;
&:hover { &:hover {
background: #14355C; background: #14355C;

2
src/proxy.cjs
View File

@ -9,7 +9,7 @@ const isDev = process.env.DEV
console.log('isDev', isDev) console.log('isDev', isDev)
module.exports = { module.exports = {
'/companyHome': { '/companyHome': {
target: isDev ? 'http://10.3.0.7:9999/' : 'http://yintai.batiao8.com/', target: isDev === 'true' ? 'http://10.3.0.7:9999/' : 'http://yintai.batiao8.com/',
// target: "http://10.3.0.24:9211/", // target: "http://10.3.0.24:9211/",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/companyHome/, '') rewrite: (path) => path.replace(/^\/companyHome/, '')

2
src/utils/toast.tsx
View File

@ -15,7 +15,7 @@ const Toast = (
type === "info" ? "#333" : type === "warn" ? "#ff9800" : "#f44336" type === "info" ? "#333" : type === "warn" ? "#ff9800" : "#f44336"
}; };
color: white; color: white;
padding: 10px 20px; padding: .625rem 1.25rem;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 1000; z-index: 1000;