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> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="keywords" content="粒子研究院"> |
||||
<meta name="description" content="粒子研究院"/> |
||||
<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"> |
||||
<title>粒子研究院</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||
<meta name="keywords" content="粒子研究院" /> |
||||
<meta name="description" content="粒子研究院" /> |
||||
<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" /> |
||||
<title>粒子研究院</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</html> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,118 +1,224 @@ |
||||
@import "../var.scss"; |
||||
@import '../var.scss'; |
||||
.block { |
||||
padding: 118px 0; |
||||
.b-title { |
||||
position: relative; |
||||
margin-bottom: 50px; |
||||
font-size: 3rem; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
font-weight: bold; |
||||
color: #333333; |
||||
line-height: 60px; |
||||
text-align: center; |
||||
color: #1F1F1F; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 70px; |
||||
left: 50%; |
||||
width: 136px; |
||||
height: 4px; |
||||
transform: translateX(-50%); |
||||
background: #1583FF; |
||||
} |
||||
} |
||||
.intro { |
||||
margin-bottom: 80px; |
||||
font-size: 1.6rem; |
||||
text-align: center; |
||||
color: #5B5B5E; |
||||
line-height: 40px; |
||||
@include mul-ellipsis(2); |
||||
} |
||||
padding: 118px 0; |
||||
.b-title { |
||||
position: relative; |
||||
margin-bottom: 50px; |
||||
font-size: 3rem; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
font-weight: bold; |
||||
color: #333333; |
||||
line-height: 60px; |
||||
text-align: center; |
||||
color: #1f1f1f; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 70px; |
||||
left: 50%; |
||||
width: 136px; |
||||
height: 4px; |
||||
transform: translateX(-50%); |
||||
background: #1583ff; |
||||
} |
||||
} |
||||
.intro { |
||||
margin-bottom: 80px; |
||||
font-size: 1.6rem; |
||||
text-align: center; |
||||
color: #5b5b5e; |
||||
line-height: 40px; |
||||
@include mul-ellipsis(2); |
||||
} |
||||
} |
||||
.inner { |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
} |
||||
.banner { |
||||
height: 280px; |
||||
padding: 123px 0 0 243px; |
||||
font-size: 2rem; |
||||
color: #fff; |
||||
height: 280px; |
||||
padding: 123px 0 0 243px; |
||||
font-size: 2rem; |
||||
color: #fff; |
||||
} |
||||
.banner-item { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
img { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.banner-name { |
||||
position: absolute; |
||||
bottom: 87px; |
||||
left: 213px; |
||||
font-size: 2rem; |
||||
font-family: SFProDisplay-Bold; |
||||
font-weight: bold; |
||||
line-height: 58px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.banner-name { |
||||
position: absolute; |
||||
bottom: 87px; |
||||
left: 213px; |
||||
font-size: 2rem; |
||||
font-family: SFProDisplay-Bold; |
||||
font-weight: bold; |
||||
line-height: 58px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.single-banner { |
||||
position: relative; |
||||
color: #fff; |
||||
.banner-img { |
||||
width: 100%; |
||||
height: 480px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 160px; |
||||
left: 267px; |
||||
} |
||||
&.single-banner-overview .texts { |
||||
top: 332px; |
||||
left: 278px; |
||||
} |
||||
.banner-title { |
||||
margin-bottom: 19px; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.banner-des { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
position: relative; |
||||
color: #fff; |
||||
.banner-img { |
||||
width: 100%; |
||||
height: 480px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 160px; |
||||
left: 267px; |
||||
} |
||||
&.single-banner-overview .texts { |
||||
top: 332px; |
||||
left: 278px; |
||||
} |
||||
.banner-title { |
||||
margin-bottom: 19px; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.banner-des { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
} |
||||
.des { |
||||
@include mul-ellipsis(3); |
||||
@include mul-ellipsis(3); |
||||
} |
||||
.gray { |
||||
background-color: #F2F6F8; |
||||
background-color: #f2f6f8; |
||||
} |
||||
.arrow { |
||||
transition: .3s; |
||||
cursor: pointer; |
||||
transition: 0.3s; |
||||
cursor: pointer; |
||||
} |
||||
.all-link { |
||||
text-align: right; |
||||
span { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
color: #707070; |
||||
cursor: pointer; |
||||
} |
||||
.icon { |
||||
width: 20px; |
||||
margin-left: 8px; |
||||
} |
||||
text-align: right; |
||||
span { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
color: #707070; |
||||
cursor: pointer; |
||||
} |
||||
.icon { |
||||
width: 20px; |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
@media (max-width: 1410px) { |
||||
.inner { |
||||
width: 80%; |
||||
} |
||||
} |
||||
.inner { |
||||
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