You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
7.3 KiB
429 lines
7.3 KiB
@import "../var.scss"; |
|
// ::-webkit-scrollbar-thumb { |
|
// display: none; |
|
// } |
|
body { |
|
min-width: 1480px; |
|
} |
|
// ::-webkit-scrollbar { |
|
// width: 8px; |
|
// height: 8px; |
|
// } |
|
// ::-webkit-scrollbar-thumb { |
|
// width: 5px; |
|
// border-radius: 6px; |
|
// background: rgba(85, 219, 255, .8); |
|
// } |
|
.video { |
|
position: absolute; |
|
top: 0; |
|
left: -20%; |
|
width: 150%; |
|
// height: 720px; |
|
} |
|
.wrap { |
|
width: 100%; |
|
height: 100vh; |
|
color:#333; |
|
background: url('../../assets/img/screen/screen1.jpg') no-repeat; |
|
background-size: 100% 100%; |
|
overflow: auto; |
|
.full { |
|
z-index: 10; |
|
position: absolute; |
|
top: 20px; |
|
right: 30px; |
|
cursor: pointer; |
|
transition: .5s; |
|
&:hover { |
|
transform: scale(1.2); |
|
} |
|
} |
|
.l_t_line{ |
|
width: 5px; |
|
height: 24px; |
|
left: -3px; |
|
top: -3px; |
|
} |
|
.t_l_line{ |
|
height: 5px; |
|
width: 26px; |
|
left: -3px; |
|
top: -3px; |
|
} |
|
.t_line_box { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.t_line_box i{ |
|
background-color: #4788fb; |
|
box-shadow: 0px 0px 10px #4788fb; |
|
position: absolute; |
|
} |
|
.t_r_line{ |
|
height: 5px; |
|
width: 26px; |
|
right: -3px; |
|
top: -3px; |
|
} |
|
.r_t_line{ |
|
width: 5px; |
|
height: 24px; |
|
right: -3px; |
|
top: -3px; |
|
} |
|
.l_b_line{ |
|
width: 5px; |
|
height: 24px; |
|
left: -3px; |
|
bottom: -3px; |
|
} |
|
.b_l_line{ |
|
height: 5px; |
|
width: 26px; |
|
left: -3px; |
|
bottom: -3px; |
|
} |
|
.r_b_line{ |
|
width: 5px; |
|
height: 24px; |
|
right: -3px; |
|
bottom: -3px; |
|
} |
|
.b_r_line{ |
|
height: 5px; |
|
width: 26px; |
|
right: -3px; |
|
bottom: -3px; |
|
} |
|
.earth { |
|
z-index: 0; |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
img { |
|
position: absolute; |
|
top: 52%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
opacity: .4; |
|
} |
|
.lbx { |
|
z-index: 2; |
|
max-width: 95%; |
|
max-height: 95%; |
|
animation: rotate 15s linear infinite; |
|
} |
|
.jt { |
|
z-index: 3; |
|
max-width: 90%; |
|
max-height: 90%; |
|
opacity: .3; |
|
animation: rotate-reverse 15s linear infinite; |
|
} |
|
.map { |
|
z-index: 1; |
|
max-width: 85%; |
|
max-height: 85%; |
|
} |
|
} |
|
@keyframes rotate { |
|
0% { |
|
transform: translate(-50%, -50%) rotate(0); |
|
} |
|
50% { |
|
transform: translate(-50%, -50%) rotate(180deg); |
|
} |
|
100% { |
|
transform: translate(-50%, -50%) rotate(360deg); |
|
} |
|
} |
|
@keyframes rotate-reverse { |
|
0% { |
|
transform: translate(-50%, -50%) rotate(0360deg); |
|
} |
|
50% { |
|
transform: translate(-50%, -50%) rotate(180deg); |
|
} |
|
100% { |
|
transform: translate(-50%, -50%) rotate(0); |
|
} |
|
} |
|
} |
|
.time-switch { |
|
z-index: 2; |
|
position: absolute; |
|
display: flex; |
|
top: 24px; |
|
right: 10px; |
|
li { |
|
padding: 0 14px; |
|
line-height: 24px; |
|
color: #fff; |
|
background-color: #0a111c; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
&.active { |
|
background-color: #00d8ff; |
|
} |
|
} |
|
} |
|
.active-number { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
padding: 10px 40px; |
|
background: url(../../assets/img/screen/title-bg.png) 0 0/cover no-repeat; |
|
.val { |
|
font-size: 50px; |
|
font-family: 'yjsz'; |
|
color: #00f3ff; |
|
text-shadow: 0 0 25px #00d8ff; |
|
text-align: center; |
|
} |
|
.name { |
|
font-size: 16px; |
|
color: #fff; |
|
text-shadow: 0 0 25px #00d8ff; |
|
} |
|
} |
|
.stat-mask { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0, 0, 0, .65); |
|
} |
|
.stat-wrap { |
|
position: relative; |
|
height: 100%; |
|
background: url(../../assets/img/screen/stat.png) 0 0/100% auto no-repeat; |
|
.num { |
|
position: absolute; |
|
width: 100px; |
|
text-align: center; |
|
font-size: 32px; |
|
font-weight: bold; |
|
color: #00d8ff; |
|
white-space: nowrap; |
|
} |
|
.num1 { |
|
top: 140px; |
|
left: 12px; |
|
} |
|
.num2 { |
|
top: 49px; |
|
right: 187px; |
|
} |
|
.num3 { |
|
top: 260px; |
|
left: 200px; |
|
} |
|
.num4 { |
|
top: 296px; |
|
right: 368px; |
|
} |
|
.num5 { |
|
bottom: 319px; |
|
right: 36px; |
|
} |
|
} |
|
.main_table { |
|
width: 100%; |
|
margin-top: 25px; |
|
table { |
|
width: 100%; |
|
} |
|
tr{ |
|
height: 42px; |
|
} |
|
th{ |
|
font-size: 12px; |
|
font-weight: 600; |
|
color:#61d2f7; |
|
text-align: center; |
|
} |
|
td{ |
|
color:#fff; |
|
font-size: 10px; |
|
text-align: center; |
|
} |
|
tbody tr:nth-child(odd) { |
|
background-color: #072951; |
|
box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset; |
|
} |
|
.percent { |
|
width: 64px; |
|
margin: 0 auto; |
|
line-height: 24px; |
|
color: #fff; |
|
text-align: center; |
|
background-color: #0faf7d; |
|
border-radius: 2px; |
|
&.fall { |
|
background-color: #db4154; |
|
} |
|
} |
|
} |
|
.header{ |
|
z-index: 2; |
|
position: relative; |
|
width: 100%; |
|
height: 80px; |
|
padding:0 20px; |
|
} |
|
.bg_header{ |
|
width: 100%; |
|
height: 80px; |
|
background: url(../../assets/img/screen/screen2.png) no-repeat; |
|
background-size: 100% 100%; |
|
} |
|
.t_title{ |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
font-size: 2.5em; |
|
line-height: 80px; |
|
color: #fff; |
|
} |
|
$height: 250px; |
|
.content{ |
|
display: flex; |
|
padding: 20px; |
|
.left, .right { |
|
min-width: 300px; |
|
width: 24%; |
|
} |
|
.middle { |
|
width: 913px; |
|
min-width: 913px; |
|
margin: 0 30px; |
|
overflow: hidden; |
|
} |
|
.item { |
|
position: relative; |
|
height: $height; |
|
margin-bottom: 30px; |
|
border: 1px solid #2C58A6; |
|
box-shadow: 0 0 10px #2C58A6; |
|
} |
|
} |
|
.chart { |
|
height: $height; |
|
} |
|
.popular-wrap { |
|
height: 170px; |
|
margin-top: 45px; |
|
overflow: auto; |
|
&::-webkit-scrollbar-thumb { |
|
display: none; |
|
} |
|
} |
|
.list { |
|
padding: 0 15px; |
|
margin-top: 25px; |
|
overflow: auto; |
|
li { |
|
position: relative; |
|
padding: 10px 10px; |
|
&:nth-child(2) { |
|
.index { |
|
background-color: #67a0ff; |
|
} |
|
} |
|
&:nth-child(3) { |
|
.index { |
|
background-color: #2b71ff; |
|
} |
|
} |
|
&:nth-child(4) { |
|
.index { |
|
background-color: #8c2bff; |
|
} |
|
} |
|
&:nth-child(5) { |
|
.index { |
|
background-color: #ff612b; |
|
} |
|
} |
|
&:nth-child(6) { |
|
.index { |
|
background-color: #4152f1; |
|
} |
|
} |
|
&:nth-child(7) { |
|
.index { |
|
background-color: #d14cc9; |
|
} |
|
} |
|
&:nth-child(8) { |
|
.index { |
|
background-color: #f52c8d; |
|
} |
|
} |
|
&:nth-child(9) { |
|
.index { |
|
background-color: #f1561b; |
|
} |
|
} |
|
&:nth-child(10) { |
|
.index { |
|
background-color: #f50000; |
|
} |
|
} |
|
} |
|
&.popular { |
|
margin-top: 0; |
|
li:nth-child(odd) { |
|
background-color: #072951; |
|
box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset; |
|
} |
|
} |
|
.index { |
|
position: absolute; |
|
width: 20px; |
|
line-height: 20px; |
|
color: #fff; |
|
font-size: 12px; |
|
text-align: center; |
|
border-radius: 50%; |
|
background-color: #2defe2; |
|
} |
|
.text { |
|
width: 60%; |
|
margin: 0 auto; |
|
color: #61d2f7; |
|
text-align: center; |
|
@include ellipsis; |
|
} |
|
.icon { |
|
position: absolute; |
|
top: 10px; |
|
right: 10%; |
|
} |
|
} |
|
.main_title{ |
|
display: flex; |
|
align-items: center; |
|
height: 35px; |
|
line-height: 33px; |
|
background-color: #2C58A6; |
|
border-radius: 18px; |
|
position: absolute; |
|
top: -17px; |
|
left: 50%; |
|
color:#fff; |
|
font-size: 18px; |
|
font-weight: 600; |
|
white-space: nowrap; |
|
padding: 0 20px; |
|
z-index: 1000; |
|
text-align: center; |
|
transform: translateX(-50%); |
|
img { |
|
margin-right: 10px; |
|
} |
|
}
|
|
|