parent
aaedf6771a
commit
297928c1fd
15 changed files with 21182 additions and 3751 deletions
File diff suppressed because it is too large
Load Diff
@ -1,20 +1,19 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<meta charset="utf-8"> |
<meta charset="utf-8" /> |
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||||
<meta name="keywords" content="粒子研究院"> |
<meta name="keywords" content="粒子研究院" /> |
||||||
<meta name="description" content="粒子研究院"/> |
<meta name="description" content="粒子研究院" /> |
||||||
<meta name="referrer" content="no-referrer"> |
<meta name="referrer" content="no-referrer" /> |
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
||||||
<title>粒子研究院</title> |
<title>粒子研究院</title> |
||||||
</head> |
</head> |
||||||
<body> |
<body> |
||||||
<noscript> |
<noscript> |
||||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
</noscript> |
</noscript> |
||||||
<div id="app"></div> |
<div id="app"></div> |
||||||
<!-- built files will be auto injected --> |
<!-- built files will be auto injected --> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,118 +1,224 @@ |
|||||||
@import "../var.scss"; |
@import '../var.scss'; |
||||||
.block { |
.block { |
||||||
padding: 118px 0; |
padding: 118px 0; |
||||||
.b-title { |
.b-title { |
||||||
position: relative; |
position: relative; |
||||||
margin-bottom: 50px; |
margin-bottom: 50px; |
||||||
font-size: 3rem; |
font-size: 3rem; |
||||||
font-family: SFProDisplay-Bold, SFProDisplay; |
font-family: SFProDisplay-Bold, SFProDisplay; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
color: #333333; |
color: #333333; |
||||||
line-height: 60px; |
line-height: 60px; |
||||||
text-align: center; |
text-align: center; |
||||||
color: #1F1F1F; |
color: #1f1f1f; |
||||||
&:after { |
&:after { |
||||||
content: ''; |
content: ''; |
||||||
position: absolute; |
position: absolute; |
||||||
top: 70px; |
top: 70px; |
||||||
left: 50%; |
left: 50%; |
||||||
width: 136px; |
width: 136px; |
||||||
height: 4px; |
height: 4px; |
||||||
transform: translateX(-50%); |
transform: translateX(-50%); |
||||||
background: #1583FF; |
background: #1583ff; |
||||||
} |
} |
||||||
} |
} |
||||||
.intro { |
.intro { |
||||||
margin-bottom: 80px; |
margin-bottom: 80px; |
||||||
font-size: 1.6rem; |
font-size: 1.6rem; |
||||||
text-align: center; |
text-align: center; |
||||||
color: #5B5B5E; |
color: #5b5b5e; |
||||||
line-height: 40px; |
line-height: 40px; |
||||||
@include mul-ellipsis(2); |
@include mul-ellipsis(2); |
||||||
} |
} |
||||||
} |
} |
||||||
.inner { |
.inner { |
||||||
width: 1200px; |
width: 1200px; |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
} |
} |
||||||
.banner { |
.banner { |
||||||
height: 280px; |
height: 280px; |
||||||
padding: 123px 0 0 243px; |
padding: 123px 0 0 243px; |
||||||
font-size: 2rem; |
font-size: 2rem; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
.banner-item { |
.banner-item { |
||||||
position: relative; |
position: relative; |
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
img { |
|
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
} |
img { |
||||||
.banner-name { |
width: 100%; |
||||||
position: absolute; |
height: 100%; |
||||||
bottom: 87px; |
} |
||||||
left: 213px; |
.banner-name { |
||||||
font-size: 2rem; |
position: absolute; |
||||||
font-family: SFProDisplay-Bold; |
bottom: 87px; |
||||||
font-weight: bold; |
left: 213px; |
||||||
line-height: 58px; |
font-size: 2rem; |
||||||
color: #fff; |
font-family: SFProDisplay-Bold; |
||||||
cursor: pointer; |
font-weight: bold; |
||||||
} |
line-height: 58px; |
||||||
|
color: #fff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
} |
} |
||||||
.single-banner { |
.single-banner { |
||||||
position: relative; |
position: relative; |
||||||
color: #fff; |
color: #fff; |
||||||
.banner-img { |
.banner-img { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 480px; |
height: 480px; |
||||||
} |
} |
||||||
.texts { |
.texts { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 160px; |
top: 160px; |
||||||
left: 267px; |
left: 267px; |
||||||
} |
} |
||||||
&.single-banner-overview .texts { |
&.single-banner-overview .texts { |
||||||
top: 332px; |
top: 332px; |
||||||
left: 278px; |
left: 278px; |
||||||
} |
} |
||||||
.banner-title { |
.banner-title { |
||||||
margin-bottom: 19px; |
margin-bottom: 19px; |
||||||
font-size: 2.2rem; |
font-size: 2.2rem; |
||||||
font-family: PingFangSC-Medium, PingFang SC; |
font-family: PingFangSC-Medium, PingFang SC; |
||||||
} |
} |
||||||
.banner-des { |
.banner-des { |
||||||
font-size: 1.2rem; |
font-size: 1.2rem; |
||||||
font-family: PingFangSC-Medium, PingFang SC; |
font-family: PingFangSC-Medium, PingFang SC; |
||||||
} |
} |
||||||
} |
} |
||||||
.des { |
.des { |
||||||
@include mul-ellipsis(3); |
@include mul-ellipsis(3); |
||||||
} |
} |
||||||
.gray { |
.gray { |
||||||
background-color: #F2F6F8; |
background-color: #f2f6f8; |
||||||
} |
} |
||||||
.arrow { |
.arrow { |
||||||
transition: .3s; |
transition: 0.3s; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
.all-link { |
.all-link { |
||||||
text-align: right; |
text-align: right; |
||||||
span { |
span { |
||||||
display: inline-flex; |
display: inline-flex; |
||||||
align-items: center; |
align-items: center; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
color: #707070; |
color: #707070; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
.icon { |
.icon { |
||||||
width: 20px; |
width: 20px; |
||||||
margin-left: 8px; |
margin-left: 8px; |
||||||
} |
} |
||||||
} |
} |
||||||
@media (max-width: 1410px) { |
@media (max-width: 1410px) { |
||||||
.inner { |
.inner { |
||||||
width: 80%; |
width: 80%; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
@media (max-width: 1300px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 35rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 20rem; |
||||||
|
left: 9rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 980px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 32rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 20rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 980px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 25rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 15rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 640px) and (max-width: 768px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 22rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 12rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 480px) and (max-width: 640px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 18rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 10rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 375px) and (max-width: 480px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 15rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 6rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 320px) and (max-width: 375px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 13rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 6rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 320px) { |
||||||
|
.wrap { |
||||||
|
.single-banner { |
||||||
|
.banner-img { |
||||||
|
height: 13rem; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
top: 6rem; |
||||||
|
left: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|||||||
Loading…
Reference in new issue