diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 4956fd3..7074d2d 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -1,69 +1,69 @@
-
-
+
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -123,152 +123,167 @@ export default {
@import "../../assets/styles/functions";
main {
- height: 1px;
- flex: 1;
- // background: #eee2;
+ height: 1px;
+ flex: 1;
+ // background: #eee2;
}
.area-one {
- position: absolute;
- top: adjust(160px);
- left: adjust(1588px);
+ position: absolute;
+ top: adjust(160px);
+ 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;
+ 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(178px);
- left: adjust(16px);
- transform: scale(.9, .57);
+ position: absolute;
+ bottom: adjust(178px);
+ left: adjust(16px);
+ transform: scale(0.9, 0.57);
}
.video-top {
- position: absolute;
- top: adjust(44px);
- left: adjust(22px);
- transform: scale(.95, .9);
+ position: absolute;
+ top: adjust(44px);
+ left: adjust(22px);
+ transform: scale(0.95, 0.9);
}
.eq-main {
- width: adjust(w(7150px));
- height: adjust(h(960px));
- background: url(../../assets/eq.png) no-repeat;
- background-size: 100%;
- top: adjust(170px);
- left: adjust(380px);
- position: relative;
- transform: rotateY(0.5turn);
+ width: adjust(w(7150px));
+ height: adjust(h(960px));
+ background: url(../../assets/eq.png) no-repeat;
+ background-size: 100%;
+ top: adjust(170px);
+ left: adjust(380px);
+ position: relative;
+ transform: rotateY(0.5turn);
}
.eq-main::before {
- content: "";
- position: absolute;
- // right: adjust(1200px);
- opacity: 0;
- top: adjust(125px);
- width: adjust(150px);
- height: adjust(150px);
- background: url(../../assets/mirror.png) no-repeat;
- background-size: 100% 100%;
- animation: 10s linear 0.3s infinite mirror-to-left-2;
+ content: "";
+ position: absolute;
+ // right: adjust(1200px);
+ opacity: 0;
+ top: adjust(125px);
+ width: adjust(150px);
+ height: adjust(150px);
+ background: url(../../assets/mirror.png) no-repeat;
+ background-size: 100% 100%;
+ animation: 10s linear 0.3s infinite mirror-to-left-2;
}
.eq-main::after {
- content: "";
- position: absolute;
- // right: adjust(1200px);
- opacity: 0;
- top: adjust(125px);
- width: adjust(150px);
- height: adjust(150px);
- background: url(../../assets/mirror.png) no-repeat;
- background-size: 100% 100%;
- animation: 10s linear 5s infinite mirror-to-left;
+ content: "";
+ position: absolute;
+ // right: adjust(1200px);
+ opacity: 0;
+ top: adjust(125px);
+ width: adjust(150px);
+ height: adjust(150px);
+ background: url(../../assets/mirror.png) no-repeat;
+ background-size: 100% 100%;
+ animation: 10s linear 5s infinite mirror-to-left;
}
@keyframes mirror-to-left {
- 0% {
- right: adjust(1200px);
- opacity: 1;
- }
- 90% {
- opacity: 1;
- }
- 100% {
- right: adjust(60px);
- }
+ 0% {
+ right: adjust(1200px);
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ right: adjust(60px);
+ }
}
@keyframes mirror-to-left-2 {
- 0% {
- right: adjust(1200px);
- opacity: 1;
- }
- 90% {
- opacity: 1;
- }
- 100% {
- right: adjust(60px);
- }
+ 0% {
+ right: adjust(1200px);
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ right: adjust(60px);
+ }
}
.kiln-runtime {
- top: adjust(h(200px));
- left: adjust(w(60px));
+ top: adjust(h(200px));
+ // left: adjust(w(60px));
+ left: adjust(w(8110px));
}
.kiln-pressure {
- top: adjust(h(610px));
- left: adjust(w(60px));
+ top: adjust(h(610px));
+ // left: adjust(w(60px));
+ left: adjust(w(8110px));
}
.fan-runtime {
- top: adjust(h(1020px));
- left: adjust(w(60px));
+ top: adjust(h(1020px));
+ // left: adjust(w(60px));
+ left: adjust(w(8110px));
}
.oil-flow {
- top: adjust(h(1588px));
- left: adjust(w(60px));
+ top: adjust(h(1588px));
+ // left: adjust(w(60px));
+ // left: adjust(w(460px));
+ left: adjust(w(880px));
}
.gas-flow {
- top: adjust(h(1588px));
- left: adjust(w(1660px));
+ top: adjust(h(1588px));
+ // left: adjust(w(1660px));
+ left: adjust(w(2500px));
}
+
.top-temp {
- top: adjust(h(1588px));
- left: adjust(w(3260px));
+ top: adjust(h(1588px));
+ // left: adjust(w(3260px));
+ left: adjust(w(4110px));
}
+
.bottom-temp {
- top: adjust(h(1588px));
- left: adjust(w(4860px));
+ top: adjust(h(1588px));
+ // left: adjust(w(4860px));
+ left: adjust(w(5720px));
}
+
.ou-temp {
- top: adjust(h(1588px));
- left: adjust(w(6460px));
+ top: adjust(h(1588px));
+ left: adjust(w(7330px));
+ // left: adjust(w(6460px));
}
+
.in-water {
- top: adjust(h(200px));
- left: adjust(w(8096px));
- // left: w(5096px);
- z-index: 100;
+ top: adjust(h(200px));
+ left: adjust(w(40px));
+ // left: adjust(w(8096px));
+ // // left: w(5096px);
+ z-index: 100;
}
.out-water {
- top: adjust(h(1177px));
- left: adjust(w(8096px));
- // left: w(5096px);
- z-index: 100;
+ top: adjust(h(1177px));
+ left: adjust(w(40px));
+ // left: adjust(w(8096px));
+ // left: w(5096px);
+ z-index: 100;
}