This commit is contained in:
parent
4d1861373a
commit
56bfd84606
|
|
@ -2,23 +2,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item,
|
||||
.itemActive,
|
||||
.arrow {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 2.8125rem;
|
||||
height: 2.8125rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: .3125rem;
|
||||
border: .0625rem solid #e0e0e0;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
}
|
||||
|
||||
.ellipsis {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 2.8125rem;
|
||||
height: 2.8125rem;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
line-height: 45px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 2.8125rem;
|
||||
letter-spacing: .125rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100px;
|
||||
width: 6.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,18 +48,18 @@
|
|||
.labelBlock {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
min-width: 160px;
|
||||
max-width: 550px;
|
||||
min-height: 200px;
|
||||
padding: 0 20px;
|
||||
min-width: 10rem;
|
||||
max-width: 34.375rem;
|
||||
min-height: 12.5rem;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.labelBlock.top {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.labelBlock.bottom {
|
||||
margin-top: 4px;
|
||||
margin-top: .25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -69,20 +69,20 @@
|
|||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #14355c;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: .375rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.labelList {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.labelList li {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: .25rem;
|
||||
list-style: disc;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.6875rem;
|
||||
gap: .5rem;
|
||||
padding: .5rem .6875rem;
|
||||
background: #14355C;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
border-radius: .375rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 0.125rem;
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.clear:hover {
|
||||
|
|
@ -80,23 +80,23 @@
|
|||
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
top: calc(100% + .25rem);
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
min-width: 13.75rem;
|
||||
padding: 0.75rem;
|
||||
padding: .75rem;
|
||||
background: #14355C;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3);
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 .375rem 1rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0 0.25rem;
|
||||
margin-bottom: .75rem;
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
|
|
@ -109,9 +109,9 @@
|
|||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.navBtn:hover:not(:disabled) {
|
||||
|
|
@ -125,14 +125,14 @@
|
|||
|
||||
.decadeLabel {
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.yearGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.25rem;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.yearCell {
|
||||
|
|
@ -142,9 +142,9 @@
|
|||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export default function YearPicker({
|
|||
{value != null ? `${value}年` : placeholder}
|
||||
</span>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
transition-delay: 0s;
|
||||
|
||||
.cardTitle span {
|
||||
left: 30px;
|
||||
left: 1.875rem;
|
||||
transform: translateX(0);
|
||||
text-align: left;
|
||||
transition-delay: 0s;
|
||||
|
|
@ -42,33 +42,33 @@
|
|||
}
|
||||
|
||||
.cardTitleUnderline::before {
|
||||
left: 30px;
|
||||
left: 1.875rem;
|
||||
transform: translateX(0);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.cardInner {
|
||||
padding: 50px;
|
||||
padding: 3.125rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
transition-delay: 0.2s;
|
||||
position: absolute;
|
||||
top: calc(100% - 170px);
|
||||
top: calc(100% - 10.625rem);
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
height: 2.125rem;
|
||||
line-height: 2.125rem;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: 0 30px;
|
||||
padding: 0 1.875rem;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
@ -91,19 +91,19 @@
|
|||
.cardTitleUnderline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
height: .0625rem;
|
||||
background: rgba(255,255,255,0.3);
|
||||
margin-top: 30px;
|
||||
margin-top: 1.875rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 3px;
|
||||
width: 18.75rem;
|
||||
height: .1875rem;
|
||||
background: rgba(255,255,255,1);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s ease;
|
||||
transition-delay: 0.2s;
|
||||
|
|
@ -111,12 +111,12 @@
|
|||
}
|
||||
|
||||
.cardContent {
|
||||
margin-top: 20px;
|
||||
padding: 0 30px;
|
||||
margin-top: 1.25rem;
|
||||
padding: 0 1.875rem;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -125,16 +125,16 @@
|
|||
|
||||
.cardMore {
|
||||
display: inline-block;
|
||||
margin-top: 60px;
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #FFFFFF;
|
||||
margin-top: 3.75rem;
|
||||
width: 6.5rem;
|
||||
height: 2.375rem;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
border: .0625rem solid #FFFFFF;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
.article {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 120px auto;
|
||||
padding: 7.5rem 0;
|
||||
|
||||
.articleHeaderLine, .articleHeader, .articleContent {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.articleHeaderLine {
|
||||
height: 100px;
|
||||
border-bottom: 1px solid #222222;
|
||||
height: 6.25rem;
|
||||
border-bottom: .0625rem solid #222222;
|
||||
display: flex;
|
||||
|
||||
.articleHeaderLineBack {
|
||||
|
|
@ -16,35 +21,35 @@
|
|||
}
|
||||
|
||||
.articleHeader {
|
||||
padding: 60px 0;
|
||||
margin-bottom: 60px;
|
||||
padding: 3.75rem 0;
|
||||
margin-bottom: 3.75rem;
|
||||
|
||||
.articleHeaderTitle {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
font-size: 2rem;
|
||||
color: #222222;
|
||||
line-height: 42px;
|
||||
line-height: 2.625rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.articleHeaderTimeLine {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #666666;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.articleContent {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ export default function Article({ data }: { data: Data }) {
|
|||
<div className={styles.article}>
|
||||
<div className={styles.articleHeaderLine}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
/* height: 1080px; */
|
||||
/* height: 67.5rem; */
|
||||
height: 100vh;
|
||||
padding: 100px 0;
|
||||
padding: 6.25rem 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
.bottomTabsSectionContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: calc(100% - 520px);
|
||||
width: calc(100% - 32.5rem);
|
||||
margin: 0 auto;
|
||||
height: 500px;
|
||||
margin-top: 200px;
|
||||
height: 31.25rem;
|
||||
margin-top: 12.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -47,15 +47,15 @@
|
|||
|
||||
.contentTitle {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.contentText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
height: .125rem;
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
|
@ -85,15 +85,15 @@
|
|||
|
||||
.bottomTabsSectionContentTab {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
line-height: 3.75rem;
|
||||
height: 3.75rem;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
line-height: 3.75rem;
|
||||
height: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
/* 3列 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
|
||||
.columnXGridsItem {
|
||||
color: #fff;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
padding: 60px 40px;
|
||||
padding: 3.75rem 2.5rem;
|
||||
transition: background var(--duration) ease;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -55,17 +55,17 @@
|
|||
|
||||
.columnXGridsItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 2.125rem;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.columnXGridsItemContent {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
opacity: 0;
|
||||
transition: opacity var(--duration) ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
.honorGrids {
|
||||
width: 100%;
|
||||
padding: 100px 0;
|
||||
padding: 6.25rem 0;
|
||||
background: rgba(216, 216, 216, 0.5);
|
||||
|
||||
.honorGridsTitle {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: center;
|
||||
width: 1320px;
|
||||
width: 82.5rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 6.25rem;
|
||||
}
|
||||
|
||||
.honorGridsItems {
|
||||
width: 1320px;
|
||||
width: 82.5rem;
|
||||
margin: 0 auto;
|
||||
/* 4*n */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
gap: 3.75rem;
|
||||
|
||||
.honorGridsItem {
|
||||
height: 116px;
|
||||
height: 7.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 50px;
|
||||
padding: 0 3.125rem;
|
||||
text-align: center;
|
||||
|
||||
.honorGridsTitle {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #222222;
|
||||
}
|
||||
.honorGridsItemLargeTitle {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #222222;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
.honorGridsItemBgleft,
|
||||
.honorGridsItemBgright {
|
||||
width: 70px;
|
||||
height: 116px;
|
||||
width: 4.375rem;
|
||||
height: 7.25rem;
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.jobPage {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 120px 100px;
|
||||
padding: 7.5rem 6.25rem;
|
||||
|
||||
.jobPageHeaderLine {
|
||||
height: 100px;
|
||||
border-bottom: 1px solid #222222;
|
||||
height: 6.25rem;
|
||||
border-bottom: .0625rem solid #222222;
|
||||
display: flex;
|
||||
|
||||
.jobPageHeaderLineBack {
|
||||
|
|
@ -16,41 +16,41 @@
|
|||
}
|
||||
|
||||
.jobPageHeader {
|
||||
padding: 60px 160px;
|
||||
padding: 3.75rem 10rem;
|
||||
|
||||
.jobPageHeaderTitle {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
font-size: 2rem;
|
||||
color: #222222;
|
||||
line-height: 42px;
|
||||
line-height: 2.625rem;
|
||||
/* text-align: center; */
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.jobPageHeaderTimeLine {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.jobPageContent {
|
||||
font-size: 20px;
|
||||
padding: 0 160px;
|
||||
font-size: 1.25rem;
|
||||
padding: 0 10rem;
|
||||
}
|
||||
|
||||
.jobPageContentTitle {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -59,9 +59,9 @@
|
|||
.jobPageContentText {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default function JobPage({ data }: { data: Data }) {
|
|||
<div className={styles.jobPage}>
|
||||
<div className={styles.jobPageHeaderLine}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,11 +36,11 @@ export default function JobPage({ data }: { data: Data }) {
|
|||
<div className={styles.jobPageContentTitle}>岗位描述</div>
|
||||
<p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.content }}></p>
|
||||
</div>
|
||||
<div className={styles.jobPageContent} style={{ marginTop: "50px" }}>
|
||||
<div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
|
||||
<div className={styles.jobPageContentTitle}>任职需求</div>
|
||||
<p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.requirement }}></p>
|
||||
</div>
|
||||
<div className={styles.jobPageContent} style={{ marginTop: "50px" }}>
|
||||
<div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
|
||||
<div className={styles.jobPageContentTitle}>联系方式</div>
|
||||
<p className={styles.jobPageContentText}>{data.contact}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.paragraphSection {
|
||||
padding: 100px 260px;
|
||||
padding: 6.25rem 16.25rem;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
|
||||
.paragraphSectionTitle {
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #14355C;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -24,17 +24,17 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 100px;
|
||||
gap: 2.5rem;
|
||||
margin-top: 6.25rem;
|
||||
|
||||
.tag {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #14355C;
|
||||
line-height: 30px;
|
||||
padding: 24px 40px;
|
||||
line-height: 1.875rem;
|
||||
padding: 1.5rem 2.5rem;
|
||||
background: #F0F2F4;
|
||||
border-radius: 326px 326px 326px 326px;
|
||||
border-radius: 20.375rem 20.375rem 20.375rem 20.375rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
.rowAccordion {
|
||||
position: relative;
|
||||
overflow-anchor: none;
|
||||
padding: 0 260px;
|
||||
/* padding: 0 16.25rem; */
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
@ -27,44 +27,47 @@
|
|||
.rowAccordion .contentRow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.rowAccordion {
|
||||
.headerRow {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
height: 15.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
}
|
||||
}
|
||||
.contentRow {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
|
||||
.contentItem {
|
||||
flex: 1;
|
||||
transition: flex var(--duration) ease, padding-bottom var(--duration) ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
border-left: 1px solid #fff;
|
||||
padding-top: 6.25rem;
|
||||
padding-bottom: 6.25rem;
|
||||
border-left: .0625rem solid #fff;
|
||||
&:last-child {
|
||||
border-right: 1px solid #fff;
|
||||
border-right: .0625rem solid #fff;
|
||||
}
|
||||
.contentItemContainer {
|
||||
padding: 0 20px;
|
||||
min-height: 100px;
|
||||
padding: 0 1.25rem;
|
||||
min-height: 6.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: -3px;
|
||||
margin-left: -0.1875rem;
|
||||
transition: all var(--duration) ease-in-out;
|
||||
position: relative;
|
||||
&::before {
|
||||
|
|
@ -72,26 +75,26 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
height: 100px;
|
||||
width: .3125rem;
|
||||
height: 6.25rem;
|
||||
background: #14355C;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contentItemTitle {
|
||||
height: 100px;
|
||||
height: 6.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
transition: all var(--duration) ease-in-out;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: .375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.contentItemSubtitle {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
transition: font-size var(--duration) ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -104,41 +107,41 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* padding: 60px 0; */
|
||||
margin-top: 20px;
|
||||
/* padding: 3.75rem 0; */
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.contentItemContent {
|
||||
font-size: 16px;
|
||||
/* margin-top: 40px; */
|
||||
font-size: 1rem;
|
||||
/* margin-top: 2.5rem; */
|
||||
}
|
||||
|
||||
.contentItemLinks {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
text-decoration-line: underline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px 20px;
|
||||
gap: 1.875rem 1.25rem;
|
||||
}
|
||||
}
|
||||
.contentItem.active {
|
||||
flex: 2;
|
||||
padding-bottom: 200px;
|
||||
padding-bottom: 12.5rem;
|
||||
.contentItemContainer {
|
||||
padding: 0 40px;
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
.contentItemTitle {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.contentItemSubtitle {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.contentItemContentWrapper {
|
||||
height: 300px;
|
||||
height: 18.75rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
|
|||
</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) => (
|
||||
<motion.div
|
||||
className={`${styles.contentItem} ${activeIndex === index && styles.active}`}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function Section({
|
|||
background, maskBackground, className }: Props) {
|
||||
return (
|
||||
<section style={{
|
||||
padding: '100px 260px',
|
||||
padding: '6.25rem 16.25rem',
|
||||
width: '100%',
|
||||
height: height || 'auto',
|
||||
position: 'relative',
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
.sectionTitle {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
font-size: 2.5rem;
|
||||
line-height: 3.125rem;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 6.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.sectionTitleSubtitle {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.875rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.sectionTitleSubcontent {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.875rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ type Props = {
|
|||
|
||||
export default function SectionTitle({ title, subtitle, color, subcontent }: Props) {
|
||||
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>
|
||||
{subtitle && <span className={styles.sectionTitleSubtitle}>{subtitle}</span>}
|
||||
{subcontent && <span className={styles.sectionTitleSubcontent}>{subcontent}</span>}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
.carouselWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
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-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
|
@ -24,13 +24,13 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -90px;
|
||||
left: -5.625rem;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.nextBtn {
|
||||
left: auto;
|
||||
right: -90px;
|
||||
right: -5.625rem;
|
||||
}
|
||||
|
||||
.swiperCardList {
|
||||
|
|
@ -65,10 +65,10 @@
|
|||
top: 0;
|
||||
|
||||
.swiperTitle {
|
||||
padding: 0 30px;
|
||||
padding: 0 1.875rem;
|
||||
|
||||
span {
|
||||
left: 30px;
|
||||
left: 1.875rem;
|
||||
transform: translateX(0);
|
||||
border-color: #fff;
|
||||
}
|
||||
|
|
@ -91,21 +91,21 @@
|
|||
.swiperTitle {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
margin: 0 30px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
margin: 0 1.875rem;
|
||||
border-bottom: .0625rem solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
border-bottom: 3px solid #14355C;
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
border-bottom: .1875rem solid #14355C;
|
||||
transform: translateX(-50%);
|
||||
transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
white-space: nowrap;
|
||||
|
|
@ -113,10 +113,10 @@
|
|||
}
|
||||
|
||||
.swiperDesc {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
margin: 40px 60px;
|
||||
line-height: 1.5rem;
|
||||
margin: 2.5rem 3.75rem;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.topTabsSection {
|
||||
padding: 100px 260px 150px 260px;
|
||||
padding: 6.25rem 16.25rem 9.375rem 16.25rem;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-size: cover;
|
||||
|
|
@ -9,11 +9,11 @@
|
|||
|
||||
.topTabsTabs {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #D5D8DC;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.125rem;
|
||||
border-bottom: .0625rem solid #D5D8DC;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
color: #14355C;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
}
|
||||
|
||||
.topTabsNavBtnLeft {
|
||||
left: 0px;
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
.topTabsNavBtnRight {
|
||||
right: 0px;
|
||||
right: 0rem;
|
||||
}
|
||||
|
||||
.topTabsTabsScroll {
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 130px;
|
||||
gap: 8.125rem;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -74,14 +74,14 @@
|
|||
.topTabsBottomLine {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
height: .125rem;
|
||||
background: #000000;
|
||||
transition: left 0.25s ease, width 0.25s ease;
|
||||
}
|
||||
|
||||
.topTabsTabItem {
|
||||
/* height: 90px;
|
||||
line-height: 90px; */
|
||||
/* height: 5.625rem;
|
||||
line-height: 5.625rem; */
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
color: #222222;
|
||||
|
|
@ -92,9 +92,9 @@
|
|||
}
|
||||
|
||||
.topTabsContent {
|
||||
padding-top: 150px;
|
||||
padding-top: 9.375rem;
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
gap: 5rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
@ -103,20 +103,20 @@
|
|||
margin: auto 0;
|
||||
|
||||
.topTabsContentLeftHead {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 1.875rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: .625rem;
|
||||
|
||||
.topTabsContentLeftTitle {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
gap: .625rem;
|
||||
|
||||
.topTabsContentLeftTitleMain {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -124,9 +124,9 @@
|
|||
|
||||
.topTabsContentLeftTitleSub {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #14355C;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -142,9 +142,9 @@
|
|||
|
||||
.topTabsContentLeftDesc {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -155,26 +155,26 @@
|
|||
flex: 8;
|
||||
|
||||
img {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
width: 50rem;
|
||||
height: 31.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.topTabsContentItems {
|
||||
width: 920px;
|
||||
width: 57.5rem;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.topTabsContentItem {
|
||||
list-style: disc;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #222222;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
|
|||
<ScrollReveal preset="slideRight" delay={0.3} >
|
||||
{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,40 @@
|
|||
/* rem 基准：以 16px 为设计稿基准 */
|
||||
/* rem 基准：以设计稿 16px 为基准；再按 --ui-scale 抵消 Windows 显示缩放带来的物理尺寸偏大 */
|
||||
:root {
|
||||
--design-rem-base: 16px;
|
||||
--ui-scale: 1;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-size: calc(var(--design-rem-base) * var(--ui-scale));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
--design-rem-base: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
--design-rem-base: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
--design-rem-base: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
--design-rem-base: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
--design-rem-base: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,6 +46,7 @@ body {
|
|||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,24 @@ import ReactDOM from 'react-dom/client';
|
|||
import './index.css';
|
||||
import App from './App';
|
||||
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(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<StyleProvider >
|
||||
<App />
|
||||
</StyleProvider>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
|
|
|||
|
|
@ -18,18 +18,18 @@
|
|||
.footerColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.footerTitle {
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
font-size: 0.8125rem;
|
||||
font-size: .8125rem;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
gap: 2.5rem;
|
||||
position: absolute;
|
||||
right: 3.75rem;
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
.socialIcons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.socialIcon {
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
justify-content: center;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.footerLower {
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.footerLowerLinks {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 64rem) {
|
||||
.footerUpper {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.footerUpper {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -140,6 +140,6 @@
|
|||
|
||||
.footerLowerInner {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,14 +41,14 @@ export default function Footer() {
|
|||
<img
|
||||
src={icon.src}
|
||||
alt={icon.alt}
|
||||
style={{ width: "26px", height: "26px" }}
|
||||
style={{ width: "1.625rem", height: "1.625rem" }}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
style={{ width: "92px", height: "56px" }}
|
||||
style={{ width: "5.75rem", height: "3.5rem" }}
|
||||
className="logo-dark"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@ function FooterLower({
|
|||
return (
|
||||
<div className={styles.footerLower}>
|
||||
<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>{icpNumber}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,13 +42,13 @@
|
|||
|
||||
.whiteMode.header {
|
||||
/* background: rgba(255, 255, 255, 1); */
|
||||
box-shadow: 0 0 10px 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(255, 255, 255, 0.1);
|
||||
box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.2);
|
||||
transition-delay: none;
|
||||
}
|
||||
|
||||
.keepNavDark.header::before {
|
||||
height: 120px;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
.whiteMode .navLink,
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
width: 95%;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
height: 1px;
|
||||
height: .0625rem;
|
||||
background: #FFFFFF;
|
||||
transform: scaleX(0);
|
||||
transform-origin: 90% 0;
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
}
|
||||
|
||||
.crossYline {
|
||||
width: 1px;
|
||||
width: .0625rem;
|
||||
height: 0%;
|
||||
background: #FFFFFF;
|
||||
align-self: flex-end;
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
.langTrigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
gap: .25rem;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
padding: .25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
width: 100%;
|
||||
height: 0;
|
||||
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;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 64rem) {
|
||||
.header {
|
||||
height: 5.5rem;
|
||||
}
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.header {
|
||||
height: 4rem;
|
||||
}
|
||||
|
|
@ -297,19 +297,19 @@
|
|||
}
|
||||
|
||||
.navItem {
|
||||
padding: 0 0.5rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
gap: 0.5rem;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.dropPanel {
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export default function Header() {
|
|||
trigger={["click"]}
|
||||
>
|
||||
<button className={styles.langTrigger} type="button">
|
||||
<span style={{ fontSize: "18px" }}>
|
||||
<span style={{ fontSize: "1.125rem" }}>
|
||||
{langMenuItems.find((i: SupportLocale) => i.key === locale)?.label ?? "中文"}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
.textBox {
|
||||
background: rgba(20,53,92,0.5);
|
||||
padding: 2.5rem;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.imageOverlayTitle span {
|
||||
border-bottom: 3px solid #FFFFFF;
|
||||
border-bottom: .1875rem solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,13 +86,13 @@
|
|||
height: 4.375rem;
|
||||
color: #fff;
|
||||
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 {
|
||||
display: inline-block;
|
||||
height: 4.4375rem;
|
||||
border-bottom: 3px solid #14355C;
|
||||
border-bottom: .1875rem solid #14355C;
|
||||
}
|
||||
|
||||
.images .imageOverlayDesc {
|
||||
|
|
@ -102,8 +102,8 @@
|
|||
transition: all 0.3s ease-in-out;
|
||||
li {
|
||||
list-style: disc;
|
||||
margin: 10px 0;
|
||||
margin-left: 20px;
|
||||
margin: .625rem 0;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -147,8 +147,8 @@
|
|||
padding-right: 6.25rem;
|
||||
li {
|
||||
list-style: disc;
|
||||
margin: 8px 0;
|
||||
margin-left: 20px;
|
||||
margin: .5rem 0;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
align-items: start;
|
||||
gap: 16px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section3Item {
|
||||
|
|
@ -175,22 +175,22 @@
|
|||
|
||||
li {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
list-style: disc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section4Section {
|
||||
padding-top: 100px;
|
||||
padding-top: 6.25rem;
|
||||
|
||||
.section4Title {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: center;
|
||||
}
|
||||
.timelineWrapper {
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(200, 200, 205, 0.3) 2px,
|
||||
rgba(200, 200, 205, 0.3) 4px
|
||||
transparent .125rem,
|
||||
rgba(200, 200, 205, 0.3) .125rem,
|
||||
rgba(200, 200, 205, 0.3) .25rem
|
||||
);
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 6.25rem auto;
|
||||
padding-bottom: 100px;
|
||||
padding-bottom: 6.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
width: .125rem;
|
||||
background: #828F9E;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
|
@ -50,15 +50,15 @@
|
|||
align-items: flex-start;
|
||||
min-height: 6rem;
|
||||
margin-bottom: 1rem;
|
||||
scroll-margin-top: 120px;
|
||||
scroll-margin-top: 7.5rem;
|
||||
}
|
||||
|
||||
.timelineItem .side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
gap: .5rem;
|
||||
padding: .5rem 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.timelineItem .side:empty {
|
||||
min-height: 1px;
|
||||
min-height: .0625rem;
|
||||
}
|
||||
|
||||
.year {
|
||||
|
|
@ -87,18 +87,18 @@
|
|||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
max-width: 37.5rem;
|
||||
margin-top: 1.25rem;
|
||||
|
||||
list-style: disc;
|
||||
margin-left: 20px;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.timelineItem.left .desc {
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
transform: translate(-50%, -50%);
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
border: 2px solid #14355C;
|
||||
border: .125rem solid #14355C;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
|
@ -165,14 +165,14 @@
|
|||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(-50%);
|
||||
width: 0.375rem;
|
||||
width: .375rem;
|
||||
min-height: 0;
|
||||
background: #14355C;
|
||||
transition: all 0.9s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 64rem) {
|
||||
.section {
|
||||
padding: 4rem 4rem;
|
||||
}
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 0 !important;
|
||||
padding: 6.25rem 0 !important;
|
||||
}
|
||||
|
||||
.twoColSection.reverse {
|
||||
|
|
@ -52,20 +52,20 @@
|
|||
.twoColSectionTab {
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
|
||||
.twoColSectionTab.active {
|
||||
border-bottom: 2px solid #14355C;
|
||||
border-bottom: .125rem solid #14355C;
|
||||
color: #14355C;
|
||||
}
|
||||
|
||||
.twoColSectionContent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 60px;
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.twoColImage {
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.twoColText {
|
||||
padding: 100px 260px 150px 80px;
|
||||
padding: 6.25rem 16.25rem 9.375rem 5rem;
|
||||
background: #F0F2F4;
|
||||
}
|
||||
|
||||
|
|
@ -115,13 +115,13 @@
|
|||
.btnPrimary {
|
||||
margin-top: 6.25rem;
|
||||
display: inline-block;
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #333333;
|
||||
font-size: 16px;
|
||||
width: 6.5rem;
|
||||
height: 2.375rem;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
border: .0625rem solid #333333;
|
||||
font-size: 1rem;
|
||||
color: #333333;
|
||||
line-height: 38px;
|
||||
line-height: 2.375rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 260px;
|
||||
padding: 6.25rem 16.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -161,8 +161,8 @@
|
|||
}
|
||||
|
||||
.featuresHeroContent {
|
||||
margin-top: 160px;
|
||||
height: 400px;
|
||||
margin-top: 10rem;
|
||||
height: 25rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: #FFFFFF;
|
||||
|
|
@ -172,29 +172,29 @@
|
|||
.featuresHeroContentTitle {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-size: 1.875rem;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
|
||||
.featuresHeroContentDesc {
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.featuresHeroTabs {
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-top: .0625rem solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.featuresHeroTabIndicator {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
height: .125rem;
|
||||
background: #ffffff;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
|
|
@ -207,14 +207,14 @@
|
|||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: row;
|
||||
/* gap: 100px; */
|
||||
/* gap: 6.25rem; */
|
||||
}
|
||||
|
||||
.featuresHeroTab {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
.propertyServices {
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
padding: 0 260px;
|
||||
padding: 0 16.25rem;
|
||||
}
|
||||
|
||||
.propertyServicesContent {
|
||||
|
|
@ -239,34 +239,34 @@
|
|||
|
||||
.propertyServicesTitle {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
}
|
||||
|
||||
.propertyServicesSubtitle {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.propertyServicesBtn {
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
width: 6.5rem;
|
||||
height: 2.375rem;
|
||||
line-height: 2.375rem;
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #FFFFFF;
|
||||
margin-top: 100px;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
border: .0625rem solid #FFFFFF;
|
||||
margin-top: 6.25rem;
|
||||
}
|
||||
|
||||
.propertyServicesBtn:hover {
|
||||
background: #14355C;
|
||||
border-color: #14355C;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #FFFFFF;
|
||||
border: .0625rem solid #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -279,11 +279,11 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 0.875rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 64rem) {
|
||||
.overview {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.overview {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default function BusinessCommercialGroup() {
|
|||
<img
|
||||
src={section2Data.tabItems[activeTabIndex]?.sideImage as string}
|
||||
alt=""
|
||||
style={{ width: "100%", height: "800px" }}
|
||||
style={{ width: "100%", height: "50rem" }}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,49 @@
|
|||
.twoColSection {
|
||||
padding: 100px 260px;
|
||||
padding: 6.25rem 16.25rem;
|
||||
}
|
||||
|
||||
.twoColSection p {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.threeColSection {
|
||||
padding: 100px 260px;
|
||||
padding: 6.25rem 16.25rem;
|
||||
width: 100%;
|
||||
height: 966px;
|
||||
height: 60.375rem;
|
||||
background: rgba(216, 216, 216, 0.5);
|
||||
}
|
||||
|
||||
.threeColTabs {
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 70px;
|
||||
gap: 4.375rem;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #D5D8DC;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.125rem;
|
||||
border-bottom: .0625rem solid #D5D8DC;
|
||||
}
|
||||
|
||||
.threeColTabItem {
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
cursor: pointer;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.threeColTabItem.active {
|
||||
border-bottom: 2px solid #000000;
|
||||
border-bottom: .125rem solid #000000;
|
||||
color: #14355C;
|
||||
}
|
||||
|
||||
.threeColContent {
|
||||
padding: 150px 0;
|
||||
padding: 9.375rem 0;
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
gap: 5rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
@ -51,25 +51,25 @@
|
|||
flex: 6;
|
||||
margin: auto 0;
|
||||
.threeColContentLeftHead {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 1.875rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: .625rem;
|
||||
|
||||
.threeColContentLeftTitle {
|
||||
.threeColContentLeftTitleMain {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #222222;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.threeColContentLeftTitleSub {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #14355C;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -78,9 +78,9 @@
|
|||
}
|
||||
.threeColContentLeftDesc {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
.threeColContentRight {
|
||||
flex: 8;
|
||||
img {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
width: 50rem;
|
||||
height: 31.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
.investGroup {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
padding: 100px 260px;
|
||||
height: 50rem;
|
||||
padding: 6.25rem 16.25rem;
|
||||
background: rgba(0, 39, 83, 0.7);
|
||||
|
||||
.investGroupContent {
|
||||
color: #FFFFFF;
|
||||
height: 460px;
|
||||
height: 28.75rem;
|
||||
|
||||
.investGroupContentItems {
|
||||
display: flex;
|
||||
height: 460px;
|
||||
height: 28.75rem;
|
||||
|
||||
.investGroupContentItem:first-child {
|
||||
padding-right: 100px;
|
||||
padding-right: 6.25rem;
|
||||
}
|
||||
|
||||
.investGroupContentItem:last-child {
|
||||
padding-left: 100px;
|
||||
padding-left: 6.25rem;
|
||||
}
|
||||
|
||||
.investGroupContentItem {
|
||||
|
|
@ -26,23 +26,23 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
gap: 2.5rem;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
border-right: 1px solid rgba(255, 255, 255, .5);
|
||||
border-right: .0625rem solid rgba(255, 255, 255, .5);
|
||||
|
||||
.investGroupContentItemTitle {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.investGroupContentItemContent {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -55,25 +55,25 @@
|
|||
|
||||
.equityInvestment {
|
||||
width: 100%;
|
||||
padding: 100px 260px;
|
||||
padding: 6.25rem 16.25rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
||||
.equityInvestmentItems {
|
||||
/* 5列布局 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px 40px;
|
||||
gap: 1.25rem 2.5rem;
|
||||
|
||||
.equityInvestmentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
|
||||
.equityInvestmentItemLogo {
|
||||
width: 264px;
|
||||
height: 157px;
|
||||
width: 16.5rem;
|
||||
height: 9.8125rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
|
@ -98,28 +98,28 @@
|
|||
}
|
||||
|
||||
.industryFosterMask {
|
||||
width: 546px;
|
||||
min-height: 400px;
|
||||
width: 34.125rem;
|
||||
min-height: 25rem;
|
||||
background: rgba(20, 53, 92, 0.5);
|
||||
color: #fff;
|
||||
padding: 60px 50px;
|
||||
padding: 3.75rem 3.125rem;
|
||||
|
||||
.industryFosterMaskTitle {
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
|
||||
.industryFosterMaskContent {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
.commercialItem {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-left: 1px solid #fff;
|
||||
border-left: .0625rem solid #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
.commercialItem:last-child {
|
||||
border-right: 1px solid #fff;
|
||||
border-right: .0625rem solid #fff;
|
||||
}
|
||||
.commercialTitle {
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 64rem) {
|
||||
.commercialContent {
|
||||
margin: 0 4rem;
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48rem) {
|
||||
.cardsInner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
color: #666;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.6;
|
||||
height: 70px;
|
||||
height: 4.375rem;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
|
|||
|
|
@ -6,39 +6,39 @@
|
|||
.campusColLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
|
||||
|
||||
.resetButton {
|
||||
width: 340px;
|
||||
height: 50px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #14355C;
|
||||
width: 21.25rem;
|
||||
height: 3.125rem;
|
||||
border-radius: .375rem .375rem .375rem .375rem;
|
||||
border: .0625rem solid #14355C;
|
||||
cursor: pointer;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #14355C;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.campusColRight {
|
||||
.jobList {
|
||||
padding-bottom: 100px;
|
||||
width: 960px;
|
||||
min-height: 500px;
|
||||
padding-bottom: 6.25rem;
|
||||
width: 60rem;
|
||||
min-height: 31.25rem;
|
||||
}
|
||||
.jobItem {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
height: 12.5rem;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
border-bottom: .0625rem solid #E5E5E5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 30px 20px;
|
||||
gap: .9375rem;
|
||||
padding: 1.875rem 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
|
|
@ -60,17 +60,17 @@
|
|||
|
||||
.jobItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #222222;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.jobItemTitleRight {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,19 +79,19 @@
|
|||
|
||||
.jobItemLabels {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
line-height: 24px;
|
||||
line-height: 1.5rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: .625rem;
|
||||
|
||||
}
|
||||
|
||||
.jobItemContent {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #666666;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
/* 超过2行省略 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -105,34 +105,34 @@
|
|||
|
||||
|
||||
.searchInput {
|
||||
width: 340px;
|
||||
height: 50px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #B6C0CB;
|
||||
width: 21.25rem;
|
||||
height: 3.125rem;
|
||||
border-radius: .375rem .375rem .375rem .375rem;
|
||||
border: .0625rem solid #B6C0CB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px;
|
||||
padding: .875rem;
|
||||
overflow: hidden;
|
||||
|
||||
.searchIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 3.125rem;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.375rem;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -148,28 +148,28 @@
|
|||
}
|
||||
|
||||
.selectFormItemLabel {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #666666;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.selectFormItemBox {
|
||||
width: 340px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #B6C0CB;
|
||||
padding: 0 14px;
|
||||
width: 21.25rem;
|
||||
height: 3.125rem;
|
||||
border-radius: .375rem;
|
||||
border: .0625rem solid #B6C0CB;
|
||||
padding: 0 .875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.375rem;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.selectFilterIcon {
|
||||
margin-right: 5px;
|
||||
margin-right: .3125rem;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
|
|
@ -196,8 +196,8 @@
|
|||
.selectFormItemSelect :global(.ant-select-selection-placeholder),
|
||||
.selectFormItemSelect :global(.ant-select-selection-item) {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.375rem;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
|
|
@ -206,6 +206,6 @@
|
|||
}
|
||||
|
||||
.selectDownIcon {
|
||||
margin-left: 5px;
|
||||
margin-left: .3125rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
.cultureItems {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
gap: .9375rem;
|
||||
|
||||
.cultureItem {
|
||||
color: #fff;
|
||||
/* width: 457px;
|
||||
height: 560px; */
|
||||
/* width: 28.5625rem;
|
||||
height: 35rem; */
|
||||
aspect-ratio: 457 / 560;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
.cultureItemInner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 40px;
|
||||
padding: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -32,16 +32,16 @@
|
|||
|
||||
.cultureItemTitle {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
|
||||
.cultureItemContent {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
line-height: 2.5rem;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.cultureItemContent {
|
||||
height: 40px;
|
||||
height: 2.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,36 +68,36 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 0 140px;
|
||||
margin: 0 8.75rem;
|
||||
|
||||
.valuesItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
|
||||
.valuesItemIcon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 6.25rem;
|
||||
height: 6.25rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: .9375rem;
|
||||
}
|
||||
|
||||
.valuesItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
|
||||
.valuesItemContent {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.mediaItems {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
height: 500px;
|
||||
height: 31.25rem;
|
||||
|
||||
.mediaItem {
|
||||
height: 100%;
|
||||
|
|
@ -11,27 +11,27 @@
|
|||
justify-content: center;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid rgba(255,255,255,0.5);
|
||||
padding-right: 60px;
|
||||
border-right: .0625rem solid rgba(255,255,255,0.5);
|
||||
padding-right: 3.75rem;
|
||||
}
|
||||
&:last-child {
|
||||
padding-left: 60px;
|
||||
padding-left: 3.75rem;
|
||||
}
|
||||
|
||||
.mediaItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.mediaItemContent {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
justify-content: flex-end;
|
||||
|
||||
.searchInput {
|
||||
width: 340px;
|
||||
height: 50px;
|
||||
width: 21.25rem;
|
||||
height: 3.125rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #B6C0CB;
|
||||
padding: 0 16px;
|
||||
border-radius: .375rem .375rem .375rem .375rem;
|
||||
border: .0625rem solid #B6C0CB;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
|
|
@ -20,17 +20,17 @@
|
|||
background: transparent;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,16 +39,16 @@
|
|||
|
||||
.newList {
|
||||
/* 3列 */
|
||||
min-height: 200px;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
min-height: 12.5rem;
|
||||
margin-top: 6.25rem;
|
||||
margin-bottom: 6.25rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 22px 30px;
|
||||
gap: 1.375rem 1.875rem;
|
||||
|
||||
.newItem {
|
||||
/* height: 500px;
|
||||
width: 452px; */
|
||||
/* height: 31.25rem;
|
||||
width: 28.25rem; */
|
||||
aspect-ratio: 452 / 500;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
img, video {
|
||||
width: 100%;
|
||||
/* height: 300px; */
|
||||
/* height: 18.75rem; */
|
||||
aspect-ratio: 452 / 300;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
width: 100%;
|
||||
aspect-ratio: 452 / 200;
|
||||
background: #fff;
|
||||
padding: 20px 20px 40px;
|
||||
padding: 1.25rem 1.25rem 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -92,9 +92,9 @@
|
|||
|
||||
.newItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: #222222;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -103,9 +103,9 @@
|
|||
|
||||
.newItemCreateTime {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #666666;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.auditReport {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 200px;
|
||||
gap: 12.5rem;
|
||||
.auditReportP {
|
||||
font-size: 18px;
|
||||
line-height: 34px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 2.125rem;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
|
@ -15,26 +15,26 @@
|
|||
}
|
||||
|
||||
.auditReportQrCode {
|
||||
width: 189px;
|
||||
height: 241px;
|
||||
width: 11.8125rem;
|
||||
height: 15.0625rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.auditReportQrCodeTitle {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.auditReportQrCodeImg {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.auditReportQrCodeText {
|
||||
font-size: 14px;
|
||||
font-size: .875rem;
|
||||
color: #222;
|
||||
margin-top: 5px;
|
||||
margin-top: .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.searchRow {
|
||||
width: 100%;
|
||||
height: 288px;
|
||||
height: 18rem;
|
||||
background: #F0F2F4;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -8,35 +8,35 @@
|
|||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
|
||||
.searchRowTitle {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #222222;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
|
||||
.searchInputWrapper {
|
||||
position: relative;
|
||||
|
||||
.searchInput {
|
||||
width: 600px;
|
||||
height: 54px;
|
||||
border: 1px solid #333333;
|
||||
width: 37.5rem;
|
||||
height: 3.375rem;
|
||||
border: .0625rem solid #333333;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 24px;
|
||||
line-height: 1.5rem;
|
||||
outline: none;
|
||||
padding: 0 20px;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.searchKeyword {
|
||||
position: absolute;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
margin-top: 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
color: #222222;
|
||||
|
||||
.searchKeywordKeyword {
|
||||
|
|
@ -48,14 +48,14 @@
|
|||
}
|
||||
|
||||
.searchBtn {
|
||||
width: 128px;
|
||||
height: 54px;
|
||||
width: 8rem;
|
||||
height: 3.375rem;
|
||||
background: #14355C;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
outline: none;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -66,13 +66,14 @@
|
|||
.searchItemList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
gap: 3.125rem;
|
||||
margin-bottom: 9.375rem;
|
||||
.searchItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
height: 160px;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
gap: 1.25rem;
|
||||
height: 10rem;
|
||||
border-bottom: .0625rem solid #D8D8D8;
|
||||
|
||||
.searchItemTitleRow {
|
||||
display: flex;
|
||||
|
|
@ -80,25 +81,25 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.searchItemTitle {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #222222;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.searchItemCreateTime {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchItemContent {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
line-height: 1.875rem;
|
||||
/* 2行文本超出省略 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,75 @@
|
|||
import Banner, { type BannerConfig } from "@/components/Banner";
|
||||
import Section from "@/components/layout/Section";
|
||||
import styles from "./Search.module.css";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { dateFormat } from "@/utils";
|
||||
import { useStore } from "@/store";
|
||||
|
||||
import appApi from "@/api/app";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { Link } from "react-router-dom";
|
||||
type SearchData = {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
createTime: string;
|
||||
lang: "ZH" | "EN";
|
||||
path: string;
|
||||
};
|
||||
|
||||
export default function Search() {
|
||||
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 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 [searchKeyword, setSearchKeyword] = useState("");
|
||||
const [total, setTotal] = useState(0);
|
||||
const [searchData, setSearchData] = useState<SearchData[]>([]);
|
||||
const localSearchData = useMemo(() => {
|
||||
return searchData.filter((item) => item.lang.toLowerCase() === locale.split('-')[0]);
|
||||
}, [searchData, locale]);
|
||||
|
||||
const handleSearch = useCallback(() => {
|
||||
appApi.getNewsList({
|
||||
page,
|
||||
size,
|
||||
title: searchKeyword,
|
||||
category_id: categoryId,
|
||||
}).then((res) => {
|
||||
setSearched(true);
|
||||
setSearchData([
|
||||
{
|
||||
id: 1,
|
||||
title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态",
|
||||
content:
|
||||
"中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。",
|
||||
createTime: "2025-11-25",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态",
|
||||
content:
|
||||
"中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。",
|
||||
createTime: "2025-11-25",
|
||||
},
|
||||
]);
|
||||
}, [searchKeyword]);
|
||||
const data = res.data.items.map((item: any) => {
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
content: item.content,
|
||||
createTime: item.create_time,
|
||||
lang: item.lang,
|
||||
path: `/news/detail/${item.id}`,
|
||||
}
|
||||
})
|
||||
setSearchData(data);
|
||||
setTotal(res.data.total);
|
||||
});
|
||||
}, [searchKeyword, page, size, categoryId]);
|
||||
|
||||
useEffect(() => {
|
||||
handleSearch();
|
||||
}, [page, size]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -53,11 +82,11 @@ export default function Search() {
|
|||
|
||||
<section className={styles.searchRow}>
|
||||
<div className={styles.searchRowInner}>
|
||||
<span className={styles.searchRowTitle}>关键词</span>
|
||||
<span className={styles.searchRowTitle}>{searchTips.keyword}</span>
|
||||
<div className={styles.searchInputWrapper}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
placeholder={searchTips.placeholder}
|
||||
className={styles.searchInput}
|
||||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
|
|
@ -67,13 +96,13 @@ export default function Search() {
|
|||
/>
|
||||
{searched && (
|
||||
<div className={styles.searchKeyword}>
|
||||
搜索：
|
||||
{searchTips.search}:
|
||||
<span className={styles.searchKeywordKeyword}>
|
||||
{searchKeyword}
|
||||
</span>
|
||||
共
|
||||
<span>{total}</span>
|
||||
个结果
|
||||
{searchTips.total}:
|
||||
<span>{total / 2}</span>
|
||||
{searchTips.result}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -82,25 +111,29 @@ export default function Search() {
|
|||
className={styles.searchBtn}
|
||||
onClick={handleSearch}
|
||||
>
|
||||
搜索
|
||||
{searchTips.search}:
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section background="" maskBackground="#fff">
|
||||
<div className={styles.searchItemList}>
|
||||
{searchData.map((item) => (
|
||||
<div key={item.id} className={styles.searchItem}>
|
||||
{localSearchData.map((item) => (
|
||||
<Link to={item.path ?? ''} key={item.id} className={styles.searchItem}>
|
||||
<div className={styles.searchItemTitleRow}>
|
||||
<span className={styles.searchItemTitle}>{item.title}</span>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.searchItemContent}>{item.content}</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Pagination total={total} size={size} page={page} onChange={setPage} />
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,40 +1,40 @@
|
|||
.siteMap {
|
||||
.siteMapTitle {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #14355C;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
|
||||
|
||||
.siteMapItems {
|
||||
margin-top: 60px;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
padding: 0 50px;
|
||||
margin-top: 3.75rem;
|
||||
border-top: .0625rem solid #DDDDDD;
|
||||
padding: 0 3.125rem;
|
||||
/* 主网格：标签列 + 5列子项，列宽固定以实现跨行对齐 */
|
||||
/* 第一列为180px */
|
||||
/* 第一列为11.25rem */
|
||||
display: grid;
|
||||
grid-template-columns: 182px repeat(5, minmax(140px, 1fr));
|
||||
grid-template-columns: 11.375rem repeat(5, minmax(8.75rem, 1fr));
|
||||
|
||||
.siteMapItem {
|
||||
padding: 50px 0;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
padding: 3.125rem 0;
|
||||
border-bottom: .0625rem solid #DDDDDD;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
.siteMapItemLabel {
|
||||
padding-left: 50px;
|
||||
padding-left: 3.125rem;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #14355C;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
height: 1.875rem;
|
||||
width: .0625rem;
|
||||
background: #DDDDDD;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -43,17 +43,17 @@
|
|||
}
|
||||
|
||||
.siteMapItemChildren {
|
||||
padding: 0 20px 0 60px;
|
||||
padding: 0 1.25rem 0 3.75rem;
|
||||
display: grid;
|
||||
grid-column: 2 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
column-gap: 20px;
|
||||
column-gap: 1.25rem;
|
||||
|
||||
.siteMapItemChildLabel {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -63,13 +63,13 @@
|
|||
|
||||
.siteMapItemChildChildren {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #666666;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
gap: .625rem;
|
||||
margin-top: .625rem;
|
||||
|
||||
.siteMapItemChildChild {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ export default function TermsOfUse() {
|
|||
<Section background="" maskBackground="#fff">
|
||||
<p
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
lineHeight: "34px",
|
||||
fontSize: "1.125rem",
|
||||
lineHeight: "2.125rem",
|
||||
color: "#333333",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
/* 2列 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
|
||||
.publicWelfareDataItem {
|
||||
position: relative;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
/* 信息公开 */
|
||||
.informationPublicDataContent {
|
||||
min-height: 450px;
|
||||
min-height: 28.125rem;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -30,18 +30,18 @@
|
|||
}
|
||||
|
||||
.informationPublicDataItems {
|
||||
/* min-height: 400px; */
|
||||
/* min-height: 25rem; */
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.125rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding: 0 90px 150px 90px;
|
||||
padding: 0 5.625rem 9.375rem 5.625rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
|
||||
li {
|
||||
list-style: disc;
|
||||
|
|
@ -57,13 +57,13 @@
|
|||
.partnerItems {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 38px;
|
||||
gap: 2.375rem;
|
||||
.partnerItem {
|
||||
width: 250px;
|
||||
height: 120px;
|
||||
border-radius: 999px;
|
||||
width: 15.625rem;
|
||||
height: 7.5rem;
|
||||
border-radius: 62.4375rem;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default function Foundation() {
|
|||
|
||||
{section1Data && (
|
||||
<ParagraphSection data={section1Data}>
|
||||
<div style={{ marginTop: "100px" }} />
|
||||
<div style={{ marginTop: "6.25rem" }} />
|
||||
{section1Data.tabItems && <TopTabsSection data={{ tabItems: section1Data.tabItems }} className={styles.topTabsSection} />}
|
||||
</ParagraphSection>
|
||||
)}
|
||||
|
|
@ -98,7 +98,7 @@ export default function Foundation() {
|
|||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ marginBottom: "50px" }} />
|
||||
<div style={{ marginBottom: "3.125rem" }} />
|
||||
</Section>
|
||||
)}
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ export default function Foundation() {
|
|||
titleColor="#fff"
|
||||
background={section3Data.backgroundImage ?? "/images/bg-overview.png"}
|
||||
maskBackground="rgba(255,255,255,0.1)"
|
||||
height="760px"
|
||||
height="47.5rem"
|
||||
>
|
||||
<div className={styles.informationPublicDataContent}>
|
||||
<div className={styles.informationPublicDataItems}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.socialResponsibilityCaseDataContent {
|
||||
margin-top: -50px;
|
||||
margin-bottom: 100px;
|
||||
margin-top: -3.125rem;
|
||||
margin-bottom: 6.25rem;
|
||||
}
|
||||
|
||||
.socialResponsibilityCaseDataItems {
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.socialResponsibilityCaseDataItem {
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
transition-delay: 0s;
|
||||
|
||||
.socialResponsibilityCaseDataItemTitle {
|
||||
left: 50px;
|
||||
left: 3.125rem;
|
||||
transform: translateX(0);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.socialResponsibilityCaseDataItemContentInner {
|
||||
padding: 50px;
|
||||
padding: 3.125rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
|
|
@ -61,16 +61,16 @@
|
|||
|
||||
.socialResponsibilityCaseDataItemMore {
|
||||
display: inline-block;
|
||||
margin-top: 60px;
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid #FFFFFF;
|
||||
margin-top: 3.75rem;
|
||||
width: 6.5rem;
|
||||
height: 2.375rem;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
border: .0625rem solid #FFFFFF;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
line-height: 1.375rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -80,9 +80,9 @@
|
|||
|
||||
.socialResponsibilityCaseDataItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -91,11 +91,11 @@
|
|||
}
|
||||
|
||||
.socialResponsibilityCaseDataItemContent {
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25rem;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 34px;
|
||||
line-height: 2.125rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
|
@ -109,16 +109,16 @@
|
|||
|
||||
/* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
|
||||
/* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */
|
||||
/* 810+560=1370，每行总宽 = 100% - 30px */
|
||||
/* 810+560=1370，每行总宽 = 100% - 1.875rem */
|
||||
.socialResponsibilityCaseDataItem:nth-child(4n + 1),
|
||||
.socialResponsibilityCaseDataItem:nth-child(4n + 4) {
|
||||
flex-basis: calc((100% - 30px) * 810 / 1370);
|
||||
flex-basis: calc((100% - 1.875rem) * 810 / 1370);
|
||||
aspect-ratio: 810 / 480;
|
||||
}
|
||||
|
||||
.socialResponsibilityCaseDataItem:nth-child(4n + 2),
|
||||
.socialResponsibilityCaseDataItem:nth-child(4n + 3) {
|
||||
flex-basis: calc((100% - 30px) * 560 / 1370);
|
||||
flex-basis: calc((100% - 1.875rem) * 560 / 1370);
|
||||
aspect-ratio: 560 / 480;
|
||||
}
|
||||
|
||||
|
|
@ -127,16 +127,16 @@
|
|||
/* 4列 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 33px;
|
||||
gap: 2.0625rem;
|
||||
|
||||
.socialResponsibilityReportItem {
|
||||
/* width: 325px; */
|
||||
/* width: 20.3125rem; */
|
||||
|
||||
.socialResponsibilityReportItemCover {
|
||||
/* width: 325px; */
|
||||
/* height: 439px; */
|
||||
/* width: 20.3125rem; */
|
||||
/* height: 27.4375rem; */
|
||||
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-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -145,13 +145,13 @@
|
|||
|
||||
.socialResponsibilityReportItemTitle {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: #222222;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 40px;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,16 +159,16 @@
|
|||
}
|
||||
|
||||
.socialResponsibilityReportItemMore {
|
||||
width: 104px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
width: 6.5rem;
|
||||
height: 2.375rem;
|
||||
line-height: 2.375rem;
|
||||
text-align: center;
|
||||
border: 1px solid #333333;
|
||||
font-size: 16px;
|
||||
border: .0625rem solid #333333;
|
||||
font-size: 1rem;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
margin-top: 6.25rem;
|
||||
|
||||
&:hover {
|
||||
background: #14355C;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const isDev = process.env.DEV
|
|||
console.log('isDev', isDev)
|
||||
module.exports = {
|
||||
'/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/",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/companyHome/, '')
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const Toast = (
|
|||
type === "info" ? "#333" : type === "warn" ? "#ff9800" : "#f44336"
|
||||
};
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
padding: .625rem 1.25rem;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue