636 lines
9.4 KiB
CSS
636 lines
9.4 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
body {
|
|
background: url(../images/bg.jpg) no-repeat;
|
|
background-color: #020c39;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
z-index: -10;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
-webkit-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-position: center 0;
|
|
}
|
|
|
|
.full-page {
|
|
width: 1920px;
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-pagination {
|
|
width: 457px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-group {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
}
|
|
|
|
.btn-group .home-btn {
|
|
background: url(../images/home-btn.png) no-repeat;
|
|
width: 60px;
|
|
height: 23px;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.btn-group .home-btn:hover {
|
|
background: url(../images/home-btn-hover.png) no-repeat;
|
|
}
|
|
|
|
.btn-group .full-btn {
|
|
background: url(../images/full-btn.png) no-repeat;
|
|
width: 60px;
|
|
height: 23px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-group .full-btn:hover {
|
|
background: url(../images/full-btn-hover.png) no-repeat;
|
|
}
|
|
|
|
.bi-main {
|
|
margin-top: -65px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
/* border: 1px solid red; */
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.bi-left {
|
|
width: 478px;
|
|
}
|
|
|
|
.bi-right {
|
|
width: 450px;
|
|
/* border: 1px solid blueviolet; */
|
|
}
|
|
|
|
.bi-center {
|
|
flex: 1;
|
|
/* border: 1px solid yellow; */
|
|
}
|
|
|
|
/* 左侧内容 */
|
|
.bi-step1 {
|
|
background: url(../images/left-bg1.png) no-repeat;
|
|
width: 100%;
|
|
height: 19.481vh;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step2 {
|
|
background: url(../images/left-bg2.png) no-repeat;
|
|
width: 457px;
|
|
height: 40.6217vh;
|
|
background-size: 100% 100%;
|
|
margin-left: 21px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.bi-step2-loop {
|
|
width: 457px;
|
|
height: 39.0217vh;
|
|
position: absolute;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.bi-step3 {
|
|
background: url(../images/left-bg3.png) no-repeat;
|
|
width: 457px;
|
|
height: 34.922vh;
|
|
background-size: 100% 100%;
|
|
margin-left: 21px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step4 {
|
|
background: url(../images/left-bg4.png) no-repeat;
|
|
width: 100%;
|
|
height: 19.481vh;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step5 {
|
|
background: url(../images/left-bg5.png) no-repeat;
|
|
width: 100%;
|
|
height: 40.6217vh;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step5-loop {
|
|
width: 450px;
|
|
height: 39.0217vh;
|
|
position: absolute;
|
|
margin-top: 1vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step6 {
|
|
background: url(../images/left-bg6.png) no-repeat;
|
|
width: 100%;
|
|
height: 34.922vh;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step7 {
|
|
background: url(../images/left-bg7.png) no-repeat;
|
|
width: 376px;
|
|
height: 34.922vh;
|
|
background-size: 100% 100%;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step8 {
|
|
background: url(../images/left-bg8.png) no-repeat;
|
|
width: 512px;
|
|
height: 34.922vh;
|
|
margin-left: 21px;
|
|
background-size: 100% 100%;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bi-step-bottom {
|
|
padding: 4px 0 0 26px;
|
|
}
|
|
|
|
|
|
.map-step {
|
|
height: 51.398vh;
|
|
padding: 6.217vh 15px 20px 15px;
|
|
/* border: 1px solid red; */
|
|
}
|
|
|
|
.import-map {
|
|
/* border: 1px solid yellow; */
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 以上为布局 */
|
|
.step-title-left {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.step-title-left h1 {
|
|
margin: 3.73vh 0 0 40px;
|
|
color: #aaddff;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.step-title-left .step-name {
|
|
position: absolute;
|
|
left: 270px;
|
|
top: -6px;
|
|
color: #04a3e0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.step-title-right {
|
|
width: 100%;
|
|
padding-top: 3.523vh;
|
|
position: relative;
|
|
text-align: right;
|
|
padding-bottom: 28px;
|
|
}
|
|
|
|
.step-title-right ul {
|
|
width: 200px;
|
|
display: flex;
|
|
padding-left: 225px;
|
|
}
|
|
|
|
.step-title-right ul li {
|
|
display: inline-block;
|
|
flex: 1;
|
|
font-size: 20px;
|
|
color: #70ceff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.step-title-right ul li:hover,
|
|
.step-title-right ul li.actived {
|
|
color: #aaddff;
|
|
text-shadow: .4rem 0rem .5rem #0bc4e9, -.2rem 0rem .5rem #0bc4e9, 0rem .2rem .5rem #0bc4e9, 0rem -.2rem .5rem #0bc4e9
|
|
}
|
|
|
|
.step-title-right .step-name {
|
|
color: #04a3e0;
|
|
font-size: 13px;
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 2.694vh;
|
|
left: 10px;
|
|
}
|
|
.step-title-right .step-rtx{
|
|
width: 200px;
|
|
padding-left:180px;
|
|
font-size: 20px;
|
|
color: #70ceff;
|
|
cursor: pointer;
|
|
}
|
|
.step-title {
|
|
/* border: 1px solid red; */
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: space-between;
|
|
height: 2.6vh;
|
|
}
|
|
|
|
.step-interval {
|
|
padding: 2.694vh 0px 20px 80px;
|
|
}
|
|
|
|
.step-int {
|
|
padding: 3.108vh 0px 20px 70px;
|
|
}
|
|
|
|
.step-ints {
|
|
padding: 3.5233vh 0px 20px 40px;
|
|
}
|
|
|
|
.step-title h1 {
|
|
color: #aaddff;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.step-title .step-tabs {
|
|
display: flex;
|
|
margin-top: 0.6vh;
|
|
}
|
|
|
|
.w160 {
|
|
width: 160px;
|
|
}
|
|
|
|
.w240 {
|
|
width: 240px;
|
|
}
|
|
|
|
.step-title .step-tabs li {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
color: #70ceff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.step-title .step-tabs li:hover,
|
|
.step-title .step-tabs .actived {
|
|
color: #aaddff;
|
|
text-shadow: .4rem 0rem .5rem #0bc4e9, -.2rem 0rem .5rem #0bc4e9, 0rem .2rem .5rem #0bc4e9, 0rem -.2rem .5rem #0bc4e9
|
|
}
|
|
|
|
.notice-content {
|
|
height: 8.290vh;
|
|
padding: 0px 50px 0px 20px;
|
|
color: #aaddff;
|
|
font-size: 14px;
|
|
line-height: 2;
|
|
overflow: hidden;
|
|
/*超出部分隐藏*/
|
|
|
|
}
|
|
|
|
.round-box {
|
|
padding: 1.554vh 0 0 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.round-grap {
|
|
background: url(../images/yuanl.png) no-repeat;
|
|
width: 97px;
|
|
height: 97px;
|
|
text-align: center;
|
|
}
|
|
|
|
.round-grap h1 {
|
|
padding-top: 26px;
|
|
color: #70c5ff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.round-grap span {
|
|
color: #aaddff;
|
|
font-size: 6px;
|
|
}
|
|
|
|
.round-jt {
|
|
background: url(../images/jt-right.png) no-repeat;
|
|
width: 20px;
|
|
height: 29px;
|
|
margin: 0 18px;
|
|
}
|
|
|
|
/* 滚动文字 */
|
|
.step-run {
|
|
height:100%;
|
|
overflow-y: hidden;
|
|
width: 100%;
|
|
margin-right: 26px;
|
|
}
|
|
|
|
.step-run .slide-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.step-run .slide-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #c7ddff;
|
|
font-size: 12px;
|
|
margin-bottom: 0.8vh;
|
|
}
|
|
.step-run .slide-list .t2span{
|
|
width: 30%;
|
|
padding-left: 20%;
|
|
}
|
|
.step-run .slide-list .t3span{
|
|
flex: 1;
|
|
}
|
|
.hidden-box {
|
|
/* border: 1px solid red; */
|
|
}
|
|
|
|
.hidden-h1 {
|
|
height: 6.106vh;
|
|
display: flex;
|
|
padding-left: 60px;
|
|
/* border: 1px solid red; */
|
|
}
|
|
|
|
.hidden-h1 .hidden-h1-lable {
|
|
color: #c7ddff;
|
|
font-size: 16px;
|
|
margin-top: 1.8vh;
|
|
}
|
|
|
|
.hidden-h1-date {
|
|
margin-left: 110px;
|
|
margin-top: 0.6vh;
|
|
}
|
|
|
|
.hidden-h2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 6vh;
|
|
padding: 0 50px;
|
|
padding-top: 2.4vh;
|
|
}
|
|
|
|
.hidden-h2-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.hidden-h2-flex .hidden-h2-lable {
|
|
color: #c7ddff;
|
|
font-size: 16px;
|
|
margin-top: 0.6vh;
|
|
}
|
|
|
|
.hidden-h2-date {
|
|
margin-left: 20px;
|
|
margin-top: 0.2vh;
|
|
}
|
|
|
|
.hidden-h3 {
|
|
padding-left: 50px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.hidden-h3-lable {
|
|
color: #c7ddff;
|
|
font-size: 13px;
|
|
padding-top: 0.4vh;
|
|
}
|
|
|
|
.hidden-h3-date {
|
|
height: 13.2vh;
|
|
}
|
|
|
|
|
|
.task-box {
|
|
margin: 0 30px 0 20px;
|
|
}
|
|
|
|
.task-item {
|
|
border-bottom: 1px solid #1a4281;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1.2vh 0;
|
|
}
|
|
|
|
.task-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.task-textsp {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.task-textsp .task-icon {
|
|
width: 1.302vw;
|
|
height: 2.590vh;
|
|
margin: 0 auto;
|
|
margin-bottom: 0.5vh;
|
|
}
|
|
|
|
.task-textsp .task-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.task-text {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.task-text .title {
|
|
color: #aaddff;
|
|
font-size: 12px;
|
|
margin-bottom: 0.8vh;
|
|
}
|
|
|
|
.task-textsp .title {
|
|
color: #aaddff;
|
|
font-size: 14px
|
|
}
|
|
|
|
|
|
.chart-song {
|
|
/* border: 1px solid red; */
|
|
height: 32vh;
|
|
padding-left: 10px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.chart-bread {
|
|
/* border: 1px solid red; */
|
|
height: 26vh;
|
|
}
|
|
|
|
.chart-zhu {
|
|
/* border: 1px solid red; */
|
|
height: 26vh;
|
|
}
|
|
|
|
.chart-video {
|
|
height: 25vh;
|
|
overflow: hidden;
|
|
padding-left: 14px;
|
|
padding-right: 22px;
|
|
/* padding-bottom: 10px; */
|
|
}
|
|
|
|
/* 字体样式 */
|
|
.color-org {
|
|
color: #ffb956;
|
|
}
|
|
|
|
.color-blue {
|
|
color: #77c8ff;
|
|
}
|
|
|
|
.color-hui {
|
|
color: #4f6778;
|
|
}
|
|
|
|
.f36 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.f22 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.f14 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.light {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
.light:nth-child(1) {
|
|
filter: hue-rotate(0deg);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, transparent, #3a86ff);
|
|
animation: animate1 8s linear infinite;
|
|
}
|
|
|
|
@keyframes animate1 {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
.light:nth-child(2) {
|
|
filter: hue-rotate(60deg);
|
|
top: -100%;
|
|
right: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, transparent, #3a86ff);
|
|
animation: animate2 8s linear infinite;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@keyframes animate2 {
|
|
0% {
|
|
top: -100%;
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
.light:nth-child(3) {
|
|
filter: hue-rotate(120deg);
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
background: linear-gradient(270deg, transparent, #3a86ff);
|
|
animation: animate3 8s linear infinite;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes animate3 {
|
|
0% {
|
|
right: -100%;
|
|
height: 3px;
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
height: 2px;
|
|
right: 100%;
|
|
}
|
|
}
|
|
|
|
.light:nth-child(4) {
|
|
filter: hue-rotate(300deg);
|
|
bottom: -100%;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(360deg, transparent, #3a86ff);
|
|
animation: animate4 8s linear infinite;
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
@keyframes animate4 {
|
|
0% {
|
|
bottom: -100%;
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
bottom: 100%;
|
|
}
|
|
}
|