diff --git a/src/components/boxes/FanRuntime.vue b/src/components/boxes/FanRuntime.vue
index 6ba8d48..b9a91da 100644
--- a/src/components/boxes/FanRuntime.vue
+++ b/src/components/boxes/FanRuntime.vue
@@ -1,40 +1,42 @@
 <template>
-	<!-- 风机运行情况 -->
-	<Container usage="Table">
-		<SubContainer title="风机运行情况" icon="docs" padding="34px">
-			<div class="tables flex" style="height: 100%">
-				<table class="table-1 flex-1 align-start">
-					<thead>
-						<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
-						<tr class="t-row">
-							<th>序号</th>
-							<th>设备名称</th>
-							<th>运行频率</th>
-							<th>设备状态</th>
-						</tr>
-					</thead>
-					<tbody>
-						<!-- <tr
+  <!-- 风机运行情况 -->
+  <Container usage="Table">
+    <SubContainer title="风机运行情况" icon="docs" padding="34px">
+      <div class="tables flex" style="height: 100%">
+        <div class="table-wrapper flex-1 align-start">
+          <table class="table-1">
+            <thead>
+              <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
+              <tr class="t-row">
+                <th>序号</th>
+                <th>设备名称</th>
+                <th>运行频率</th>
+                <th>设备状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- <tr
 							v-for="(row, index) in tableData1"
 							:key="index"
 							style="font-size: 7px; background: #0b5499; opacity: 35%"
 						> -->
-						<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
-							<td v-for="(d, idx) in row" :key="idx">
-								<template v-if="idx === 2">
-									<FrequentComp :value="d" />
-								</template>
-								<template v-else-if="idx === 3">
-									<StatusComp :value="d" />
-								</template>
-								<template v-else>
-									{{ d }}
-								</template>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-
+              <tr class="t-row" v-for="(row, index) in tableData1" :key="index">
+                <td v-for="(d, idx) in row" :key="idx">
+                  <template v-if="idx === 2">
+                    <FrequentComp :value="d" />
+                  </template>
+                  <template v-else-if="idx === 3">
+                    <StatusComp :value="d" />
+                  </template>
+                  <template v-else>
+                    {{ d }}
+                  </template>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!-- 
 				<div class="vertical-line"></div>
 				<table class="table-2 flex-1 align-start">
 					<thead>
@@ -60,10 +62,10 @@
 							</td>
 						</tr>
 					</tbody>
