This commit is contained in:
g7hoo 2023-05-13 12:00:31 +08:00
parent bfc5dca853
commit d1ba6ffe61
16 changed files with 66 additions and 34 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/tv.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/video-crash.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

View File

@ -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;

View File

@ -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%;
} }

View File

@ -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%;
} }

View File

@ -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: {

View File

@ -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: {

View File

@ -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);
} }

View File

@ -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>

View File

@ -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 {

View File

@ -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;

View File

@ -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;
} }