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