-				</table>
-			</div>
-		</SubContainer>
-	</Container>
+				</table> -->
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -73,60 +75,77 @@ import FrequentComp from "./subcomponents/TableFrequence.vue";
 import StatusComp from "./subcomponents/TableStatus.vue";
 
 export default {
-	name: "KilnPressure",
-	props: {},
-	components: { Container, SubContainer, FrequentComp, StatusComp },
-	data() {
-		return {
-			tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
-			tableData1: [
-				// {
-				// 	id: 1,
-				// 	name: '风机1',
-				// 	sequence: '稳运行',
-				// 	status: '正常', // or 0
-				// }
-				[1, "风机1", "2332Hz", "正常" /**or 0,1*/],
-				[2, "风机2", "未运行", "故障" /**or 0,1*/],
-				[3, "风机3", "333Hz", "正常" /**or 0,1*/],
-				[4, "风机4", "100Hz", "正常" /**or 0,1*/],
-				[5, "风机5", "未运行", "正常" /**or 0,1*/],
-				[6, "风机6", "未运行", "故障" /**or 0,1*/],
-				[7, "风机7", "3000Hz", "正常" /**or 0,1*/],
-				[8, "风机8", "未运行", "正常" /**or 0,1*/],
-				[9, "风机9", "未运行", "正常" /**or 0,1*/],
-				[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
-				[11, "风机11", "未运行", "正常" /**or 0,1*/],
-				[12, "风机12", "未运行", "正常" /**or 0,1*/],
-				[13, "风机13", "73Hz", "正常" /**or 0,1*/],
-			],
-		};
-	},
+  name: "KilnPressure",
+  props: {},
+  components: { Container, SubContainer, FrequentComp, StatusComp },
+  data() {
+    return {
+      tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
+      tableData1: [
+        // {
+        // 	id: 1,
+        // 	name: '风机1',
+        // 	sequence: '稳运行',
+        // 	status: '正常', // or 0
+        // }
+        [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        [2, "风机2", "未运行", "故障" /**or 0,1*/],
+        [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        [5, "风机5", "未运行", "正常" /**or 0,1*/],
+        [6, "风机6", "未运行", "故障" /**or 0,1*/],
+        [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
+        [8, "风机8", "未运行", "正常" /**or 0,1*/],
+        [9, "风机9", "未运行", "正常" /**or 0,1*/],
+        [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
+        [11, "风机11", "未运行", "正常" /**or 0,1*/],
+        [12, "风机12", "未运行", "正常" /**or 0,1*/],
+        [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+      ],
+    };
+  },
 };
 </script>
 
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
+::-webkit-scrollbar {
+  width: 6px;
+  background: #eee1;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  border-radius: 8px;
+  background: #eee3;
+}
+
 .flex-1 {
-	flex: 1;
-	// background: #eee;
+  flex: 1;
+  // background: #eee;
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
-	width: adjust(3px);
-	background: radial-gradient(
-		ellipse at center,
-		#6fe2ff,
-		#52cbef80,
-		transparent,
-		transparent
-	);
+  margin: 0 adjust(3px);
+  width: adjust(3px);
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
+}
+.table-wrapper {
+  padding-right: 6px;
+  height: 400px;
+  overflow-y: auto;
 }
 
 table {
-	border-spacing: adjust(1px);
+  width: 100%;
+  border-spacing: adjust(1px);
 }
 
 // tr, td, th {
@@ -134,32 +153,43 @@ table {
 // }
 
 .t-row {
-	height: adjust(13.88px);
+  height: adjust(13.88px);
+}
+
+.tables > table {
+  overflow-y: auto;
 }
 
 .align-start {
-	align-self: flex-start;
+  align-self: flex-start;
+}
+
+thead > tr th:first-child {
+  text-align: center;
 }
 
 thead > tr th {
-	font-size: adjust(8px);
-	padding: adjust(1px) adjust(3px);
-	font-weight: 400;
-	background: #044a8446;
+  font-size: adjust(9px);
+  line-height: 1.5;
+  padding: adjust(2px) adjust(8px);
+  font-weight: 400;
+  background: #044a8446;
+  text-align: left;
 }
 
 tbody > tr:nth-child(odd) {
-	background: #0b549960;
+  background: #0b549960;
 }
 
 tbody > tr td {
-	font-size: adjust(7px);
-	padding: adjust(1px) adjust(6px);
-	font-weight: 400;
-	background: inherit;
+  font-size: adjust(9px);
+  line-height: 1.25;
+  padding: adjust(2px) adjust(8px);
+  font-weight: 400;
+  background: inherit;
 }
 
 tbody > tr td:first-child {
-	text-align: center;
+  text-align: center;
 }
 </style>
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index a6979c8..f47ccf1 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -1,28 +1,28 @@
 <template>
-	<!-- 窑炉出口水温 -->
-	<Container usage="NumberAndChart">
-		<SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
-			<div class="pic" style=""></div>
-			<div class="content flex flex-col">
-				<div class="realtime">
-					<div class="time flex flex-center">
-						<DigitalBox
-							class="time--item"
-							v-for="(item, index) in '999'.split('')"
-							:key="index"
-							:value="item"
-						/>
-						<span class="unit">℃</span>
-					</div>
-					<div class="text">出口实时水温</div>
-				</div>
-				<div class="wave"></div>
-				<div class="graph flex-1">
-					<HistoryTrend key="water-out" :series="kilnWaterOut" />
-				</div>
-			</div>
-		</SubContainer>
-	</Container>
+  <!-- 窑炉出口水温 -->
+  <Container usage="NumberAndChart">
+    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
+      <div class="pic" style=""></div>
+      <div class="content flex flex-col">
+        <div class="realtime">
+          <div class="time flex flex-center">
+            <DigitalBox
+              class="time--item"
+              v-for="(item, index) in '999'.split('')"
+              :key="index"
+              :value="item"
+            />
+            <span class="unit">℃</span>
+          </div>
+          <div class="text">出口实时水温</div>
+        </div>
+        <div class="wave"></div>
+        <div class="graph flex-1">
+          <HistoryTrend key="water-out" :series="kilnWaterOut" />
+        </div>
+      </div>
+    </SubContainer>
+  </Container>
 </template>
 
 <script>
@@ -34,17 +34,17 @@ import HistoryTrend from "./HistoryTemp.vue";
 import { mapState } from "vuex";
 
 export default {
-	name: "OutWater",
-	props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-	data() {
-		return {
-			chartConfig: {},
-		};
-	},
-	computed: {
-		...mapState(["kilnWaterOut"]),
-	},
+  name: "OutWater",
+  props: {},
+  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+  data() {
+    return {
+      chartConfig: {},
+    };
+  },
+  computed: {
+    ...mapState(["kilnWaterOut"]),
+  },
 };
 </script>
 
@@ -52,85 +52,85 @@ export default {
 @import "../../assets/styles/functions";
 
 .pic {
-	background: url(../../assets/out-water.png) no-repeat;
-	background-size: 100% 100%;
-	background-position: center;
-	position: absolute;
-	top: adjust(24px);
-	right: 0;
-	width: adjust(w(440px));
-	height: adjust(h(380px));
+  background: url(../../assets/out-water.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  position: absolute;
+  top: adjust(24px);
+  right: 0;
+  width: adjust(w(440px));
+  height: adjust(h(380px));
 }
 
 .content {
-	height: 100%;
+  height: 100%;
 }
 
 .wave {
-	transform: translateX(adjust(-16px));
-	width: adjust(w(793px));
-	height: adjust(h(76px));
-	background: url(../../assets/inwater.png) no-repeat;
-	background-size: 100% 100%;
+  transform: translateX(adjust(-16px)) rotateY(0.5turn);
+  width: adjust(w(793px));
+  height: adjust(h(76px));
+  background: url(../../assets/inwater.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .graph {
-	// background: #ccc3;
+  // background: #ccc3;
 }
 
 .flex-1 {
-	flex: 1;
-	// background: #eee;
+  flex: 1;
+  // background: #eee;
 }
 
 .time {
-	// background: #eee;
-	margin: adjust(12px) 0;
-	padding-left: adjust(14px);
+  // background: #eee;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-	margin-right: adjust(5px);
+  margin-right: adjust(5px);
 }
 
 .unit {
-	font-family: Ubuntu, monospace, sans-serif !important;
-	font-size: adjust(20px);
-	letter-spacing: adjust(1px);
-	align-self: flex-end;
+  font-family: Ubuntu, monospace, sans-serif !important;
+  font-size: adjust(20px);
+  letter-spacing: adjust(1px);
+  align-self: flex-end;
 }
 
 .text {
-	display: inline-block;
-	margin-left: adjust(24px);
-	margin-bottom: adjust(10px);
-	padding: adjust(12px) 0;
-	text-align: center;
-	font-size: adjust(22px);
-	letter-spacing: adjust(1px);
-	position: relative;
-	z-index: 10;
-	user-select: none;
+  display: inline-block;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
+  text-align: center;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
+  position: relative;
+  z-index: 10;
+  user-select: none;
 }
 
 .text::after {
-	content: "";
-	display: block;
-	position: absolute;
-	z-index: 0;
-	left: 0;
-	bottom: adjust(10px);
-	height: adjust(4px);
-	width: 100%;
-	/* 渐变色 */
-	background: radial-gradient(
-		ellipse at center,
-		#6fe2ff,
-		#6fe2ffc0,
-		#52cbef80,
-		#52cbef30,
-		#52cbef00,
-		transparent
-	);
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  bottom: adjust(10px);
+  height: adjust(4px);
+  width: 100%;
+  /* 渐变色 */
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #6fe2ffc0,
+    #52cbef80,
+    #52cbef30,
+    #52cbef00,
+    transparent
+  );
 }
 </style>