parent
6de1bfc0ed
commit
adbef4c7ad
30 changed files with 1835 additions and 238 deletions
|
After Width: | Height: | Size: 205 B |
|
After Width: | Height: | Size: 356 B |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1005 KiB |
|
After Width: | Height: | Size: 365 B |
|
After Width: | Height: | Size: 365 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 351 B |
|
After Width: | Height: | Size: 345 B |
|
After Width: | Height: | Size: 208 B |
|
After Width: | Height: | Size: 929 B |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@ |
|||||||
|
export default { |
||||||
|
path: `/screen`, |
||||||
|
name: 'screen', |
||||||
|
component: () => import('@/pages/screen'), |
||||||
|
meta: { title: '数据看板' } |
||||||
|
} |
||||||
@ -0,0 +1,429 @@ |
|||||||
|
@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: -500px; |
||||||
|
width: 100vw; |
||||||
|
// 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; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue