update reverse page left to right
This commit is contained in:
lb
父節點
a3e5119206
當前提交
70803f2604
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user