update baselayout

src/components/common/SmallBox2.vue

@@ -59,38 +59,38 @@ export default {
 	flex-shrink: 0;
 	padding: 0;
 	user-select: none;
-	width: adjust(w(820px));
+	width: 744px;
-	height: adjust(h(350px));
+	height: 366px;
 	display: flex;
 	background: url(../../assets/top-middle.png) no-repeat;
 	background-size: 100% 100%;
 	background-position: bottom;
 
 	.icon {
-		margin-top: adjust(h(56px));
+		margin-top: 48px;
-		margin-left: adjust(w(24px));
+		margin-left: 48px;
-		width: adjust(h(172px));
+		width: 172px;
-		height: adjust(h(172px));
+		height: 172px;
 	}
 	
 	.info {
-		margin-top: adjust(h(56px));
+		margin-top: 56px;
 		flex: 1 auto;
 		font-family: "微软雅黑", sans-serif;
-		padding-left: adjust(5px);
+		padding-left: 12px;
-
 		h2 {
-			font-size: adjust(12px);
+			font-size: 54px;
+			line-height: 48px;
 			opacity: 0.7;
-			letter-spacing: adjust(1px);
+			letter-spacing: 2px;
 			font-weight: 400;
 			color: hsla(0, 0%, 0%, 0.9);
 		}
 
 		.value {
 			color: #030609;
-			font-size: adjust(18px);
+			font-size: 96px;
-			line-height: adjust(22px);
+			line-height: 98px;
 		}
 	}
 }

src/components/groups/environ.vue

@@ -1,7 +1,5 @@
 <template>
-  <section class="environ-analysis">
+	<section class="environ-analysis"></section>
-
-  </section>
 </template>
 
 <script>
@@ -24,24 +22,38 @@ export default {
 @import "../../assets/styles/functions";
 
 section {
-  background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
+	width: 1920px;
-  width: adjust(w(1900px));
+	height: 1080px;
-  height: adjust(h(1260px));
 	position: absolute;
-  top: adjust(h(430px));
+	top: 490px;
-  // left: adjust(w(15300px));
+	right: 0;
-  left: adjust(w(15500px));
+  background: #ccc3;
 }
 
 section::before {
-  content: '环境浓度';
+	content: "环境浓度";
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
-  font-size: adjust(h(64px));
+		Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+		"微软雅黑", Arial, Helvetica, sans-serif;
+	font-size: 80px;
 	font-weight: 400;
-  letter-spacing: 1px;
+	letter-spacing: 2px;
 	position: absolute;
 	color: $main-color;
-  top: 0;
+	top: -128px;
+	left: 0;
+}
+
+section::after {
+	content: "";
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	background: url("../../assets/fault-analysis.png") left 360px top 18px / 90%
+		no-repeat;
+	position: absolute;
+	color: $main-color;
+	top: -128px;
 	left: 0;
 }
 </style>

src/components/icons/clockSvg.vue

@@ -1,7 +1,5 @@
 <template>
 	<svg
-		:width="adjust('64px')"
-		:height="adjust('64px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/fireSvg.vue

@@ -1,7 +1,5 @@
 <template>
 	<svg
-		:width="adjust('46px')"
-		:height="adjust('46px')"
 		viewBox="0 0 96 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/sandSvg.vue

@@ -1,7 +1,5 @@
 <template>
 	<svg
-		:width="adjust('46px')"
-		:height="adjust('46px')"
 		viewBox="0 0 95 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/switchSvg.vue

@@ -1,7 +1,5 @@
 <template>
 	<svg
-		:width="adjust('46px')"
-		:height="adjust('46px')"
 		viewBox="0 0 122 122"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/icons/tempSvg.vue

@@ -1,7 +1,5 @@
 <template>
 	<svg
-		:width="adjust('46px')"
-		:height="adjust('46px')"
 		viewBox="0 0 94 96"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"

src/components/isolate-area-1/Area.vue

@@ -3,18 +3,28 @@
 		<div class="data pressure">
 			<span>压</span>
 			<span>力</span>
-      <span v-for="press, index in pressure" :key="index"
+			<span
-        :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ press
+				v-for="(press, index) in pressure"
-        }}</span>
+				:key="index"
+				:class="{ digit: true, dot: press == '.' ? true : false }"
+				>{{ press }}</span
+			>
 			<span>Pa</span>
 		</div>
-    <SmallBox2 class="data-center" v-for="rd in rdata" :key="rd.icon" :icon="rd.icon" :title="rd.title" :value="rd.value"></SmallBox2>
+		<SmallBox2
-    <div class="data runtime">
+			class="data-center"
+			v-for="rd in rdata"
+			:key="rd.icon"
+			:icon="rd.icon"
+			:title="rd.title"
+			:value="rd.value"
+		></SmallBox2>
+		<!-- <div class="data runtime">
       <span>运</span>
       <span>行</span>
       <span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
       <span>天</span>
-    </div>
+    </div> -->
 	</DragabbleContainer>
 </template>
 
@@ -23,15 +33,15 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
 import SmallBox2 from "../common/SmallBox2.vue";
 import { mapState } from "vuex";
 
