From 70803f26048c2dc360272c6ae442c30e3b85fcb6 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Mon, 15 May 2023 14:28:07 +0800
Subject: [PATCH] update reverse page left to right

---
 src/components/layout/Main.vue | 389 +++++++++++++++++----------------
 1 file changed, 202 insertions(+), 187 deletions(-)

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 @@
 <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>