diff --git a/src/assets/top-middle.png b/src/assets/top-middle.png
index f4025f8..8719494 100644
Binary files a/src/assets/top-middle.png and b/src/assets/top-middle.png differ
diff --git a/src/components/common/SmallBox2.vue b/src/components/common/SmallBox2.vue
index 8bb68de..f6fa384 100644
--- a/src/components/common/SmallBox2.vue
+++ b/src/components/common/SmallBox2.vue
@@ -59,38 +59,38 @@ export default {
 	flex-shrink: 0;
 	padding: 0;
 	user-select: none;
-	width: adjust(w(820px));
-	height: adjust(h(350px));
+	width: 744px;
+	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-left: adjust(w(24px));
-		width: adjust(h(172px));
-		height: adjust(h(172px));
+		margin-top: 48px;
+		margin-left: 48px;
+		width: 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);
-			line-height: adjust(22px);
+			font-size: 96px;
+			line-height: 98px;
 		}
 	}
 }
diff --git a/src/components/groups/environ.vue b/src/components/groups/environ.vue
index 338a78e..d40df69 100644
--- a/src/components/groups/environ.vue
+++ b/src/components/groups/environ.vue
@@ -1,22 +1,20 @@
 <template>
-  <section class="environ-analysis">
-
-  </section>
+	<section class="environ-analysis"></section>
 </template>
 
 <script>
 // import { mapState } from "vuex";
 
 export default {
-  name: "EnviroAnalysis",
-  props: {},
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {
-    // ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
+	name: "EnviroAnalysis",
+	props: {},
+	components: {},
+	data() {
+		return {};
+	},
+	computed: {
+		// ...mapState(["kilnWaterIn", "waterInTemp"]),
+	},
 };
 </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: adjust(w(1900px));
-  height: adjust(h(1260px));
-  position: absolute;
-  top: adjust(h(430px));
-  // left: adjust(w(15300px));
-  left: adjust(w(15500px));
+	width: 1920px;
+	height: 1080px;
+	position: absolute;
+	top: 490px;
+	right: 0;
+  background: #ccc3;
 }
 
 section::before {
-  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-size: adjust(h(64px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  position: absolute;
-  color: $main-color;
-  top: 0;
-  left: 0;
+	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-size: 80px;
+	font-weight: 400;
+	letter-spacing: 2px;
+	position: absolute;
+	color: $main-color;
+	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>
diff --git a/src/components/icons/clockSvg.vue b/src/components/icons/clockSvg.vue
index bf4a6cf..12e0cbb 100644
--- a/src/components/icons/clockSvg.vue
+++ b/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"
diff --git a/src/components/icons/fireSvg.vue b/src/components/icons/fireSvg.vue
index aa6cb5d..cc0bc9c 100644
--- a/src/components/icons/fireSvg.vue
+++ b/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"
diff --git a/src/components/icons/sandSvg.vue b/src/components/icons/sandSvg.vue
index e64480e..a47c6be 100644
--- a/src/components/icons/sandSvg.vue
+++ b/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"
diff --git a/src/components/icons/switchSvg.vue b/src/components/icons/switchSvg.vue
index cf31a95..9a0af21 100644
--- a/src/components/icons/switchSvg.vue
+++ b/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"
diff --git a/src/components/icons/tempSvg.vue b/src/components/icons/tempSvg.vue
index bd0600a..7a2f578 100644
--- a/src/components/icons/tempSvg.vue
+++ b/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"
diff --git a/src/components/isolate-area-1/Area.vue b/src/components/isolate-area-1/Area.vue
index 63ce0e5..df43bbc 100644
--- a/src/components/isolate-area-1/Area.vue
+++ b/src/components/isolate-area-1/Area.vue
@@ -1,21 +1,31 @@
 <template>
-  <DragabbleContainer class="isolate-area-1">
-    <div class="data pressure">
-      <span>压</span>
-      <span>力</span>
-      <span v-for="press, index in pressure" :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>
-    <div class="data runtime">
+	<DragabbleContainer class="isolate-area-1">
+		<div class="data pressure">
+			<span>压</span>
+			<span>力</span>
+			<span
+				v-for="(press, index) in pressure"
+				: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>
+		<!-- <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>
-  </DragabbleContainer>
+    </div> -->
+	</DragabbleContainer>
 </template>
 
 <script>
@@ -23,50 +33,50 @@ 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(''),
-      runtime: '0012'.split(''),
-      rdata: [
-        // { icon: "temp", title: "车间温度", value: "27℃" },
-        { icon: "fire", title: "当前火向", value: "" },
-        { icon: "clock", title: "换火时间", value: "20分" },
-        { icon: "sand", title: "剩余时间", value: "19分20秒" },
-      ],
-    };
-  },
-  watch: {
-    fireDirection: function (val) {
-      this.$set(this.rdata[0], 'value', val)
-    },
-    fireChangeTime: function (val) {
-      this.$set(this.rdata[1], 'value', val)
-    },
-    lastFireChangeTime: function (val) {
-      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
-      if (timeFun) clearInterval(timeFun)
-      timeFun = setInterval(() => {
-        if (sec > 0) sec -= 1
-        else {
-          if (min > 0) {
-            sec = 59
-            min -= 1
-          } else {
-            if (timeFun) clearInterval(timeFun)
-          }
-        }
-        this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
-      }, 1000)
-    },
-  },
-  computed: {
-    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
-  },
+	name: "IsolateArea--1",
+	components: { DragabbleContainer, SmallBox2 },
+	data() {
+		return {
+			pressure: "10.1".split(""),
+			runtime: "0012".split(""),
+			rdata: [
+				// { icon: "temp", title: "车间温度", value: "27℃" },
+				{ icon: "fire", title: "当前火向", value: "" },
+				{ icon: "clock", title: "换火时间", value: "20分" },
+				{ icon: "sand", title: "剩余时间", value: "19分20秒" },
+			],
+		};
+	},
+	watch: {
+		fireDirection: function (val) {
+			this.$set(this.rdata[0], "value", val);
+		},
+		fireChangeTime: function (val) {
+			this.$set(this.rdata[1], "value", val);
+		},
+		lastFireChangeTime: function (val) {
+			let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
+			if (timeFun) clearInterval(timeFun);
+			timeFun = setInterval(() => {
+				if (sec > 0) sec -= 1;
+				else {
+					if (min > 0) {
+						sec = 59;
+						min -= 1;
+					} else {
+						if (timeFun) clearInterval(timeFun);
+					}
+				}
+				this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
+			}, 1000);
+		},
+	},
+	computed: {
+		...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
+	},
 };
 </script>
 
