parent
3fa6e01694
commit
3147bada16
10 changed files with 2398 additions and 145 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@ |
||||
export default { |
||||
path: `/screenShowPro`, |
||||
name: 'screenShowPro', |
||||
component: () => import('@/pages/screenShow/indexPro'), |
||||
meta: { title: '数据看板' } |
||||
} |
||||
@ -0,0 +1,443 @@ |
||||
@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%; |
||||
background-color: #1d360c; |
||||
overflow: auto; |
||||
.full { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 30px; |
||||
cursor: pointer; |
||||
transition: 0.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; |
||||
} |
||||
.pics { |
||||
.pic-wrap { |
||||
width: 100%; |
||||
height: 525px; |
||||
overflow: hidden; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 560px; |
||||
background: url(../../assets/img/screenShow/1.jpg) no-repeat; |
||||
} |
||||
} |
||||
.earth { |
||||
z-index: 0; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
img { |
||||
position: absolute; |
||||
top: 52%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
opacity: 0.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: 0.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, 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: 57px; |
||||
} |
||||
} |
||||
.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; |
||||
font-weight: 600; |
||||
line-height: 80px; |
||||
color: #fff; |
||||
} |
||||
$height: 344px; |
||||
.content { |
||||
display: flex; |
||||
padding: 20px; |
||||
.left, |
||||
.right { |
||||
min-width: 300px; |
||||
width: 30%; |
||||
} |
||||
.middle { |
||||
min-width: calc((40% - 60px)); |
||||
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: rgba(26, 104, 0, 0.9); |
||||
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