diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index cc07034..89818ff 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -49,12 +49,13 @@ export default {
 @import "../../assets/styles/functions";
 
 .in-water {
-	position: absolute;
-	top: -200px;
-	left: 27px;
-	height: 509px;
-	width: 1323px;
-	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat;
+	// position: absolute;
+	// top: -200px;
+	// left: 27px;
+	height: 100%;
+	width: 100%;
+	background: url(../../assets/in-water.png) top 0 left 0 / 100% 100% no-repeat;
+	overflow: hidden;
 }
 
 .content {
@@ -62,16 +63,16 @@ export default {
 }
 
 .realtime {
-	width: 530px;
+	width: 620px;
 	// height: 337px;
-	background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
-		url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
+	background: url(../../assets/inwater.png) top 88% left 0 / 100% 100% no-repeat,
+		url(../../assets/i-water.png) top 24px right 24px / 45% 70% no-repeat;
 }
 
 .graph {
 	// background: #0cc3;
-	height: 436px;
-	transform: translate(0, -64px);
+	height: 100%;
+	transform: translate(0, -48px);
 }
 
 .flex-1 {
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index 4d4c02b..88b0318 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -48,12 +48,12 @@ export default {
 @import "../../assets/styles/functions";
 
 .out-water {
-	position: absolute;
-	top: -200px;
-	left: 1350px;
-	height: 509px;
-	width: 1323px;
-	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat;
+	// position: absolute;
+	// top: -200px;
+	// left: 1350px;
+	height: 100%;
+	width: 100%;
+	background: url(../../assets/out-water.png) top 0 left 0 / 100% 100% no-repeat;
 }
 
 .content {
@@ -61,16 +61,16 @@ export default {
 }
 
 .realtime {
-	width: 530px;
+	width: 620px;
 	// height: 337px;
-	background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
+	background: url(../../assets/outwater.png) top 88% left 0 / 100% 100% no-repeat,
 		url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
 }
 
 .graph {
 	// background: #0cc3;
-	height: 436px;
-	transform: translate(0, -64px);
+	height: 100%;
+	transform: translate(0, -48px);
 }
 .flex-1 {
 	flex: 1;
diff --git a/src/components/common/SmallBox2.vue b/src/components/common/SmallBox2.vue
index f6fa384..268276c 100644
--- a/src/components/common/SmallBox2.vue
+++ b/src/components/common/SmallBox2.vue
@@ -59,8 +59,8 @@ export default {
 	flex-shrink: 0;
 	padding: 0;
 	user-select: none;
-	width: 744px;
-	height: 366px;
+	width: 750px;
+	height: 340px;
 	display: flex;
 	background: url(../../assets/top-middle.png) no-repeat;
 	background-size: 100% 100%;
diff --git a/src/components/isolate-area-1/Area.vue b/src/components/isolate-area-1/Area.vue
index eca6345..05a9ee0 100644
--- a/src/components/isolate-area-1/Area.vue
+++ b/src/components/isolate-area-1/Area.vue
@@ -1,6 +1,6 @@
 <template>
 	<DragabbleContainer class="isolate-area-1">
-		<div class="data pressure">
+		<!-- <div class="data pressure">
 			<span>压</span>
 			<span>力</span>
 			<span
@@ -10,7 +10,7 @@
 				>{{ press }}</span
 			>
 			<span>Pa</span>
-		</div>
+		</div> -->
 		<SmallBox2
 			class="data-center"
 			v-for="rd in rdata"
@@ -87,6 +87,7 @@ export default {
 @import "../../assets/styles/functions";
 
 .isolate-area-1 {
+	// background: #000c;
 	display: flex;
 	color: $main-color;
 	min-width: 300px;
@@ -94,37 +95,37 @@ export default {
 
 	> *:not(:last-child) {
 		margin: {
-			right: 128px;
+			right: 160px;
 		}
 	}
 
-	> .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: 228px;
-		height: 299px;
-		color: #0068ffaa;
-		font-size: 142px;
-		line-height: 328px;
-		text-align: center;
-		vertical-align: bottom;
-		user-select: none;
-	}
+	// > .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: 100px;
+	// 	line-height: 1;
+	// 	text-align: center;
+	// 	vertical-align: bottom;
+	// 	user-select: none;
+	// }
 
-	> .data > span.digit {
-		/** 数字字体大小 */
-		color: #0071ff;
-		font-size: 242px;
-		line-height: 286px;
-	}
+	// > .data > span.digit {
+	// 	/** 数字字体大小 */
+	// 	color: #0071ff;
+	// 	font-size: 242px;
+	// 	line-height: 286px;
+	// }
 }
 </style>
diff --git a/src/components/layout/BottomBar.vue b/src/components/layout/BottomBar.vue
new file mode 100644
index 0000000..8c4a927
--- /dev/null
+++ b/src/components/layout/BottomBar.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="bottom-bar">
+        <section class="realtime-water-temp-in">
+            <InWater />
+        </section>
+        <section class="realtime-water-temp-out">
+            <OutWater />
+        </section>
+        <section class="dynamic-data">
+            <div class="top">
+                <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>
+            </div>
+            <div class="bottom">
+                <div class="data runtime">
+                    <span>运</span>
+                    <span>行</span>
+                    <span v-for="val, index in runtime" :key="index"
+                        :class="{ 'digit': true, 'dot': val == '.' ? true : false }">{{ val }}</span>
+                    <span>天</span>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import InWater from "../boxes/InWater.vue";
+import OutWater from "../boxes/OutWater.vue";
+
+export default {
+    name: 'BottomBar',
+    components: { InWater, OutWater },
+    data() {
+        return {
+            pressure: "10.1".split(""),
+            runtime: "0012".split(""),
+        }
+    },
+    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);
+        },
+        kilnPressure: function (val) {
+            this.pressure = val.split("")
+        }
+    },
+    computed: {
+        ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-bar {
+    height: 600px;
+    // background: #0003;
+    display: flex;
+    justify-content: space-between;
+
+    >section {
+        flex: 1;
+    }
+}
+
+.realtime-water-temp-in,
+.realtime-water-temp-out {
+    padding-right: 20px;
+}
+
+.dynamic-data {
+    display: flex;
+    flex-direction: column;
+
+    .top {
+        // margin: 12px 0;
+        // background: #f001;
+    }
+
+    .bottom {
+        // margin: 12px 0;
+        // background: #0f01;
+    }
+
+    .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: 228px;
+        height: 280px;
+        color: #0068ffaa;
+        font-size: 144px;
+        line-height: 2.35;
+        text-align: center;
+        vertical-align: bottom;
+        user-select: none;
+    }
+
+    .data>span.digit {
+        /** 数字字体大小 */
+        color: #0071ff;
+        font-size: 240px;
+        line-height: 1.25;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 57b69ac..1e0d594 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -59,7 +59,7 @@
 
 			<div
 				class="video-bottom--wrapper"
-				v-show="fireDirection === '北火'"
+				v-show="1 || fireDirection === '北火'"
 				style=""
 			>
 				<video
@@ -77,7 +77,7 @@
 
 			<div
 				class="video-top--wrapper"
-				v-show="fireDirection === '南火'"
+				v-show="1 || fireDirection === '南火'"
 				style=""
 			>
 				<video
@@ -94,16 +94,16 @@
 			</div>
 		</div>
 
-		<!-- <AreaOne class="area-one" />
-		<Runtime class="runtime" />
+		<AreaOne class="area-one" />
+		<!-- <Runtime class="runtime" />
 		<InWater />
 		<OutWater /> -->
 	</main>
 </template>
 
 <script>
-import InWater from "../boxes/InWater.vue";
-import OutWater from "../boxes/OutWater.vue";
+// 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";
@@ -123,15 +123,15 @@ export default {
 		Environ,
 		FaultAnalysis,
 		AreaOne,
-		InWater,
-		OutWater,
+		// InWater,
+		// OutWater,
 	},
 	props: {},
 	data() {
 		return {};
 	},
 	computed: mapState([
-		"kilnPressure",
+		// "kilnPressure",
 		"fireDirection",
 		"topLeftArrowRolling",
 		"topRightArrowRolling",
@@ -165,8 +165,10 @@ main {
 
 .area-one {
 	position: absolute;
-	top: 124px;
-	left: 3910px;
+	top: 110px;
+	left: 1450px;
+	// left: 50%;
+	// transform: translateX(-50%);
 }
 
 .runtime {
@@ -188,16 +190,17 @@ main {
 
 .video-bottom {
 	position: absolute;
-	bottom: 400px;
-	left: 268px;
-	transform: scale(1.25, 1.15);
+	bottom: 212px;
+	right: 85px;
+	transform: scale(0.8) rotateY(180deg)
 }
 
 .video-top {
 	position: absolute;
-	top: 250px;
-	left: 320px;
-	transform: scale(1.25);
+	top: 125px;
+	right: 125px;
+	// height: 200px;
+	transform: scale(0.8);
 }
 
 .arrow {
@@ -214,23 +217,23 @@ main {
 }
 
 .ar-top-right {
-	top: 190px;
-	left: 110px;
+	top: 160px;
+	right: 100px;
 }
 
 .ar-top-left {
-	top: 200px;
-	left: 1480px;
+	top: 120px;
+	right: 960px;
 }
 
 .ar-bottom-left {
-	top: 700px;
-	left: 1430px;
+	bottom: 280px;
+	right: 930px;
 }
 
 .ar-bottom-right {
-	top: 720px;
-	left: 40px;
+	bottom: 290px;
+	right: 54px;
 }
 
 .swd {
@@ -302,9 +305,9 @@ main {
 .eq-main {
 	width: 100%;
 	height: 800px;
-	background: url(../../assets/eq.png) no-repeat, #0003;
+	background: url(../../assets/eq.png) no-repeat;
 	background-size: 100%;
-	top: 256px;
+	top: 320px;
 	position: relative;
 }
 
diff --git a/src/views/MainContent.vue b/src/views/MainContent.vue
index fcc8e16..772c0f3 100644
--- a/src/views/MainContent.vue
+++ b/src/views/MainContent.vue
@@ -2,16 +2,18 @@
     <div class="main-content">
         <AHeader />
         <Main />
+        <BottomBar />
     </div>
 </template>
 
 <script>
 import AHeader from "../components/layout/Header.vue";
 import Main from "../components/layout/Main.vue";
+import BottomBar from "../components/layout/BottomBar.vue";
 
 export default {
     name: 'MainContent',
-    components: { AHeader, Main},
+    components: { AHeader, Main, BottomBar },
     data() {
         return {
 
@@ -25,5 +27,7 @@ export default {
     width: 1px;
     flex: 1;
     background: #f001;
+    display: flex;
+    flex-direction: column;
 }
 </style>
\ No newline at end of file