@@ -74,43 +84,44 @@ export default {
 @import "../../assets/styles/functions";
 
 .isolate-area-1 {
-  display: flex;
-  color: $main-color; 
-  min-width: 300px;
-  align-items: center;
+	display: flex;
+	color: $main-color;
+	min-width: 300px;
+	align-items: flex-end;
 
-  > *:not(:last-child) {
-    margin: {
-      right: adjust(10px);
-    }
-  }
+	> *:not(:last-child) {
+		margin: {
+			right: 128px;
+		}
+	}
 
-  > .data {
-    flex-shrink: 0;
-    font-family: zcoolqingkehuangyouti-Regular, sans-serif;
-    display: flex;
-    align-items: flex-end;
-  }
+	> .data {
+		flex-shrink: 0;
+		font-family: zcoolqingkehuangyouti-Regular, sans-serif;
+		display: flex;
+		align-items: flex-end;
+	}
 
-  > .data > span:not(.dot) {
-    /** 边框 */
-    background: url('../../assets/digitbox1.png') no-repeat;
-    background-size: 100% 100%; 
-    display: inline-block;
-    width: adjust(w(220px));
-    height: adjust(h(260px));
-    color: #0068ffaa;
-    font-size: h(200px);
-    line-height: h(600px);
-    text-align: center;
-    vertical-align: bottom;
-  }
-  
-  > .data > span.digit {
-    /** 数字字体大小 */
-    color: #0071ff;
-    font-size: h(360px);
-    line-height: h(540px);
-  }
+	> .data > span:not(.dot) {
+		/** 边框 */
+		background: url("../../assets/digitbox1.png") no-repeat;
+		background-size: 100% 100%;
+		display: inline-block;
+		width: 228px;
+		height: 299px;
+		color: #0068ffaa;
+		font-size: 142px;
+		line-height: 328px;
+		text-align: center;
+		vertical-align: bottom;
+		user-select: none;
+	}
+
+	> .data > span.digit {
+		/** 数字字体大小 */
+		color: #0071ff;
+		font-size: 242px;
+		line-height: 286px;
+	}
 }
 </style>
diff --git a/src/components/isolate-area-1/Runtime.vue b/src/components/isolate-area-1/Runtime.vue
new file mode 100644
index 0000000..694317c
--- /dev/null
+++ b/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>
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 116656a..e29854e 100644
--- a/src/components/layout/Main.vue
+++ b/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);
-	left: adjust(1310px);
+	top: 124px;
+	left: 3910px;
+}
+
+.runtime {
+	position: absolute;
+	top: 0;
+	right: 0;
 }
 
 .video-crash {