78 changed files with 13019 additions and 0 deletions
-
1045public/themes/dist_static/js/lib/three-128-orbitControls.js
-
6public/themes/dist_static/js/lib/three-r128.min.js
-
1public/themes/dist_static/static/css/about-CrFP161u.css
-
834public/themes/dist_static/static/css/about.css
-
1public/themes/dist_static/static/css/announce-CVbH_dRv.css
-
285public/themes/dist_static/static/css/announce.css
-
1public/themes/dist_static/static/css/category-CYv_FoNd.css
-
382public/themes/dist_static/static/css/category.css
-
1public/themes/dist_static/static/css/common-DaLMnkkl.css
-
2006public/themes/dist_static/static/css/common.css
-
1public/themes/dist_static/static/css/contact-D8E-azEI.css
-
546public/themes/dist_static/static/css/contact.css
-
1public/themes/dist_static/static/css/download-ZPXm-jdc.css
-
341public/themes/dist_static/static/css/download.css
-
1public/themes/dist_static/static/css/faq-BHZcdOFr.css
-
281public/themes/dist_static/static/css/faq.css
-
1public/themes/dist_static/static/css/index-hIdCH-Ul.css
-
1008public/themes/dist_static/static/css/index.css
-
1public/themes/dist_static/static/css/investment-pb4FAeRx.css
-
579public/themes/dist_static/static/css/investment.css
-
1public/themes/dist_static/static/css/news-3CtpieBF.css
-
1public/themes/dist_static/static/css/news-detail-CxSgbORN.css
-
323public/themes/dist_static/static/css/news-detail.css
-
478public/themes/dist_static/static/css/news.css
-
1public/themes/dist_static/static/css/product-DDHaIT_9.css
-
1288public/themes/dist_static/static/css/product.css
-
1public/themes/dist_static/static/css/search-CCchQF0u.css
-
325public/themes/dist_static/static/css/search.css
-
1public/themes/dist_static/static/css/solution-QRc3Wj_R.css
-
510public/themes/dist_static/static/css/solution.css
-
1public/themes/dist_static/static/css/solution2-BALfo6CE.css
-
599public/themes/dist_static/static/css/solution2.css
-
1public/themes/dist_static/static/css/video-CivWKV8A.css
-
455public/themes/dist_static/static/css/video.css
-
BINpublic/themes/dist_static/static/fonts/Aldrich-Regular-CZNgUhqU.ttf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-400-Regular-CbJSDVu2.otf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-500-Medium-DPN-gY68.otf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-600-SemiBold-DXnDJEQd.otf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-700-Bold-WWlV1fXR.otf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-800-ExtraBold-Dzo8XGHI.otf
-
BINpublic/themes/dist_static/static/fonts/D-DIN-PRO-900-Heavy-CcGOV6O3.otf
-
BINpublic/themes/dist_static/static/fonts/MiSans-VF-DESbBZLB.ttf
-
BINpublic/themes/dist_static/static/fonts/PFDinTextPro-Bold-F7OVdohK.ttf
-
BINpublic/themes/dist_static/static/fonts/PFDinTextPro-Medium-BcfGjLHx.ttf
-
1public/themes/dist_static/static/js/about-82YEDOWN.js
-
113public/themes/dist_static/static/js/about.js
-
1public/themes/dist_static/static/js/announce-Bj7rWtsO.js
-
52public/themes/dist_static/static/js/announce.js
-
1public/themes/dist_static/static/js/category-D-gqzpG1.js
-
99public/themes/dist_static/static/js/category.js
-
1public/themes/dist_static/static/js/common-DqchIN4G.js
-
142public/themes/dist_static/static/js/common.js
-
1public/themes/dist_static/static/js/contact-C_znckVD.js
-
91public/themes/dist_static/static/js/contact.js
-
1public/themes/dist_static/static/js/download-B-xGIc-t.js
-
53public/themes/dist_static/static/js/download.js
-
1public/themes/dist_static/static/js/earth-Bqwaht3f.js
-
403public/themes/dist_static/static/js/earth.js
-
1public/themes/dist_static/static/js/faq-BlR5oxj1.js
-
26public/themes/dist_static/static/js/faq.js
-
1public/themes/dist_static/static/js/index-Cw-0HAfi.js
-
121public/themes/dist_static/static/js/index.js
-
1public/themes/dist_static/static/js/investment-D2xMgiXv.js
-
55public/themes/dist_static/static/js/investment.js
-
1public/themes/dist_static/static/js/news-B0ZpNQzA.js
-
2public/themes/dist_static/static/js/news-detail.js
-
2public/themes/dist_static/static/js/news.js
-
35public/themes/dist_static/static/js/news2.js
-
1public/themes/dist_static/static/js/product-oXQRz9XE.js
-
161public/themes/dist_static/static/js/product.js
-
1public/themes/dist_static/static/js/search-DD5RVkVO.js
-
68public/themes/dist_static/static/js/search.js
-
1public/themes/dist_static/static/js/solution-Ch_DBWw9.js
-
111public/themes/dist_static/static/js/solution.js
-
1public/themes/dist_static/static/js/solution2-Ck5yldPf.js
-
68public/themes/dist_static/static/js/solution2.js
-
1public/themes/dist_static/static/js/video-DAAybc91.js
-
94public/themes/dist_static/static/js/video.js
1045
public/themes/dist_static/js/lib/three-128-orbitControls.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
6
public/themes/dist_static/js/lib/three-r128.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
public/themes/dist_static/static/css/about-CrFP161u.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,834 @@ |
|||||
|
.main-about { |
||||
|
background: var(--color-white); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.ab-hero__title { |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 2.5rem; |
||||
|
} |
||||
|
.ab-hero__title h1 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-hero__media { |
||||
|
width: 100%; |
||||
|
height: 45rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-hero__media img, |
||||
|
.ab-hero__media video { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.ab-intro { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 60rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-intro__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-intro__body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 3.375rem; |
||||
|
margin-top: 4rem; |
||||
|
} |
||||
|
.ab-intro__texts { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
.ab-intro__texts p { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.ab-intro__stats { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 2.5rem 5rem; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.ab-intro__stats li { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
padding: 2.5rem 0; |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.ab-intro__stats strong { |
||||
|
color: var(--color-primary); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-56); |
||||
|
font-weight: 500; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
.ab-intro__stats strong .counter { |
||||
|
color: inherit; |
||||
|
font: inherit; |
||||
|
} |
||||
|
.ab-intro__stats strong .ab-intro__stats-unit { |
||||
|
color: var(--color-primary); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.ab-intro__stats > li > span { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.ab-history { |
||||
|
position: relative; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 6.25rem; |
||||
|
min-height: 60.3125rem; |
||||
|
background: var(--color-white); |
||||
|
background-image: url("../images/section-3-bg-D4Y_d9o-.png"); |
||||
|
background-size: cover; |
||||
|
background-position: center; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
.ab-history__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 4rem; |
||||
|
} |
||||
|
.ab-history__head .s-arrows { |
||||
|
display: flex; |
||||
|
} |
||||
|
.ab-history__arrows-mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
.ab-history__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-history__swiper { |
||||
|
--history-year-h: 3.5rem; |
||||
|
--history-year-gap: 1.6875rem; |
||||
|
--history-dot-size: 1.25rem; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
clip-path: inset(0 0 0 var(--p-x)); |
||||
|
} |
||||
|
.ab-history__swiper::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: var(--p-x); |
||||
|
right: 0; |
||||
|
top: calc(var(--history-year-h) + var(--history-year-gap) + var(--history-dot-size) / 2); |
||||
|
height: 1px; |
||||
|
background: rgb(223, 224, 226); |
||||
|
pointer-events: none; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
.ab-history__slide { |
||||
|
position: relative; |
||||
|
width: 25rem; |
||||
|
transition: opacity var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.ab-history__slide.is-far { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
.ab-history__year { |
||||
|
display: block; |
||||
|
margin-bottom: var(--history-year-gap, 27px); |
||||
|
color: var(--color-text); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-56); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--history-year-h, 56px); |
||||
|
} |
||||
|
.ab-history__year span { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.ab-history__dot { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
width: var(--history-dot-size, 20px); |
||||
|
height: var(--history-dot-size, 20px); |
||||
|
margin-bottom: 2.625rem; |
||||
|
border: 1px solid rgb(175, 181, 185); |
||||
|
border-radius: 50%; |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
.ab-history__dot::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0.3125rem; |
||||
|
border-radius: 50%; |
||||
|
background: rgb(175, 181, 185); |
||||
|
} |
||||
|
.swiper-slide-active .ab-history__dot { |
||||
|
border-color: var(--color-primary); |
||||
|
} |
||||
|
.swiper-slide-active .ab-history__dot::after { |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.swiper-slide-active .ab-history__dot::before { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ab-history__slide-title { |
||||
|
margin-bottom: 1.5rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-32); |
||||
|
min-height: 4rem; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-history__slide-desc { |
||||
|
margin-bottom: 2rem; |
||||
|
min-height: 3rem; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
min-height: 48px; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-history__media { |
||||
|
overflow: hidden; |
||||
|
border-radius: 0.75rem; |
||||
|
aspect-ratio: 400/260; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
} |
||||
|
.ab-history__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.ab-culture { |
||||
|
position: relative; |
||||
|
min-height: 56.25rem; |
||||
|
overflow: hidden; |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.ab-culture__bg { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
z-index: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-culture__bg img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.ab-culture::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
right: var(--p-x); |
||||
|
bottom: 0; |
||||
|
z-index: 1; |
||||
|
width: min(70.0625rem, 70%); |
||||
|
aspect-ratio: 1121/187; |
||||
|
background: url("../images/bg-CYdmuh0E.png") no-repeat right bottom/contain; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.ab-culture__inner { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 45rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-culture__title { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-culture__list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.ab-culture__item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
justify-content: space-between; |
||||
|
padding: 2.5rem 0; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15); |
||||
|
} |
||||
|
.ab-culture__label { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
flex-shrink: 0; |
||||
|
width: 9.1875rem; |
||||
|
} |
||||
|
.ab-culture__label-zh { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.ab-culture__label-en { |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
.ab-culture__text { |
||||
|
flex: 1; |
||||
|
max-width: 25rem; |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-27); |
||||
|
} |
||||
|
|
||||
|
.ab-global { |
||||
|
position: relative; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-global__title { |
||||
|
margin: 0 0 6.25rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-global__layout { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 30rem) minmax(0, 50rem) minmax(0, 25rem); |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
.ab-global__visual { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
aspect-ratio: 1; |
||||
|
max-width: 50rem; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.ab-global__earth { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.ab-global__side { |
||||
|
margin-top: 3.75rem; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 3rem; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.ab-global__side li { |
||||
|
position: relative; |
||||
|
padding-left: 2.5rem; |
||||
|
border-left: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.ab-global__side li::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: -1px; |
||||
|
width: 1px; |
||||
|
height: 3.0625rem; |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.ab-global__side strong { |
||||
|
display: block; |
||||
|
margin-bottom: 1rem; |
||||
|
color: var(--color-primary); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-56); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-56); |
||||
|
} |
||||
|
.ab-global__side strong .counter { |
||||
|
color: inherit; |
||||
|
font: inherit; |
||||
|
} |
||||
|
.ab-global__side strong span:not(.counter) { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.ab-global__side__side-desc { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.ab-global__side--right { |
||||
|
justify-self: end; |
||||
|
} |
||||
|
|
||||
|
.ab-members { |
||||
|
position: relative; |
||||
|
min-height: 56.25rem; |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.ab-members__bg { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
z-index: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-members__bg img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.ab-members__bg::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
.ab-members__inner { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 60rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-members__title { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-members__card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
gap: 4.25rem; |
||||
|
min-height: 35rem; |
||||
|
padding: 3rem; |
||||
|
border: 1px solid rgba(255, 255, 255, 0.46); |
||||
|
border-radius: 1.875rem; |
||||
|
backdrop-filter: blur(0.75rem); |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-members__content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
.ab-members__content > div { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2rem; |
||||
|
} |
||||
|
.ab-members__name { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-42); |
||||
|
} |
||||
|
.ab-members__desc { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.ab-members__more { |
||||
|
min-width: 12.5rem; |
||||
|
} |
||||
|
.ab-members__logos { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, minmax(0, 1fr)); |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.ab-members__logo { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 10rem; |
||||
|
height: 6.25rem; |
||||
|
border: 0; |
||||
|
border-radius: 1rem; |
||||
|
background: rgba(255, 255, 255, 0.5); |
||||
|
cursor: pointer; |
||||
|
transition: background var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.ab-members__logo img { |
||||
|
display: block; |
||||
|
max-width: 70%; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.ab-members__logo.is-active, .ab-members__logo:hover { |
||||
|
background: rgb(255, 255, 255); |
||||
|
} |
||||
|
|
||||
|
.ab-honors { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 60rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-honors__title { |
||||
|
margin: 0 0 1rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-honors__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.ab-honors__list { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.ab-honors__item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 2.5rem 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.ab-honors__item:hover { |
||||
|
border-bottom-color: var(--color-primary); |
||||
|
} |
||||
|
.ab-honors__item:hover .ab-honors__name { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.ab-honors__name { |
||||
|
flex: 1; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.ab-honors__view { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
color: var(--color-text-muted); |
||||
|
text-decoration: none; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.ab-honors__view img, |
||||
|
.ab-honors__view svg { |
||||
|
display: block; |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.ab-honors__view:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.ab-honors__pop { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: calc(100% + 0.5rem); |
||||
|
z-index: 10; |
||||
|
transform: translateY(-50%); |
||||
|
background-color: var(--color-white); |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
pointer-events: none; |
||||
|
transition: opacity 0.25s ease, visibility 0.25s ease; |
||||
|
} |
||||
|
.ab-honors__view:hover .ab-honors__pop { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
.ab-honors__cert-img { |
||||
|
display: block; |
||||
|
width: 15rem !important; |
||||
|
height: auto !important; |
||||
|
border-radius: 0.5rem; |
||||
|
box-shadow: 0 1rem 2.5rem rgba(46, 53, 58, 0.2); |
||||
|
} |
||||
|
.ab-honors__more { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
margin-top: 2.5rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.ab-honors__more img { |
||||
|
display: block; |
||||
|
width: 0.75rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
.ab-honors__more:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.ab-csr { |
||||
|
position: relative; |
||||
|
min-height: 45rem; |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.ab-csr__bg { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
z-index: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ab-csr__bg img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.ab-csr__bg::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: rgba(0, 0, 0, 0.01); |
||||
|
} |
||||
|
.ab-csr__inner { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 60rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.ab-csr__title { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.ab-csr__content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
.ab-csr__desc { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-38); |
||||
|
} |
||||
|
.ab-csr .s-btn { |
||||
|
min-width: 12.5rem; |
||||
|
min-height: 3.625rem; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.ab-hero__title h1 { |
||||
|
font-size: 40Px; |
||||
|
line-height: 54Px; |
||||
|
} |
||||
|
.ab-hero__media { |
||||
|
height: 520Px; |
||||
|
} |
||||
|
.ab-intro__body { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.ab-intro, |
||||
|
.ab-honors, |
||||
|
.ab-culture__inner, |
||||
|
.ab-members__inner, |
||||
|
.ab-csr__inner { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 32Px; |
||||
|
} |
||||
|
.ab-intro, |
||||
|
.ab-history, |
||||
|
.ab-global, |
||||
|
.ab-honors { |
||||
|
padding-top: 80Px; |
||||
|
padding-bottom: 80Px; |
||||
|
} |
||||
|
.ab-global__layout { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
.ab-global__side { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.ab-global__side--right { |
||||
|
justify-self: start; |
||||
|
} |
||||
|
.ab-global__visual { |
||||
|
order: -1; |
||||
|
max-width: 560Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.ab-intro__stats { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 0; |
||||
|
} |
||||
|
.ab-history__slide { |
||||
|
width: 300Px; |
||||
|
} |
||||
|
.ab-members__logos { |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
} |
||||
|
.ab-culture__item { |
||||
|
flex-direction: column; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.ab-honors__item { |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.ab-hero__title { |
||||
|
padding-top: calc(var(--header-h) + 5rem); |
||||
|
padding-bottom: 24Px; |
||||
|
} |
||||
|
.ab-hero__title h1 { |
||||
|
font-size: 28Px; |
||||
|
line-height: 40Px; |
||||
|
} |
||||
|
.ab-hero__media { |
||||
|
height: 280Px; |
||||
|
} |
||||
|
.ab-intro__title, |
||||
|
.ab-history__title, |
||||
|
.ab-culture__title, |
||||
|
.ab-global__title, |
||||
|
.ab-members__title, |
||||
|
.ab-honors__title, |
||||
|
.ab-csr__title { |
||||
|
font-size: 32Px; |
||||
|
line-height: 44Px; |
||||
|
} |
||||
|
.ab-members__card { |
||||
|
padding: 24Px; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
.ab-members__logos { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
} |
||||
|
.ab-members__name { |
||||
|
font-size: 24Px; |
||||
|
line-height: 32Px; |
||||
|
} |
||||
|
.ab-history { |
||||
|
min-height: 54rem; |
||||
|
} |
||||
|
.ab-intro, |
||||
|
.ab-history, |
||||
|
.ab-global, |
||||
|
.ab-honors, |
||||
|
.ab-csr { |
||||
|
padding-top: 4rem; |
||||
|
} |
||||
|
.ab-intro, |
||||
|
.ab-history, |
||||
|
.ab-csr { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.ab-members { |
||||
|
padding-bottom: 4rem; |
||||
|
} |
||||
|
.ab-culture__inner, |
||||
|
.ab-members__inner, |
||||
|
.ab-csr__inner { |
||||
|
padding-top: 4rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.ab-history__head .s-arrows { |
||||
|
display: none; |
||||
|
} |
||||
|
.ab-history__arrows-mobile { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: 24Px; |
||||
|
padding-left: var(--p-x); |
||||
|
} |
||||
|
.ab-history__arrows-mobile .s-arrows { |
||||
|
display: flex; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
.main-announce{background:var(--color-white)}.a-page{padding-top:calc(var(--header-h) + 2.75rem + 2.5rem);padding-bottom:6.25rem}.a-head{border-bottom:1px solid #dfe0e2;flex-direction:column;gap:1rem;padding-bottom:2.5rem;display:flex}.a-head__title{color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-48);font-weight:400;line-height:var(--font-64);margin:0}.a-head__desc{color:var(--color-text-muted);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-24);margin:0}.a-toolbar{justify-content:space-between;align-items:center;gap:1.5rem;margin-top:2.75rem;margin-bottom:2.75rem;display:flex}.a-filter__group{position:relative}.a-filter{min-height:3rem;color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-24);cursor:pointer;background:0 0;border:1px solid #dfe0e2;border-radius:6.25rem;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 2rem;transition:border-color .25s,color .25s;display:inline-flex}.a-filter:hover,.a-filter.is-open,.a-filter.is-selected{border-color:var(--color-primary);color:var(--color-primary)}.a-filter.is-open .a-filter__chevron{transform:rotate(180deg)}.a-filter__chevron{width:.6875rem;height:auto;transition:transform var(--duration-fast) var(--easing);display:block}.a-filter__dropdown{z-index:30;background:var(--color-white);border-radius:1rem;flex-direction:column;gap:.5rem;min-width:12.5rem;padding:1rem;display:flex;position:absolute;top:calc(100% + .5rem);left:0;box-shadow:0 .5rem 1.5rem #2e353a24}.a-filter__dropdown[hidden]{display:none}.a-filter__dropdown-item{width:100%;color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-16);font-weight:400;line-height:var(--font-22);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6.25rem;padding:.625rem 1.25rem;transition:background .25s,color .25s;display:block}.a-filter__dropdown-item:hover{background:#afb5b91f}.a-filter__dropdown-item.is-active{background:var(--color-primary);color:var(--color-white)}.a-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;display:grid}.a-card{background:var(--color-white);border:1px solid #dfe0e2;border-radius:1.5rem;flex-direction:column;gap:1.5rem;min-height:15rem;padding:2rem;text-decoration:none;transition:border-color .25s,box-shadow .25s;display:flex}.a-card:hover{cursor:pointer;box-shadow:0 .75rem 2rem #2e353a0f}.a-card:hover .a-card__title,.a-card:hover .a-card__link{color:var(--color-primary)}.a-card__date{color:var(--color-text-muted);font-family:D-DIN-PRO,MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-24)}.a-card__title{color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-24);font-weight:400;line-height:var(--font-34);transition:color var(--duration-fast) var(--easing);flex:1;margin:0}.a-card__link{color:var(--color-text-muted);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-16);font-weight:400;line-height:var(--font-22);transition:color var(--duration-fast) var(--easing);align-items:center;gap:.625rem;margin-top:auto;text-decoration:none;display:inline-flex}.a-card__link svg{width:1rem;height:auto;transition:filter var(--duration-fast) var(--easing)}.a-card__link path{fill:currentColor}@media (width<=1439px){.a-page{padding-top:calc(var(--header-h) + 40px);padding-bottom:72px}.a-head{gap:12px;padding-bottom:28px}.a-head__title{font-size:36px;line-height:48px}.a-head__desc{font-size:16px}.a-toolbar{flex-wrap:wrap;gap:16px;margin-top:32px;margin-bottom:32px}.a-filter{min-height:44px;padding:10px 24px;font-size:16px}.a-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.a-card{gap:20px;min-height:200px;padding:24px}.a-card__title{font-size:20px;line-height:30px}}@media (width<=992px){.a-toolbar{flex-direction:column;align-items:stretch}.a-filter{width:fit-content}}@media (width<=576px){.a-page{padding-top:calc(var(--header-h) + 24px);padding-bottom:48px}.a-head{gap:10px;padding-bottom:20px}.a-head__title{font-size:28px;line-height:38px}.a-head__desc{font-size:14px;line-height:22px}.a-toolbar{margin-top:24px;margin-bottom:24px}.a-filter{min-height:40px;padding:8px 16px;font-size:14px}.a-grid{grid-template-columns:1fr;gap:12px}.a-card{border-radius:16px;gap:16px;min-height:0;padding:20px}.a-card__date{font-size:14px}.a-card__title{font-size:18px;line-height:26px}.a-card__link{font-size:14px}} |
||||
@ -0,0 +1,285 @@ |
|||||
|
.main-announce { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.a-page { |
||||
|
padding-top: calc(var(--header-h) + 2.75rem + 2.5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.a-head { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.a-head__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.a-head__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.a-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: 2.75rem; |
||||
|
margin-bottom: 2.75rem; |
||||
|
} |
||||
|
|
||||
|
.a-filter__group { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.a-filter { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.5rem; |
||||
|
min-height: 3rem; |
||||
|
padding: 0.75rem 2rem; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 6.25rem; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: border-color 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.a-filter:hover, .a-filter.is-open, .a-filter.is-selected { |
||||
|
border-color: var(--color-primary); |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.a-filter.is-open .a-filter__chevron { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.a-filter__chevron { |
||||
|
display: block; |
||||
|
width: 0.6875rem; |
||||
|
height: auto; |
||||
|
transition: transform var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
|
||||
|
.a-filter__dropdown { |
||||
|
position: absolute; |
||||
|
top: calc(100% + 0.5rem); |
||||
|
left: 0; |
||||
|
z-index: 30; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
min-width: 12.5rem; |
||||
|
padding: 1rem; |
||||
|
border-radius: 1rem; |
||||
|
background: var(--color-white); |
||||
|
box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.14); |
||||
|
} |
||||
|
.a-filter__dropdown[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.a-filter__dropdown-item { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
padding: 0.625rem 1.25rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.a-filter__dropdown-item:hover { |
||||
|
background: rgba(175, 181, 185, 0.12); |
||||
|
} |
||||
|
.a-filter__dropdown-item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.a-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
|
||||
|
.a-card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
min-height: 15rem; |
||||
|
padding: 2rem; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 1.5rem; |
||||
|
background: var(--color-white); |
||||
|
text-decoration: none; |
||||
|
transition: border-color 0.25s ease, box-shadow 0.25s ease; |
||||
|
} |
||||
|
.a-card:hover { |
||||
|
cursor: pointer; |
||||
|
box-shadow: 0 0.75rem 2rem rgba(46, 53, 58, 0.06); |
||||
|
} |
||||
|
.a-card:hover .a-card__title { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.a-card:hover .a-card__link { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.a-card__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.a-card__title { |
||||
|
margin: 0; |
||||
|
flex: 1; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-34); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.a-card__link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
margin-top: auto; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.a-card__link svg { |
||||
|
width: 1rem; |
||||
|
height: auto; |
||||
|
transition: filter var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.a-card__link path { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.a-page { |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.a-head { |
||||
|
gap: 12Px; |
||||
|
padding-bottom: 28Px; |
||||
|
} |
||||
|
.a-head__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.a-head__desc { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.a-toolbar { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16Px; |
||||
|
margin-top: 32Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.a-filter { |
||||
|
min-height: 44Px; |
||||
|
padding: 10Px 24Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.a-grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.a-card { |
||||
|
min-height: 200Px; |
||||
|
gap: 20Px; |
||||
|
padding: 24Px; |
||||
|
} |
||||
|
.a-card__title { |
||||
|
font-size: 20Px; |
||||
|
line-height: 30Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.a-toolbar { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
.a-filter { |
||||
|
width: fit-content; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.a-page { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.a-head { |
||||
|
gap: 10Px; |
||||
|
padding-bottom: 20Px; |
||||
|
} |
||||
|
.a-head__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.a-head__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.a-toolbar { |
||||
|
margin-top: 24Px; |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
.a-filter { |
||||
|
min-height: 40Px; |
||||
|
padding: 8Px 16Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.a-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.a-card { |
||||
|
min-height: 0; |
||||
|
gap: 16Px; |
||||
|
padding: 20Px; |
||||
|
border-radius: 16Px; |
||||
|
} |
||||
|
.a-card__date { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.a-card__title { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.a-card__link { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/category-CYv_FoNd.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,382 @@ |
|||||
|
.main-category { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.c-page { |
||||
|
--c-breadcrumb-h: 6.375rem; |
||||
|
padding-top: calc(var(--header-h) + 2.75rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.c-breadcrumb { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 0.75rem; |
||||
|
padding-top: 2.5rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.c-breadcrumb__link { |
||||
|
color: var(--color-text-link); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-breadcrumb__link:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.c-breadcrumb__sep { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
flex-shrink: 0; |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
.c-breadcrumb__sep svg { |
||||
|
display: block; |
||||
|
width: 0.4375rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
.c-breadcrumb__current { |
||||
|
color: var(--color-text); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.c-layout { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(15rem, 23.3125rem) minmax(0, 1fr); |
||||
|
gap: 3.5625rem; |
||||
|
align-items: start; |
||||
|
} |
||||
|
|
||||
|
.c-sidebar { |
||||
|
align-self: start; |
||||
|
} |
||||
|
.c-sidebar__list { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
padding-right: 0.25rem; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__trigger { |
||||
|
padding: 2rem 0; |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__subs { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2rem; |
||||
|
} |
||||
|
.c-sidebar__item:not(.is-active) .c-sidebar__trigger { |
||||
|
border-bottom: 1px solid rgba(46, 53, 58, 0.1); |
||||
|
} |
||||
|
.c-sidebar__item:first-child:not(.is-active) .c-sidebar__trigger, .c-sidebar__item.is-active + .c-sidebar__item .c-sidebar__trigger { |
||||
|
border-top: 1px solid rgba(46, 53, 58, 0.1); |
||||
|
} |
||||
|
.c-sidebar__trigger { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1rem; |
||||
|
padding: 1.6rem 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-sidebar__trigger > span:first-child { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.c-sidebar__chevron { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-shrink: 0; |
||||
|
width: 0.75rem; |
||||
|
height: 0.75rem; |
||||
|
overflow: visible; |
||||
|
color: rgb(175, 181, 185); |
||||
|
transform: rotate(90deg); |
||||
|
transform-origin: center; |
||||
|
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
} |
||||
|
.c-sidebar__chevron svg { |
||||
|
display: block; |
||||
|
width: 0.5rem; |
||||
|
height: auto; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__chevron { |
||||
|
transform: rotate(-90deg); |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.c-sidebar__subs { |
||||
|
display: none; |
||||
|
margin: 0; |
||||
|
padding: 2.5rem; |
||||
|
padding-top: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.c-sidebar__sub { |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-sidebar__sub.is-active, .c-sidebar__sub:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.c-main { |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
.c-panel[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.c-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
.c-grid[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.s-product-card[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.c-empty { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 26.25rem; |
||||
|
border-radius: 1.25rem; |
||||
|
background: rgba(175, 181, 185, 0.08); |
||||
|
} |
||||
|
.c-empty[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
.c-empty__text { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
line-height: var(--font-26); |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 1440px) { |
||||
|
.c-page { |
||||
|
--c-sticky-top: calc(var(--header-h) + 44Px); |
||||
|
} |
||||
|
.site-header.is-scrolled ~ .main-category .c-page { |
||||
|
--c-sticky-top: var(--header-h); |
||||
|
} |
||||
|
.c-sidebar { |
||||
|
position: sticky; |
||||
|
top: var(--c-sticky-top); |
||||
|
max-height: calc(100svh - var(--c-sticky-top)); |
||||
|
overflow-y: auto; |
||||
|
overscroll-behavior: contain; |
||||
|
transition: top var(--duration-normal) var(--easing); |
||||
|
scrollbar-width: thin; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 1439px) { |
||||
|
.c-page { |
||||
|
--c-breadcrumb-h: 84Px; |
||||
|
--c-sticky-top: var(--header-h); |
||||
|
padding-top: var(--header-h); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.c-breadcrumb { |
||||
|
padding-top: 24Px; |
||||
|
padding-bottom: 24Px; |
||||
|
gap: 10Px; |
||||
|
font-size: 15Px; |
||||
|
line-height: 21Px; |
||||
|
} |
||||
|
.c-layout { |
||||
|
grid-template-columns: minmax(200Px, 260Px) minmax(0, 1fr); |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.c-sidebar { |
||||
|
position: sticky; |
||||
|
top: var(--header-h); |
||||
|
max-height: calc(100svh - var(--header-h)); |
||||
|
overflow-y: auto; |
||||
|
overscroll-behavior: contain; |
||||
|
scrollbar-width: thin; |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__subs { |
||||
|
gap: 28Px; |
||||
|
} |
||||
|
.c-sidebar__trigger { |
||||
|
padding: 28Px 0; |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.c-sidebar__subs { |
||||
|
padding: 16Px; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
.c-sidebar__subs li + li { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.c-sidebar__sub { |
||||
|
font-size: 17Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.c-grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.c-empty { |
||||
|
min-height: 320Px; |
||||
|
border-radius: 16Px; |
||||
|
} |
||||
|
.c-empty__text { |
||||
|
font-size: 17Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.c-page { |
||||
|
--c-breadcrumb-h: 68Px; |
||||
|
padding-top: var(--header-h); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.c-breadcrumb { |
||||
|
display: none; |
||||
|
} |
||||
|
.c-layout { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 0; |
||||
|
} |
||||
|
.c-sidebar { |
||||
|
max-height: unset; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.c-sidebar__list { |
||||
|
background-color: var(--color-white); |
||||
|
} |
||||
|
.c-sidebar__item:not(.is-active) { |
||||
|
display: none; |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__trigger { |
||||
|
padding: 16Px 0; |
||||
|
font-size: 16Px; |
||||
|
line-height: 22Px; |
||||
|
pointer-events: none; |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__subs { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
overflow-x: auto; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
scrollbar-width: none; |
||||
|
gap: 0; |
||||
|
padding: 0; |
||||
|
border-bottom: 1Px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__subs::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
.c-sidebar__item.is-active .c-sidebar__subs li { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.c-sidebar__trigger { |
||||
|
gap: 8Px; |
||||
|
padding: 16Px 0; |
||||
|
font-size: 16Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.c-sidebar__chevron { |
||||
|
display: none; |
||||
|
} |
||||
|
.c-sidebar__subs { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.c-sidebar__subs li + li { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.c-sidebar__sub { |
||||
|
padding: 8Px 12Px; |
||||
|
font-size: 13Px; |
||||
|
line-height: 20Px; |
||||
|
text-align: center; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.c-sidebar__sub.is-active { |
||||
|
color: var(--color-primary); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.c-sidebar__sub.is-active::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 12Px; |
||||
|
right: 12Px; |
||||
|
bottom: 0Px; |
||||
|
height: 2Px; |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.c-main { |
||||
|
padding-top: 16Px; |
||||
|
} |
||||
|
.c-grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.s-product-card__link { |
||||
|
padding: 16Px; |
||||
|
gap: 12Px; |
||||
|
border-radius: 12Px; |
||||
|
} |
||||
|
.s-product-card__foot { |
||||
|
padding-top: 12Px; |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.s-product-card__name { |
||||
|
font-size: 14Px; |
||||
|
line-height: 20Px; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.s-product-card__arrow { |
||||
|
width: 32Px; |
||||
|
height: 32Px; |
||||
|
} |
||||
|
.s-product-card__arrow img { |
||||
|
width: 10Px; |
||||
|
} |
||||
|
.c-empty { |
||||
|
min-height: 200Px; |
||||
|
border-radius: 12Px; |
||||
|
} |
||||
|
.c-empty__text { |
||||
|
font-size: 14Px; |
||||
|
line-height: 20Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/common-DaLMnkkl.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2006
public/themes/dist_static/static/css/common.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
public/themes/dist_static/static/css/contact-D8E-azEI.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,546 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
.main-contact { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.c-intro { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 2.5rem; |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 3rem; |
||||
|
} |
||||
|
.c-intro__title { |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.c-intro__hotline { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
flex-shrink: 0; |
||||
|
max-width: 25rem; |
||||
|
} |
||||
|
.c-intro__hotline-label { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.c-intro__hotline-label img { |
||||
|
display: block; |
||||
|
width: 2rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
.c-intro__phone { |
||||
|
color: var(--color-text); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 600; |
||||
|
line-height: 1; |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-intro__phone:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.c-intro__hours { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.c-banner { |
||||
|
position: relative; |
||||
|
height: 45rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.c-banner__media { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
} |
||||
|
.c-banner__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
object-position: center 0; |
||||
|
} |
||||
|
.c-banner__cards { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 3.125rem; |
||||
|
z-index: 1; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.c-card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2.5rem; |
||||
|
min-height: 12rem; |
||||
|
padding: 2.5rem; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(255, 255, 255, 0.8); |
||||
|
backdrop-filter: blur(1.25rem); |
||||
|
-webkit-backdrop-filter: blur(1.25rem); |
||||
|
text-decoration: none; |
||||
|
color: var(--color-text); |
||||
|
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; |
||||
|
} |
||||
|
.c-card:hover { |
||||
|
transform: translateY(-0.25rem); |
||||
|
background: rgba(255, 255, 255, 0.92); |
||||
|
box-shadow: 0 0.75rem 2rem rgba(46, 53, 58, 0.08); |
||||
|
} |
||||
|
.c-card__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.c-card__title { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-40); |
||||
|
} |
||||
|
.c-card__icon { |
||||
|
display: block; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.c-card__desc { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.c-form-section { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(17.5rem, 34.8125rem) minmax(0, 67.5rem); |
||||
|
gap: 2.5rem; |
||||
|
align-items: start; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.c-form-section__title { |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
|
||||
|
.c-form { |
||||
|
margin-top: 8rem; |
||||
|
width: 100%; |
||||
|
max-width: 67.5rem; |
||||
|
justify-self: end; |
||||
|
} |
||||
|
.c-form__grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 2rem 2.5rem; |
||||
|
} |
||||
|
.c-form__agree { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
margin-top: 2rem; |
||||
|
color: var(--color-text-link); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.c-form__agree input { |
||||
|
width: 1rem; |
||||
|
height: 1rem; |
||||
|
margin: 0; |
||||
|
accent-color: var(--color-primary); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.c-form__submit { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-width: 7.375rem; |
||||
|
height: 2.625rem; |
||||
|
margin-top: 2.5rem; |
||||
|
padding: 0.5625rem 0.625rem 0.5625rem 0.625rem; |
||||
|
border: 0; |
||||
|
border-radius: 1.875rem; |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, opacity 0.25s ease; |
||||
|
} |
||||
|
.c-form__submit:hover { |
||||
|
background: var(--color-primary-hover); |
||||
|
} |
||||
|
|
||||
|
.c-field { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.c-field--full { |
||||
|
grid-column: 1/-1; |
||||
|
} |
||||
|
.c-field__label { |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.c-field__input { |
||||
|
width: 100%; |
||||
|
height: 4.875rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
outline: none; |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-field__input::placeholder { |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
.c-field__input:focus { |
||||
|
border-bottom-color: var(--color-primary); |
||||
|
} |
||||
|
.c-field__select { |
||||
|
appearance: none; |
||||
|
-webkit-appearance: none; |
||||
|
cursor: pointer; |
||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23AFB5B9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: right 0 center; |
||||
|
background-size: 0.75rem 0.5rem; |
||||
|
padding-right: 1.5rem; |
||||
|
} |
||||
|
.c-field__select:invalid { |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
.c-field__select option { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
/* 自定义下拉 */ |
||||
|
.c-custom-select { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.c-custom-select__native { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
opacity: 0; |
||||
|
pointer-events: none; |
||||
|
appearance: none; |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
.c-custom-select__trigger { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
height: 4.875rem; |
||||
|
padding: 0 1.5rem 0 0; |
||||
|
border: 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
cursor: pointer; |
||||
|
outline: none; |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
text-align: left; |
||||
|
} |
||||
|
.c-custom-select__trigger::after { |
||||
|
content: ""; |
||||
|
flex-shrink: 0; |
||||
|
width: 0.75rem; |
||||
|
height: 0.5rem; |
||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23AFB5B9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; |
||||
|
transition: transform var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-custom-select__trigger.is-placeholder { |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
.c-custom-select__trigger.is-open { |
||||
|
border-bottom-color: var(--color-primary); |
||||
|
} |
||||
|
.c-custom-select__trigger.is-open::after { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
.c-custom-select__dropdown { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
top: calc(100% + 0.25rem); |
||||
|
z-index: 20; |
||||
|
max-height: 15rem; |
||||
|
overflow-y: auto; |
||||
|
overscroll-behavior: contain; |
||||
|
padding: 0.5rem 0; |
||||
|
border-radius: 0.75rem; |
||||
|
background: var(--color-white); |
||||
|
box-shadow: 0 0.5rem 2rem rgba(46, 53, 58, 0.12); |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transform: translateY(-0.5rem); |
||||
|
transition: all 0.2s var(--easing); |
||||
|
} |
||||
|
.c-custom-select__dropdown.is-visible { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
.c-custom-select__option { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
padding: 0.75rem 1.5rem; |
||||
|
border: 0; |
||||
|
border-radius: 0; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.c-custom-select__option:hover { |
||||
|
color: var(--color-white) !important; |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.c-custom-select__option.is-active { |
||||
|
color: var(--color-primary); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.c-intro { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 32Px; |
||||
|
} |
||||
|
.c-intro__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.c-intro__phone { |
||||
|
font-size: 36Px; |
||||
|
} |
||||
|
.c-intro__hours { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-banner { |
||||
|
height: 560Px; |
||||
|
} |
||||
|
.c-banner__cards { |
||||
|
bottom: 32Px; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.c-card { |
||||
|
min-height: 0; |
||||
|
gap: 24Px; |
||||
|
padding: 28Px; |
||||
|
} |
||||
|
.c-card__title { |
||||
|
font-size: 24Px; |
||||
|
line-height: 32Px; |
||||
|
} |
||||
|
.c-card__icon { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
} |
||||
|
.c-card__desc { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-form-section { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 40Px; |
||||
|
padding-top: 72Px; |
||||
|
padding-bottom: 80Px; |
||||
|
} |
||||
|
.c-form-section__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.c-form { |
||||
|
justify-self: stretch; |
||||
|
max-width: none; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.c-form__grid { |
||||
|
gap: 24Px 32Px; |
||||
|
} |
||||
|
.c-field__label { |
||||
|
font-size: 20Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
.c-field__input { |
||||
|
height: 64Px; |
||||
|
font-size: 18Px; |
||||
|
} |
||||
|
.c-custom-select__trigger { |
||||
|
height: 64Px; |
||||
|
font-size: 18Px; |
||||
|
} |
||||
|
.c-custom-select__option { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.c-intro { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 24Px; |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.c-intro__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.c-intro__hotline-label { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-intro__phone { |
||||
|
font-size: 28Px; |
||||
|
} |
||||
|
.c-intro__hours { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.c-banner { |
||||
|
height: auto; |
||||
|
min-height: 0; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.c-banner__media { |
||||
|
position: relative; |
||||
|
inset: auto; |
||||
|
height: 280Px; |
||||
|
} |
||||
|
.c-banner__cards { |
||||
|
position: relative; |
||||
|
bottom: auto; |
||||
|
margin-top: 40Px; |
||||
|
padding-bottom: 24Px; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
gap: 12Px; |
||||
|
padding: 0 16Px; |
||||
|
} |
||||
|
.c-card { |
||||
|
gap: 20Px; |
||||
|
padding: 20Px 16Px; |
||||
|
border-radius: 16Px; |
||||
|
border-radius: 24Px; |
||||
|
backdrop-filter: blur(20Px); |
||||
|
background: rgba(255, 255, 255, 0.8); |
||||
|
border: 1Px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.c-card__title { |
||||
|
font-size: 16Px; |
||||
|
line-height: 21Px; |
||||
|
} |
||||
|
.c-card__icon { |
||||
|
width: 24Px; |
||||
|
height: 24Px; |
||||
|
} |
||||
|
.c-card__desc { |
||||
|
font-size: 12Px; |
||||
|
line-height: 16Px; |
||||
|
} |
||||
|
.c-form-section { |
||||
|
padding-top: 48Px; |
||||
|
padding-bottom: 56Px; |
||||
|
gap: 28Px; |
||||
|
} |
||||
|
.c-form-section__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.c-form { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.c-form__grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 20Px; |
||||
|
} |
||||
|
.c-form__agree { |
||||
|
margin-top: 28Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.c-form__submit { |
||||
|
margin-top: 20Px; |
||||
|
min-width: 100Px; |
||||
|
height: 40Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-field__label { |
||||
|
font-size: 18Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.c-field__input { |
||||
|
height: 56Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-custom-select__trigger { |
||||
|
height: 56Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.c-custom-select__option { |
||||
|
font-size: 14Px; |
||||
|
padding: 10Px 16Px; |
||||
|
} |
||||
|
.c-custom-select__dropdown { |
||||
|
max-height: 200Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/download-ZPXm-jdc.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,341 @@ |
|||||
|
.main-download { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.d-page { |
||||
|
padding-top: calc(var(--header-h) + 2.75rem + 2.5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.d-head { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.d-head__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.d-head__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.d-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: 2.75rem; |
||||
|
margin-bottom: 2.75rem; |
||||
|
} |
||||
|
|
||||
|
.d-tabs { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1rem; |
||||
|
align-items: center; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.d-tabs__group { |
||||
|
position: relative; |
||||
|
} |
||||
|
.d-tabs__item { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 1rem; |
||||
|
min-height: 3rem; |
||||
|
padding: 0.75rem 2rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.d-tabs__item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.d-tabs__item.is-open { |
||||
|
background: rgba(239, 67, 53, 0.1); |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.d-tabs__item.is-open .d-tabs__chevron { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
.d-tabs__chevron { |
||||
|
display: block; |
||||
|
width: 0.6875rem; |
||||
|
height: auto; |
||||
|
transition: transform var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.d-tabs__dropdown { |
||||
|
position: absolute; |
||||
|
top: calc(100% + 0.5rem); |
||||
|
left: 0; |
||||
|
z-index: 30; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
min-width: 12.5rem; |
||||
|
padding: 1rem; |
||||
|
border-radius: 1rem; |
||||
|
background: var(--color-white); |
||||
|
box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.14); |
||||
|
} |
||||
|
.d-tabs__dropdown[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
.d-tabs__dropdown-item { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
padding: 0.625rem 1.25rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-21); |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.d-tabs__dropdown-item:hover { |
||||
|
background: rgba(175, 181, 185, 0.12); |
||||
|
} |
||||
|
.d-tabs__dropdown-item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.d-list { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 2rem; |
||||
|
margin-bottom: 3.5rem; |
||||
|
} |
||||
|
|
||||
|
.d-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
min-height: 6.25rem; |
||||
|
padding: 1.5rem 2rem; |
||||
|
border-radius: 1rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
text-decoration: none; |
||||
|
color: var(--color-text); |
||||
|
transition: background 0.25s ease, transform 0.25s ease; |
||||
|
} |
||||
|
.d-item:hover { |
||||
|
background: rgba(175, 181, 185, 0.22); |
||||
|
} |
||||
|
.d-item:hover .d-item__action { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.d-item__main { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.d-item__pdf { |
||||
|
display: block; |
||||
|
width: 2rem; |
||||
|
height: 2rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.d-item__name { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.d-item__action { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
flex-shrink: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
color: var(--color-text); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.d-item__action img { |
||||
|
display: block; |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.d-pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.75rem; |
||||
|
} |
||||
|
.d-pagination__btn, .d-pagination__page { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
border-radius: 0.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: default; |
||||
|
} |
||||
|
.d-pagination__btn img { |
||||
|
display: block; |
||||
|
width: 1.0625rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: grayscale(1) opacity(0.45); |
||||
|
} |
||||
|
.d-pagination__btn--next img { |
||||
|
transform: none; |
||||
|
filter: none; |
||||
|
} |
||||
|
.d-pagination__btn:disabled { |
||||
|
opacity: 0.55; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.d-pagination__page.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.d-page { |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.d-head { |
||||
|
gap: 12Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.d-head__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.d-head__desc { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.d-toolbar { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.d-tabs { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.d-tabs__item { |
||||
|
min-height: 44Px; |
||||
|
padding: 10Px 24Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.d-list { |
||||
|
gap: 12Px; |
||||
|
margin-bottom: 40Px; |
||||
|
} |
||||
|
.d-item { |
||||
|
min-height: 72Px; |
||||
|
padding: 20Px 24Px; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.d-item__name { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.d-item__action { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.d-toolbar { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
.d-list { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.d-page { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.d-head { |
||||
|
gap: 10Px; |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
.d-head__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.d-head__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.d-toolbar { |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
.d-tabs { |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.d-tabs__item { |
||||
|
min-height: 40Px; |
||||
|
padding: 8Px 16Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.d-item { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
padding: 16Px 18Px; |
||||
|
gap: 14Px; |
||||
|
} |
||||
|
.d-item__name { |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.d-item__action { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.d-item__action img { |
||||
|
width: 20Px; |
||||
|
height: 20Px; |
||||
|
} |
||||
|
.d-pagination { |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.d-pagination__btn, .d-pagination__page { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
.main-faq{background:var(--color-white)}.f-page{padding-top:calc(var(--header-h) + 2.75rem + 2.5rem);padding-bottom:6.25rem}.f-head{border-bottom:1px solid #dfe0e2;flex-direction:column;gap:1.5rem;padding-bottom:2.5rem;display:flex}.f-head__title{color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-48);font-weight:400;line-height:var(--font-64);margin:0}.f-head__desc{color:var(--color-text-muted);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-24);margin:0}.f-toolbar{justify-content:space-between;align-items:center;gap:1.5rem;margin-top:2.75rem;margin-bottom:2.75rem;display:flex}.f-tabs{flex-wrap:wrap;align-items:center;gap:1rem;min-width:0;display:flex}.f-tabs__item{color:#2e353a99;min-height:3rem;font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-24);cursor:pointer;border:0;border-radius:6.25rem;justify-content:center;align-items:center;padding:.75rem 2rem;transition:background .25s,color .25s;display:inline-flex}.f-tabs__item.is-active{background:var(--color-primary);color:var(--color-white)}.f-list{flex-direction:column;display:flex}.f-item{transition:border-color var(--duration-fast) var(--easing);border-top:1px solid #dfe0e2}.f-item__trigger{text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:1.5rem;width:100%;padding:2rem 0;display:flex}.f-item__q{align-items:center;gap:1rem;min-width:0;display:flex}.f-item__dot{background:#afb5b9;border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.f-item__title{color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-24);font-weight:450;line-height:var(--font-32)}.f-item__icon{flex-shrink:0;width:1.5rem;height:1.5rem;position:relative}.f-item__icon:before,.f-item__icon:after{content:"";background:#afb5b9;transition:transform .25s,background .25s,opacity .25s;position:absolute;top:50%;left:50%}.f-item__icon:before{width:1rem;height:.125rem;transform:translate(-50%,-50%)}.f-item__icon:after{width:.125rem;height:1rem;transform:translate(-50%,-50%)}.f-item__panel{transition:grid-template-rows var(--duration-normal) var(--easing);grid-template-rows:0fr;display:grid}.f-item__a{opacity:0;color:#2e353a99;max-height:0;font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-20);font-weight:400;line-height:var(--font-32);background:#afb5b926;border-radius:1.5rem;margin:0;padding:0 2rem;transition:max-height .3s,opacity .25s,padding .3s,margin .3s;overflow:hidden}.f-item.is-open{border-top-color:var(--color-primary)}.f-item.is-open .f-item__icon:before,.f-item.is-open .f-item__icon:after{background:var(--color-primary)}.f-item.is-open .f-item__icon:after{opacity:0;transform:translate(-50%,-50%)scaleY(0)}.f-item.is-open .f-item__panel{grid-template-rows:1fr}.f-item.is-open .f-item__a{opacity:1;max-height:30rem;margin-bottom:2rem;padding:2.5rem 2rem}@media (width<=1439px){.f-page{padding-top:calc(var(--header-h) + 40px);padding-bottom:72px}.f-head{gap:12px;padding-bottom:28px}.f-head__title{font-size:36px;line-height:48px}.f-head__desc{font-size:16px}.f-toolbar{flex-wrap:wrap;gap:16px;margin-top:32px;margin-bottom:32px}.f-tabs{gap:12px}.f-tabs__item{min-height:44px;padding:10px 24px;font-size:16px}.f-item__trigger{padding:24px 0}.f-item__title{font-size:20px;line-height:28px}.f-item__a{font-size:16px;line-height:28px}.f-item.is-open .f-item__a{margin-bottom:24px;padding:20px 24px}}@media (width<=992px){.f-toolbar{flex-direction:column;align-items:stretch}}@media (width<=576px){.f-page{padding-top:calc(var(--header-h) + 24px);padding-bottom:48px}.f-head{gap:10px;padding-bottom:20px}.f-head__title{font-size:28px;line-height:38px}.f-head__desc{font-size:14px;line-height:22px}.f-toolbar{margin-top:24px;margin-bottom:24px}.f-tabs{gap:8px}.f-tabs__item{min-height:40px;padding:8px 16px;font-size:14px}.f-item__trigger{gap:16px;padding:20px 0}.f-item__q{gap:12px}.f-item__dot{width:6px;height:6px}.f-item__title{font-size:16px;line-height:24px}.f-item__a{border-radius:16px;font-size:14px;line-height:24px}.f-item.is-open .f-item__a{margin-bottom:20px;padding:16px 18px}} |
||||
@ -0,0 +1,281 @@ |
|||||
|
.main-faq { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.f-page { |
||||
|
padding-top: calc(var(--header-h) + 2.75rem + 2.5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.f-head { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.f-head__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.f-head__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.f-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: 2.75rem; |
||||
|
margin-bottom: 2.75rem; |
||||
|
} |
||||
|
|
||||
|
.f-tabs { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1rem; |
||||
|
align-items: center; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.f-tabs__item { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 3rem; |
||||
|
padding: 0.75rem 2rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.f-tabs__item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.f-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.f-item { |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.f-item__trigger { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
width: 100%; |
||||
|
padding: 2rem 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.f-item__q { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.f-item__dot { |
||||
|
width: 0.5rem; |
||||
|
height: 0.5rem; |
||||
|
flex-shrink: 0; |
||||
|
border-radius: 50%; |
||||
|
background: rgb(175, 181, 185); |
||||
|
} |
||||
|
.f-item__title { |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 450; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.f-item__icon { |
||||
|
position: relative; |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.f-item__icon::before, .f-item__icon::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
background: rgb(175, 181, 185); |
||||
|
transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; |
||||
|
} |
||||
|
.f-item__icon::before { |
||||
|
width: 1rem; |
||||
|
height: 0.125rem; |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
.f-item__icon::after { |
||||
|
width: 0.125rem; |
||||
|
height: 1rem; |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
.f-item__panel { |
||||
|
display: grid; |
||||
|
grid-template-rows: 0fr; |
||||
|
transition: grid-template-rows var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.f-item__a { |
||||
|
overflow: hidden; |
||||
|
margin: 0; |
||||
|
padding: 0 2rem; |
||||
|
max-height: 0; |
||||
|
opacity: 0; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease; |
||||
|
} |
||||
|
.f-item.is-open { |
||||
|
border-top-color: var(--color-primary); |
||||
|
} |
||||
|
.f-item.is-open .f-item__icon::before, .f-item.is-open .f-item__icon::after { |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.f-item.is-open .f-item__icon::after { |
||||
|
opacity: 0; |
||||
|
transform: translate(-50%, -50%) scaleY(0); |
||||
|
} |
||||
|
.f-item.is-open .f-item__panel { |
||||
|
grid-template-rows: 1fr; |
||||
|
} |
||||
|
.f-item.is-open .f-item__a { |
||||
|
max-height: 30rem; |
||||
|
margin-bottom: 2rem; |
||||
|
padding: 2.5rem 2rem; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.f-page { |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.f-head { |
||||
|
gap: 12Px; |
||||
|
padding-bottom: 28Px; |
||||
|
} |
||||
|
.f-head__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.f-head__desc { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.f-toolbar { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16Px; |
||||
|
margin-top: 32Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.f-tabs { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.f-tabs__item { |
||||
|
min-height: 44Px; |
||||
|
padding: 10Px 24Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.f-item__trigger { |
||||
|
padding: 24Px 0; |
||||
|
} |
||||
|
.f-item__title { |
||||
|
font-size: 20Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
.f-item__a { |
||||
|
font-size: 16Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
.f-item.is-open .f-item__a { |
||||
|
padding: 20Px 24Px; |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.f-toolbar { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.f-page { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.f-head { |
||||
|
gap: 10Px; |
||||
|
padding-bottom: 20Px; |
||||
|
} |
||||
|
.f-head__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.f-head__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.f-toolbar { |
||||
|
margin-top: 24Px; |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
.f-tabs { |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.f-tabs__item { |
||||
|
min-height: 40Px; |
||||
|
padding: 8Px 16Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.f-item__trigger { |
||||
|
gap: 16Px; |
||||
|
padding: 20Px 0; |
||||
|
} |
||||
|
.f-item__q { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.f-item__dot { |
||||
|
width: 6Px; |
||||
|
height: 6Px; |
||||
|
} |
||||
|
.f-item__title { |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.f-item__a { |
||||
|
font-size: 14Px; |
||||
|
line-height: 24Px; |
||||
|
border-radius: 16Px; |
||||
|
} |
||||
|
.f-item.is-open .f-item__a { |
||||
|
padding: 16Px 18Px; |
||||
|
margin-bottom: 20Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/index-hIdCH-Ul.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1008
public/themes/dist_static/static/css/index.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
public/themes/dist_static/static/css/investment-pb4FAeRx.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,579 @@ |
|||||
|
.main-investment { |
||||
|
background: var(--color-white); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.iv-hero__title { |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 2.5rem; |
||||
|
} |
||||
|
.iv-hero__title h1 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-hero__media { |
||||
|
width: 100%; |
||||
|
height: 45rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.iv-hero__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.iv-info { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 67.5rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 6.25rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-info__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-info__grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 0 2.5rem; |
||||
|
} |
||||
|
.iv-info__item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
padding: 2rem 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.iv-info__item--full { |
||||
|
grid-column: 1/-1; |
||||
|
} |
||||
|
.iv-info__label { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.iv-info__value { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
|
||||
|
.iv-announce { |
||||
|
padding-top: 6.25rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-announce__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 3.125rem; |
||||
|
} |
||||
|
.iv-announce__head .s-arrows { |
||||
|
display: flex; |
||||
|
} |
||||
|
.iv-announce__arrows-mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
.iv-announce__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-announce__swiper { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.iv-announce__card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
min-height: 20rem; |
||||
|
padding: 2.5rem; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgb(241, 241, 241); |
||||
|
color: var(--color-text); |
||||
|
box-sizing: border-box; |
||||
|
transition: background 0.3s ease, color 0.3s ease; |
||||
|
} |
||||
|
.iv-announce__card:hover { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.iv-announce__card:hover .iv-announce__date { |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.iv-announce__card:hover .iv-announce__link { |
||||
|
color: var(--color-white); |
||||
|
border-color: rgba(255, 255, 255, 0.15); |
||||
|
} |
||||
|
.iv-announce__card:hover .iv-announce__link path { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
.iv-announce__date { |
||||
|
display: block; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-16); |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
.iv-announce__name { |
||||
|
margin: 0; |
||||
|
flex: 1; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.iv-announce__link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 0.625rem; |
||||
|
width: 100%; |
||||
|
margin-top: auto; |
||||
|
padding-top: 1.5rem; |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
color: var(--color-text-muted); |
||||
|
text-decoration: none; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-21); |
||||
|
transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.iv-announce__link svg { |
||||
|
width: 1rem; |
||||
|
height: 0.875rem; |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.iv-announce__link path { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
|
||||
|
.iv-stock { |
||||
|
padding-top: 6.25rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-stock__title { |
||||
|
margin: 0 0 6rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-stock__body { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 50rem) minmax(0, 45rem); |
||||
|
gap: 6.875rem; |
||||
|
align-items: start; |
||||
|
} |
||||
|
.iv-stock__code { |
||||
|
margin: 0 0 1.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.iv-stock__quote { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
margin-bottom: 5rem; |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.iv-stock__price { |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-60); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-60); |
||||
|
} |
||||
|
.iv-stock__unit { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-30); |
||||
|
} |
||||
|
.iv-stock__change { |
||||
|
margin-left: 1.75rem; |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
.iv-stock__metrics { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 1.5rem 4rem; |
||||
|
margin: 0 0 5.625rem; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.iv-stock__metric-label { |
||||
|
display: block; |
||||
|
margin-bottom: 1rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-26); |
||||
|
} |
||||
|
.iv-stock__metric-value { |
||||
|
display: block; |
||||
|
color: var(--color-text); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-38); |
||||
|
} |
||||
|
.iv-stock__note { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-26); |
||||
|
} |
||||
|
.iv-stock__chart { |
||||
|
overflow: hidden; |
||||
|
border-radius: 1.875rem; |
||||
|
padding: 1.75rem; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.iv-stock__chart img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.iv-learn { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 67.5rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 6.25rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-learn__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-learn__list { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.iv-learn__item { |
||||
|
display: grid; |
||||
|
grid-template-columns: 8.75rem minmax(0, 1fr) auto; |
||||
|
align-items: center; |
||||
|
min-height: 6.25rem; |
||||
|
padding: 2.125rem 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
cursor: pointer; |
||||
|
text-decoration: none; |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.iv-learn__item:hover { |
||||
|
border-bottom-color: var(--color-primary); |
||||
|
} |
||||
|
.iv-learn__item:hover .iv-learn__name { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.iv-learn__item:hover .iv-learn__link { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.iv-learn__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-16); |
||||
|
} |
||||
|
.iv-learn__name { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.iv-learn__link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
color: var(--color-text-muted); |
||||
|
text-decoration: none; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-21); |
||||
|
white-space: nowrap; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.iv-learn__link svg { |
||||
|
width: 1rem; |
||||
|
height: 0.875rem; |
||||
|
display: block; |
||||
|
} |
||||
|
.iv-learn__link path { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
.iv-learn__more { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.25rem; |
||||
|
margin-top: 2rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
cursor: pointer; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.iv-learn__more:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.iv-learn__more-icon { |
||||
|
display: block; |
||||
|
line-height: 0; |
||||
|
} |
||||
|
.iv-learn__more-icon svg { |
||||
|
display: block; |
||||
|
width: 0.75rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
.iv-learn__more-icon--up { |
||||
|
opacity: 0.35; |
||||
|
transform: scaleY(-1); |
||||
|
} |
||||
|
.iv-learn__more-icon--down { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.iv-hotline { |
||||
|
position: relative; |
||||
|
min-height: 50rem; |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
.iv-hotline__bg { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
z-index: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.iv-hotline__bg img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.iv-hotline__bg::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: rgba(46, 53, 58, 0.3); |
||||
|
} |
||||
|
.iv-hotline__inner { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 34.25rem); |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 6.25rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.iv-hotline__title { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.iv-hotline__list { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.iv-hotline__item { |
||||
|
padding: 2rem 0; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15); |
||||
|
} |
||||
|
.iv-hotline__row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
.iv-hotline__icon { |
||||
|
display: block; |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.iv-hotline__label { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
.iv-hotline__value { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-27); |
||||
|
padding-left: 2.5rem; |
||||
|
} |
||||
|
.iv-hotline__value a { |
||||
|
color: inherit; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
.iv-hotline__value a:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.iv-hero__title h1 { |
||||
|
font-size: 40Px; |
||||
|
line-height: 54Px; |
||||
|
} |
||||
|
.iv-hero__media { |
||||
|
height: 520Px; |
||||
|
} |
||||
|
.iv-info, |
||||
|
.iv-learn, |
||||
|
.iv-hotline__inner { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 32Px; |
||||
|
} |
||||
|
.iv-info, |
||||
|
.iv-announce, |
||||
|
.iv-stock, |
||||
|
.iv-learn { |
||||
|
padding-top: 80Px; |
||||
|
padding-bottom: 80Px; |
||||
|
} |
||||
|
.iv-stock__body { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 40Px; |
||||
|
} |
||||
|
.iv-stock__title { |
||||
|
margin-bottom: 48Px; |
||||
|
} |
||||
|
.iv-stock__metrics { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 24Px 40Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.iv-info__grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
.iv-announce__card { |
||||
|
min-height: 280Px; |
||||
|
padding: 28Px; |
||||
|
} |
||||
|
.iv-learn__item { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 12Px; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.iv-hero__title { |
||||
|
padding-top: calc(var(--header-h) + 5rem); |
||||
|
padding-bottom: 24Px; |
||||
|
} |
||||
|
.iv-hero__title h1 { |
||||
|
font-size: 28Px; |
||||
|
line-height: 40Px; |
||||
|
} |
||||
|
.iv-hero__media { |
||||
|
height: 280Px; |
||||
|
} |
||||
|
.iv-info__title, |
||||
|
.iv-announce__title, |
||||
|
.iv-stock__title, |
||||
|
.iv-learn__title, |
||||
|
.iv-hotline__title { |
||||
|
font-size: 32Px; |
||||
|
line-height: 44Px; |
||||
|
} |
||||
|
.iv-info__value, |
||||
|
.iv-announce__name, |
||||
|
.iv-learn__name, |
||||
|
.iv-hotline__value { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.iv-stock__price { |
||||
|
font-size: 44Px; |
||||
|
line-height: 44Px; |
||||
|
} |
||||
|
.iv-stock__metrics { |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
} |
||||
|
.iv-info, |
||||
|
.iv-announce, |
||||
|
.iv-stock, |
||||
|
.iv-learn { |
||||
|
padding-top: 4rem; |
||||
|
} |
||||
|
.iv-info, |
||||
|
.iv-announce, |
||||
|
.iv-stock, |
||||
|
.iv-hotline { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-learn { |
||||
|
padding-bottom: 4rem; |
||||
|
} |
||||
|
.iv-hotline { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.iv-announce__head .s-arrows { |
||||
|
display: none; |
||||
|
} |
||||
|
.iv-announce__arrows-mobile { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: 24Px; |
||||
|
} |
||||
|
.iv-announce__arrows-mobile .s-arrows { |
||||
|
display: flex; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/news-3CtpieBF.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||||
|
.main-news-detail{background:var(--color-white)}.nd-page{padding-top:calc(var(--header-h) + 2.75rem + 5rem);padding-bottom:6.25rem}.nd-breadcrumb{font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-16);line-height:var(--font-22);flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:2.5rem;display:flex}.nd-breadcrumb__link{color:var(--color-text-link);transition:color var(--duration-fast) var(--easing)}.nd-breadcrumb__link:hover{color:var(--color-primary)}.nd-breadcrumb__sep{color:#afb5b9;align-items:center;display:inline-flex}.nd-breadcrumb__sep svg{width:.4375rem;height:auto;display:block}.nd-breadcrumb__current{color:var(--color-text);font-weight:500}.nd-layout{width:100%;padding:0 max(var(--p-x), min(30rem, (100vw - 60rem) / 2))}.nd-back{top:30%;left:max(var(--p-x), min(30rem, (100vw - 60rem) / 2) - 16.5rem);z-index:20;width:3rem;color:var(--color-text-muted);flex-direction:column;align-items:center;gap:.625rem;text-decoration:none;transition:color .25s,opacity .3s,visibility .3s;display:flex;position:fixed;transform:translateY(-50%)}.nd-back.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.nd-back:hover{color:var(--color-primary)}.nd-back__icon{background:var(--color-primary);border-radius:1rem;justify-content:center;align-items:center;width:3rem;height:3rem;display:inline-flex}.nd-back__icon img{filter:brightness(0)invert();width:.875rem;height:auto;display:block;transform:scaleX(-1)}.nd-back__text{font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-18)}@media (width>=1440px){.nd-layout{grid-template-columns:minmax(0,960px);justify-content:center;display:grid}.nd-article{width:100%;margin:0}}.nd-article{width:min(60rem,100%);margin:0 auto}.nd-article__header{border-bottom:1px solid #dfe0e2;flex-direction:column;gap:1.5rem;padding-bottom:2.5rem;display:flex}.nd-article__title{color:var(--color-text);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-48);font-weight:400;line-height:var(--font-64);margin:0}.nd-article__date{color:var(--color-text-muted);font-family:D-DIN-PRO,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-18)}.nd-richtext{color:var(--color-text-muted);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-18);font-weight:400;line-height:var(--font-32);flex-direction:column;align-items:center;gap:2rem;padding:2.5rem 0 3rem;display:flex}.nd-richtext>*{width:100%;margin:0}.nd-richtext h2,.nd-richtext h3{color:var(--color-text);font-size:var(--font-20);font-weight:400;line-height:var(--font-32)}.nd-richtext p{text-align:left}.nd-richtext ul{margin:0}.nd-richtext li+li{margin-top:.75rem}.nd-richtext a{color:var(--color-primary);text-decoration:underline}.nd-richtext__figure{justify-content:center;margin:0;display:flex}.nd-richtext__figure img{border-radius:.5rem;width:min(31.25rem,100%);height:auto;display:block}.nd-pager{border-top:1px solid #dfe0e2;grid-template-columns:1fr 1fr;gap:1rem;padding-top:3rem;display:grid}.nd-pager__item{height:3.5rem;color:var(--color-text-muted);background:var(--color-white);font-family:MiSans VF,PingFang SC,sans-serif;font-size:var(--font-16);font-weight:400;line-height:var(--font-32);border:1px solid #dfe0e2;border-radius:1rem;justify-content:center;align-items:center;text-decoration:none;transition:color .25s,background-color .25s,border-color .25s;display:flex;position:relative;overflow:hidden}.nd-pager__item:before{content:"";opacity:0;transition:opacity var(--duration-fast) var(--easing);pointer-events:none;background:url(../images/btn-bg-BBiuFyqy.png) 50%/cover no-repeat;position:absolute;inset:0}.nd-pager__item:hover{color:var(--color-white);border-color:var(--color-primary);background-color:var(--color-primary)}.nd-pager__item:hover:before{opacity:1}.nd-pager__label{z-index:1;position:relative}@media (width<=1439px){.nd-layout{padding:0 var(--p-x)}.nd-back{left:var(--p-x)}.nd-page{padding-top:calc(var(--header-h) + 40px);padding-bottom:72px}.nd-breadcrumb{margin-bottom:32px}.nd-article__title{font-size:36px;line-height:48px}.nd-article__header{gap:16px;padding-bottom:28px}.nd-richtext{gap:24px;padding:28px 0 40px;font-size:16px;line-height:28px}.nd-richtext h2,.nd-richtext h3{font-size:18px;line-height:28px}}@media (width<=576px){.nd-page{padding-top:calc(var(--header-h) + 24px);padding-bottom:48px}.nd-breadcrumb{gap:8px;margin-bottom:20px;font-size:14px;line-height:20px}.nd-breadcrumb__sep svg{width:6px}.nd-back__icon{width:40px;height:40px}.nd-article__title{font-size:24px;line-height:34px}.nd-article__date{font-size:14px}.nd-richtext{gap:20px;padding:24px 0 32px;font-size:15px;line-height:26px}.nd-richtext h2,.nd-richtext h3{font-size:17px;line-height:26px}.nd-pager{grid-template-columns:1fr;gap:12px;padding-top:32px}.nd-pager__item{height:48px}} |
||||
@ -0,0 +1,323 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
.main-news-detail { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.nd-page { |
||||
|
padding-top: calc(var(--header-h) + 2.75rem + 5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.nd-breadcrumb { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 0.75rem; |
||||
|
margin-bottom: 2.5rem; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.nd-breadcrumb__link { |
||||
|
color: var(--color-text-link); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.nd-breadcrumb__link:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.nd-breadcrumb__sep { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
.nd-breadcrumb__sep svg { |
||||
|
display: block; |
||||
|
width: 0.4375rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
.nd-breadcrumb__current { |
||||
|
color: var(--color-text); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.nd-layout { |
||||
|
width: 100%; |
||||
|
/* 设计稿左右边距 480；窄于 1920 时按内容宽 960 居中收缩 */ |
||||
|
padding: 0 max(var(--p-x), min(30rem, (100vw - 60rem) / 2)); |
||||
|
} |
||||
|
|
||||
|
.nd-back { |
||||
|
position: fixed; |
||||
|
top: 30%; |
||||
|
left: max(var(--p-x), min(30rem, (100vw - 60rem) / 2) - 16.5rem); |
||||
|
z-index: 20; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
width: 3rem; |
||||
|
transform: translateY(-50%); |
||||
|
text-decoration: none; |
||||
|
color: var(--color-text-muted); |
||||
|
transition: color 0.25s ease, opacity 0.3s ease, visibility 0.3s ease; |
||||
|
} |
||||
|
.nd-back.is-hidden { |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.nd-back:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.nd-back__icon { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
border-radius: 1rem; |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
.nd-back__icon img { |
||||
|
display: block; |
||||
|
width: 0.875rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: brightness(0) invert(1); |
||||
|
} |
||||
|
.nd-back__text { |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
|
||||
|
@media (min-width: 1440px) { |
||||
|
.nd-layout { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 960Px); |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.nd-article { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
.nd-article { |
||||
|
width: min(60rem, 100%); |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.nd-article__header { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.nd-article__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.nd-article__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
|
||||
|
.nd-richtext { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 2rem; |
||||
|
padding: 2.5rem 0 3rem; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.nd-richtext > * { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
.nd-richtext h2, |
||||
|
.nd-richtext h3 { |
||||
|
color: var(--color-text); |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
} |
||||
|
.nd-richtext p { |
||||
|
text-align: left; |
||||
|
} |
||||
|
.nd-richtext ul { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.nd-richtext li + li { |
||||
|
margin-top: 0.75rem; |
||||
|
} |
||||
|
.nd-richtext a { |
||||
|
color: var(--color-primary); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.nd-richtext__figure { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 0; |
||||
|
} |
||||
|
.nd-richtext__figure img { |
||||
|
display: block; |
||||
|
width: min(31.25rem, 100%); |
||||
|
height: auto; |
||||
|
border-radius: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.nd-pager { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 1rem; |
||||
|
padding-top: 3rem; |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.nd-pager__item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 3.5rem; |
||||
|
overflow: hidden; |
||||
|
border-radius: 1rem; |
||||
|
text-decoration: none; |
||||
|
color: var(--color-text-muted); |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
background: var(--color-white); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; |
||||
|
} |
||||
|
.nd-pager__item::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: url("../images/btn-bg-BBiuFyqy.png") center/cover no-repeat; |
||||
|
opacity: 0; |
||||
|
transition: opacity var(--duration-fast) var(--easing); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.nd-pager__item:hover { |
||||
|
color: var(--color-white); |
||||
|
border-color: var(--color-primary); |
||||
|
background-color: var(--color-primary); |
||||
|
} |
||||
|
.nd-pager__item:hover::before { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.nd-pager__label { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.nd-layout { |
||||
|
padding: 0 var(--p-x); |
||||
|
} |
||||
|
.nd-back { |
||||
|
left: var(--p-x); |
||||
|
} |
||||
|
.nd-page { |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.nd-breadcrumb { |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.nd-article__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.nd-article__header { |
||||
|
gap: 16Px; |
||||
|
padding-bottom: 28Px; |
||||
|
} |
||||
|
.nd-richtext { |
||||
|
gap: 24Px; |
||||
|
padding: 28Px 0 40Px; |
||||
|
font-size: 16Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
.nd-richtext h2, |
||||
|
.nd-richtext h3 { |
||||
|
font-size: 18Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.nd-layout { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.nd-page { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.nd-breadcrumb { |
||||
|
gap: 8Px; |
||||
|
margin-bottom: 20Px; |
||||
|
font-size: 14Px; |
||||
|
line-height: 20Px; |
||||
|
} |
||||
|
.nd-breadcrumb__sep svg { |
||||
|
width: 6Px; |
||||
|
} |
||||
|
.nd-back__icon { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
} |
||||
|
.nd-article { |
||||
|
order: 1; |
||||
|
} |
||||
|
.nd-article__title { |
||||
|
font-size: 24Px; |
||||
|
line-height: 34Px; |
||||
|
} |
||||
|
.nd-article__date { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.nd-richtext { |
||||
|
gap: 20Px; |
||||
|
padding: 24Px 0 32Px; |
||||
|
font-size: 15Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.nd-richtext h2, |
||||
|
.nd-richtext h3 { |
||||
|
font-size: 17Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.nd-pager { |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
gap: 12Px; |
||||
|
padding-top: 32Px; |
||||
|
} |
||||
|
.nd-pager__item { |
||||
|
height: 40Px; |
||||
|
} |
||||
|
.nd-back { |
||||
|
order: 2; |
||||
|
position: relative; |
||||
|
top: auto; |
||||
|
left: auto; |
||||
|
transform: none; |
||||
|
width: 100%; |
||||
|
margin-top: 24Px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,478 @@ |
|||||
|
.main-news { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.n-page { |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.n-head { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: space-between; |
||||
|
gap: 2.5rem; |
||||
|
margin-bottom: 3.5rem; |
||||
|
} |
||||
|
.n-head__title { |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
|
||||
|
.n-tabs { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1rem; |
||||
|
align-items: center; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.n-tabs__item { |
||||
|
min-height: 3rem; |
||||
|
padding: 0.75rem 2rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: default; |
||||
|
} |
||||
|
.n-tabs__item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.n-link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-link img { |
||||
|
display: block; |
||||
|
width: 1rem; |
||||
|
height: auto; |
||||
|
transition: filter var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-link:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.n-link:hover img { |
||||
|
filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(2148%) hue-rotate(339deg) brightness(97%) contrast(92%); |
||||
|
} |
||||
|
.n-link--sm { |
||||
|
gap: 0.625rem; |
||||
|
font-size: var(--font-16); |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
|
||||
|
.n-featured { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 45rem) minmax(0, 1fr); |
||||
|
gap: 3rem; |
||||
|
align-items: center; |
||||
|
padding: 3rem; |
||||
|
margin-bottom: 5rem; |
||||
|
border-radius: 2.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
} |
||||
|
.n-featured__media { |
||||
|
min-width: 0; |
||||
|
border-radius: 2rem; |
||||
|
overflow: hidden; |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
.n-featured__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
aspect-ratio: 720/480; |
||||
|
object-fit: cover; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.n-featured__body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
align-self: stretch; |
||||
|
min-width: 0; |
||||
|
padding: 2.5rem 0; |
||||
|
} |
||||
|
.n-featured__content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
.n-featured__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
.n-featured__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-28); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-37); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-featured__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.n-featured__foot { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: auto; |
||||
|
padding-top: 2rem; |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-featured__nav { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.n-featured:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.n-featured:hover .n-featured__title { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.n-featured:hover .n-featured__media img { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.n-featured:hover .n-featured__foot { |
||||
|
border-top-color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.n-nav-btn { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
padding: 0; |
||||
|
border: 1px solid rgba(46, 53, 58, 0.1); |
||||
|
border-radius: 1rem; |
||||
|
background: transparent; |
||||
|
cursor: default; |
||||
|
} |
||||
|
.n-nav-btn img { |
||||
|
display: block; |
||||
|
width: 0.875rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: grayscale(1) opacity(0.45); |
||||
|
} |
||||
|
.n-nav-btn--active { |
||||
|
border-color: var(--color-primary); |
||||
|
} |
||||
|
.n-nav-btn--active img { |
||||
|
transform: none; |
||||
|
filter: none; |
||||
|
} |
||||
|
|
||||
|
.n-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
margin-bottom: 5rem; |
||||
|
} |
||||
|
|
||||
|
.n-card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2.5rem; |
||||
|
min-width: 0; |
||||
|
padding: 2.5rem; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
} |
||||
|
.n-card__top { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.n-card__date { |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "D-DIN-PRO", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-18); |
||||
|
} |
||||
|
.n-card__title { |
||||
|
margin: 0; |
||||
|
min-height: 4rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-32); |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-card__media { |
||||
|
margin-top: auto; |
||||
|
border-radius: 1rem; |
||||
|
overflow: hidden; |
||||
|
aspect-ratio: 437/260; |
||||
|
} |
||||
|
.n-card__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.n-card .n-link { |
||||
|
padding-top: 1.5rem; |
||||
|
border-top: 1px solid rgb(223, 224, 226); |
||||
|
transition: border-color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.n-card:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.n-card:hover .n-card__title { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.n-card:hover .n-card__media img { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.n-card:hover .n-link { |
||||
|
border-top-color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.n-pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.5rem; |
||||
|
} |
||||
|
.n-pagination__btn, .n-pagination__page { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
padding: 0; |
||||
|
background-color: rgba(175, 181, 185, 0.15); |
||||
|
border-radius: 1rem; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: default; |
||||
|
} |
||||
|
.n-pagination__btn img { |
||||
|
display: block; |
||||
|
width: 0.875rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: grayscale(1) opacity(0.45); |
||||
|
} |
||||
|
.n-pagination__btn--next img { |
||||
|
transform: none; |
||||
|
filter: none; |
||||
|
} |
||||
|
.n-pagination__page.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.n-page { |
||||
|
padding-top: calc(var(--header-h) + 48Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.n-head { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 32Px; |
||||
|
margin-bottom: 40Px; |
||||
|
} |
||||
|
.n-head__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.n-tabs__item { |
||||
|
min-height: 44Px; |
||||
|
padding: 10Px 24Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.n-featured { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 32Px; |
||||
|
padding: 32Px; |
||||
|
margin-bottom: 56Px; |
||||
|
border-radius: 24Px; |
||||
|
} |
||||
|
.n-featured__media { |
||||
|
border-radius: 20Px; |
||||
|
} |
||||
|
.n-featured__body { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.n-featured__content { |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.n-featured__title { |
||||
|
font-size: 24Px; |
||||
|
line-height: 34Px; |
||||
|
} |
||||
|
.n-featured__desc { |
||||
|
font-size: 16Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.n-featured__foot { |
||||
|
margin-top: 24Px; |
||||
|
padding-top: 24Px; |
||||
|
} |
||||
|
.n-grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 24Px; |
||||
|
margin-bottom: 56Px; |
||||
|
} |
||||
|
.n-card { |
||||
|
gap: 28Px; |
||||
|
padding: 28Px; |
||||
|
border-radius: 20Px; |
||||
|
} |
||||
|
.n-card__title { |
||||
|
min-height: 56Px; |
||||
|
font-size: 18Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.n-page { |
||||
|
padding-top: calc(var(--header-h) + 5rem); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.n-head { |
||||
|
gap: 24Px; |
||||
|
margin-bottom: 28Px; |
||||
|
} |
||||
|
.n-head__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.n-tabs { |
||||
|
width: 100%; |
||||
|
overflow-x: auto; |
||||
|
flex-wrap: nowrap; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
scrollbar-width: none; |
||||
|
} |
||||
|
.n-tabs::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
.n-tabs__item { |
||||
|
flex-shrink: 0; |
||||
|
min-height: 40Px; |
||||
|
padding: 8Px 20Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.n-featured { |
||||
|
gap: 20Px; |
||||
|
padding: 20Px; |
||||
|
margin-bottom: 40Px; |
||||
|
border-radius: 16Px; |
||||
|
} |
||||
|
.n-featured__media { |
||||
|
border-radius: 12Px; |
||||
|
} |
||||
|
.n-featured__content { |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.n-featured__date { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.n-featured__title { |
||||
|
font-size: 20Px; |
||||
|
line-height: 28Px; |
||||
|
} |
||||
|
.n-featured__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 4; |
||||
|
line-clamp: 4; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.n-featured__foot { |
||||
|
margin-top: 16Px; |
||||
|
padding-top: 16Px; |
||||
|
} |
||||
|
.n-featured__nav { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.n-nav-btn { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
border-radius: 12Px; |
||||
|
} |
||||
|
.n-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 16Px; |
||||
|
margin-bottom: 40Px; |
||||
|
} |
||||
|
.n-card { |
||||
|
gap: 20Px; |
||||
|
padding: 20Px; |
||||
|
border-radius: 16Px; |
||||
|
} |
||||
|
.n-card__top { |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.n-card__date { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.n-card__title { |
||||
|
min-height: 0; |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.n-card .n-link { |
||||
|
padding-top: 16Px; |
||||
|
} |
||||
|
.n-pagination { |
||||
|
gap: 10Px; |
||||
|
} |
||||
|
.n-pagination__btn, .n-pagination__page { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
border-radius: 12Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/product-DDHaIT_9.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1288
public/themes/dist_static/static/css/product.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
public/themes/dist_static/static/css/search-CCchQF0u.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,325 @@ |
|||||
|
.main-search { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.sr-page { |
||||
|
padding-top: calc(var(--header-h) + 9rem); |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
|
||||
|
.sr-hero { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 5rem; |
||||
|
} |
||||
|
.sr-hero__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.sr-search.s-search { |
||||
|
width: min(50rem, 100%); |
||||
|
padding-left: 2rem; |
||||
|
} |
||||
|
|
||||
|
.sr-hot { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.75rem 1rem; |
||||
|
} |
||||
|
.sr-hot__label { |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.sr-hot__list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.sr-hot__tag { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 2.25rem; |
||||
|
padding: 0.5rem 1.5rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
cursor: pointer; |
||||
|
transition: color 0.25s ease, background 0.25s ease; |
||||
|
} |
||||
|
.sr-hot__tag:hover { |
||||
|
color: var(--color-primary); |
||||
|
background: rgba(239, 67, 53, 0.1); |
||||
|
} |
||||
|
|
||||
|
.sr-tabs { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1.5rem; |
||||
|
align-items: stretch; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.sr-tabs__item { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 4rem; |
||||
|
padding: 1rem 0; |
||||
|
border: 0; |
||||
|
border-bottom: 0.125rem solid transparent; |
||||
|
margin-bottom: -1px; |
||||
|
background: transparent; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sr-tabs__item.is-active { |
||||
|
color: var(--color-primary); |
||||
|
border-bottom-color: var(--color-primary); |
||||
|
} |
||||
|
.sr-tabs__item:hover:not(.is-active) { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.sr-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.sr-item { |
||||
|
display: flex; |
||||
|
gap: 2rem; |
||||
|
align-items: stretch; |
||||
|
padding: 2.5rem 0; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.sr-item[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
.sr-item__media { |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
width: 18.75rem; |
||||
|
aspect-ratio: 300/200; |
||||
|
overflow: hidden; |
||||
|
border-radius: 1rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
} |
||||
|
.sr-item__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sr-item__media:hover img { |
||||
|
transform: scale(1.04); |
||||
|
} |
||||
|
.sr-item__body { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
.sr-item__main { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.sr-item__meta { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
gap: 0.75rem; |
||||
|
} |
||||
|
.sr-item__type, .sr-item__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.sr-item__type { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.sr-item__sep { |
||||
|
display: block; |
||||
|
width: 1px; |
||||
|
height: 0.875rem; |
||||
|
background: rgb(223, 224, 226); |
||||
|
} |
||||
|
.sr-item__title { |
||||
|
margin: 0; |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.sr-item__title a { |
||||
|
color: var(--color-text); |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sr-item__title a:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.sr-item__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 3; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sr-item__more { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
align-self: flex-start; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sr-item__more svg { |
||||
|
display: block; |
||||
|
width: 1rem; |
||||
|
height: auto; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.sr-item__more svg path { |
||||
|
fill: currentColor; |
||||
|
transition: fill var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sr-item__more:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.sr-empty { |
||||
|
margin: 4rem 0 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
line-height: var(--font-24); |
||||
|
text-align: center; |
||||
|
} |
||||
|
.sr-empty[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
.sr-page { |
||||
|
padding-top: calc(var(--header-h) + 32Px); |
||||
|
padding-bottom: 80Px; |
||||
|
} |
||||
|
.sr-hero { |
||||
|
gap: 20Px; |
||||
|
margin-bottom: 48Px; |
||||
|
} |
||||
|
.sr-hero__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.sr-search.s-search { |
||||
|
padding-left: 20Px; |
||||
|
} |
||||
|
.sr-tabs { |
||||
|
gap: 16Px; |
||||
|
overflow-x: auto; |
||||
|
flex-wrap: nowrap; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
scrollbar-width: none; |
||||
|
} |
||||
|
.sr-tabs::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
.sr-tabs__item { |
||||
|
flex-shrink: 0; |
||||
|
min-height: 52Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.sr-item { |
||||
|
gap: 24Px; |
||||
|
padding: 32Px 0; |
||||
|
} |
||||
|
.sr-item__media { |
||||
|
width: 220Px; |
||||
|
} |
||||
|
.sr-item__title { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.sr-hero { |
||||
|
align-items: stretch; |
||||
|
margin-bottom: 40Px; |
||||
|
} |
||||
|
.sr-hero__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 36Px; |
||||
|
} |
||||
|
.sr-hot { |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
.sr-hot__tag { |
||||
|
min-height: 32Px; |
||||
|
padding: 4Px 14Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.sr-item { |
||||
|
flex-direction: column; |
||||
|
gap: 16Px; |
||||
|
padding: 24Px 0; |
||||
|
} |
||||
|
.sr-item__media { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.sr-item__body { |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.sr-item__main { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.sr-item__title { |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.sr-item__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
-webkit-line-clamp: 4; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/solution-QRc3Wj_R.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,510 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
.main-solution { |
||||
|
background: var(--color-white); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.sl-hero__intro { |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 2.5rem; |
||||
|
} |
||||
|
.sl-hero__title { |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-hero__desc { |
||||
|
max-width: 50rem; |
||||
|
margin-left: auto; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.sl-hero__media { |
||||
|
width: 100%; |
||||
|
height: 45rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl-hero__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.sl-adv { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl-adv__title { |
||||
|
margin: 0 0 4.6875rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-adv__list { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 0; |
||||
|
} |
||||
|
.sl-adv__item { |
||||
|
min-height: 15rem; |
||||
|
padding: 0 2.5rem; |
||||
|
border-left: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.sl-adv__name { |
||||
|
margin: 0 0 2rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-42); |
||||
|
} |
||||
|
.sl-adv__text { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
|
||||
|
.sl-arch { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl-arch__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-arch__panel { |
||||
|
overflow: hidden; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 1.875rem; |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
.sl-arch__panel img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.sl-core { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl-core__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 2.8125rem; |
||||
|
} |
||||
|
.sl-core__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-core__swiper { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl-core__arrows-mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
.sl-core__card { |
||||
|
min-width: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
.sl-core__card-link { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.25rem; |
||||
|
height: 100%; |
||||
|
padding: 0; |
||||
|
border-radius: 1rem; |
||||
|
background: transparent; |
||||
|
text-decoration: none; |
||||
|
color: inherit; |
||||
|
transition: background var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sl-core__card-media { |
||||
|
aspect-ratio: 16/10; |
||||
|
overflow: hidden; |
||||
|
border-radius: 1rem; |
||||
|
} |
||||
|
.sl-core__card-media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sl-core__card-link:hover .sl-core__card-media img { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.sl-core__card-foot { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 0.75rem; |
||||
|
padding-top: 0; |
||||
|
border-top: none; |
||||
|
} |
||||
|
.sl-core__card-name { |
||||
|
margin: 0; |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-27); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sl-core__card-link:hover .sl-core__card-name { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.sl-core__card-arrow { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-shrink: 0; |
||||
|
color: var(--color-primary); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sl-core__card-arrow img, .sl-core__card-arrow svg { |
||||
|
display: block; |
||||
|
width: 0.75rem; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.sl-clients { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl-clients__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-clients__grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, minmax(0, 1fr)); |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
.sl-clients__item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 10rem; |
||||
|
padding: 1rem; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 0.75rem; |
||||
|
background: var(--color-white); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.sl-clients__item img { |
||||
|
display: block; |
||||
|
max-width: 60%; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
|
||||
|
.sl-cases { |
||||
|
position: relative; |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.sl-cases__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl-cases__body { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 57.375rem) minmax(0, 40.625rem); |
||||
|
gap: 0; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
.sl-cases__copy { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
min-width: 0; |
||||
|
min-height: 31.6875rem; |
||||
|
padding: 0 5rem; |
||||
|
border-left: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.sl-cases__content-swiper { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
min-width: 0; |
||||
|
max-width: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl-cases__content-swiper .swiper-wrapper { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
.sl-cases__content-swiper .swiper-slide { |
||||
|
width: 100% !important; |
||||
|
max-width: 100%; |
||||
|
height: auto; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.sl-cases__panel { |
||||
|
width: 100%; |
||||
|
max-width: 100%; |
||||
|
min-width: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.sl-cases__logo { |
||||
|
display: block; |
||||
|
width: min(13.75rem, 100%); |
||||
|
height: auto; |
||||
|
margin-bottom: 2.5rem; |
||||
|
} |
||||
|
.sl-cases__name { |
||||
|
margin: 0 0 1rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-42); |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
.sl-cases__sub-name { |
||||
|
margin: 0 0 1.5rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-27); |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
.sl-cases__desc { |
||||
|
margin: 0 0 2.5rem; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-26); |
||||
|
word-break: break-word; |
||||
|
overflow-wrap: break-word; |
||||
|
} |
||||
|
.sl-cases__tags { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 0.5rem; |
||||
|
} |
||||
|
.sl-cases__tags span { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
padding: 0.5rem 1.5rem; |
||||
|
border-radius: 6.25rem; |
||||
|
background: rgba(239, 67, 53, 0.1); |
||||
|
color: var(--color-primary); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.sl-cases__stage { |
||||
|
position: relative; |
||||
|
align-self: center; |
||||
|
margin-left: -2.5rem; |
||||
|
overflow: visible; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.sl-cases__media-swiper.swiper { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
aspect-ratio: 650/457; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl-cases__media-swiper.swiper .swiper-slide { |
||||
|
overflow: hidden; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(46, 53, 58, 0.06); |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
.sl-cases__media-swiper.swiper .swiper-slide img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
pointer-events: none; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.sl-cases__card { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.sl-cases__nav { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: 3.5rem; |
||||
|
} |
||||
|
.sl-cases__pager { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-20); |
||||
|
} |
||||
|
.sl-cases__pager-current { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
.sl-cases__pager-sep, .sl-cases__pager-total { |
||||
|
color: rgb(175, 181, 185); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.sl-hero__intro { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.sl-hero__desc { |
||||
|
margin-top: 24Px; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
.sl-hero__media { |
||||
|
height: 520Px; |
||||
|
} |
||||
|
.sl-hero__title { |
||||
|
font-size: 40Px; |
||||
|
line-height: 54Px; |
||||
|
} |
||||
|
.sl-adv, |
||||
|
.sl-arch, |
||||
|
.sl-core, |
||||
|
.sl-clients, |
||||
|
.sl-cases { |
||||
|
padding-top: 4rem; |
||||
|
} |
||||
|
.sl-adv__list { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 40Px 24Px; |
||||
|
} |
||||
|
.sl-adv__item { |
||||
|
padding: 0; |
||||
|
border-left: 0; |
||||
|
border-top: 1Px solid rgb(223, 224, 226); |
||||
|
padding-top: 24Px; |
||||
|
min-height: 10rem; |
||||
|
} |
||||
|
.sl-clients__grid { |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
} |
||||
|
.sl-cases__body { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 40Px; |
||||
|
} |
||||
|
.sl-cases__copy { |
||||
|
min-height: 0; |
||||
|
padding: 0 0 0 24Px; |
||||
|
} |
||||
|
.sl-cases__stage { |
||||
|
margin-left: 0; |
||||
|
width: 100%; |
||||
|
justify-self: center; |
||||
|
} |
||||
|
.sl-cases__nav { |
||||
|
margin-top: 32Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.sl-adv__list { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
.sl-clients__grid { |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
} |
||||
|
.sl-cases__nav { |
||||
|
margin-top: 24Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.sl-hero__intro { |
||||
|
padding-top: calc(var(--header-h) + 5rem); |
||||
|
} |
||||
|
.sl-hero__title, |
||||
|
.sl-hero .sl-adv__title, |
||||
|
.sl-hero .sl-arch__title, |
||||
|
.sl-hero .sl-core__title, |
||||
|
.sl-hero .sl-clients__title, |
||||
|
.sl-hero .sl-cases__title { |
||||
|
font-size: 32Px; |
||||
|
line-height: 44Px; |
||||
|
} |
||||
|
.sl-hero__media { |
||||
|
height: 280Px; |
||||
|
} |
||||
|
.sl-adv__name, |
||||
|
.sl-cases__name { |
||||
|
font-size: 24Px; |
||||
|
line-height: 32Px; |
||||
|
} |
||||
|
.sl-clients__grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.sl-clients__item { |
||||
|
height: 100Px; |
||||
|
} |
||||
|
.sl-cases__copy { |
||||
|
padding-left: 0; |
||||
|
border-left: none; |
||||
|
} |
||||
|
.sl-cases__body { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
.sl-cases__stage { |
||||
|
order: -1; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
.sl-cases__logo { |
||||
|
width: 160Px; |
||||
|
} |
||||
|
/* 核心系统/产品模块 - 移动端布局调整 */ |
||||
|
.sl-core__head .s-arrows { |
||||
|
display: none; |
||||
|
} |
||||
|
.sl-core__arrows-mobile { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: 24Px; |
||||
|
} |
||||
|
.sl-core__arrows-mobile .s-arrows { |
||||
|
display: flex; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.sl-core__swiper { |
||||
|
overflow: visible; |
||||
|
margin: 0 -16Px; |
||||
|
padding: 0 16Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/solution2-BALfo6CE.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,599 @@ |
|||||
|
@property --ring-angle { |
||||
|
syntax: "<angle>"; |
||||
|
inherits: false; |
||||
|
initial-value: 0deg; |
||||
|
} |
||||
|
@keyframes progressRing { |
||||
|
from { |
||||
|
--ring-angle: 0deg; |
||||
|
} |
||||
|
to { |
||||
|
--ring-angle: 360deg; |
||||
|
} |
||||
|
} |
||||
|
.main-solution2 { |
||||
|
background: var(--color-white); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.sl2-hero__intro { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 34.8125rem) minmax(0, 50rem); |
||||
|
justify-content: space-between; |
||||
|
align-items: start; |
||||
|
gap: 2.5rem; |
||||
|
padding-top: calc(var(--header-h) + 7.5rem); |
||||
|
padding-bottom: 3.75rem; |
||||
|
} |
||||
|
.sl2-hero__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-hero__desc { |
||||
|
margin: 4rem 0 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.sl2-hero__media { |
||||
|
width: 100%; |
||||
|
height: 45rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl2-hero__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.sl2-adv { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl2-adv__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-adv__list { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
.sl2-adv__item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
min-height: 21.875rem; |
||||
|
padding: 2.5rem; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
backdrop-filter: blur(1.25rem); |
||||
|
} |
||||
|
.sl2-adv__icon { |
||||
|
display: block; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.sl2-adv__icon svg { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.sl2-adv__name { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-42); |
||||
|
} |
||||
|
.sl2-adv__text { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
|
||||
|
.sl2-arch { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl2-arch__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-arch__panel { |
||||
|
overflow: hidden; |
||||
|
border-radius: 1.875rem; |
||||
|
background: var(--color-white); |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.sl2-arch__panel img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.sl2-core { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl2-core__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 3.125rem; |
||||
|
} |
||||
|
.sl2-core__head .s-arrows { |
||||
|
display: none; |
||||
|
} |
||||
|
.sl2-core__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-core__swiper { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl2-core__slide { |
||||
|
display: grid; |
||||
|
grid-template-columns: minmax(0, 29.6875rem) minmax(0, 25rem); |
||||
|
justify-content: start; |
||||
|
align-items: start; |
||||
|
gap: 3.5rem; |
||||
|
width: 56.25rem; |
||||
|
box-sizing: border-box; |
||||
|
opacity: 0.3; |
||||
|
transition: opacity var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sl2-core__slide.swiper-slide-active { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.sl2-core__content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2.5rem; |
||||
|
padding-top: 1.5rem; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.sl2-core__content .s-btn { |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
.sl2-core__name { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-42); |
||||
|
} |
||||
|
.sl2-core__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.sl2-core__media { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 31.25rem; |
||||
|
border-radius: 1.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl2-core__media img { |
||||
|
display: block; |
||||
|
width: auto; |
||||
|
max-width: 100%; |
||||
|
max-height: 25rem; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.sl2-core__pagination { |
||||
|
position: static; |
||||
|
margin-top: 2.5rem; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
.sl2-core__pagination .swiper-pagination-bullet { |
||||
|
position: relative; |
||||
|
width: 2.5rem; |
||||
|
height: 2.5rem; |
||||
|
margin: 0; |
||||
|
opacity: 1; |
||||
|
border-radius: 50%; |
||||
|
background: transparent; |
||||
|
} |
||||
|
.sl2-core__pagination .swiper-pagination-bullet::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
border-radius: 50%; |
||||
|
background: conic-gradient(transparent var(--ring-angle), transparent var(--ring-angle)); |
||||
|
mask: radial-gradient(farthest-side, transparent calc(100% - 0.1875rem - 0.5px), #000 calc(100% - 0.1875rem + 0.5px)); |
||||
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.1875rem - 0.5px), #000 calc(100% - 0.1875rem + 0.5px)); |
||||
|
} |
||||
|
.sl2-core__pagination .swiper-pagination-bullet::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
width: 0.375rem; |
||||
|
height: 0.375rem; |
||||
|
border-radius: 50%; |
||||
|
background: rgb(175, 181, 185); |
||||
|
transform: translate(-50%, -50%); |
||||
|
transition: background var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sl2-core__pagination .swiper-pagination-bullet-active::before { |
||||
|
background: conic-gradient(var(--color-primary) var(--ring-angle), transparent var(--ring-angle)); |
||||
|
animation: progressRing 3s linear forwards; |
||||
|
} |
||||
|
.sl2-core__pagination .swiper-pagination-bullet-active::after { |
||||
|
background: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.sl2-scene { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.sl2-scene__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-bottom: 3.125rem; |
||||
|
} |
||||
|
.sl2-scene__head .s-arrows { |
||||
|
display: none; |
||||
|
} |
||||
|
.sl2-scene__arrows-mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
.sl2-scene__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-scene__swiper { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.sl2-scene__slide { |
||||
|
position: relative; |
||||
|
width: 40rem; |
||||
|
height: 30rem; |
||||
|
border-radius: 1.5rem; |
||||
|
overflow: hidden; |
||||
|
background: var(--color-text); |
||||
|
} |
||||
|
.sl2-scene__bg { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
display: block; |
||||
|
} |
||||
|
.sl2-scene__panel { |
||||
|
position: absolute; |
||||
|
left: 2rem; |
||||
|
right: 2rem; |
||||
|
bottom: 2rem; |
||||
|
z-index: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.5rem; |
||||
|
padding: 2.5rem 2rem; |
||||
|
border-radius: 1.25rem; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
backdrop-filter: blur(1.25rem); |
||||
|
-webkit-backdrop-filter: blur(1.25rem); |
||||
|
box-sizing: border-box; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transform: translateY(0.75rem); |
||||
|
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.sl2-scene__name { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-42); |
||||
|
} |
||||
|
.sl2-scene__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
} |
||||
|
.sl2-scene__slide::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 15rem; |
||||
|
background: linear-gradient(180deg, rgba(46, 53, 58, 0) 0%, rgba(46, 53, 58, 0.8) 100%); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.sl2-scene__slide:hover .sl2-scene__panel { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transform: translateY(0); |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
.sl2-scene__slide:hover .sl2-scene__label { |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
.sl2-scene__label { |
||||
|
position: absolute; |
||||
|
left: 2rem; |
||||
|
right: 2rem; |
||||
|
bottom: 2.625rem; |
||||
|
z-index: 1; |
||||
|
margin: 0; |
||||
|
color: var(--color-white); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-32); |
||||
|
font-weight: 500; |
||||
|
line-height: var(--font-42); |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transition: opacity 0.3s ease, visibility 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.sl2-more { |
||||
|
padding-top: 7.5rem; |
||||
|
padding-bottom: 7.5rem; |
||||
|
} |
||||
|
.sl2-more__title { |
||||
|
margin: 0 0 3.125rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.sl2-more__grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
} |
||||
|
.sl2-more__card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2.8125rem; |
||||
|
min-width: 0; |
||||
|
text-decoration: none; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sl2-more__card:hover .sl2-more__name { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.sl2-more__card:hover .sl2-more__link { |
||||
|
border-top-color: var(--color-primary); |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.sl2-more__card:hover .sl2-more__media img { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.sl2-more__media { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 21.875rem; |
||||
|
border-radius: 1.25rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.sl2-more__media img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-width: 100%; |
||||
|
object-fit: contain; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.sl2-more__body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.sl2-more__name { |
||||
|
margin: 0 0 1.5rem; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-24); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-32); |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.sl2-more__desc { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
margin-bottom: 2rem; |
||||
|
} |
||||
|
.sl2-more__link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 0.625rem; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
transition: color 0.3s ease, border-color 0.3s ease; |
||||
|
} |
||||
|
.sl2-more__link svg { |
||||
|
width: 1rem; |
||||
|
height: auto; |
||||
|
display: block; |
||||
|
} |
||||
|
.sl2-more__link path { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
.sl2-more__link:hover { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.sl2-hero__intro { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.sl2-hero__desc { |
||||
|
margin-top: 0; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
.sl2-hero__title { |
||||
|
font-size: 40Px; |
||||
|
line-height: 54Px; |
||||
|
} |
||||
|
.sl2-hero__media { |
||||
|
height: 520Px; |
||||
|
} |
||||
|
.sl2-adv, |
||||
|
.sl2-arch, |
||||
|
.sl2-core, |
||||
|
.sl2-scene, |
||||
|
.sl2-more { |
||||
|
padding-top: 4rem; |
||||
|
} |
||||
|
.sl2-adv__list { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 24Px; |
||||
|
} |
||||
|
.sl2-core__slide { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 32Px; |
||||
|
width: 520Px; |
||||
|
} |
||||
|
.sl2-core__media { |
||||
|
order: -1; |
||||
|
min-height: 360Px; |
||||
|
} |
||||
|
.sl2-scene__slide { |
||||
|
width: 520Px; |
||||
|
height: 390Px; |
||||
|
} |
||||
|
.sl2-more__grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 32Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.sl2-scene__slide { |
||||
|
width: 420Px; |
||||
|
height: 320Px; |
||||
|
} |
||||
|
.sl2-core__slide { |
||||
|
width: 420Px; |
||||
|
} |
||||
|
.sl2-scene__panel { |
||||
|
left: 20Px; |
||||
|
right: 20Px; |
||||
|
bottom: 20Px; |
||||
|
padding: 24Px 20Px; |
||||
|
} |
||||
|
.sl2-scene__name, |
||||
|
.sl2-scene__label { |
||||
|
font-size: 24Px; |
||||
|
line-height: 32Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.sl2-hero__intro { |
||||
|
padding-top: calc(var(--header-h) + 5rem); |
||||
|
} |
||||
|
.sl2-hero__title, |
||||
|
.sl2-hero .sl2-adv__title, |
||||
|
.sl2-hero .sl2-arch__title, |
||||
|
.sl2-hero .sl2-core__title, |
||||
|
.sl2-hero .sl2-scene__title, |
||||
|
.sl2-hero .sl2-more__title { |
||||
|
font-size: 32Px; |
||||
|
line-height: 44Px; |
||||
|
} |
||||
|
.sl2-hero__media { |
||||
|
height: 280Px; |
||||
|
} |
||||
|
.sl2-adv__name, |
||||
|
.sl2-core__name { |
||||
|
font-size: 24Px; |
||||
|
line-height: 32Px; |
||||
|
} |
||||
|
.sl2-adv__text, |
||||
|
.sl2-core__desc { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
.sl2-scene__slide { |
||||
|
width: 300Px; |
||||
|
height: 260Px; |
||||
|
} |
||||
|
.sl2-scene__arrows-mobile { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: 24Px; |
||||
|
} |
||||
|
.sl2-scene__arrows-mobile .s-arrows { |
||||
|
display: flex; |
||||
|
gap: 16Px; |
||||
|
} |
||||
|
.sl2-core__slide { |
||||
|
width: 300Px; |
||||
|
} |
||||
|
.sl2-scene__panel { |
||||
|
gap: 12Px; |
||||
|
padding: 16Px; |
||||
|
} |
||||
|
.sl2-scene__desc { |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.sl2-more__media { |
||||
|
height: 240Px; |
||||
|
} |
||||
|
} |
||||
1
public/themes/dist_static/static/css/video-CivWKV8A.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,455 @@ |
|||||
|
.main-video { |
||||
|
background: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.v-page { |
||||
|
padding-top: calc(var(--header-h) + 2.75rem + 2.5rem); |
||||
|
padding-bottom: 6.25rem; |
||||
|
} |
||||
|
|
||||
|
.v-head { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1rem; |
||||
|
padding-bottom: 2.5rem; |
||||
|
border-bottom: 1px solid rgb(223, 224, 226); |
||||
|
} |
||||
|
.v-head__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-48); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-64); |
||||
|
} |
||||
|
.v-head__desc { |
||||
|
margin: 0; |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
} |
||||
|
|
||||
|
.v-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1.5rem; |
||||
|
margin-top: 2.75rem; |
||||
|
margin-bottom: 2.75rem; |
||||
|
} |
||||
|
|
||||
|
.v-filter__group { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.v-filter { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.5rem; |
||||
|
min-height: 3rem; |
||||
|
padding: 0.75rem 2rem; |
||||
|
border: 1px solid rgb(223, 224, 226); |
||||
|
border-radius: 6.25rem; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: pointer; |
||||
|
transition: border-color 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.v-filter:hover, .v-filter.is-open, .v-filter.is-selected { |
||||
|
border-color: var(--color-primary); |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
.v-filter.is-open .v-filter__chevron { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.v-filter__chevron { |
||||
|
display: block; |
||||
|
width: 0.6875rem; |
||||
|
height: auto; |
||||
|
transition: transform var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
|
||||
|
.v-filter__dropdown { |
||||
|
position: absolute; |
||||
|
top: calc(100% + 0.5rem); |
||||
|
left: 0; |
||||
|
z-index: 30; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 0.5rem; |
||||
|
min-width: 12.5rem; |
||||
|
padding: 1rem; |
||||
|
border-radius: 1rem; |
||||
|
background: var(--color-white); |
||||
|
box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.14); |
||||
|
} |
||||
|
.v-filter__dropdown[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.v-filter__dropdown-item { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
padding: 0.625rem 1.25rem; |
||||
|
border: 0; |
||||
|
border-radius: 6.25rem; |
||||
|
background: transparent; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
text-align: left; |
||||
|
cursor: pointer; |
||||
|
transition: background 0.25s ease, color 0.25s ease; |
||||
|
} |
||||
|
.v-filter__dropdown-item:hover { |
||||
|
background: rgba(175, 181, 185, 0.12); |
||||
|
} |
||||
|
.v-filter__dropdown-item.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.v-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)); |
||||
|
gap: 2.5rem; |
||||
|
margin-bottom: 5rem; |
||||
|
} |
||||
|
|
||||
|
.v-card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 1.25rem; |
||||
|
width: 100%; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
text-align: left; |
||||
|
text-decoration: none; |
||||
|
color: inherit; |
||||
|
cursor: pointer; |
||||
|
font: inherit; |
||||
|
} |
||||
|
.v-card__media { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
aspect-ratio: 16/9; |
||||
|
border-radius: 1rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
} |
||||
|
.v-card__cover { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
transition: transform var(--duration-normal) var(--easing); |
||||
|
} |
||||
|
.v-card__duration { |
||||
|
position: absolute; |
||||
|
left: 1.25rem; |
||||
|
bottom: 1.25rem; |
||||
|
z-index: 2; |
||||
|
padding: 0.375rem 0.5rem 0.375rem 0.5rem; |
||||
|
border-radius: 0.5rem; |
||||
|
background: rgba(46, 53, 58, 0.2); |
||||
|
color: var(--color-white); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-14); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-18); |
||||
|
backdrop-filter: blur(0.25rem); |
||||
|
} |
||||
|
.v-card__play { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
z-index: 2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
backdrop-filter: blur(0.375rem); |
||||
|
opacity: 0; |
||||
|
transform: translate(-50%, -50%) scale(0.92); |
||||
|
transition: opacity 0.25s ease, transform 0.25s ease; |
||||
|
} |
||||
|
.v-card__play img { |
||||
|
display: block; |
||||
|
width: 1rem; |
||||
|
height: auto; |
||||
|
margin-left: 0.125rem; |
||||
|
} |
||||
|
.v-card__title { |
||||
|
margin: 0; |
||||
|
color: var(--color-text); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-28); |
||||
|
min-height: 3.5rem; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
transition: color var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.v-card__date { |
||||
|
color: var(--color-text-muted); |
||||
|
font-family: "D-DIN-PRO", "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-16); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-22); |
||||
|
} |
||||
|
.v-card:hover .v-card__cover { |
||||
|
transform: scale(1.04); |
||||
|
} |
||||
|
.v-card:hover .v-card__play { |
||||
|
opacity: 1; |
||||
|
transform: translate(-50%, -50%) scale(1); |
||||
|
} |
||||
|
.v-card:hover .v-card__title { |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.v-pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.75rem; |
||||
|
} |
||||
|
.v-pagination__btn, .v-pagination__page { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
border-radius: 1rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: default; |
||||
|
} |
||||
|
.v-pagination__btn img { |
||||
|
display: block; |
||||
|
width: 1.0625rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: grayscale(1) opacity(0.45); |
||||
|
} |
||||
|
.v-pagination__btn--next img { |
||||
|
transform: none; |
||||
|
filter: none; |
||||
|
} |
||||
|
.v-pagination__btn:disabled { |
||||
|
opacity: 0.55; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.v-pagination__page.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
.v-modal { |
||||
|
position: fixed; |
||||
|
inset: 0; |
||||
|
z-index: 2000; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 1.5rem; |
||||
|
} |
||||
|
.v-modal[hidden] { |
||||
|
display: none; |
||||
|
} |
||||
|
.v-modal__backdrop { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: rgba(46, 53, 58, 0.72); |
||||
|
} |
||||
|
.v-modal__dialog { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
width: min(60rem, 100%); |
||||
|
overflow: hidden; |
||||
|
border-radius: 1rem; |
||||
|
background: #000; |
||||
|
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35); |
||||
|
} |
||||
|
.v-modal__head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 1rem; |
||||
|
padding: 1rem 1.25rem; |
||||
|
background: rgba(0, 0, 0, 0.88); |
||||
|
} |
||||
|
.v-modal__title { |
||||
|
margin: 0; |
||||
|
min-width: 0; |
||||
|
color: var(--color-white); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-18); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.v-modal__close { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 2.25rem; |
||||
|
height: 2.25rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
border-radius: 0.5rem; |
||||
|
background: rgba(255, 255, 255, 0.12); |
||||
|
cursor: pointer; |
||||
|
transition: background var(--duration-fast) var(--easing); |
||||
|
} |
||||
|
.v-modal__close img { |
||||
|
display: block; |
||||
|
width: 1rem; |
||||
|
height: 1rem; |
||||
|
} |
||||
|
.v-modal__close:hover { |
||||
|
background: rgba(255, 255, 255, 0.22); |
||||
|
} |
||||
|
.v-modal__body { |
||||
|
aspect-ratio: 16/9; |
||||
|
background: #000; |
||||
|
} |
||||
|
.v-modal__video { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: contain; |
||||
|
background: #000; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1439px) { |
||||
|
.v-page { |
||||
|
padding-top: calc(var(--header-h) + 40Px); |
||||
|
padding-bottom: 72Px; |
||||
|
} |
||||
|
.v-head { |
||||
|
gap: 12Px; |
||||
|
padding-bottom: 28Px; |
||||
|
} |
||||
|
.v-head__title { |
||||
|
font-size: 36Px; |
||||
|
line-height: 48Px; |
||||
|
} |
||||
|
.v-head__desc { |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.v-toolbar { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16Px; |
||||
|
margin-top: 32Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.v-filter { |
||||
|
min-height: 44Px; |
||||
|
padding: 10Px 24Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
.v-grid { |
||||
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
||||
|
gap: 28Px 16Px; |
||||
|
margin-bottom: 40Px; |
||||
|
} |
||||
|
.v-card { |
||||
|
gap: 12Px; |
||||
|
} |
||||
|
.v-card__title { |
||||
|
font-size: 18Px; |
||||
|
line-height: 26Px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
.v-toolbar { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
.v-filter { |
||||
|
width: fit-content; |
||||
|
} |
||||
|
.v-grid { |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 576px) { |
||||
|
.v-page { |
||||
|
padding-top: calc(var(--header-h) + 24Px); |
||||
|
padding-bottom: 48Px; |
||||
|
} |
||||
|
.v-head { |
||||
|
gap: 10Px; |
||||
|
padding-bottom: 20Px; |
||||
|
} |
||||
|
.v-head__title { |
||||
|
font-size: 28Px; |
||||
|
line-height: 38Px; |
||||
|
} |
||||
|
.v-head__desc { |
||||
|
font-size: 14Px; |
||||
|
line-height: 22Px; |
||||
|
} |
||||
|
.v-toolbar { |
||||
|
margin-top: 24Px; |
||||
|
margin-bottom: 24Px; |
||||
|
} |
||||
|
.v-filter { |
||||
|
min-height: 40Px; |
||||
|
padding: 8Px 16Px; |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.v-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 24Px; |
||||
|
margin-bottom: 32Px; |
||||
|
} |
||||
|
.v-card__media { |
||||
|
border-radius: 12Px; |
||||
|
} |
||||
|
.v-card__play { |
||||
|
width: 48Px; |
||||
|
height: 48Px; |
||||
|
} |
||||
|
.v-card__title { |
||||
|
font-size: 16Px; |
||||
|
line-height: 24Px; |
||||
|
} |
||||
|
.v-card__date { |
||||
|
font-size: 14Px; |
||||
|
} |
||||
|
.v-pagination { |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.v-pagination__btn, .v-pagination__page { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
border-radius: 12Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";import"./earth-Bqwaht3f.js";function e(){if(!window.counterUp)return;let e=window.counterUp.default,t=new IntersectionObserver(t=>{t.forEach(t=>{let n=t.target;t.isIntersecting&&!n.classList.contains(`is-visible`)&&(e(n,{duration:1e3,delay:16}),n.classList.add(`is-visible`))})},{threshold:.5});document.querySelectorAll(`.counter`).forEach(e=>{t.observe(e)})}function t(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function n(){let e=document.querySelector(`.ab-history`),t=e?.querySelector(`.ab-history__swiper`);if(!e||!t||!window.Swiper)return;function n(e){let t=e.activeIndex;e.slides.forEach((e,n)=>{e.classList.toggle(`is-far`,n>t+2)})}n(new window.Swiper(t,{slidesPerView:`auto`,spaceBetween:100,navigation:{prevEl:e.querySelector(`.s-arrows__prev`),nextEl:e.querySelector(`.s-arrows__next`)},breakpoints:{0:{spaceBetween:32},993:{spaceBetween:100}},on:{slideChange:n}}))}function r(){let e=document.querySelector(`.ab-members`);if(!e)return;let t=e.querySelector(`#ab-members-name`),n=e.querySelector(`#ab-members-desc`),r=e.querySelector(`.ab-members__content > div`),i=e.querySelectorAll(`.ab-members__logo`);if(!t||!n||!i.length)return;let a=e=>{let i=e.getAttribute(`data-name`)||``,a=e.getAttribute(`data-desc`)||``;if(!i&&!a)return;let o=()=>{t.textContent=i,n.textContent=a};if(!r||!r.animate){o();return}r.animate([{opacity:1},{opacity:0}],{duration:160,fill:`forwards`,easing:`ease`}).finished.then(()=>{o(),r.animate([{opacity:0},{opacity:1}],{duration:220,fill:`forwards`,easing:`ease`})})};i.forEach(e=>{e.addEventListener(`click`,()=>{e.classList.contains(`is-active`)||(i.forEach(t=>{let n=t===e;t.classList.toggle(`is-active`,n),t.setAttribute(`aria-selected`,n?`true`:`false`)}),a(e))})})}$(function(){t(),n(),r(),e()}); |
||||
@ -0,0 +1,113 @@ |
|||||
|
import "./common.js"; |
||||
|
import "./earth.js"; |
||||
|
//#region js/about.js
|
||||
|
function counterUpInit() { |
||||
|
if (!window.counterUp) return; |
||||
|
const counterUp = window.counterUp.default; |
||||
|
const callback = (entries) => { |
||||
|
entries.forEach((entry) => { |
||||
|
const el = entry.target; |
||||
|
if (entry.isIntersecting && !el.classList.contains("is-visible")) { |
||||
|
counterUp(el, { |
||||
|
duration: 1e3, |
||||
|
delay: 16 |
||||
|
}); |
||||
|
el.classList.add("is-visible"); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
const IO = new IntersectionObserver(callback, { threshold: .5 }); |
||||
|
document.querySelectorAll(".counter").forEach((el) => { |
||||
|
IO.observe(el); |
||||
|
}); |
||||
|
} |
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initHistorySwiper() { |
||||
|
const root = document.querySelector(".ab-history"); |
||||
|
const el = root?.querySelector(".ab-history__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
function updateFarClass(swiper) { |
||||
|
const active = swiper.activeIndex; |
||||
|
swiper.slides.forEach((slide, i) => { |
||||
|
slide.classList.toggle("is-far", i > active + 2); |
||||
|
}); |
||||
|
} |
||||
|
updateFarClass(new window.Swiper(el, { |
||||
|
slidesPerView: "auto", |
||||
|
spaceBetween: 100, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".ab-history__head .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".ab-history__head .s-arrows__next") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
0: { |
||||
|
spaceBetween: 32, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".ab-history__arrows-mobile .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".ab-history__arrows-mobile .s-arrows__next") |
||||
|
} |
||||
|
}, |
||||
|
993: { spaceBetween: 100 } |
||||
|
}, |
||||
|
on: { slideChange: updateFarClass } |
||||
|
})); |
||||
|
} |
||||
|
function initMemberLogos() { |
||||
|
const root = document.querySelector(".ab-members"); |
||||
|
if (!root) return; |
||||
|
const nameEl = root.querySelector("#ab-members-name"); |
||||
|
const descEl = root.querySelector("#ab-members-desc"); |
||||
|
const contentEl = root.querySelector(".ab-members__content > div"); |
||||
|
const logos = root.querySelectorAll(".ab-members__logo"); |
||||
|
if (!nameEl || !descEl || !logos.length) return; |
||||
|
const applyMember = (btn) => { |
||||
|
const name = btn.getAttribute("data-name") || ""; |
||||
|
const desc = btn.getAttribute("data-desc") || ""; |
||||
|
if (!name && !desc) return; |
||||
|
const update = () => { |
||||
|
nameEl.textContent = name; |
||||
|
descEl.textContent = desc; |
||||
|
}; |
||||
|
if (!contentEl || !contentEl.animate) { |
||||
|
update(); |
||||
|
return; |
||||
|
} |
||||
|
contentEl.animate([{ opacity: 1 }, { opacity: 0 }], { |
||||
|
duration: 160, |
||||
|
fill: "forwards", |
||||
|
easing: "ease" |
||||
|
}).finished.then(() => { |
||||
|
update(); |
||||
|
contentEl.animate([{ opacity: 0 }, { opacity: 1 }], { |
||||
|
duration: 220, |
||||
|
fill: "forwards", |
||||
|
easing: "ease" |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
logos.forEach((btn) => { |
||||
|
btn.addEventListener("click", () => { |
||||
|
if (btn.classList.contains("is-active")) return; |
||||
|
logos.forEach((item) => { |
||||
|
const active = item === btn; |
||||
|
item.classList.toggle("is-active", active); |
||||
|
item.setAttribute("aria-selected", active ? "true" : "false"); |
||||
|
}); |
||||
|
applyMember(btn); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initHistorySwiper(); |
||||
|
initMemberLogos(); |
||||
|
counterUpInit(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=$(`[data-filter-trigger]`);if(!e.length)return;let t=()=>{$(`[data-filter-dropdown]`).prop(`hidden`,!0),$(`[data-filter-trigger]`).removeClass(`is-open`).attr(`aria-expanded`,`false`)};e.on(`click`,function(){let e=$(this),n=e.next(`[data-filter-dropdown]`);n.prop(`hidden`)?(t(),e.addClass(`is-open`).attr(`aria-expanded`,`true`),n.prop(`hidden`,!1)):t()}),$(`[data-filter-dropdown] button`).on(`click`,function(){let e=$(this),n=e.closest(`[data-filter-dropdown]`),r=n.prev(`[data-filter-trigger]`);e.is(`[data-filter-clear]`)?(r.find(`span`).text(`按产品筛选`),r.removeClass(`is-selected`),n.find(`.is-active`).removeClass(`is-active`),e.addClass(`is-active`)):(e.addClass(`is-active`).siblings().removeClass(`is-active`),r.find(`span`).text(e.text()),r.addClass(`is-selected`)),t()}),$(document).on(`click`,function(e){$(e.target).closest(`[data-filter-trigger], [data-filter-dropdown]`).length||t()})}$(function(){e(),t()}); |
||||
@ -0,0 +1,52 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/announce.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initFilterDropdown() { |
||||
|
const $trigger = $("[data-filter-trigger]"); |
||||
|
if (!$trigger.length) return; |
||||
|
const closeDropdown = () => { |
||||
|
$("[data-filter-dropdown]").prop("hidden", true); |
||||
|
$("[data-filter-trigger]").removeClass("is-open").attr("aria-expanded", "false"); |
||||
|
}; |
||||
|
$trigger.on("click", function() { |
||||
|
const $btn = $(this); |
||||
|
const $dropdown = $btn.next("[data-filter-dropdown]"); |
||||
|
if (!$dropdown.prop("hidden")) closeDropdown(); |
||||
|
else { |
||||
|
closeDropdown(); |
||||
|
$btn.addClass("is-open").attr("aria-expanded", "true"); |
||||
|
$dropdown.prop("hidden", false); |
||||
|
} |
||||
|
}); |
||||
|
$("[data-filter-dropdown] button").on("click", function() { |
||||
|
const $item = $(this); |
||||
|
const $dropdown = $item.closest("[data-filter-dropdown]"); |
||||
|
const $btn = $dropdown.prev("[data-filter-trigger]"); |
||||
|
if ($item.is("[data-filter-clear]")) { |
||||
|
$btn.find("span").text("按产品筛选"); |
||||
|
$btn.removeClass("is-selected"); |
||||
|
$dropdown.find(".is-active").removeClass("is-active"); |
||||
|
$item.addClass("is-active"); |
||||
|
} else { |
||||
|
$item.addClass("is-active").siblings().removeClass("is-active"); |
||||
|
$btn.find("span").text($item.text()); |
||||
|
$btn.addClass("is-selected"); |
||||
|
} |
||||
|
closeDropdown(); |
||||
|
}); |
||||
|
$(document).on("click", function(event) { |
||||
|
if (!$(event.target).closest("[data-filter-trigger], [data-filter-dropdown]").length) closeDropdown(); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initFilterDropdown(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";var e=`industrial-control`;function t(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function n(){let t=new URLSearchParams(window.location.search).get(`cat`);return document.querySelector(`[data-category-item="${t}"]`)?t:e}function r(e){return document.querySelector(`.c-sidebar__trigger[data-category-id="${e}"]`)?.dataset.categoryName||``}function i(e){document.querySelectorAll(`[data-category-item]`).forEach(t=>{let n=t.dataset.categoryItem===e.expandedId;t.classList.toggle(`is-active`,n),t.querySelector(`.c-sidebar__trigger`)?.setAttribute(`aria-expanded`,n?`true`:`false`)}),document.querySelectorAll(`.c-sidebar__sub`).forEach(t=>{let n=t.dataset.categoryId===e.categoryId&&t.dataset.subId===e.subId;t.classList.toggle(`is-active`,n)})}function a(e){document.querySelectorAll(`[data-category-panel]`).forEach(t=>{t.hidden=t.dataset.categoryPanel!==e.categoryId})}function o(e){let t=document.querySelector(`[data-category-panel="${e.categoryId}"]`);if(!t)return;let n=t.querySelector(`[data-product-grid]`),r=t.querySelector(`[data-product-empty]`);if(!n||!r)return;let i=[...n.querySelectorAll(`.s-product-card`)],a=0;i.forEach(t=>{let n=!e.subId||t.dataset.sub===e.subId;t.hidden=!n,n&&(a+=1)}),n.hidden=a===0,r.hidden=a>0}function s(e){let t=r(e.categoryId),n=document.querySelector(`[data-breadcrumb-current]`);n&&t&&(n.textContent=t),t&&(document.title=`${t} - 睿能科技`)}function c(e){i(e),a(e),o(e),s(e)}function l(e){let t=document.querySelector(`[data-category-nav]`);t&&t.addEventListener(`click`,t=>{let n=t.target.closest(`[data-category-id]`);if(n){if(n.classList.contains(`c-sidebar__sub`))e.categoryId=n.dataset.categoryId,e.subId=n.dataset.subId,e.expandedId=n.dataset.categoryId;else{let t=n.dataset.categoryId;if(e.expandedId===t)e.expandedId=``;else{e.expandedId=t,e.categoryId=t,e.subId=``;let n=new URL(window.location.href);n.searchParams.set(`cat`,t),window.history.replaceState(null,``,n)}}c(e)}})}$(function(){let e={categoryId:n(),expandedId:n(),subId:``};t(),c(e),l(e)}); |
||||
@ -0,0 +1,99 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/category.js
|
||||
|
var DEFAULT_CATEGORY_ID = "industrial-control"; |
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function getCategoryIdFromQuery() { |
||||
|
const id = new URLSearchParams(window.location.search).get("cat"); |
||||
|
return document.querySelector(`[data-category-item="${id}"]`) ? id : DEFAULT_CATEGORY_ID; |
||||
|
} |
||||
|
function getCategoryName(categoryId) { |
||||
|
return document.querySelector(`.c-sidebar__trigger[data-category-id="${categoryId}"]`)?.dataset.categoryName || ""; |
||||
|
} |
||||
|
function updateSidebar(state) { |
||||
|
document.querySelectorAll("[data-category-item]").forEach((item) => { |
||||
|
const isActive = item.dataset.categoryItem === state.expandedId; |
||||
|
item.classList.toggle("is-active", isActive); |
||||
|
item.querySelector(".c-sidebar__trigger")?.setAttribute("aria-expanded", isActive ? "true" : "false"); |
||||
|
}); |
||||
|
document.querySelectorAll(".c-sidebar__sub").forEach((btn) => { |
||||
|
const isActiveSub = btn.dataset.categoryId === state.categoryId && btn.dataset.subId === state.subId; |
||||
|
btn.classList.toggle("is-active", isActiveSub); |
||||
|
}); |
||||
|
} |
||||
|
function updatePanels(state) { |
||||
|
document.querySelectorAll("[data-category-panel]").forEach((panel) => { |
||||
|
panel.hidden = panel.dataset.categoryPanel !== state.categoryId; |
||||
|
}); |
||||
|
} |
||||
|
function updateProductFilter(state) { |
||||
|
const panel = document.querySelector(`[data-category-panel="${state.categoryId}"]`); |
||||
|
if (!panel) return; |
||||
|
const grid = panel.querySelector("[data-product-grid]"); |
||||
|
const empty = panel.querySelector("[data-product-empty]"); |
||||
|
if (!grid || !empty) return; |
||||
|
const cards = [...grid.querySelectorAll(".s-product-card")]; |
||||
|
let visibleCount = 0; |
||||
|
cards.forEach((card) => { |
||||
|
const match = !state.subId || card.dataset.sub === state.subId; |
||||
|
card.hidden = !match; |
||||
|
if (match) visibleCount += 1; |
||||
|
}); |
||||
|
grid.hidden = visibleCount === 0; |
||||
|
empty.hidden = visibleCount > 0; |
||||
|
} |
||||
|
function updateBreadcrumb(state) { |
||||
|
const name = getCategoryName(state.categoryId); |
||||
|
const breadcrumb = document.querySelector("[data-breadcrumb-current]"); |
||||
|
if (breadcrumb && name) breadcrumb.textContent = name; |
||||
|
if (name) document.title = `${name} - 睿能科技`; |
||||
|
} |
||||
|
function updateView(state) { |
||||
|
updateSidebar(state); |
||||
|
updatePanels(state); |
||||
|
updateProductFilter(state); |
||||
|
updateBreadcrumb(state); |
||||
|
} |
||||
|
function bindEvents(state) { |
||||
|
const nav = document.querySelector("[data-category-nav]"); |
||||
|
if (!nav) return; |
||||
|
nav.addEventListener("click", (event) => { |
||||
|
const trigger = event.target.closest("[data-category-id]"); |
||||
|
if (!trigger) return; |
||||
|
if (trigger.classList.contains("c-sidebar__sub")) { |
||||
|
state.categoryId = trigger.dataset.categoryId; |
||||
|
state.subId = trigger.dataset.subId; |
||||
|
state.expandedId = trigger.dataset.categoryId; |
||||
|
} else { |
||||
|
const id = trigger.dataset.categoryId; |
||||
|
if (state.expandedId === id) state.expandedId = ""; |
||||
|
else { |
||||
|
state.expandedId = id; |
||||
|
state.categoryId = id; |
||||
|
state.subId = ""; |
||||
|
const url = new URL(window.location.href); |
||||
|
url.searchParams.set("cat", id); |
||||
|
window.history.replaceState(null, "", url); |
||||
|
} |
||||
|
} |
||||
|
updateView(state); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
const categoryId = getCategoryIdFromQuery(); |
||||
|
const state = { |
||||
|
categoryId, |
||||
|
expandedId: categoryId, |
||||
|
subId: document.querySelector(`.c-sidebar__sub[data-category-id="${categoryId}"]`)?.dataset.subId || "" |
||||
|
}; |
||||
|
setActiveNav(); |
||||
|
updateView(state); |
||||
|
bindEvents(state); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})(),$(function(){AOS.init({duration:800});let e=new Lenis;window.lenis=e,gsap.registerPlugin(ScrollTrigger,Observer),e.on(`scroll`,ScrollTrigger.update),gsap.ticker.add(t=>{e.raf(t*1e3)}),gsap.ticker.lagSmoothing(0);let t=$(`.site-header`),n=$(`.mask`),r=$(`[data-header-dark]`),i=()=>{if(!t.length)return;let e=t[0].getBoundingClientRect(),i=!1,a=Math.max(0,Math.min(window.innerWidth-1,window.innerWidth/2)),o=Math.max(0,Math.min(window.innerHeight-1,e.bottom+2));document.elementFromPoint(a,o)?.closest(`[data-header-dark]`)?i=!0:r.each(function(){let t=this.getBoundingClientRect();if(t.top<=e.bottom&&t.bottom>e.top)return i=!0,!1}),t.toggleClass(`dark`,i||t.hasClass(`is-mega-open`));let s=window.scrollY>50;t.toggleClass(`is-scrolled`,s),n.toggleClass(`is-scrolled`,s)};e.on(`scroll`,i),ScrollTrigger.addEventListener(`refresh`,i),i();let a=document.querySelector(`.mask`),o=document.querySelector(`.mask-content`);function s(e){$(`body`).toggleClass(`is-mask-open`,e)}$(`.site-header__extra-btn.toggle`).on(`click`,function(){if(!a||!o)return;let e=o.querySelectorAll(`.mask-nav__link`);$(a).addClass(`show mask--nav-motion`),$(`body`).css(`overflow`,`hidden`),s(!0),gsap.killTweensOf(e),gsap.from(e,{opacity:0,y:10,stagger:.04,delay:.2,overwrite:`auto`,onComplete:function(){a.classList.remove(`mask--nav-motion`),gsap.set(e,{clearProps:`all`})}})}),$(`.mask-header__icon-btn--close`).on(`click`,function(){!a||!o||(gsap.killTweensOf(o.querySelectorAll(`ul li a`)),$(a).removeClass(`show mask--nav-motion`),$(`body`).css(`overflow`,`auto`),s(!1))}),$(`.mask-nav__toggle`).on(`click`,function(){let e=$(this).closest(`.mask-nav__item--expandable`),t=e.attr(`data-expanded`)===`true`;e.attr(`data-expanded`,!t),$(this).attr(`aria-expanded`,!t)}),$(`.section-contact-form`).on(`submit`,function(e){e.preventDefault();let t=$(this),n=t.find(`[name="name"]`),r=t.find(`[name="phone"]`),i=$.trim(n.val()),a=$.trim(r.val()),o=t.find(`[name="agree"]`).is(`:checked`);if(!i){alert(`请输入姓名`),n.focus();return}if(!a){alert(`请输入联系方式`),r.focus();return}if(!o){alert(`请阅读并同意隐私政策`);return}alert(`提交成功，我们将尽快与您联系`),t[0].reset()}),$(`#nav-mega-product`).on(`mouseenter`,`[data-mega-cat]`,function(){let e=$(`#nav-mega-product`),t=$(this).attr(`data-mega-cat`);e.find(`[data-mega-cat]`).removeClass(`is-active`),$(this).addClass(`is-active`),e.find(`[data-mega-panel]`).each(function(){let e=this.dataset.megaPanel===t;this.hidden=!e,this.classList.toggle(`is-active`,e)})})}); |
||||
@ -0,0 +1,142 @@ |
|||||
|
//#region \0vite/modulepreload-polyfill.js
|
||||
|
(function polyfill() { |
||||
|
const relList = document.createElement("link").relList; |
||||
|
if (relList && relList.supports && relList.supports("modulepreload")) return; |
||||
|
for (const link of document.querySelectorAll("link[rel=\"modulepreload\"]")) processPreload(link); |
||||
|
new MutationObserver((mutations) => { |
||||
|
for (const mutation of mutations) { |
||||
|
if (mutation.type !== "childList") continue; |
||||
|
for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node); |
||||
|
} |
||||
|
}).observe(document, { |
||||
|
childList: true, |
||||
|
subtree: true |
||||
|
}); |
||||
|
function getFetchOpts(link) { |
||||
|
const fetchOpts = {}; |
||||
|
if (link.integrity) fetchOpts.integrity = link.integrity; |
||||
|
if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy; |
||||
|
if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include"; |
||||
|
else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit"; |
||||
|
else fetchOpts.credentials = "same-origin"; |
||||
|
return fetchOpts; |
||||
|
} |
||||
|
function processPreload(link) { |
||||
|
if (link.ep) return; |
||||
|
link.ep = true; |
||||
|
const fetchOpts = getFetchOpts(link); |
||||
|
fetch(link.href, fetchOpts); |
||||
|
} |
||||
|
})(); |
||||
|
//#endregion
|
||||
|
//#region js/common.js
|
||||
|
$(function() { |
||||
|
AOS.init({ duration: 800 }); |
||||
|
const lenis = new Lenis(); |
||||
|
window.lenis = lenis; |
||||
|
gsap.registerPlugin(ScrollTrigger, Observer); |
||||
|
lenis.on("scroll", ScrollTrigger.update); |
||||
|
gsap.ticker.add((time) => { |
||||
|
lenis.raf(time * 1e3); |
||||
|
}); |
||||
|
gsap.ticker.lagSmoothing(0); |
||||
|
const $header = $(".site-header"); |
||||
|
const $mask = $(".mask"); |
||||
|
const $targets = $("[data-header-dark]"); |
||||
|
const updateHeader = () => { |
||||
|
if (!$header.length) return; |
||||
|
const headerRect = $header[0].getBoundingClientRect(); |
||||
|
let shouldDark = false; |
||||
|
const probeX = Math.max(0, Math.min(window.innerWidth - 1, window.innerWidth / 2)); |
||||
|
const probeY = Math.max(0, Math.min(window.innerHeight - 1, headerRect.bottom + 2)); |
||||
|
if (document.elementFromPoint(probeX, probeY)?.closest("[data-header-dark]")) shouldDark = true; |
||||
|
else $targets.each(function() { |
||||
|
const rect = this.getBoundingClientRect(); |
||||
|
if (rect.top <= headerRect.bottom && rect.bottom > headerRect.top) { |
||||
|
shouldDark = true; |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
$header.toggleClass("dark", shouldDark || $header.hasClass("is-mega-open")); |
||||
|
const isScrolled = window.scrollY > 50; |
||||
|
$header.toggleClass("is-scrolled", isScrolled); |
||||
|
$mask.toggleClass("is-scrolled", isScrolled); |
||||
|
}; |
||||
|
lenis.on("scroll", updateHeader); |
||||
|
ScrollTrigger.addEventListener("refresh", updateHeader); |
||||
|
updateHeader(); |
||||
|
const maskEl = document.querySelector(".mask"); |
||||
|
const maskContentEl = document.querySelector(".mask-content"); |
||||
|
function setMaskOpenUi(isOpen) { |
||||
|
$("body").toggleClass("is-mask-open", isOpen); |
||||
|
} |
||||
|
$(".site-header__extra-btn.toggle").on("click", function() { |
||||
|
if (!maskEl || !maskContentEl) return; |
||||
|
const nodes = maskContentEl.querySelectorAll(".mask-nav__link"); |
||||
|
$(maskEl).addClass("show mask--nav-motion"); |
||||
|
$("body").css("overflow", "hidden"); |
||||
|
setMaskOpenUi(true); |
||||
|
gsap.killTweensOf(nodes); |
||||
|
gsap.from(nodes, { |
||||
|
opacity: 0, |
||||
|
y: 10, |
||||
|
stagger: .04, |
||||
|
delay: .2, |
||||
|
overwrite: "auto", |
||||
|
onComplete: function() { |
||||
|
maskEl.classList.remove("mask--nav-motion"); |
||||
|
gsap.set(nodes, { clearProps: "all" }); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
$(".mask-header__icon-btn--close").on("click", function() { |
||||
|
if (!maskEl || !maskContentEl) return; |
||||
|
gsap.killTweensOf(maskContentEl.querySelectorAll("ul li a")); |
||||
|
$(maskEl).removeClass("show mask--nav-motion"); |
||||
|
$("body").css("overflow", "auto"); |
||||
|
setMaskOpenUi(false); |
||||
|
}); |
||||
|
$(".mask-nav__toggle").on("click", function() { |
||||
|
const $item = $(this).closest(".mask-nav__item--expandable"); |
||||
|
const isExpanded = $item.attr("data-expanded") === "true"; |
||||
|
$item.attr("data-expanded", !isExpanded); |
||||
|
$(this).attr("aria-expanded", !isExpanded); |
||||
|
}); |
||||
|
$(".section-contact-form").on("submit", function(e) { |
||||
|
e.preventDefault(); |
||||
|
const $form = $(this); |
||||
|
const $name = $form.find("[name=\"name\"]"); |
||||
|
const $phone = $form.find("[name=\"phone\"]"); |
||||
|
const name = $.trim($name.val()); |
||||
|
const phone = $.trim($phone.val()); |
||||
|
const agreed = $form.find("[name=\"agree\"]").is(":checked"); |
||||
|
if (!name) { |
||||
|
alert("请输入姓名"); |
||||
|
$name.focus(); |
||||
|
return; |
||||
|
} |
||||
|
if (!phone) { |
||||
|
alert("请输入联系方式"); |
||||
|
$phone.focus(); |
||||
|
return; |
||||
|
} |
||||
|
if (!agreed) { |
||||
|
alert("请阅读并同意隐私政策"); |
||||
|
return; |
||||
|
} |
||||
|
alert("提交成功，我们将尽快与您联系"); |
||||
|
$form[0].reset(); |
||||
|
}); |
||||
|
$("#nav-mega-product").on("mouseenter", "[data-mega-cat]", function() { |
||||
|
const $mega = $("#nav-mega-product"); |
||||
|
const cat = $(this).attr("data-mega-cat"); |
||||
|
$mega.find("[data-mega-cat]").removeClass("is-active"); |
||||
|
$(this).addClass("is-active"); |
||||
|
$mega.find("[data-mega-panel]").each(function() { |
||||
|
const match = this.dataset.megaPanel === cat; |
||||
|
this.hidden = !match; |
||||
|
this.classList.toggle("is-active", match); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){document.querySelectorAll(`.c-field__select`).forEach(e=>{if(e.dataset.customized)return;e.dataset.customized=`true`,e.classList.add(`c-custom-select__native`),e.tabIndex=-1;let t=document.createElement(`div`);e.parentNode.insertBefore(t,e),t.appendChild(e),t.className=`c-custom-select`;let n=document.createElement(`button`);n.type=`button`,n.className=`c-custom-select__trigger`,n.setAttribute(`aria-haspopup`,`listbox`),n.setAttribute(`aria-expanded`,`false`),t.appendChild(n);let r=document.createElement(`div`);r.className=`c-custom-select__dropdown`,r.setAttribute(`role`,`listbox`),t.appendChild(r);function i(){r.innerHTML=``,Array.from(e.options).forEach((e,t)=>{if(e.disabled)return;let n=document.createElement(`button`);n.type=`button`,n.className=`c-custom-select__option`,n.setAttribute(`role`,`option`),n.dataset.value=e.value,n.textContent=e.textContent,e.selected&&e.value&&n.classList.add(`is-active`),n.addEventListener(`click`,()=>o(t)),r.appendChild(n)})}function a(){let t=e.selectedIndex,i=e.options[t];n.textContent=i?i.textContent:``,n.classList.toggle(`is-placeholder`,!i||i.disabled),r.querySelectorAll(`.c-custom-select__option`).forEach(t=>{t.classList.toggle(`is-active`,t.dataset.value===e.value)})}function o(t){e.selectedIndex=t,e.dispatchEvent(new Event(`change`,{bubbles:!0})),a(),c()}function s(){i(),r.classList.add(`is-visible`),n.classList.add(`is-open`),n.setAttribute(`aria-expanded`,`true`)}function c(){r.classList.remove(`is-visible`),n.classList.remove(`is-open`),n.setAttribute(`aria-expanded`,`false`)}function l(){r.classList.contains(`is-visible`)?c():s()}n.addEventListener(`click`,l),document.addEventListener(`click`,e=>{t.contains(e.target)||c()}),t.addEventListener(`keydown`,e=>{e.key===`Escape`&&(c(),n.focus()),(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),l())}),a()})}$(function(){e()}); |
||||
@ -0,0 +1,91 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/contact.js
|
||||
|
/** |
||||
|
* 自定义下拉组件 |
||||
|
* 将原生 <select> 替换为可自定义样式的下拉 |
||||
|
*/ |
||||
|
function initCustomSelects() { |
||||
|
document.querySelectorAll(".c-field__select").forEach((native) => { |
||||
|
if (native.dataset.customized) return; |
||||
|
native.dataset.customized = "true"; |
||||
|
native.classList.add("c-custom-select__native"); |
||||
|
native.tabIndex = -1; |
||||
|
const wrapper = document.createElement("div"); |
||||
|
native.parentNode.insertBefore(wrapper, native); |
||||
|
wrapper.appendChild(native); |
||||
|
wrapper.className = "c-custom-select"; |
||||
|
const trigger = document.createElement("button"); |
||||
|
trigger.type = "button"; |
||||
|
trigger.className = "c-custom-select__trigger"; |
||||
|
trigger.setAttribute("aria-haspopup", "listbox"); |
||||
|
trigger.setAttribute("aria-expanded", "false"); |
||||
|
wrapper.appendChild(trigger); |
||||
|
const dropdown = document.createElement("div"); |
||||
|
dropdown.className = "c-custom-select__dropdown"; |
||||
|
dropdown.setAttribute("role", "listbox"); |
||||
|
wrapper.appendChild(dropdown); |
||||
|
function renderOptions() { |
||||
|
dropdown.innerHTML = ""; |
||||
|
Array.from(native.options).forEach((opt, i) => { |
||||
|
if (opt.disabled) return; |
||||
|
const btn = document.createElement("button"); |
||||
|
btn.type = "button"; |
||||
|
btn.className = "c-custom-select__option"; |
||||
|
btn.setAttribute("role", "option"); |
||||
|
btn.dataset.value = opt.value; |
||||
|
btn.textContent = opt.textContent; |
||||
|
if (opt.selected && opt.value) btn.classList.add("is-active"); |
||||
|
btn.addEventListener("click", () => selectOption(i)); |
||||
|
dropdown.appendChild(btn); |
||||
|
}); |
||||
|
} |
||||
|
function updateTrigger() { |
||||
|
const sel = native.selectedIndex; |
||||
|
const opt = native.options[sel]; |
||||
|
trigger.textContent = opt ? opt.textContent : ""; |
||||
|
trigger.classList.toggle("is-placeholder", !opt || opt.disabled); |
||||
|
dropdown.querySelectorAll(".c-custom-select__option").forEach((btn) => { |
||||
|
btn.classList.toggle("is-active", btn.dataset.value === native.value); |
||||
|
}); |
||||
|
} |
||||
|
function selectOption(index) { |
||||
|
native.selectedIndex = index; |
||||
|
native.dispatchEvent(new Event("change", { bubbles: true })); |
||||
|
updateTrigger(); |
||||
|
close(); |
||||
|
} |
||||
|
function open() { |
||||
|
renderOptions(); |
||||
|
dropdown.classList.add("is-visible"); |
||||
|
trigger.classList.add("is-open"); |
||||
|
trigger.setAttribute("aria-expanded", "true"); |
||||
|
} |
||||
|
function close() { |
||||
|
dropdown.classList.remove("is-visible"); |
||||
|
trigger.classList.remove("is-open"); |
||||
|
trigger.setAttribute("aria-expanded", "false"); |
||||
|
} |
||||
|
function toggle() { |
||||
|
dropdown.classList.contains("is-visible") ? close() : open(); |
||||
|
} |
||||
|
trigger.addEventListener("click", toggle); |
||||
|
document.addEventListener("click", (e) => { |
||||
|
if (!wrapper.contains(e.target)) close(); |
||||
|
}); |
||||
|
wrapper.addEventListener("keydown", (e) => { |
||||
|
if (e.key === "Escape") { |
||||
|
close(); |
||||
|
trigger.focus(); |
||||
|
} |
||||
|
if (e.key === "Enter" || e.key === " ") { |
||||
|
e.preventDefault(); |
||||
|
toggle(); |
||||
|
} |
||||
|
}); |
||||
|
updateTrigger(); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
initCustomSelects(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}$(function(){e();let t=e=>{e.addClass(`is-active`).attr(`aria-selected`,`true`),$(`.d-tabs__item`).not(e).removeClass(`is-active`).attr(`aria-selected`,`false`)},n=()=>{$(`[data-dropdown]`).prop(`hidden`,!0),$(`[data-dropdown-trigger]`).removeClass(`is-open`).attr(`aria-expanded`,`false`)};$(`.d-tabs__item:not([data-dropdown-trigger])`).on(`click`,function(){t($(this)),n(),$(`[data-dropdown-trigger] span`).text(`样本手册`)}),$(`[data-dropdown-trigger]`).on(`click`,function(){let e=$(this),t=e.next(`[data-dropdown]`);t.prop(`hidden`)?(n(),e.addClass(`is-open`).attr(`aria-expanded`,`true`),t.prop(`hidden`,!1)):n()}),$(`.d-tabs__dropdown-item`).on(`click`,function(){let e=$(this);e.addClass(`is-active`).siblings().removeClass(`is-active`);let r=e.closest(`.d-tabs__group`).find(`[data-dropdown-trigger]`);r.find(`span`).text(e.text()),t(r),n()}),$(document).on(`click`,function(e){$(e.target).closest(`.d-tabs__group`).length||n()});let r=new URLSearchParams(window.location.search).get(`tab`);if(r){let e=$(`[data-tab="${r}"]`);e.length&&t(e)}}); |
||||
@ -0,0 +1,53 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/download.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
const activateTab = ($btn) => { |
||||
|
$btn.addClass("is-active").attr("aria-selected", "true"); |
||||
|
$(".d-tabs__item").not($btn).removeClass("is-active").attr("aria-selected", "false"); |
||||
|
}; |
||||
|
const closeDropdowns = () => { |
||||
|
$("[data-dropdown]").prop("hidden", true); |
||||
|
$("[data-dropdown-trigger]").removeClass("is-open").attr("aria-expanded", "false"); |
||||
|
}; |
||||
|
$(".d-tabs__item:not([data-dropdown-trigger])").on("click", function() { |
||||
|
activateTab($(this)); |
||||
|
closeDropdowns(); |
||||
|
$("[data-dropdown-trigger] span").text("样本手册"); |
||||
|
}); |
||||
|
$("[data-dropdown-trigger]").on("click", function() { |
||||
|
const $btn = $(this); |
||||
|
const $dropdown = $btn.next("[data-dropdown]"); |
||||
|
if (!$dropdown.prop("hidden")) closeDropdowns(); |
||||
|
else { |
||||
|
closeDropdowns(); |
||||
|
$btn.addClass("is-open").attr("aria-expanded", "true"); |
||||
|
$dropdown.prop("hidden", false); |
||||
|
} |
||||
|
}); |
||||
|
$(".d-tabs__dropdown-item").on("click", function() { |
||||
|
const $item = $(this); |
||||
|
$item.addClass("is-active").siblings().removeClass("is-active"); |
||||
|
const $trigger = $item.closest(".d-tabs__group").find("[data-dropdown-trigger]"); |
||||
|
$trigger.find("span").text($item.text()); |
||||
|
activateTab($trigger); |
||||
|
closeDropdowns(); |
||||
|
}); |
||||
|
$(document).on("click", function(event) { |
||||
|
if (!$(event.target).closest(".d-tabs__group").length) closeDropdowns(); |
||||
|
}); |
||||
|
const tabParam = new URLSearchParams(window.location.search).get("tab"); |
||||
|
if (tabParam) { |
||||
|
const $target = $(`[data-tab="${tabParam}"]`); |
||||
|
if ($target.length) activateTab($target); |
||||
|
} |
||||
|
}); |
||||
|
//#endregion
|
||||
1
public/themes/dist_static/static/js/earth-Bqwaht3f.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,403 @@ |
|||||
|
//#region assets/images/home/earth_light_gray_white.png
|
||||
|
var earth_light_gray_white_default = "" + new URL("../images/earth_light_gray_white-D7Fpf71y.png", import.meta.url).href; |
||||
|
//#endregion
|
||||
|
//#region assets/images/about/location.svg
|
||||
|
var location_default = "data:image/svg+xml,%3csvg%20viewBox='0%200%2030%2041.1846'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='30.000000'%20height='41.184570'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='减去顶层'%20d='M14.898%2041.1845C14.898%2041.1845%2030%2031.7422%2030%2014.8666C30%206.6297%2023.2653%200%2015.102%200C6.73469%200%200%206.6297%200%2014.8666C0%2030.5368%2014.898%2041.1845%2014.898%2041.1845ZM20.2041%2015.0225C20.2041%2017.7964%2017.9198%2020.045%2015.102%2020.045C12.2843%2020.045%2010%2017.7964%2010%2015.0225C10%2012.2487%2012.2843%2010%2015.102%2010C17.9198%2010%2020.2041%2012.2487%2020.2041%2015.0225Z'%20fill='rgb(239,67,53)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e"; |
||||
|
//#endregion
|
||||
|
//#region js/earth.js
|
||||
|
(function() { |
||||
|
const canvas = document.getElementById("earth-canvas"); |
||||
|
if (!canvas || !window.THREE) return; |
||||
|
const container = canvas.parentElement; |
||||
|
const scene = new THREE.Scene(); |
||||
|
const camera = new THREE.PerspectiveCamera(40, container.clientWidth / container.clientHeight, .1, 1e3); |
||||
|
camera.position.z = 1.5; |
||||
|
const renderer = new THREE.WebGLRenderer({ |
||||
|
canvas, |
||||
|
alpha: true, |
||||
|
antialias: true |
||||
|
}); |
||||
|
renderer.setSize(container.clientWidth, container.clientHeight); |
||||
|
renderer.setPixelRatio(window.devicePixelRatio); |
||||
|
const controls = new THREE.OrbitControls(camera, renderer.domElement); |
||||
|
controls.enableDamping = true; |
||||
|
controls.dampingFactor = .05; |
||||
|
controls.enablePan = true; |
||||
|
controls.enableZoom = false; |
||||
|
controls.autoRotate = false; |
||||
|
controls.rotateSpeed = .1; |
||||
|
controls.minPolarAngle = Math.PI / 2; |
||||
|
controls.maxPolarAngle = Math.PI / 2; |
||||
|
const geometry = new THREE.SphereGeometry(.5, 64, 64); |
||||
|
const hemiLight = new THREE.HemisphereLight("#e0e0e0", "#6a8aaa", .5); |
||||
|
scene.add(hemiLight); |
||||
|
const bounceLight = new THREE.DirectionalLight("#000000", .1); |
||||
|
bounceLight.position.set(0, -5, 0); |
||||
|
scene.add(bounceLight); |
||||
|
const ambientLight = new THREE.AmbientLight("#e0e0e0", .9); |
||||
|
scene.add(ambientLight); |
||||
|
const textureLoader = new THREE.TextureLoader(); |
||||
|
const material = new THREE.MeshPhongMaterial({ |
||||
|
color: "#efefef", |
||||
|
emissive: "#000000", |
||||
|
shininess: 20, |
||||
|
transparent: true, |
||||
|
opacity: .9 |
||||
|
}); |
||||
|
const earth = new THREE.Mesh(geometry, material); |
||||
|
earth.renderOrder = 0; |
||||
|
textureLoader.load(earth_light_gray_white_default, function(texture) { |
||||
|
material.map = texture; |
||||
|
material.color.setHex(16777215); |
||||
|
material.needsUpdate = true; |
||||
|
}, void 0, function(err) { |
||||
|
console.warn("Earth texture failed to load, using default color.", err); |
||||
|
}); |
||||
|
scene.add(earth); |
||||
|
const markersData = [ |
||||
|
{ |
||||
|
name: "上海", |
||||
|
lat: 31.2304, |
||||
|
lon: 121.4737 |
||||
|
}, |
||||
|
{ |
||||
|
name: "东京", |
||||
|
lat: 35.6762, |
||||
|
lon: 139.6503 |
||||
|
}, |
||||
|
{ |
||||
|
name: "伊斯坦布尔", |
||||
|
lat: 41.0082, |
||||
|
lon: 28.9784 |
||||
|
}, |
||||
|
{ |
||||
|
name: "伦敦", |
||||
|
lat: 51.5074, |
||||
|
lon: -.1278 |
||||
|
}, |
||||
|
{ |
||||
|
name: "加尔各答", |
||||
|
lat: 22.5726, |
||||
|
lon: 88.3639 |
||||
|
}, |
||||
|
{ |
||||
|
name: "北京", |
||||
|
lat: 39.9042, |
||||
|
lon: 116.4074 |
||||
|
}, |
||||
|
{ |
||||
|
name: "华沙", |
||||
|
lat: 52.2297, |
||||
|
lon: 21.0122 |
||||
|
}, |
||||
|
{ |
||||
|
name: "南京", |
||||
|
lat: 32.0603, |
||||
|
lon: 118.7969 |
||||
|
}, |
||||
|
{ |
||||
|
name: "吉隆坡", |
||||
|
lat: 3.139, |
||||
|
lon: 101.6869 |
||||
|
}, |
||||
|
{ |
||||
|
name: "圣保罗", |
||||
|
lat: -23.5505, |
||||
|
lon: -46.6333 |
||||
|
}, |
||||
|
{ |
||||
|
name: "圣安东尼奥", |
||||
|
lat: 29.4241, |
||||
|
lon: -98.4936 |
||||
|
}, |
||||
|
{ |
||||
|
name: "墨西哥城", |
||||
|
lat: 19.4326, |
||||
|
lon: -99.1332 |
||||
|
}, |
||||
|
{ |
||||
|
name: "多伦多", |
||||
|
lat: 43.6532, |
||||
|
lon: -79.3832 |
||||
|
}, |
||||
|
{ |
||||
|
name: "奥克兰", |
||||
|
lat: -36.8485, |
||||
|
lon: 174.7633 |
||||
|
}, |
||||
|
{ |
||||
|
name: "孟买", |
||||
|
lat: 19.076, |
||||
|
lon: 72.8777 |
||||
|
}, |
||||
|
{ |
||||
|
name: "安地比斯", |
||||
|
lat: 43.5804, |
||||
|
lon: 7.1251 |
||||
|
}, |
||||
|
{ |
||||
|
name: "山景城", |
||||
|
lat: 37.3861, |
||||
|
lon: -122.0839 |
||||
|
}, |
||||
|
{ |
||||
|
name: "巴黎", |
||||
|
lat: 48.8566, |
||||
|
lon: 2.3522 |
||||
|
}, |
||||
|
{ |
||||
|
name: "布宜诺斯艾利斯", |
||||
|
lat: -34.6037, |
||||
|
lon: -58.3816 |
||||
|
}, |
||||
|
{ |
||||
|
name: "开普敦", |
||||
|
lat: -33.9249, |
||||
|
lon: 18.4241 |
||||
|
}, |
||||
|
{ |
||||
|
name: "悉尼", |
||||
|
lat: -33.8688, |
||||
|
lon: 151.2093 |
||||
|
}, |
||||
|
{ |
||||
|
name: "新加坡", |
||||
|
lat: 1.3521, |
||||
|
lon: 103.8198 |
||||
|
}, |
||||
|
{ |
||||
|
name: "新德里", |
||||
|
lat: 28.6139, |
||||
|
lon: 77.209 |
||||
|
}, |
||||
|
{ |
||||
|
name: "曼谷", |
||||
|
lat: 13.7563, |
||||
|
lon: 100.5018 |
||||
|
}, |
||||
|
{ |
||||
|
name: "法兰克福", |
||||
|
lat: 50.1109, |
||||
|
lon: 8.6821 |
||||
|
}, |
||||
|
{ |
||||
|
name: "波哥大", |
||||
|
lat: 4.711, |
||||
|
lon: -74.0721 |
||||
|
}, |
||||
|
{ |
||||
|
name: "深圳", |
||||
|
lat: 22.5431, |
||||
|
lon: 114.0579 |
||||
|
}, |
||||
|
{ |
||||
|
name: "牛津", |
||||
|
lat: 51.752, |
||||
|
lon: -1.2577 |
||||
|
}, |
||||
|
{ |
||||
|
name: "特拉维夫", |
||||
|
lat: 32.0853, |
||||
|
lon: 34.7818 |
||||
|
}, |
||||
|
{ |
||||
|
name: "科伦坡", |
||||
|
lat: 6.9271, |
||||
|
lon: 79.8612 |
||||
|
}, |
||||
|
{ |
||||
|
name: "米兰", |
||||
|
lat: 45.4642, |
||||
|
lon: 9.19 |
||||
|
}, |
||||
|
{ |
||||
|
name: "纽约", |
||||
|
lat: 40.7128, |
||||
|
lon: -74.006 |
||||
|
}, |
||||
|
{ |
||||
|
name: "莫斯科", |
||||
|
lat: 55.7558, |
||||
|
lon: 37.6173 |
||||
|
}, |
||||
|
{ |
||||
|
name: "达卡", |
||||
|
lat: 23.8103, |
||||
|
lon: 90.4125 |
||||
|
}, |
||||
|
{ |
||||
|
name: "迪拜", |
||||
|
lat: 25.2048, |
||||
|
lon: 55.2708 |
||||
|
}, |
||||
|
{ |
||||
|
name: "邦加罗尔", |
||||
|
lat: 12.9716, |
||||
|
lon: 77.5946 |
||||
|
}, |
||||
|
{ |
||||
|
name: "金奈", |
||||
|
lat: 13.0827, |
||||
|
lon: 80.2707 |
||||
|
}, |
||||
|
{ |
||||
|
name: "雅加达", |
||||
|
lat: -6.2088, |
||||
|
lon: 106.8456 |
||||
|
}, |
||||
|
{ |
||||
|
name: "首尔", |
||||
|
lat: 37.5665, |
||||
|
lon: 126.978 |
||||
|
}, |
||||
|
{ |
||||
|
name: "香港", |
||||
|
lat: 22.3193, |
||||
|
lon: 114.1694 |
||||
|
}, |
||||
|
{ |
||||
|
name: "全球总部福州", |
||||
|
lat: 26.0745, |
||||
|
lon: 119.2965 |
||||
|
} |
||||
|
]; |
||||
|
const markerMeshes = []; |
||||
|
let fuzhouMarkerMesh = null; |
||||
|
function latLonToVector3(lat, lon, radius = 1) { |
||||
|
const phi = (90 - lat) * (Math.PI / 180); |
||||
|
const theta = (lon + 180) * (Math.PI / 180); |
||||
|
const x = -radius * Math.sin(phi) * Math.cos(theta); |
||||
|
const y = radius * Math.cos(phi); |
||||
|
const z = radius * Math.sin(phi) * Math.sin(theta); |
||||
|
return new THREE.Vector3(x, y, z); |
||||
|
} |
||||
|
const defaultMarkerGeometry = new THREE.CircleGeometry(.012, 24); |
||||
|
const defaultMarkerMaterial = new THREE.MeshBasicMaterial({ |
||||
|
color: 15680309, |
||||
|
side: THREE.FrontSide, |
||||
|
depthWrite: false, |
||||
|
transparent: true, |
||||
|
opacity: 1 |
||||
|
}); |
||||
|
const svgWidth = .03; |
||||
|
const svgHeight = .04; |
||||
|
const locationTexture = textureLoader.load(location_default); |
||||
|
const fuzhouMarkerGeometry = new THREE.PlaneGeometry(svgWidth, svgHeight); |
||||
|
fuzhouMarkerGeometry.translate(0, svgHeight / 2, 0); |
||||
|
const fuzhouMarkerMaterial = new THREE.MeshBasicMaterial({ |
||||
|
map: locationTexture, |
||||
|
color: 16777215, |
||||
|
side: THREE.FrontSide, |
||||
|
depthWrite: false, |
||||
|
transparent: true, |
||||
|
opacity: 1 |
||||
|
}); |
||||
|
markersData.forEach((data) => { |
||||
|
const position = latLonToVector3(data.lat, data.lon, .5); |
||||
|
let marker; |
||||
|
if (data.name === "全球总部福州") { |
||||
|
marker = new THREE.Mesh(fuzhouMarkerGeometry, fuzhouMarkerMaterial); |
||||
|
fuzhouMarkerMesh = marker; |
||||
|
} else marker = new THREE.Mesh(defaultMarkerGeometry, defaultMarkerMaterial); |
||||
|
marker.position.copy(position); |
||||
|
const normal = position.clone().normalize(); |
||||
|
marker.position.add(normal.multiplyScalar(.01)); |
||||
|
marker.renderOrder = 1; |
||||
|
marker.userData = { name: data.name }; |
||||
|
earth.add(marker); |
||||
|
markerMeshes.push(marker); |
||||
|
}); |
||||
|
const targetLon = 9.6869; |
||||
|
earth.rotation.y = -(targetLon * Math.PI / 180) + Math.PI; |
||||
|
const tooltip = document.createElement("div"); |
||||
|
tooltip.style.position = "absolute"; |
||||
|
tooltip.style.padding = "8px"; |
||||
|
tooltip.style.color = "#2E353A"; |
||||
|
tooltip.style.fontSize = "16px"; |
||||
|
tooltip.style.fontFamily = "MiSans VF"; |
||||
|
tooltip.style.textAlign = "center"; |
||||
|
tooltip.style.lineHeight = "20px"; |
||||
|
tooltip.style.whiteSpace = "nowrap"; |
||||
|
tooltip.style.pointerEvents = "none"; |
||||
|
tooltip.style.display = "none"; |
||||
|
tooltip.style.zIndex = "1000"; |
||||
|
tooltip.style.transform = "translate(-50%, 15px)"; |
||||
|
tooltip.classList.add("tooltip-arrow"); |
||||
|
container.appendChild(tooltip); |
||||
|
const fuzhouTooltip = tooltip.cloneNode(true); |
||||
|
fuzhouTooltip.innerHTML = "全球总部<br>福州"; |
||||
|
container.appendChild(fuzhouTooltip); |
||||
|
const raycaster = new THREE.Raycaster(); |
||||
|
const mouse = new THREE.Vector2(); |
||||
|
canvas.addEventListener("mousemove", (e) => { |
||||
|
const rect = canvas.getBoundingClientRect(); |
||||
|
mouse.x = (e.clientX - rect.left) / rect.width * 2 - 1; |
||||
|
mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1; |
||||
|
raycaster.setFromCamera(mouse, camera); |
||||
|
const intersects = raycaster.intersectObjects(markerMeshes); |
||||
|
if (intersects.length > 0) { |
||||
|
const object = intersects[0].object; |
||||
|
const name = object.userData.name; |
||||
|
if (name !== "全球总部福州") { |
||||
|
tooltip.textContent = name; |
||||
|
tooltip.style.display = "block"; |
||||
|
const vector = object.position.clone(); |
||||
|
object.updateWorldMatrix(true, false); |
||||
|
vector.setFromMatrixPosition(object.matrixWorld); |
||||
|
vector.project(camera); |
||||
|
const containerRect = container.getBoundingClientRect(); |
||||
|
const x = (vector.x * .5 + .5) * rect.width + (rect.left - containerRect.left); |
||||
|
const y = (-(vector.y * .5) + .5) * rect.height + (rect.top - containerRect.top); |
||||
|
tooltip.style.left = `${x}px`; |
||||
|
tooltip.style.top = `${y - 10}px`; |
||||
|
} else tooltip.style.display = "none"; |
||||
|
document.body.style.cursor = "pointer"; |
||||
|
} else { |
||||
|
tooltip.style.display = "none"; |
||||
|
document.body.style.cursor = "default"; |
||||
|
} |
||||
|
}); |
||||
|
function animate() { |
||||
|
requestAnimationFrame(animate); |
||||
|
earth.rotation.y += 5e-4; |
||||
|
markerMeshes.forEach((marker) => { |
||||
|
marker.lookAt(camera.position); |
||||
|
const worldPosition = new THREE.Vector3(); |
||||
|
marker.getWorldPosition(worldPosition); |
||||
|
const viewDirection = new THREE.Vector3().subVectors(camera.position, worldPosition).normalize(); |
||||
|
const dot = worldPosition.clone().normalize().dot(viewDirection); |
||||
|
let scaleValue = Math.max(0, dot); |
||||
|
scaleValue = Math.pow(scaleValue, .5); |
||||
|
marker.scale.setScalar(scaleValue); |
||||
|
}); |
||||
|
if (fuzhouMarkerMesh) { |
||||
|
const worldPosition = new THREE.Vector3(); |
||||
|
fuzhouMarkerMesh.getWorldPosition(worldPosition); |
||||
|
const viewDirection = new THREE.Vector3().subVectors(camera.position, worldPosition).normalize(); |
||||
|
if (worldPosition.clone().normalize().dot(viewDirection) > 0) { |
||||
|
fuzhouTooltip.style.display = "block"; |
||||
|
const vector = fuzhouMarkerMesh.position.clone(); |
||||
|
fuzhouMarkerMesh.updateWorldMatrix(true, false); |
||||
|
vector.setFromMatrixPosition(fuzhouMarkerMesh.matrixWorld); |
||||
|
vector.project(camera); |
||||
|
const rect = canvas.getBoundingClientRect(); |
||||
|
const containerRect = container.getBoundingClientRect(); |
||||
|
const x = (vector.x * .5 + .5) * rect.width + (rect.left - containerRect.left); |
||||
|
const y = (-(vector.y * .5) + .5) * rect.height + (rect.top - containerRect.top); |
||||
|
fuzhouTooltip.style.left = `${x}px`; |
||||
|
fuzhouTooltip.style.top = `${y - 10}px`; |
||||
|
} else fuzhouTooltip.style.display = "none"; |
||||
|
} |
||||
|
controls.update(); |
||||
|
renderer.render(scene, camera); |
||||
|
} |
||||
|
animate(); |
||||
|
window.addEventListener("resize", () => { |
||||
|
const width = container.clientWidth; |
||||
|
const height = container.clientHeight; |
||||
|
camera.aspect = width / height; |
||||
|
camera.updateProjectionMatrix(); |
||||
|
renderer.setSize(width, height); |
||||
|
}); |
||||
|
})(); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}$(function(){e(),$(`.f-tabs__item`).on(`click`,function(){let e=$(this);e.addClass(`is-active`).attr(`aria-selected`,`true`),e.siblings(`.f-tabs__item`).removeClass(`is-active`).attr(`aria-selected`,`false`)}),$(`.f-item__trigger`).on(`click`,function(){let e=$(this).closest(`.f-item`),t=!e.hasClass(`is-open`);$(`.f-item.is-open`).not(e).removeClass(`is-open`).find(`.f-item__trigger`).attr(`aria-expanded`,`false`),e.toggleClass(`is-open`,t),$(this).attr(`aria-expanded`,t?`true`:`false`)})}); |
||||
@ -0,0 +1,26 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/faq.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
$(".f-tabs__item").on("click", function() { |
||||
|
const $btn = $(this); |
||||
|
$btn.addClass("is-active").attr("aria-selected", "true"); |
||||
|
$btn.siblings(".f-tabs__item").removeClass("is-active").attr("aria-selected", "false"); |
||||
|
}); |
||||
|
$(".f-item__trigger").on("click", function() { |
||||
|
const $item = $(this).closest(".f-item"); |
||||
|
const willOpen = !$item.hasClass("is-open"); |
||||
|
$(".f-item.is-open").not($item).removeClass("is-open").find(".f-item__trigger").attr("aria-expanded", "false"); |
||||
|
$item.toggleClass("is-open", willOpen); |
||||
|
$(this).attr("aria-expanded", willOpen ? "true" : "false"); |
||||
|
}); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";import"./earth-Bqwaht3f.js";function e(){if(!window.counterUp)return;let e=window.counterUp.default,t=new IntersectionObserver(t=>{t.forEach(t=>{let n=t.target;t.isIntersecting&&!n.classList.contains(`is-visible`)&&(e(n,{duration:1e3,delay:16}),n.classList.add(`is-visible`))})},{threshold:.5});document.querySelectorAll(`.counter`).forEach(e=>{t.observe(e)})}function t(e,t,n){let r=!n||(e=>{let t=e.getBoundingClientRect();return t.bottom>0&&t.top<window.innerHeight})(n),i=()=>{let n=t.slides[t.activeIndex]?.querySelector(`video`);e.querySelectorAll(`video`).forEach(e=>{e.muted=!0,r&&e===n?e.play().catch(()=>{}):e.pause()}),t.passedParams?.autoplay&&(r?t.autoplay.start():t.autoplay.stop())};t.on(`slideChange`,i),t.on(`slideChangeTransitionEnd`,i),i(),!(!n||!window.IntersectionObserver)&&new IntersectionObserver(([e])=>{r=!!e?.isIntersecting,i()},{threshold:.1}).observe(n)}function n(){let e=document.querySelector(`.section-2`),n=window.Swiper;if(!e||!n)return;let r=e.querySelector(`.section-2__swiper`),i=[...e.querySelectorAll(`.section-2__nav > button:not(.section-2__nav-arrow)`)],a=e.querySelector(`.section-2__nav-arrow`);if(!r||!i.length)return;let o=new n(r,{initialSlide:Math.max(0,i.findIndex(e=>e.classList.contains(`is-active`))),loop:!0,grabCursor:!0,speed:600,autoplay:{delay:3e3,disableOnInteraction:!1}}),s=e=>{i.forEach((t,n)=>t.classList.toggle(`is-active`,n===e))};i.forEach((e,t)=>{e.addEventListener(`click`,()=>o.slideToLoop(t))}),a?.addEventListener(`click`,()=>o.slideNext()),o.on(`slideChange`,()=>s(o.realIndex)),t(r,o,e)}function r(){let e=document.querySelector(`.section-banner__swiper`);!e||!window.Swiper||t(e,new window.Swiper(e,{loop:!0,grabCursor:!0,speed:600}),e.closest(`.section-banner`))}function i(){let e=document.querySelector(`.section-1`),t=e?.querySelector(`.section-1__swiper`);if(!e||!t||!window.Swiper)return;let n=new window.Swiper(t,{slidesPerView:1,spaceBetween:28,speed:600,navigation:{prevEl:e.querySelector(`.section-1__header .s-arrows__prev`),nextEl:e.querySelector(`.section-1__header .s-arrows__next`)},breakpoints:{576:{slidesPerView:2,spaceBetween:24},1440:{slidesPerView:4,spaceBetween:30}}}),r=e.querySelector(`.section-1__more .s-arrows__prev`),i=e.querySelector(`.section-1__more .s-arrows__next`);r?.addEventListener(`click`,()=>n.slidePrev()),i?.addEventListener(`click`,()=>n.slideNext())}$(function(){e(),r(),n(),i()}); |
||||
@ -0,0 +1,121 @@ |
|||||
|
import "./common.js"; |
||||
|
import "./earth.js"; |
||||
|
//#region js/home.js
|
||||
|
function counterUpInit() { |
||||
|
if (!window.counterUp) return; |
||||
|
const counterUp = window.counterUp.default; |
||||
|
const callback = (entries) => { |
||||
|
entries.forEach((entry) => { |
||||
|
const el = entry.target; |
||||
|
if (entry.isIntersecting && !el.classList.contains("is-visible")) { |
||||
|
counterUp(el, { |
||||
|
duration: 1e3, |
||||
|
delay: 16 |
||||
|
}); |
||||
|
el.classList.add("is-visible"); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
const IO = new IntersectionObserver(callback, { threshold: .5 }); |
||||
|
document.querySelectorAll(".counter").forEach((el) => { |
||||
|
IO.observe(el); |
||||
|
}); |
||||
|
} |
||||
|
function bindCarouselVideos(el, swiper, root) { |
||||
|
const isInViewport = (node) => { |
||||
|
const rect = node.getBoundingClientRect(); |
||||
|
return rect.bottom > 0 && rect.top < window.innerHeight; |
||||
|
}; |
||||
|
let inView = !root || isInViewport(root); |
||||
|
const sync = () => { |
||||
|
const activeVideo = swiper.slides[swiper.activeIndex]?.querySelector("video"); |
||||
|
el.querySelectorAll("video").forEach((video) => { |
||||
|
video.muted = true; |
||||
|
if (inView && video === activeVideo) video.play().catch(() => {}); |
||||
|
else video.pause(); |
||||
|
}); |
||||
|
if (!swiper.passedParams?.autoplay) return; |
||||
|
if (inView) swiper.autoplay.start(); |
||||
|
else swiper.autoplay.stop(); |
||||
|
}; |
||||
|
swiper.on("slideChange", sync); |
||||
|
swiper.on("slideChangeTransitionEnd", sync); |
||||
|
sync(); |
||||
|
if (!root || !window.IntersectionObserver) return; |
||||
|
new IntersectionObserver(([entry]) => { |
||||
|
inView = !!entry?.isIntersecting; |
||||
|
sync(); |
||||
|
}, { threshold: .1 }).observe(root); |
||||
|
} |
||||
|
function section2CarouselInit() { |
||||
|
const root = document.querySelector(".section-2"); |
||||
|
const SwiperCtor = window.Swiper; |
||||
|
if (!root || !SwiperCtor) return; |
||||
|
const el = root.querySelector(".section-2__swiper"); |
||||
|
const buttons = [...root.querySelectorAll(".section-2__nav > button:not(.section-2__nav-arrow)")]; |
||||
|
const nextBtn = root.querySelector(".section-2__nav-arrow"); |
||||
|
if (!el || !buttons.length) return; |
||||
|
const swiper = new SwiperCtor(el, { |
||||
|
initialSlide: Math.max(0, buttons.findIndex((btn) => btn.classList.contains("is-active"))), |
||||
|
loop: true, |
||||
|
grabCursor: true, |
||||
|
speed: 600, |
||||
|
autoplay: { |
||||
|
delay: 3e3, |
||||
|
disableOnInteraction: false |
||||
|
} |
||||
|
}); |
||||
|
const syncNav = (index) => { |
||||
|
buttons.forEach((btn, i) => btn.classList.toggle("is-active", i === index)); |
||||
|
}; |
||||
|
buttons.forEach((btn, i) => { |
||||
|
btn.addEventListener("click", () => swiper.slideToLoop(i)); |
||||
|
}); |
||||
|
nextBtn?.addEventListener("click", () => swiper.slideNext()); |
||||
|
swiper.on("slideChange", () => syncNav(swiper.realIndex)); |
||||
|
bindCarouselVideos(el, swiper, root); |
||||
|
} |
||||
|
function sectionBannerCarouselInit() { |
||||
|
const el = document.querySelector(".section-banner__swiper"); |
||||
|
if (!el || !window.Swiper) return; |
||||
|
bindCarouselVideos(el, new window.Swiper(el, { |
||||
|
loop: true, |
||||
|
grabCursor: true, |
||||
|
speed: 600 |
||||
|
}), el.closest(".section-banner")); |
||||
|
} |
||||
|
function section1CarouselInit() { |
||||
|
const root = document.querySelector(".section-1"); |
||||
|
const el = root?.querySelector(".section-1__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
const swiper = new window.Swiper(el, { |
||||
|
slidesPerView: 1, |
||||
|
spaceBetween: 28, |
||||
|
speed: 600, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".section-1__header .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".section-1__header .s-arrows__next") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
576: { |
||||
|
slidesPerView: 2, |
||||
|
spaceBetween: 24 |
||||
|
}, |
||||
|
1440: { |
||||
|
slidesPerView: 4, |
||||
|
spaceBetween: 30 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
const mobilePrev = root.querySelector(".section-1__more .s-arrows__prev"); |
||||
|
const mobileNext = root.querySelector(".section-1__more .s-arrows__next"); |
||||
|
mobilePrev?.addEventListener("click", () => swiper.slidePrev()); |
||||
|
mobileNext?.addEventListener("click", () => swiper.slideNext()); |
||||
|
} |
||||
|
$(function() { |
||||
|
counterUpInit(); |
||||
|
sectionBannerCarouselInit(); |
||||
|
section2CarouselInit(); |
||||
|
section1CarouselInit(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=document.querySelector(`.iv-announce`),t=e?.querySelector(`.iv-announce__swiper`);!e||!t||!window.Swiper||new window.Swiper(t,{slidesPerView:4,spaceBetween:40,speed:600,navigation:{prevEl:e.querySelector(`.s-arrows__prev`),nextEl:e.querySelector(`.s-arrows__next`)},breakpoints:{0:{slidesPerView:1.15,spaceBetween:16},768:{slidesPerView:2,spaceBetween:24},1200:{slidesPerView:4,spaceBetween:40}}})}function n(){$(`.iv-learn__item`).on(`click`,function(e){if($(e.target).closest(`a`).length)return;let t=$(this).find(`a[href]`).attr(`href`);t&&(window.location.href=t)})}$(function(){e(),t(),n()}); |
||||
@ -0,0 +1,55 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/investment.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initAnnounceSwiper() { |
||||
|
const root = document.querySelector(".iv-announce"); |
||||
|
const el = root?.querySelector(".iv-announce__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
new window.Swiper(el, { |
||||
|
slidesPerView: 4, |
||||
|
spaceBetween: 40, |
||||
|
speed: 600, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".iv-announce__head .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".iv-announce__head .s-arrows__next") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
0: { |
||||
|
slidesPerView: 1.15, |
||||
|
spaceBetween: 16, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".iv-announce__arrows-mobile .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".iv-announce__arrows-mobile .s-arrows__next") |
||||
|
} |
||||
|
}, |
||||
|
768: { |
||||
|
slidesPerView: 2, |
||||
|
spaceBetween: 24 |
||||
|
}, |
||||
|
1200: { |
||||
|
slidesPerView: 4, |
||||
|
spaceBetween: 40 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
function initLearnItemClick() { |
||||
|
$(".iv-learn__item").on("click", function(event) { |
||||
|
if ($(event.target).closest("a").length) return; |
||||
|
const href = $(this).find("a[href]").attr("href"); |
||||
|
if (href) window.location.href = href; |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initAnnounceSwiper(); |
||||
|
initLearnItemClick(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=document.querySelector(`.nd-back`),t=document.querySelector(`.nd-pager`);!e||!t||new IntersectionObserver(([t])=>{let n=t.isIntersecting&&t.intersectionRatio>=1;e.classList.toggle(`is-hidden`,n),e.setAttribute(`aria-hidden`,n?`true`:`false`),n?e.setAttribute(`tabindex`,`-1`):e.removeAttribute(`tabindex`)},{threshold:1}).observe(t)}function n(){$(`.n-card, .n-featured`).on(`click`,function(e){if($(e.target).closest(`a, button`).length)return;let t=$(this).find(`a[href]`).attr(`href`);t&&(window.location.href=t)})}$(function(){e(),t(),n()}); |
||||
@ -0,0 +1,2 @@ |
|||||
|
import "./common.js"; |
||||
|
import "./news2.js"; |
||||
@ -0,0 +1,2 @@ |
|||||
|
import "./common.js"; |
||||
|
import "./news2.js"; |
||||
@ -0,0 +1,35 @@ |
|||||
|
//#region js/news.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function newsDetailBackToggle() { |
||||
|
const back = document.querySelector(".nd-back"); |
||||
|
const pager = document.querySelector(".nd-pager"); |
||||
|
if (!back || !pager) return; |
||||
|
if (window.innerWidth <= 576) return; |
||||
|
new IntersectionObserver(([entry]) => { |
||||
|
const fullyVisible = entry.isIntersecting && entry.intersectionRatio >= 1; |
||||
|
back.classList.toggle("is-hidden", fullyVisible); |
||||
|
back.setAttribute("aria-hidden", fullyVisible ? "true" : "false"); |
||||
|
if (fullyVisible) back.setAttribute("tabindex", "-1"); |
||||
|
else back.removeAttribute("tabindex"); |
||||
|
}, { threshold: 1 }).observe(pager); |
||||
|
} |
||||
|
function newsCardClick() { |
||||
|
$(".n-card, .n-featured").on("click", function(event) { |
||||
|
if ($(event.target).closest("a, button").length) return; |
||||
|
const href = $(this).find("a[href]").attr("href"); |
||||
|
if (href) window.location.href = href; |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
newsDetailBackToggle(); |
||||
|
newsCardClick(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=document.querySelector(`.p-intro__gallery`);if(!e||!window.Swiper)return;let t=new window.Swiper(e,{loop:!0,speed:500,autoplay:{delay:3e3,disableOnInteraction:!1},observer:!0,observeParents:!0,resizeObserver:!0,pagination:{el:`.p-intro__gallery-pagination`,clickable:!0}});window.addEventListener(`resize`,()=>t.update(),{passive:!0})}function n(){let e=document.querySelector(`.p-related`),t=e?.querySelector(`.p-related__swiper`);!e||!t||!window.Swiper||new window.Swiper(t,{slidesPerView:1.15,spaceBetween:16,grabCursor:!0,pagination:{el:e.querySelector(`.p-related__pagination`),clickable:!0},navigation:{nextEl:e.querySelector(`.s-arrows__next`),prevEl:e.querySelector(`.s-arrows__prev`)},breakpoints:{768:{slidesPerView:2,spaceBetween:24},1200:{slidesPerView:4,spaceBetween:40}}})}function r(){let e=document.querySelector(`[data-p-subnav]`),t=document.querySelector(`#p-intro`);if(!e||!t)return;let n=[`p-intro`,`p-spec`,`p-download`,`p-related`],r=n.map(e=>document.getElementById(e)).filter(Boolean),i=[...e.querySelectorAll(`[data-p-nav]`)],a=t=>{e.classList.toggle(`is-visible`,t),e.setAttribute(`aria-hidden`,t?`false`:`true`),document.body.classList.toggle(`is-p-subnav`,t)},o=e=>{i.forEach(t=>{t.classList.toggle(`is-active`,t.dataset.pNav===e)})},s=()=>e.offsetHeight||80,c=()=>{let e=s()+8,t=n[0];for(let n of r)n.getBoundingClientRect().top<=e&&(t=n.id);o(t)},l=()=>{let e=t.getBoundingClientRect().top<=1;a(e),e&&c()},u=e=>{let t=document.getElementById(e);if(!t)return;let n=window.scrollY+t.getBoundingClientRect().top-s();window.lenis?window.lenis.scrollTo(n,{duration:1}):window.scrollTo({top:n,behavior:`smooth`})};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-p-nav], .p-subnav__cta`);if(!t||t.hasAttribute(`data-selection-trigger`))return;let n=t.getAttribute(`href`);!n||!n.startsWith(`#`)||(e.preventDefault(),u(n.slice(1)))}),document.querySelectorAll(`a[href="#p-spec"]`).forEach(e=>{e.closest(`[data-p-subnav]`)||e.hasAttribute(`data-selection-trigger`)||e.addEventListener(`click`,e=>{e.preventDefault(),u(`p-spec`)})});let d=()=>{l()};window.lenis?window.lenis.on(`scroll`,d):window.addEventListener(`scroll`,d,{passive:!0}),window.addEventListener(`resize`,l,{passive:!0}),l()}function i(){let e=document.querySelector(`[data-selection-modal]`);if(!e)return;let t=()=>{e.hidden=!1,document.body.style.overflow=`hidden`,window.lenis?.stop&&window.lenis.stop()},n=()=>{e.hidden=!0,document.body.style.overflow=``,window.lenis?.start&&window.lenis.start()};document.querySelectorAll(`[data-selection-trigger]`).forEach(e=>{e.addEventListener(`click`,e=>{e.preventDefault(),t()})}),e.querySelectorAll(`[data-selection-close]`).forEach(e=>{e.addEventListener(`click`,n)}),document.addEventListener(`keydown`,t=>{t.key===`Escape`&&!e.hidden&&n()})}$(function(){e(),t(),n(),r(),i()}); |
||||
@ -0,0 +1,161 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/product.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function introGalleryInit() { |
||||
|
const root = document.querySelector(".p-intro__gallery"); |
||||
|
if (!root || !window.Swiper) return; |
||||
|
const swiper = new window.Swiper(root, { |
||||
|
loop: true, |
||||
|
speed: 500, |
||||
|
autoplay: { |
||||
|
delay: 3e3, |
||||
|
disableOnInteraction: false |
||||
|
}, |
||||
|
observer: true, |
||||
|
observeParents: true, |
||||
|
resizeObserver: true, |
||||
|
pagination: { |
||||
|
el: ".p-intro__gallery-pagination", |
||||
|
clickable: true |
||||
|
} |
||||
|
}); |
||||
|
window.addEventListener("resize", () => swiper.update(), { passive: true }); |
||||
|
} |
||||
|
function relatedCarouselInit() { |
||||
|
const root = document.querySelector(".p-related"); |
||||
|
const el = root?.querySelector(".p-related__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
new window.Swiper(el, { |
||||
|
slidesPerView: 1.15, |
||||
|
spaceBetween: 16, |
||||
|
grabCursor: true, |
||||
|
pagination: { |
||||
|
el: root.querySelector(".p-related__pagination"), |
||||
|
clickable: true |
||||
|
}, |
||||
|
navigation: { |
||||
|
nextEl: root.querySelector(".s-arrows__next"), |
||||
|
prevEl: root.querySelector(".s-arrows__prev") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
768: { |
||||
|
slidesPerView: 2, |
||||
|
spaceBetween: 24 |
||||
|
}, |
||||
|
1200: { |
||||
|
slidesPerView: 4, |
||||
|
spaceBetween: 40 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
function productSubnavInit() { |
||||
|
const subnav = document.querySelector("[data-p-subnav]"); |
||||
|
const intro = document.querySelector("#p-intro"); |
||||
|
if (!subnav || !intro) return; |
||||
|
const sectionIds = [ |
||||
|
"p-intro", |
||||
|
"p-spec", |
||||
|
"p-download", |
||||
|
"p-related" |
||||
|
]; |
||||
|
const sections = sectionIds.map((id) => document.getElementById(id)).filter(Boolean); |
||||
|
const links = [...subnav.querySelectorAll("[data-p-nav]")]; |
||||
|
const setVisible = (visible) => { |
||||
|
subnav.classList.toggle("is-visible", visible); |
||||
|
subnav.setAttribute("aria-hidden", visible ? "false" : "true"); |
||||
|
document.body.classList.toggle("is-p-subnav", visible); |
||||
|
}; |
||||
|
const setActiveLink = (id) => { |
||||
|
links.forEach((link) => { |
||||
|
link.classList.toggle("is-active", link.dataset.pNav === id); |
||||
|
}); |
||||
|
}; |
||||
|
const getSubnavHeight = () => subnav.offsetHeight || 80; |
||||
|
const updateActiveByScroll = () => { |
||||
|
const offset = getSubnavHeight() + 8; |
||||
|
let current = sectionIds[0]; |
||||
|
for (const section of sections) if (section.getBoundingClientRect().top <= offset) current = section.id; |
||||
|
setActiveLink(current); |
||||
|
}; |
||||
|
const updateVisibility = () => { |
||||
|
const visible = intro.getBoundingClientRect().top <= 1; |
||||
|
setVisible(visible); |
||||
|
if (visible) updateActiveByScroll(); |
||||
|
}; |
||||
|
const scrollToSection = (id) => { |
||||
|
const target = document.getElementById(id); |
||||
|
if (!target) return; |
||||
|
const top = window.scrollY + target.getBoundingClientRect().top - getSubnavHeight(); |
||||
|
if (window.lenis) window.lenis.scrollTo(top, { duration: 1 }); |
||||
|
else window.scrollTo({ |
||||
|
top, |
||||
|
behavior: "smooth" |
||||
|
}); |
||||
|
}; |
||||
|
subnav.addEventListener("click", (event) => { |
||||
|
const link = event.target.closest("[data-p-nav], .p-subnav__cta"); |
||||
|
if (!link) return; |
||||
|
if (link.hasAttribute("data-selection-trigger")) return; |
||||
|
const href = link.getAttribute("href"); |
||||
|
if (!href || !href.startsWith("#")) return; |
||||
|
event.preventDefault(); |
||||
|
scrollToSection(href.slice(1)); |
||||
|
}); |
||||
|
document.querySelectorAll("a[href=\"#p-spec\"]").forEach((link) => { |
||||
|
if (link.closest("[data-p-subnav]")) return; |
||||
|
if (link.hasAttribute("data-selection-trigger")) return; |
||||
|
link.addEventListener("click", (event) => { |
||||
|
event.preventDefault(); |
||||
|
scrollToSection("p-spec"); |
||||
|
}); |
||||
|
}); |
||||
|
const onScroll = () => { |
||||
|
updateVisibility(); |
||||
|
}; |
||||
|
if (window.lenis) window.lenis.on("scroll", onScroll); |
||||
|
else window.addEventListener("scroll", onScroll, { passive: true }); |
||||
|
window.addEventListener("resize", updateVisibility, { passive: true }); |
||||
|
updateVisibility(); |
||||
|
} |
||||
|
function selectionModalInit() { |
||||
|
const modal = document.querySelector("[data-selection-modal]"); |
||||
|
if (!modal) return; |
||||
|
const open = () => { |
||||
|
modal.hidden = false; |
||||
|
document.body.style.overflow = "hidden"; |
||||
|
if (window.lenis?.stop) window.lenis.stop(); |
||||
|
}; |
||||
|
const close = () => { |
||||
|
modal.hidden = true; |
||||
|
document.body.style.overflow = ""; |
||||
|
if (window.lenis?.start) window.lenis.start(); |
||||
|
}; |
||||
|
document.querySelectorAll("[data-selection-trigger]").forEach((trigger) => { |
||||
|
trigger.addEventListener("click", (event) => { |
||||
|
event.preventDefault(); |
||||
|
open(); |
||||
|
}); |
||||
|
}); |
||||
|
modal.querySelectorAll("[data-selection-close]").forEach((el) => { |
||||
|
el.addEventListener("click", close); |
||||
|
}); |
||||
|
document.addEventListener("keydown", (event) => { |
||||
|
if (event.key === "Escape" && !modal.hidden) close(); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
introGalleryInit(); |
||||
|
relatedCarouselInit(); |
||||
|
productSubnavInit(); |
||||
|
selectionModalInit(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){return new URLSearchParams(window.location.search).get(`q`)?.trim()||``}function t(e,t,n){let r=e.attr(`data-type`)||``;return t!==`all`&&r!==t?!1:n?[e.attr(`data-keywords`)||``,e.find(`.sr-item__title`).text(),e.find(`.sr-item__desc`).text(),e.find(`.sr-item__type`).text()].join(` `).toLowerCase().includes(n.toLowerCase()):!0}function n(e){let n=($(`.sr-search .s-search__input`).val()||``).trim();[`all`,`product`,`solution`,`news`,`faq`].forEach(r=>{let i=e.filter((e,i)=>t($(i),r,n)).length;$(`[data-count="${r}"]`).text(String(i))})}function r(){let e=$(`.sr-tabs__item.is-active`).attr(`data-type`)||`all`,r=($(`.sr-search .s-search__input`).val()||``).trim(),i=$(`.sr-item`),a=0;i.each(function(){let n=t($(this),e,r);this.hidden=!n,n&&(a+=1)}),n(i),$(`.sr-empty`).prop(`hidden`,a>0)}$(function(){let t=e();t&&$(`.sr-search .s-search__input`).val(t),$(`.sr-tabs__item`).on(`click`,function(){let e=$(this);e.addClass(`is-active`).attr(`aria-selected`,`true`),e.siblings(`.sr-tabs__item`).removeClass(`is-active`).attr(`aria-selected`,`false`),r()}),$(`.sr-hot__tag`).on(`click`,function(){let e=$(this).attr(`data-keyword`)||$(this).text().trim();$(`.sr-search .s-search__input`).val(e),r()}),$(`.sr-search`).on(`submit`,function(e){e.preventDefault();let t=($(`.sr-search .s-search__input`).val()||``).trim(),n=new URL(window.location.href);t?n.searchParams.set(`q`,t):n.searchParams.delete(`q`),window.history.replaceState({},``,n),r()}),r()}); |
||||
@ -0,0 +1,68 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/search.js
|
||||
|
function getQuery() { |
||||
|
return new URLSearchParams(window.location.search).get("q")?.trim() || ""; |
||||
|
} |
||||
|
function matchItem($item, type, keyword) { |
||||
|
const itemType = $item.attr("data-type") || ""; |
||||
|
if (type !== "all" && itemType !== type) return false; |
||||
|
if (!keyword) return true; |
||||
|
return [ |
||||
|
$item.attr("data-keywords") || "", |
||||
|
$item.find(".sr-item__title").text(), |
||||
|
$item.find(".sr-item__desc").text(), |
||||
|
$item.find(".sr-item__type").text() |
||||
|
].join(" ").toLowerCase().includes(keyword.toLowerCase()); |
||||
|
} |
||||
|
function updateCounts($items) { |
||||
|
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
||||
|
[ |
||||
|
"all", |
||||
|
"product", |
||||
|
"solution", |
||||
|
"news", |
||||
|
"faq" |
||||
|
].forEach((type) => { |
||||
|
const count = $items.filter((_, el) => matchItem($(el), type, keyword)).length; |
||||
|
$(`[data-count="${type}"]`).text(String(count)); |
||||
|
}); |
||||
|
} |
||||
|
function applyFilter() { |
||||
|
const type = $(".sr-tabs__item.is-active").attr("data-type") || "all"; |
||||
|
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
||||
|
const $items = $(".sr-item"); |
||||
|
let visible = 0; |
||||
|
$items.each(function() { |
||||
|
const show = matchItem($(this), type, keyword); |
||||
|
this.hidden = !show; |
||||
|
if (show) visible += 1; |
||||
|
}); |
||||
|
updateCounts($items); |
||||
|
$(".sr-empty").prop("hidden", visible > 0); |
||||
|
} |
||||
|
$(function() { |
||||
|
const q = getQuery(); |
||||
|
if (q) $(".sr-search .s-search__input").val(q); |
||||
|
$(".sr-tabs__item").on("click", function() { |
||||
|
const $btn = $(this); |
||||
|
$btn.addClass("is-active").attr("aria-selected", "true"); |
||||
|
$btn.siblings(".sr-tabs__item").removeClass("is-active").attr("aria-selected", "false"); |
||||
|
applyFilter(); |
||||
|
}); |
||||
|
$(".sr-hot__tag").on("click", function() { |
||||
|
const keyword = $(this).attr("data-keyword") || $(this).text().trim(); |
||||
|
$(".sr-search .s-search__input").val(keyword); |
||||
|
applyFilter(); |
||||
|
}); |
||||
|
$(".sr-search").on("submit", function(e) { |
||||
|
e.preventDefault(); |
||||
|
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
||||
|
const url = new URL(window.location.href); |
||||
|
if (keyword) url.searchParams.set("q", keyword); |
||||
|
else url.searchParams.delete("q"); |
||||
|
window.history.replaceState({}, "", url); |
||||
|
applyFilter(); |
||||
|
}); |
||||
|
applyFilter(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=document.querySelector(`.sl-core`),t=e?.querySelector(`.sl-core__swiper`);!e||!t||!window.Swiper||new window.Swiper(t,{slidesPerView:3,spaceBetween:40,speed:600,navigation:{prevEl:e.querySelector(`.sl-core__head .s-arrows__prev`),nextEl:e.querySelector(`.sl-core__head .s-arrows__next`)},breakpoints:{0:{slidesPerView:1.3,spaceBetween:20,navigation:{prevEl:e.querySelector(`.sl-core__arrows-mobile .s-arrows__prev`),nextEl:e.querySelector(`.sl-core__arrows-mobile .s-arrows__next`)}},768:{slidesPerView:2,spaceBetween:24},1200:{slidesPerView:3,spaceBetween:40}}})}function n(){let e=document.querySelector(`.sl-cases`),t=e?.querySelector(`.sl-cases__content-swiper`),n=e?.querySelector(`.sl-cases__media-swiper`);if(!e||!t||!n||!window.Swiper)return;let r=e.querySelector(`.sl-cases__pager-current`),i=e.querySelector(`.sl-cases__pager-total`),a=e.querySelector(`.s-arrows__prev`),o=e.querySelector(`.s-arrows__next`),s=e=>{let t=[...e.slides];return t.filter(e=>!e.classList.contains(`swiper-slide-duplicate`)).length||t.length},c=e=>{r&&(r.textContent=String(e.realIndex+1)),i&&(i.textContent=String(s(e)))},l=new window.Swiper(t,{effect:`fade`,fadeEffect:{crossFade:!0},loop:!0,speed:500,allowTouchMove:!1,observer:!0,observeParents:!0,watchOverflow:!0});new window.Swiper(n,{grabCursor:!0,effect:`creative`,creativeEffect:{prev:{shadow:!0,translate:[0,0,-400]},next:{translate:[`100%`,0,0]}},loop:!0,speed:600,navigation:{prevEl:a,nextEl:o},on:{init(e){c(e)},slideChange(e){c(e),l.realIndex!==e.realIndex&&l.slideToLoop(e.realIndex,l.params.speed,!1)}}})}$(function(){e(),t(),n()}); |
||||
@ -0,0 +1,111 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/solution.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initCoreSwiper() { |
||||
|
const root = document.querySelector(".sl-core"); |
||||
|
const el = root?.querySelector(".sl-core__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
new window.Swiper(el, { |
||||
|
slidesPerView: 3, |
||||
|
spaceBetween: 40, |
||||
|
speed: 600, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".sl-core__head .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".sl-core__head .s-arrows__next") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
0: { |
||||
|
slidesPerView: 1.3, |
||||
|
spaceBetween: 20, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".sl-core__arrows-mobile .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".sl-core__arrows-mobile .s-arrows__next") |
||||
|
} |
||||
|
}, |
||||
|
768: { |
||||
|
slidesPerView: 2, |
||||
|
spaceBetween: 24 |
||||
|
}, |
||||
|
1200: { |
||||
|
slidesPerView: 3, |
||||
|
spaceBetween: 40 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
/** 经典案例：文案 fade + 图片 creative，双 Swiper 同步 */ |
||||
|
function initCasesSwipers() { |
||||
|
const root = document.querySelector(".sl-cases"); |
||||
|
const contentEl = root?.querySelector(".sl-cases__content-swiper"); |
||||
|
const mediaEl = root?.querySelector(".sl-cases__media-swiper"); |
||||
|
if (!root || !contentEl || !mediaEl || !window.Swiper) return; |
||||
|
const currentEl = root.querySelector(".sl-cases__pager-current"); |
||||
|
const totalEl = root.querySelector(".sl-cases__pager-total"); |
||||
|
const prevBtn = root.querySelector(".s-arrows__prev"); |
||||
|
const nextBtn = root.querySelector(".s-arrows__next"); |
||||
|
const getOriginalCount = (swiper) => { |
||||
|
const slides = [...swiper.slides]; |
||||
|
return slides.filter((s) => !s.classList.contains("swiper-slide-duplicate")).length || slides.length; |
||||
|
}; |
||||
|
const syncPager = (swiper) => { |
||||
|
if (currentEl) currentEl.textContent = String(swiper.realIndex + 1); |
||||
|
if (totalEl) totalEl.textContent = String(getOriginalCount(swiper)); |
||||
|
}; |
||||
|
const contentSwiper = new window.Swiper(contentEl, { |
||||
|
effect: "fade", |
||||
|
fadeEffect: { crossFade: true }, |
||||
|
loop: true, |
||||
|
speed: 500, |
||||
|
allowTouchMove: false, |
||||
|
observer: true, |
||||
|
observeParents: true, |
||||
|
watchOverflow: true |
||||
|
}); |
||||
|
new window.Swiper(mediaEl, { |
||||
|
grabCursor: true, |
||||
|
effect: "creative", |
||||
|
creativeEffect: { |
||||
|
prev: { |
||||
|
shadow: true, |
||||
|
translate: [ |
||||
|
0, |
||||
|
0, |
||||
|
-400 |
||||
|
] |
||||
|
}, |
||||
|
next: { translate: [ |
||||
|
"100%", |
||||
|
0, |
||||
|
0 |
||||
|
] } |
||||
|
}, |
||||
|
loop: true, |
||||
|
speed: 600, |
||||
|
navigation: { |
||||
|
prevEl: prevBtn, |
||||
|
nextEl: nextBtn |
||||
|
}, |
||||
|
on: { |
||||
|
init(swiper) { |
||||
|
syncPager(swiper); |
||||
|
}, |
||||
|
slideChange(swiper) { |
||||
|
syncPager(swiper); |
||||
|
if (contentSwiper.realIndex !== swiper.realIndex) contentSwiper.slideToLoop(swiper.realIndex, contentSwiper.params.speed, false); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initCoreSwiper(); |
||||
|
initCasesSwipers(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";function e(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function t(){let e=document.querySelector(`.sl2-core`),t=e?.querySelector(`.sl2-core__swiper`);!e||!t||!window.Swiper||new window.Swiper(t,{slidesPerView:1,spaceBetween:80,speed:600,loop:!0,grabCursor:!0,observer:!0,observeParents:!0,watchOverflow:!0,autoplay:{delay:3e3,disableOnInteraction:!1},pagination:{el:e.querySelector(`.sl2-core__pagination`),clickable:!0},breakpoints:{1440:{slidesPerView:`auto`}}})}function n(){let e=document.querySelector(`.sl2-scene`),t=e?.querySelector(`.sl2-scene__swiper`);!e||!t||!window.Swiper||new window.Swiper(t,{slidesPerView:`auto`,spaceBetween:40,speed:600,observer:!0,observeParents:!0,watchOverflow:!0,navigation:{prevEl:e.querySelector(`.s-arrows__prev`),nextEl:e.querySelector(`.s-arrows__next`)},breakpoints:{0:{spaceBetween:16},768:{spaceBetween:24},1200:{spaceBetween:40}}})}$(function(){e(),t(),n()}); |
||||
@ -0,0 +1,68 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region js/solution2.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initCoreSwiper() { |
||||
|
const root = document.querySelector(".sl2-core"); |
||||
|
const el = root?.querySelector(".sl2-core__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
new window.Swiper(el, { |
||||
|
slidesPerView: 1, |
||||
|
spaceBetween: 80, |
||||
|
speed: 600, |
||||
|
loop: true, |
||||
|
grabCursor: true, |
||||
|
observer: true, |
||||
|
observeParents: true, |
||||
|
watchOverflow: true, |
||||
|
autoplay: { |
||||
|
delay: 3e3, |
||||
|
disableOnInteraction: false |
||||
|
}, |
||||
|
pagination: { |
||||
|
el: root.querySelector(".sl2-core__pagination"), |
||||
|
clickable: true |
||||
|
}, |
||||
|
breakpoints: { 1440: { slidesPerView: "auto" } } |
||||
|
}); |
||||
|
} |
||||
|
function initSceneSwiper() { |
||||
|
const root = document.querySelector(".sl2-scene"); |
||||
|
const el = root?.querySelector(".sl2-scene__swiper"); |
||||
|
if (!root || !el || !window.Swiper) return; |
||||
|
new window.Swiper(el, { |
||||
|
spaceBetween: 40, |
||||
|
speed: 600, |
||||
|
observer: true, |
||||
|
observeParents: true, |
||||
|
watchOverflow: true, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".sl2-scene__head .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".sl2-scene__head .s-arrows__next") |
||||
|
}, |
||||
|
breakpoints: { |
||||
|
0: { |
||||
|
slidesPerView: 1.2, |
||||
|
spaceBetween: 20, |
||||
|
navigation: { |
||||
|
prevEl: root.querySelector(".sl2-scene__arrows-mobile .s-arrows__prev"), |
||||
|
nextEl: root.querySelector(".sl2-scene__arrows-mobile .s-arrows__next") |
||||
|
} |
||||
|
}, |
||||
|
768: { spaceBetween: 24 }, |
||||
|
1200: { spaceBetween: 40 } |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initCoreSwiper(); |
||||
|
initSceneSwiper(); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -0,0 +1 @@ |
|||||
|
import"./common-DqchIN4G.js";var e=``+new URL(`../assets/banner-BKfbidi-.mp4`,import.meta.url).href;function t(){let e=document.querySelector(`[data-nav]`)?.getAttribute(`data-nav`);e&&document.querySelectorAll(`.site-header__nav a`).forEach(t=>{let n=t.textContent.trim().startsWith(e);t.classList.toggle(`is-active`,n)})}function n(){let t=document.getElementById(`v-modal`),n=document.getElementById(`v-modal-video`),r=document.getElementById(`v-modal-title`);if(!t||!n||!r)return;let i=e,a=null,o=(e,i)=>{a=document.activeElement,r.textContent=i||`视频播放`,n.getAttribute(`src`)!==e&&(n.src=e),t.hidden=!1,document.body.style.overflow=`hidden`,window.lenis?.stop&&window.lenis.stop(),n.play().catch(()=>{}),t.querySelector(`.v-modal__close`)?.focus()},s=()=>{n.pause(),n.removeAttribute(`src`),n.load(),t.hidden=!0,document.body.style.overflow=``,window.lenis?.start&&window.lenis.start(),a&&typeof a.focus==`function`&&a.focus()};document.querySelectorAll(`.v-card`).forEach(e=>{e.addEventListener(`click`,()=>{o(e.getAttribute(`data-video-src`)||i,e.querySelector(`.v-card__title`)?.textContent?.trim()||`视频播放`)})}),t.querySelectorAll(`[data-v-modal-close]`).forEach(e=>{e.addEventListener(`click`,s)}),document.addEventListener(`keydown`,e=>{e.key===`Escape`&&!t.hidden&&s()})}function r(){let e=$(`[data-filter-trigger]`);if(!e.length)return;let t=()=>{$(`[data-filter-dropdown]`).prop(`hidden`,!0),$(`[data-filter-trigger]`).removeClass(`is-open`).attr(`aria-expanded`,`false`)};e.on(`click`,function(){let e=$(this),n=e.next(`[data-filter-dropdown]`);n.prop(`hidden`)?(t(),e.addClass(`is-open`).attr(`aria-expanded`,`true`),n.prop(`hidden`,!1)):t()}),$(`[data-filter-dropdown] button`).on(`click`,function(){let e=$(this),n=e.closest(`[data-filter-dropdown]`),r=n.prev(`[data-filter-trigger]`);e.is(`[data-filter-clear]`)?(r.find(`span`).text(`按产品筛选`),r.removeClass(`is-selected`),n.find(`.is-active`).removeClass(`is-active`),e.addClass(`is-active`)):(e.addClass(`is-active`).siblings().removeClass(`is-active`),r.find(`span`).text(e.text()),r.addClass(`is-selected`)),t()}),$(document).on(`click`,function(e){$(e.target).closest(`[data-filter-trigger], [data-filter-dropdown]`).length||t()})}$(function(){t(),n(),r()}); |
||||
@ -0,0 +1,94 @@ |
|||||
|
import "./common.js"; |
||||
|
//#region assets/videos/banner.mp4
|
||||
|
var banner_default = "" + new URL("../assets/banner-BKfbidi-.mp4", import.meta.url).href; |
||||
|
//#endregion
|
||||
|
//#region js/video.js
|
||||
|
function setActiveNav() { |
||||
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
||||
|
if (!pageNav) return; |
||||
|
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
||||
|
const active = link.textContent.trim().startsWith(pageNav); |
||||
|
link.classList.toggle("is-active", active); |
||||
|
}); |
||||
|
} |
||||
|
function initVideoModal() { |
||||
|
const modal = document.getElementById("v-modal"); |
||||
|
const video = document.getElementById("v-modal-video"); |
||||
|
const titleEl = document.getElementById("v-modal-title"); |
||||
|
if (!modal || !video || !titleEl) return; |
||||
|
const defaultSrc = banner_default; |
||||
|
let lastFocus = null; |
||||
|
const openModal = (src, title) => { |
||||
|
lastFocus = document.activeElement; |
||||
|
titleEl.textContent = title || "视频播放"; |
||||
|
if (video.getAttribute("src") !== src) video.src = src; |
||||
|
modal.hidden = false; |
||||
|
document.body.style.overflow = "hidden"; |
||||
|
if (window.lenis?.stop) window.lenis.stop(); |
||||
|
video.play().catch(() => {}); |
||||
|
modal.querySelector(".v-modal__close")?.focus(); |
||||
|
}; |
||||
|
const closeModal = () => { |
||||
|
video.pause(); |
||||
|
video.removeAttribute("src"); |
||||
|
video.load(); |
||||
|
modal.hidden = true; |
||||
|
document.body.style.overflow = ""; |
||||
|
if (window.lenis?.start) window.lenis.start(); |
||||
|
if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus(); |
||||
|
}; |
||||
|
document.querySelectorAll(".v-card").forEach((card) => { |
||||
|
card.addEventListener("click", () => { |
||||
|
openModal(card.getAttribute("data-video-src") || defaultSrc, card.querySelector(".v-card__title")?.textContent?.trim() || "视频播放"); |
||||
|
}); |
||||
|
}); |
||||
|
modal.querySelectorAll("[data-v-modal-close]").forEach((el) => { |
||||
|
el.addEventListener("click", closeModal); |
||||
|
}); |
||||
|
document.addEventListener("keydown", (e) => { |
||||
|
if (e.key === "Escape" && !modal.hidden) closeModal(); |
||||
|
}); |
||||
|
} |
||||
|
function initFilterDropdown() { |
||||
|
const $trigger = $("[data-filter-trigger]"); |
||||
|
if (!$trigger.length) return; |
||||
|
const closeDropdown = () => { |
||||
|
$("[data-filter-dropdown]").prop("hidden", true); |
||||
|
$("[data-filter-trigger]").removeClass("is-open").attr("aria-expanded", "false"); |
||||
|
}; |
||||
|
$trigger.on("click", function() { |
||||
|
const $btn = $(this); |
||||
|
const $dropdown = $btn.next("[data-filter-dropdown]"); |
||||
|
if (!$dropdown.prop("hidden")) closeDropdown(); |
||||
|
else { |
||||
|
closeDropdown(); |
||||
|
$btn.addClass("is-open").attr("aria-expanded", "true"); |
||||
|
$dropdown.prop("hidden", false); |
||||
|
} |
||||
|
}); |
||||
|
$("[data-filter-dropdown] button").on("click", function() { |
||||
|
const $item = $(this); |
||||
|
const $dropdown = $item.closest("[data-filter-dropdown]"); |
||||
|
const $btn = $dropdown.prev("[data-filter-trigger]"); |
||||
|
if ($item.is("[data-filter-clear]")) { |
||||
|
$btn.find("span").text("按产品筛选"); |
||||
|
$btn.removeClass("is-selected"); |
||||
|
$dropdown.find(".is-active").removeClass("is-active"); |
||||
|
$item.addClass("is-active"); |
||||
|
} else { |
||||
|
$item.addClass("is-active").siblings().removeClass("is-active"); |
||||
|
$btn.find("span").text($item.text()); |
||||
|
$btn.addClass("is-selected"); |
||||
|
} |
||||
|
closeDropdown(); |
||||
|
}); |
||||
|
$(document).on("click", function(event) { |
||||
|
if (!$(event.target).closest("[data-filter-trigger], [data-filter-dropdown]").length) closeDropdown(); |
||||
|
}); |
||||
|
} |
||||
|
$(function() { |
||||
|
setActiveNav(); |
||||
|
initVideoModal(); |
||||
|
initFilterDropdown(); |
||||
|
}); |
||||
|
//#endregion
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue