mt-fe-group
/
dezhou-screen
7
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

update reverse page left to right

master
lb vor 1 Jahr
Ursprung
a3e5119206
Commit
70803f2604
1 geänderte Dateien mit 202 neuen und 187 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +202
    -187
      src/components/layout/Main.vue

+ 202
- 187
src/components/layout/Main.vue Datei anzeigen

@@ -1,69 +1,69 @@
<template>
<main class="">
<div class="video-crash" v-if="false"></div>
<main class="">
<div class="video-crash" v-if="false"></div>

<div class="eq-main absolute">
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
<video
id="1"
preload="auto"
height="200"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"
></video>
</div>
<div class="eq-main absolute">
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
<video
id="1"
preload="auto"
height="200"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"
></video>
</div>

<div class="video-top" v-show="fireDirection === '南火'" style="">
<video
id="2"
class="video-top"
preload="auto"
height="200"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div>
</div>
<div class="video-top" v-show="fireDirection === '南火'" style="">
<video
id="2"
class="video-top"
preload="auto"
height="200"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div>
</div>

<AreaOne class="area-one" />
<AreaOne class="area-one" />

<div class="absolute left kiln-runtime">
<KilnRuntime />
</div>
<div class="absolute left kiln-pressure">
<KilnPressure />
</div>
<div class="absolute left fan-runtime">
<FanRuntime />
</div>
<div class="absolute left oil-flow">
<OilFlow />
</div>
<div class="absolute left gas-flow">
<GasFlow />
</div>
<div class="absolute left top-temp">
<TopTemp />
</div>
<div class="absolute left bottom-temp">
<BottomTemp />
</div>
<div class="absolute left ou-temp">
<XicaoTemp />
</div>
<div class="absolute in-water">
<InWater />
</div>
<div class="absolute out-water">
<OutWater />
</div>
</main>
<div class="absolute left kiln-runtime">
<KilnRuntime />
</div>
<div class="absolute left kiln-pressure">
<KilnPressure />
</div>
<div class="absolute left fan-runtime">
<FanRuntime />
</div>
<div class="absolute left oil-flow">
<OilFlow />
</div>
<div class="absolute left gas-flow">
<GasFlow />
</div>
<div class="absolute left top-temp">
<TopTemp />
</div>
<div class="absolute left bottom-temp">
<BottomTemp />
</div>
<div class="absolute left ou-temp">
<XicaoTemp />
</div>
<div class="absolute in-water">
<InWater />
</div>
<div class="absolute out-water">
<OutWater />
</div>
</main>
</template>

<script>
@@ -84,38 +84,38 @@ import { mapMutations, mapState } from "vuex";
import WsClient from "../../utils/wsClass";

export default {
name: "Main",
components: {
AreaOne,
KilnRuntime,
KilnPressure,
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
XicaoTemp,
InWater,
OutWater,
},
props: {},
data() {
return {};
},
computed: mapState(["kilnPressure", "fireDirection"]),
mounted() {
const wsc = new WsClient(this);
wsc.registerListeners();
},
// watch: {
// // works
// 'kilnTop1': val => {
// console.log('val', val)
// }
// },
methods: {
...mapMutations(["update"]),
},
name: "Main",
components: {
AreaOne,
KilnRuntime,
KilnPressure,
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
XicaoTemp,
InWater,
OutWater,
},
props: {},
data() {
return {};
},
computed: mapState(["kilnPressure", "fireDirection"]),
mounted() {
const wsc = new WsClient(this);
wsc.registerListeners();
},
// watch: {
// // works
// 'kilnTop1': val => {
// console.log('val', val)
// }
// },
methods: {
...mapMutations(["update"]),
},
};
</script>

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

Verfassen Vorschau
Laden…
Abbrechen
Speichern