-let timeFun = null
+let timeFun = null;
 
 export default {
 	name: "IsolateArea--1",
 	components: { DragabbleContainer, SmallBox2 },
 	data() {
 		return {
-      pressure: '10.1'.split(''),
+			pressure: "10.1".split(""),
-      runtime: '0012'.split(''),
+			runtime: "0012".split(""),
 			rdata: [
 				// { icon: "temp", title: "车间温度", value: "27℃" },
 				{ icon: "fire", title: "当前火向", value: "" },
@@ -42,26 +52,26 @@ export default {
 	},
 	watch: {
 		fireDirection: function (val) {
-      this.$set(this.rdata[0], 'value', val)
+			this.$set(this.rdata[0], "value", val);
 		},
 		fireChangeTime: function (val) {
-      this.$set(this.rdata[1], 'value', val)
+			this.$set(this.rdata[1], "value", val);
 		},
 		lastFireChangeTime: function (val) {
-      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
+			let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
-      if (timeFun) clearInterval(timeFun)
+			if (timeFun) clearInterval(timeFun);
 			timeFun = setInterval(() => {
-        if (sec > 0) sec -= 1
+				if (sec > 0) sec -= 1;
 				else {
 					if (min > 0) {
-            sec = 59
+						sec = 59;
-            min -= 1
+						min -= 1;
 					} else {
-            if (timeFun) clearInterval(timeFun)
+						if (timeFun) clearInterval(timeFun);
 					}
 				}
-        this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
+				this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
-      }, 1000)
+			}, 1000);
 		},
 	},
 	computed: {
@@ -77,11 +87,11 @@ export default {
 	display: flex;
 	color: $main-color;
 	min-width: 300px;
-  align-items: center;
+	align-items: flex-end;
 
 	> *:not(:last-child) {
 		margin: {
-      right: adjust(10px);
+			right: 128px;
 		}
 	}
 
@@ -94,23 +104,24 @@ export default {
 
 	> .data > span:not(.dot) {
 		/** 边框 */
-    background: url('../../assets/digitbox1.png') no-repeat;
+		background: url("../../assets/digitbox1.png") no-repeat;
 		background-size: 100% 100%;
 		display: inline-block;
-    width: adjust(w(220px));
+		width: 228px;
-    height: adjust(h(260px));
+		height: 299px;
 		color: #0068ffaa;
-    font-size: h(200px);
+		font-size: 142px;
-    line-height: h(600px);
+		line-height: 328px;
 		text-align: center;
 		vertical-align: bottom;
+		user-select: none;
 	}
 
 	> .data > span.digit {
 		/** 数字字体大小 */
 		color: #0071ff;
-    font-size: h(360px);
+		font-size: 242px;
-    line-height: h(540px);
+		line-height: 286px;
 	}
 }
 </style>

src/components/isolate-area-1/Runtime.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="data runtime">
+		<span>运</span>
+		<span>行</span>
+		<span
+			v-for="(val, index) in runtime"
+			:key="index"
+			:class="{ digit: true, dot: press == '.' ? true : false }"
+			>{{ val }}</span
+		>
+		<span>天</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "RuntimeComp",
+	props: {},
+	data() {
+		return {
+			runtime: "0012".split(""),
+		};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.runtime {
+  width: 1920px;
+}
+
+.data {
+  padding: 0 32px;
+	font-family: zcoolqingkehuangyouti-Regular, sans-serif;
+	display: flex;
+	align-items: center;
+  justify-content: space-between;
+}
+
+.data > span:not(.dot) {
+	/** 边框 */
+	background: url("../../assets/digitbox1.png") no-repeat;
+	background-size: 100% 100%;
+	display: inline-block;
+	width: 280px;
+	height: 360px;
+	color: #0068ffaa;
+	font-size: 160px;
+	line-height: 380px;
+	text-align: center;
+	vertical-align: bottom;
+	user-select: none;
+}
+
+.data > span.digit {
+	/** 数字字体大小 */
+	color: #0071ff;
+	font-size: 280px;
+	line-height: 350px;
+}
+</style>

src/components/layout/Main.vue

@@ -14,7 +14,7 @@
 
 		<div class="video-crash" v-if="false"></div>
 
-		<div class="eq-main absolute">
+		<!-- <div class="eq-main absolute">
 			<div class="arrow ar-top-left" :class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
 			<div class="arrow ar-top-right" :class="topRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
 			<div class="arrow ar-bottom-left" :class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
@@ -54,9 +54,10 @@
 				<video id="2" class="video-top" preload="auto" height="130" muted autoplay loop disablepictureinpicture
 					src="../../assets/videos/fire-to-bottom.mp4"></video>
 			</div>
-		</div>
+		</div> -->
 
 		<AreaOne class="area-one" />
+		<Runtime class="runtime" />
 		<InWater />
 		<OutWater />
 
@@ -67,6 +68,7 @@
 import InWater from "../boxes/InWater.vue";
 import OutWater from "../boxes/OutWater.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
+import Runtime from "../isolate-area-1/Runtime.vue";
 import MonitorGroup2 from '../groups/monitor2.vue'
 import DataGroup from '../groups/data.vue'
 import FaultAnalysis from '../groups/fault.vue'
@@ -78,6 +80,7 @@ import WsClient from "../../utils/wsClass";
 export default {
 	name: "Main",
 	components: {
+		Runtime,
 		DataGroup,
 		MonitorGroup2,
 		Environ,
@@ -125,8 +128,14 @@ main {
 
 .area-one {
 	position: absolute;
-	top: adjust(150px);
+	top: 124px;
-	left: adjust(1310px);
+	left: 3910px;
+}
+
+.runtime {
+	position: absolute;
+	top: 0;
+	right: 0;
 }
 
 .video-crash {