update
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 141 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 16 KiB |
BIN
src/assets/tv.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/video-crash.png
Normal file
After Width: | Height: | Size: 111 KiB |
@ -38,7 +38,7 @@ h3 {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: adjust(10px);
|
font-size: adjust(14px);
|
||||||
letter-spacing: adjust(1px);
|
letter-spacing: adjust(1px);
|
||||||
color: #52fff8;
|
color: #52fff8;
|
||||||
margin: adjust(12px) 0;
|
margin: adjust(12px) 0;
|
||||||
|
@ -58,8 +58,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(24px);
|
top: adjust(24px);
|
||||||
right: 0;
|
right: 0;
|
||||||
width: adjust(w(386px));
|
width: adjust(w(440px));
|
||||||
height: adjust(h(364px));
|
height: adjust(h(380px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@ -69,7 +69,7 @@ export default {
|
|||||||
.wave {
|
.wave {
|
||||||
transform: translateX(adjust(-16px));
|
transform: translateX(adjust(-16px));
|
||||||
width: adjust(w(793px));
|
width: adjust(w(793px));
|
||||||
height: adjust(h(72px));
|
height: adjust(h(76px));
|
||||||
background: url(../../assets/inwater.png) no-repeat;
|
background: url(../../assets/inwater.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
@ -58,8 +58,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: adjust(24px);
|
top: adjust(24px);
|
||||||
right: 0;
|
right: 0;
|
||||||
width: adjust(w(386px));
|
width: adjust(w(440px));
|
||||||
height: adjust(h(364px));
|
height: adjust(h(380px));
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@ -69,7 +69,7 @@ export default {
|
|||||||
.wave {
|
.wave {
|
||||||
transform: translateX(adjust(-16px));
|
transform: translateX(adjust(-16px));
|
||||||
width: adjust(w(793px));
|
width: adjust(w(793px));
|
||||||
height: adjust(h(72px));
|
height: adjust(h(76px));
|
||||||
background: url(../../assets/inwater.png) no-repeat;
|
background: url(../../assets/inwater.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
@ -63,16 +63,16 @@ export default {
|
|||||||
this.chart = echarts.init(document.getElementById(this.id));
|
this.chart = echarts.init(document.getElementById(this.id));
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
grid: {
|
grid: {
|
||||||
top: adjust(28),
|
top: adjust(10),
|
||||||
left: adjust(28),
|
left: adjust(28),
|
||||||
bottom: adjust(18),
|
bottom: adjust(18),
|
||||||
right: adjust(12),
|
right: adjust(12),
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: Array(31)
|
data: Array(24)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => index + 1),
|
.map((_, index) => index + 1 + ':00'),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#5982b2a0",
|
color: "#5982b2a0",
|
||||||
@ -85,17 +85,18 @@ export default {
|
|||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
fontSize: adjust(7),
|
fontSize: adjust(7),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
margin: adjust(8),
|
margin: adjust(6),
|
||||||
|
rotate: 30
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "单位/℃",
|
// name: "单位/℃",
|
||||||
nameTextStyle: {
|
// nameTextStyle: {
|
||||||
color: "#fff9",
|
// color: "#fff9",
|
||||||
fontSize: adjust(8),
|
// fontSize: adjust(8),
|
||||||
align: "right",
|
// align: "right",
|
||||||
},
|
// },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
@ -124,7 +124,7 @@ export default {
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
data: Array(24)
|
data: Array(24)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => index + 1),
|
.map((_, index) => index + 1 + ':00'),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#5982b2a0",
|
color: "#5982b2a0",
|
||||||
@ -138,6 +138,7 @@ export default {
|
|||||||
fontSize: adjust(6),
|
fontSize: adjust(6),
|
||||||
lineHeight: adjust(1),
|
lineHeight: adjust(1),
|
||||||
margin: adjust(8),
|
margin: adjust(8),
|
||||||
|
rotate: 30
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
@ -46,7 +46,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.digit {
|
.digit {
|
||||||
font-family: "站酷庆科黄油体", sans-serif;
|
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
||||||
font-size: adjust(32px);
|
font-size: adjust(32px);
|
||||||
line-height: adjust(39px);
|
line-height: adjust(39px);
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<span class="header--logo">
|
<span class="header--logo">
|
||||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||||
</span>
|
</span>
|
||||||
<h1>凯盛晶华玻璃院公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||||
</div>
|
</div>
|
||||||
<span class="header--wing absolute company"></span>
|
<span class="header--wing absolute company"></span>
|
||||||
<span class="header--wing absolute datetime"></span>
|
<span class="header--wing absolute datetime"></span>
|
||||||
@ -23,7 +23,7 @@ export default {
|
|||||||
|
|
||||||
header {
|
header {
|
||||||
background: url(../../assets/header.png) center/contain no-repeat;
|
background: url(../../assets/header.png) center/contain no-repeat;
|
||||||
background-size: 105%;
|
background-size: 100%;
|
||||||
height: adjust(h(280px));
|
height: adjust(h(280px));
|
||||||
width: adjust($actual_width);
|
width: adjust($actual_width);
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -32,10 +32,10 @@ header {
|
|||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: adjust(20px);
|
margin-bottom: adjust(10px);
|
||||||
|
|
||||||
.header--logo {
|
.header--logo {
|
||||||
width: adjust(56px);
|
width: adjust(102px);
|
||||||
height: adjust(56px);
|
height: adjust(56px);
|
||||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||||
}
|
}
|
||||||
@ -62,14 +62,16 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.company {
|
.company {
|
||||||
margin-left: adjust(w(1420px));
|
margin-left: adjust(w(1460px));
|
||||||
width: adjust(w(1460px));
|
width: adjust(w(1320px));
|
||||||
|
height: adjust(h(48px));
|
||||||
background: url("../../assets/company.png") center/cover no-repeat;
|
background: url("../../assets/company.png") center/cover no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.datetime {
|
.datetime {
|
||||||
margin-left: adjust(w(6050px));
|
margin-left: adjust(w(6150px));
|
||||||
width: adjust(w(1407px));
|
width: adjust(w(1320px));
|
||||||
|
height: adjust(h(48px));
|
||||||
background: url("../../assets/date.png") center/cover no-repeat;
|
background: url("../../assets/date.png") center/cover no-repeat;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="">
|
<main class="">
|
||||||
|
<div class="video-crash" v-if="true"></div>
|
||||||
|
|
||||||
<div class="eq-main absolute">
|
<div class="eq-main absolute">
|
||||||
<div class="video-bottom" style="">
|
<div class="video-bottom" style="">
|
||||||
<video
|
<video
|
||||||
@ -146,6 +148,17 @@ main {
|
|||||||
left: adjust(1588px);
|
left: adjust(1588px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.video-crash {
|
||||||
|
height: adjust(h(424px));
|
||||||
|
width: adjust(w(800px));
|
||||||
|
background: url(../../assets/tv.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 356px;
|
||||||
|
left: 1580px;
|
||||||
|
}
|
||||||
|
|
||||||
.video-bottom {
|
.video-bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: adjust(153.5px);
|
bottom: adjust(153.5px);
|
||||||
@ -168,17 +181,31 @@ main {
|
|||||||
top: adjust(170px);
|
top: adjust(170px);
|
||||||
left: adjust(380px);
|
left: adjust(380px);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transform: rotateY(0.5turn);
|
||||||
}
|
}
|
||||||
|
|
||||||
.eq-main::after {
|
.eq-main::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: adjust(1000px);
|
right: adjust(1200px);
|
||||||
top: adjust(164px);
|
top: adjust(164px);
|
||||||
width: adjust(150px);
|
width: adjust(150px);
|
||||||
height: adjust(150px);
|
height: adjust(150px);
|
||||||
background: url(../../assets/mirror.png) no-repeat;
|
background: url(../../assets/mirror.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
animation: 10s linear .3s infinite mirror-to-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mirror-to-left {
|
||||||
|
0% {
|
||||||
|
right: adjust(1200px);
|
||||||
|
}
|
||||||
|
// 50% {
|
||||||
|
// right: adjust(800px);
|
||||||
|
// }
|
||||||
|
100% {
|
||||||
|
right: adjust(60px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.kiln-runtime {
|
.kiln-runtime {
|
||||||
|
@ -51,8 +51,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
height: adjust(16px);
|
height: adjust(17px);
|
||||||
width: adjust(16px);
|
width: adjust(17px);
|
||||||
margin-right: adjust(8px);
|
margin-right: adjust(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -79,7 +79,7 @@ export default {
|
|||||||
.title {
|
.title {
|
||||||
/* margin: 12px 0; */
|
/* margin: 12px 0; */
|
||||||
margin-bottom: adjust(12px);
|
margin-bottom: adjust(12px);
|
||||||
font-size: adjust(16px);
|
font-size: adjust(17px);
|
||||||
color: #72f2ff;
|
color: #72f2ff;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "站酷庆科黄油体";
|
font-family: 'zcoolqingkehuangyouti-Regular';
|
||||||
src: url(./assets/fonts/zkqkhy.ttf);
|
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|