@@ -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)); | |||||
height: adjust(h(364px)); | |||||
width: adjust(w(440px)); | |||||
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)); | |||||
height: adjust(h(364px)); | |||||
width: adjust(w(440px)); | |||||
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: "单位/℃", | |||||
nameTextStyle: { | |||||
color: "#fff9", | |||||
fontSize: adjust(8), | |||||
align: "right", | |||||
}, | |||||
// name: "单位/℃", | |||||
// nameTextStyle: { | |||||
// color: "#fff9", | |||||
// fontSize: adjust(8), | |||||
// 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)); | |||||
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; | background: url("../../assets/company.png") center/cover no-repeat; | ||||
} | } | ||||
.datetime { | .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; | 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); | |||||
width: adjust(16px); | |||||
height: adjust(17px); | |||||
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: "站酷庆科黄油体"; | |||||
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; | box-sizing: border-box; | ||||
} | } | ||||