413 lines
10 KiB
CSS
413 lines
10 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
li, ol {
|
|
list-style: none
|
|
}
|
|
|
|
a {
|
|
text-decoration: none
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "方正大黑_GBK";
|
|
src: url("../font/方正大黑_GBK.eot?") format("eot");
|
|
src: url("../font/方正大黑_GBK.woff") format("woff"),url("../font/方正大黑_GBK.ttf") format("truetype")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "液晶数字";
|
|
src: url("../font/液晶数字.eot?") format("eot");
|
|
src: url("../font/液晶数字.woff") format("woff"),url("../font/液晶数字.ttf") format("truetype")
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: transparent
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
border-radius: 10px;
|
|
background-color: #6b81d4
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
background-color: #1843e2
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
background: rgba(0,0,0,0.4)
|
|
}
|
|
|
|
html {
|
|
scrollbar-face-color: #071857;
|
|
scrollbar-highlight-color: #010a2c;
|
|
scrollbar-3dlight-color: #010a2c;
|
|
scrollbar-darkshadow-color: #010a2c;
|
|
scrollbar-shadow-color: #071857;
|
|
scrollbar-arrow-color: rgba(1,10,44,0.4);
|
|
scrollbar-track-color: #071857
|
|
}
|
|
|
|
html {
|
|
font-size: 10vw;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 1200px;
|
|
font-family: Microsoft YaHei;
|
|
line-height: 1
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
html {
|
|
font-size: 120px
|
|
}
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.flexCenter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
|
|
.flexCenterV {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column
|
|
}
|
|
|
|
.sd-index4-body {
|
|
background: #010817;
|
|
background-image: url("../image/index4/bj.png");
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat
|
|
}
|
|
|
|
.sd-header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: .4375rem;
|
|
padding: 0 .10417rem;
|
|
background: url("../image/index4/header-bg.png") center center/100% 100% no-repeat
|
|
}
|
|
|
|
.sd-header .sd-header-title {
|
|
position: absolute;
|
|
top: .11458rem;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
font-size: .20833rem;
|
|
color: #1AB1FF;
|
|
white-space: nowrap;
|
|
text-shadow: 0px 5px 0px rgba(5,63,152,0.5);
|
|
font-weight: bold
|
|
}
|
|
|
|
.sd-header .sd-header-top {
|
|
position: relative
|
|
}
|
|
|
|
.sd-header .sd-header-top .sd-header-top-left {
|
|
position: absolute;
|
|
left: .10417rem;
|
|
top: .05208rem;
|
|
color: #1ab1ff;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.sd-header .sd-header-top .sd-header-top-left .sd-location-name {
|
|
margin-right: .09375rem
|
|
}
|
|
|
|
.sd-header .sd-header-top .sd-header-top-right {
|
|
position: absolute;
|
|
top: .03646rem;
|
|
right: 0
|
|
}
|
|
|
|
.sd-header .sd-header-top .sd-header-top-right .sd-location-time {
|
|
font-size: .0625rem;
|
|
color: #B0E1FF
|
|
}
|
|
|
|
.disflex {
|
|
display: flex;
|
|
flex-direction: column
|
|
}
|
|
|
|
body {
|
|
height: 100%
|
|
}
|
|
|
|
body .sd-index4-body {
|
|
height: 100%
|
|
}
|
|
|
|
.sd-body {
|
|
flex: 1;
|
|
height: auto;
|
|
padding: .20833rem .20833rem .20833rem;
|
|
display: flex;
|
|
background-color: #0e113c
|
|
}
|
|
|
|
.sd-body .tit {
|
|
width: 1.08333rem;
|
|
height: .18229rem;
|
|
font-size: .08333rem;
|
|
color: #FFFFFF;
|
|
background: url("../image/index4/tit.png") center center/100% 100% no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto
|
|
}
|
|
|
|
.sd-body .bg {
|
|
background: rgba(3,39,109,0.1);
|
|
border: 1px solid #03276D;
|
|
box-shadow: inset 0px 0px .18229rem .01563rem rgba(3,39,109,0.6)
|
|
}
|
|
|
|
.sd-body .sd-content {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.sd-body .sdsec-wrap {
|
|
height: 100%;
|
|
margin-top: -.18229rem;
|
|
padding-top: .18229rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
|
|
.sd-body .sd-left {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-left.sd-l-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-top, .sd-body .sd-left .sbl-center, .sd-body .sd-left .sbl-bottom {
|
|
background: rgba(3,39,109,0.1);
|
|
border: 1px solid #03276D
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-top {
|
|
height: .78125rem
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-top .sd-security-value {
|
|
height: .25521rem;
|
|
margin: .0625rem auto 0;
|
|
padding: 0 .02604rem;
|
|
text-align: center;
|
|
background: url("../image/index4/security-time-bg.png") center center/100% 100% no-repeat;
|
|
font-size: .15625rem;
|
|
color: #7ecef7;
|
|
font-family: "液晶数字";
|
|
letter-spacing: .09896rem;
|
|
padding-top: .06771rem
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-center {
|
|
flex: 1;
|
|
margin: .15625rem 0
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-center .sd-pie-wrap {
|
|
margin-top: -.18229rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: .18229rem
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-center .sd-pie-wrap .sd-pie {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-bottom {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-bottom .sd-output-box-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: -.18229rem;
|
|
padding-top: .18229rem
|
|
}
|
|
|
|
.sd-body .sd-left .sbl-bottom .sd-output-box-wrap .sd-output-box {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.sd-body .sd-mid {
|
|
flex: 1;
|
|
margin: 0 .15625rem;
|
|
color: #fff
|
|
}
|
|
|
|
.sd-body .sd-mid .content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
margin-top: -.18229rem;
|
|
padding: .28646rem .15625rem .10417rem
|
|
}
|
|
|
|
.sd-body .sd-mid .content .list {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-mid .content .list .l-wrap li {
|
|
font-size: .125rem;
|
|
height: .15625rem;
|
|
line-height: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-mid .content .jump {
|
|
height: .26042rem;
|
|
font-size: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-right {
|
|
flex: 1;
|
|
color: #fff
|
|
}
|
|
|
|
.sd-body .sd-right .content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
margin-top: -.18229rem;
|
|
padding: .28646rem .15625rem .10417rem
|
|
}
|
|
|
|
.sd-body .sd-right .content .list {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-right .content .list .l-wrap li {
|
|
font-size: .125rem;
|
|
height: .15625rem;
|
|
line-height: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-right .content .jump {
|
|
height: .26042rem;
|
|
font-size: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-right-new {
|
|
margin-left: .15625rem;
|
|
flex: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #fff
|
|
}
|
|
|
|
.sd-body .sd-right-new .sdr-top {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-right-new .sdr-bottom {
|
|
flex: 1;
|
|
margin-top: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-right-new .content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin-top: -.18229rem;
|
|
padding: 0rem .15625rem 0rem
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .list {
|
|
flex: 1
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .list .l-wrap li {
|
|
font-size: .10417rem;
|
|
height: .15625rem;
|
|
line-height: .15625rem
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .list .news-list {
|
|
padding: 0
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .list .news-list .news-item {
|
|
display: block;
|
|
font-size: .07292rem;
|
|
color: #a4e1ff;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: .05208rem 0
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: .57292rem;
|
|
height: .56771rem;
|
|
cursor: pointer;
|
|
background: url("../image/index4/video-num-bg.png") center center/100% 100% no-repeat
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item + .sd-video-item {
|
|
margin-top: .13021rem
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item .sd-video-item-num {
|
|
font-size: .125rem
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item .sd-video-item-num--blue {
|
|
color: #1ab1ff
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item .sd-video-item-num--green {
|
|
color: #12cda2
|
|
}
|
|
|
|
.sd-body .sd-right-new .content .sd-video-item .sd-video-item-desc {
|
|
margin-top: .04167rem;
|
|
font-size: .07292rem;
|
|
color: #1ab1ff
|
|
}
|