update adjust
This commit is contained in:
lb
@@ -45,8 +45,8 @@ export default {
|
||||
|
||||
.number-or-date {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(375px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(375px));
|
||||
background: url(../../assets/box-number.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@@ -54,8 +54,8 @@ export default {
|
||||
|
||||
.tables {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(528px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(528px));
|
||||
background: url(../../assets/box-table.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@@ -63,8 +63,8 @@ export default {
|
||||
|
||||
.charts {
|
||||
display: inline-block;
|
||||
width: w(1580px);
|
||||
height: h(520px);
|
||||
width: adjust(w(1580px));
|
||||
height: adjust(h(520px));
|
||||
background: url(../../assets/box-chart.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@@ -72,8 +72,8 @@ export default {
|
||||
|
||||
.number-and-chart {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(931px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(931px));
|
||||
background: url(../../assets/box-right.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
|
||||
@@ -24,29 +24,29 @@ export default {
|
||||
header {
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 105%;
|
||||
height: h(280px);
|
||||
width: $actual_width;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: adjust(20px);
|
||||
|
||||
.header--logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: adjust(56px);
|
||||
height: adjust(56px);
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 20px;
|
||||
font-size: 35px;
|
||||
// line-height: 100px;
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
user-select: none;
|
||||
letter-spacing: 8px;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
// color: #6bf2ff;
|
||||
color: $main-color;
|
||||
@@ -57,19 +57,19 @@ header {
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
height: h(78px);
|
||||
bottom: adjust(10px);
|
||||
height: adjust(h(78px));
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: w(1420px);
|
||||
width: w(1460px);
|
||||
margin-left: adjust(w(1420px));
|
||||
width: adjust(w(1460px));
|
||||
background: url("../../assets/company.png") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
margin-left: w(6050px);
|
||||
width: w(1407px);
|
||||
margin-left: adjust(w(6050px));
|
||||
width: adjust(w(1407px));
|
||||
background: url("../../assets/date.png") center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,11 @@
|
||||
<template>
|
||||
<main class="">
|
||||
<div class="eq-main absolute">
|
||||
<!-- style="
|
||||
position: absolute;
|
||||
top: 224px;
|
||||
left: 59px;
|
||||
transform: scale(1, 1.05);
|
||||
width: 360px;
|
||||
height: 100px;
|
||||
" -->
|
||||
<div
|
||||
class="video-bottom"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
left: 64px;
|
||||
transform: scale(1.02, 1.05);
|
||||
"
|
||||
>
|
||||
<div class="video-bottom" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
height="100"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
@@ -30,20 +14,12 @@
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="video-bottom"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 131px;
|
||||
left: 72px;
|
||||
transform: scale(1.02, 1.05);
|
||||
"
|
||||
>
|
||||
<div class="video-top" style="">
|
||||
<video
|
||||
id="2"
|
||||
class="video-top"
|
||||
preload="auto"
|
||||
height="100"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
@@ -51,10 +27,9 @@
|
||||
src="../../assets/videos/fire-to-bottom.mp4"
|
||||
></video>
|
||||
</div>
|
||||
<!-- style="position: absolute; top: 0; left: 0; transform: scale(1, 1.05) width: 360px; height: 100px;" -->
|
||||
</div>
|
||||
|
||||
<AreaOne style="position: absolute; top: 160px; left: 1588px" />
|
||||
<AreaOne class="area-one" />
|
||||
|
||||
<div class="absolute left kiln-runtime">
|
||||
<KilnRuntime />
|
||||
@@ -139,73 +114,93 @@ main {
|
||||
// background: #eee2;
|
||||
}
|
||||
|
||||
.area-one {
|
||||
position: absolute;
|
||||
top: adjust(160px);
|
||||
left: adjust(1588px);
|
||||
}
|
||||
|
||||
.video-bottom {
|
||||
position: absolute;
|
||||
bottom: adjust(153.5px);
|
||||
left: adjust(63.5px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.video-top {
|
||||
position: absolute;
|
||||
top: adjust(64px);
|
||||
left: adjust(35px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.eq-main {
|
||||
width: w(7150px);
|
||||
height: h(960px);
|
||||
width: adjust(w(7150px));
|
||||
height: adjust(h(960px));
|
||||
background: url(../../assets/eq.png) no-repeat;
|
||||
background-size: 100%;
|
||||
top: 170px;
|
||||
left: 380px;
|
||||
top: adjust(170px);
|
||||
left: adjust(380px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eq-main::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 1000px;
|
||||
top: 164px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
right: adjust(1000px);
|
||||
top: adjust(164px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.kiln-runtime {
|
||||
top: h(200px);
|
||||
left: w(60px);
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.kiln-pressure {
|
||||
top: h(610px);
|
||||
left: w(60px);
|
||||
top: adjust(h(610px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.fan-runtime {
|
||||
top: h(1020px);
|
||||
left: w(60px);
|
||||
top: adjust(h(1020px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.oil-flow {
|
||||
top: h(1588px);
|
||||
left: w(60px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.gas-flow {
|
||||
top: h(1588px);
|
||||
left: w(1660px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(1660px));
|
||||
}
|
||||
.top-temp {
|
||||
top: h(1588px);
|
||||
left: w(3260px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(3260px));
|
||||
}
|
||||
.bottom-temp {
|
||||
top: h(1588px);
|
||||
left: w(4860px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(4860px));
|
||||
}
|
||||
.ou-temp {
|
||||
top: h(1588px);
|
||||
left: w(6460px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(6460px));
|
||||
}
|
||||
.in-water {
|
||||
top: h(200px);
|
||||
left: w(8096px);
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.out-water {
|
||||
top: h(1177px);
|
||||
left: w(8096px);
|
||||
top: adjust(h(1177px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -31,17 +31,19 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
iconClass: {
|
||||
clock: 'icon-clock',
|
||||
docs: 'icon-docs',
|
||||
oil: 'icon-oil',
|
||||
inWater: 'icon-water-in'
|
||||
}
|
||||
clock: "icon-clock",
|
||||
docs: "icon-docs",
|
||||
oil: "icon-oil",
|
||||
inWater: "icon-water-in",
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.sub-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -49,9 +51,9 @@ export default {
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 8px;
|
||||
height: adjust(16px);
|
||||
width: adjust(16px);
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.icon-clock {
|
||||
@@ -75,9 +77,9 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
/* margin: 12px 0; */
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
/* margin: 12px 0; */
|
||||
margin-bottom: adjust(12px);
|
||||
font-size: adjust(16px);
|
||||
color: #72f2ff;
|
||||
font-family: sans-serif;
|
||||
user-select: none;
|
||||
|
||||
Reference in New Issue
Block a user