diff --git a/src/assets/in-water.png b/src/assets/in-water.png
index 664b72b..3b19a0a 100644
Binary files a/src/assets/in-water.png and b/src/assets/in-water.png differ
diff --git a/src/assets/inwater.png b/src/assets/inwater.png
index 6af7c09..6e50ab8 100644
Binary files a/src/assets/inwater.png and b/src/assets/inwater.png differ
diff --git a/src/assets/out-water.png b/src/assets/out-water.png
index e1aff0c..3b19a0a 100644
Binary files a/src/assets/out-water.png and b/src/assets/out-water.png differ
diff --git a/src/assets/outwater.png b/src/assets/outwater.png
index e3e2af6..dc1bf76 100644
Binary files a/src/assets/outwater.png and b/src/assets/outwater.png differ
diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index d770c56..4a99ec9 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -1,22 +1,25 @@
 <template>
-  <!-- 窑炉进口水温 -->
-  <Container class="in-water" usage="NumberAndChart">
-    <SubContainer title="进口实时水温" icon="inWater">
-      <div class="pic" style=""></div>
-      <div class="content flex flex-col">
-        <div class="realtime">
-          <div class="time flex flex-center">
-            <span class="temp-data">{{ waterInTemp }}</span>
-            <span class="unit">℃</span>
-          </div>
-        </div>
-        <div class="wave"></div>
-        <div class="graph flex-1">
-          <HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
-        </div>
-      </div>
-    </SubContainer>
-  </Container>
+	<!-- 窑炉进口水温 -->
+	<Container class="in-water" usage="NumberAndChart">
+		<SubContainer title="进口实时水温" icon="inWater">
+			<!-- <div class="pic" style=""></div> -->
+			<div class="content flex">
+				<div class="realtime">
+					<div class="time flex flex-center">
+						<span class="temp-data">{{ waterInTemp }}</span>
+						<span class="unit">℃</span>
+					</div>
+				</div>
+				<div class="graph flex-1">
+					<HistoryTrend
+						key="water-in"
+						title="窑炉进口水温历史"
+						:series="kilnWaterIn"
+					/>
+				</div>
+			</div>
+		</SubContainer>
+	</Container>
 </template>
 
 <script>
@@ -28,17 +31,17 @@ import HistoryTrend from "./HistoryTemp.vue";
 import { mapState } from "vuex";
 
 export default {
-  name: "InWater",
-  props: {},
-  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-  data() {
-    return {
-      chartConfig: {},
-    };
-  },
-  computed: {
-    ...mapState(["kilnWaterIn", "waterInTemp"]),
-  },
+	name: "InWater",
+	props: {},
+	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+	computed: {
+		...mapState(["kilnWaterIn", "waterInTemp"]),
+	},
 };
 </script>
 
@@ -46,68 +49,58 @@ export default {
 @import "../../assets/styles/functions";
 
 .in-water {
-  position: absolute;
-  top: adjust(h(430px));
-  left: adjust(w(5630px));
-  height: adjust(h(620px));
-  width: adjust(w(880px));
-}
-
-.pic {
-  background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat;
-  position: absolute;
-  top: adjust(10px);
-  right: 0;
-  width: adjust(w(440px));
-  height: adjust(h(380px));
+	position: absolute;
+	top: -200px;
+	left: 27px;
+	height: 509px;
+	width: 1323px;
+	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
+		#0068ff33;
 }
 
 .content {
-  height: 100%;
+	height: 100%;
 }
 
-.wave {
-  transform: translateX(adjust(-8px));
-  width: adjust(w(852px));
-  height: adjust(h(76px));
-  background: url(../../assets/inwater.png) no-repeat;
-  background-size: 100% 100%;
+.realtime {
+	width: 530px;
+	// 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;
 }
 
 .graph {
-  // background: #ccc3;
+	// background: #ccc3;
 }
 
 .flex-1 {
-  flex: 1;
-  // background: #eee;
+	flex: 1;
+	// background: #eee;
 }
 
-
 .time {
-  // background: #eee;
-  margin: adjust(6px) 0 0;
-  padding-left: adjust(14px);
+	transform: translate(56px, 80px);
+	// background: #eee;
 }
 
 .time--item:not(:last-child) {
-  margin-right: adjust(5px);
+	margin-right: adjust(5px);
 }
 
 .temp-data {
-  color: #0068ff;
-  font-size: adjust(h(88px));
-  letter-spacing: 1px;
+	color: #0068ff;
+	font-size: 80px;
+	letter-spacing: 2px;
 }
 
 .unit {
-  font-family: sans-serif !important;
-  font-size: adjust(h(48px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  align-self: flex-end;
-  margin-bottom: 4px;
-  margin-left: 4px;
-  color: #0068ff;
+	font-family: sans-serif !important;
+	font-size: 48px;
+	font-weight: 400;
+	letter-spacing: 1px;
+	align-self: flex-end;
+	margin-bottom: 4px;
+	margin-left: 4px;
+	color: #0068ff;
 }
 </style>
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index a3b874a..833a880 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -1,22 +1,24 @@
 <template>
-  <!-- 窑炉出口水温 -->
-  <Container class="out-water" usage="NumberAndChart">
-    <SubContainer title="出口实时水温" icon="inWater">
-      <div class="pic" style=""></div>
-      <div class="content flex flex-col">
-        <div class="realtime">
-          <div class="time flex flex-center">
-            <span class="temp-data">{{ waterOutTemp }}</span>
-            <span class="unit">℃</span>
-          </div>
-        </div>
-        <div class="wave"></div>
-        <div class="graph flex-1">
-          <HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" />
-        </div>
-      </div>
-    </SubContainer>
-  </Container>
+	<!-- 窑炉出口水温 -->
+	<Container class="out-water" usage="NumberAndChart">
+		<SubContainer title="出口实时水温" icon="inWater">
+			<div class="content flex">
+				<div class="realtime">
+					<div class="time flex flex-center">
+						<span class="temp-data">{{ waterOutTemp }}</span>
+						<span class="unit">℃</span>
+					</div>
+				</div>
+				<div class="graph flex-1">
+					<HistoryTrend
+						key="water-out"
+						title="窑炉出口水温历史"
+						:series="kilnWaterOut"
+					/>
+				</div>
+			</div>
+		</SubContainer>
+	</Container>
 </template>
 
 <script>
@@ -28,85 +30,74 @@ 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", "waterOutTemp"]),
-  },
+	name: "OutWater",
+	props: {},
+	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+	computed: {
+		...mapState(["kilnWaterOut", "waterOutTemp"]),
+	},
 };
 </script>
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
 .out-water {
-  position: absolute;
-  top: adjust(h(1065px));
-  left: adjust(w(5630px));
-  height: adjust(h(620px));
-  width: adjust(w(880px));
-}
-
-.pic {
-  background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat;
-  position: absolute;
-  top: adjust(10px);
-  right: 0;
-  width: adjust(w(440px));
-  height: adjust(h(380px));
+	position: absolute;
+	top: -200px;
+	left: 1350px;
+	height: 509px;
+	width: 1323px;
+	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat,
+		#ff68ff33;
 }
 
 .content {
-  height: 100%;
+	height: 100%;
 }
 
-.wave {
-  transform: translateX(adjust(-8px));
-  width: adjust(w(852px));
-  height: adjust(h(76px));
-  background: url(../../assets/outwater.png) no-repeat;
-  background-size: 100% 100%;
+.realtime {
+	width: 530px;
+	// height: 337px;
+	background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
+		url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
 }
 
 .graph {
-  // background: #ccc3;
+	// background: #ccc3;
 }
 
 .flex-1 {
-  flex: 1;
-  // background: #eee;
+	flex: 1;
+	// background: #eee;
 }
 
-
 .time {
-  // background: #eee;
-  margin: adjust(4px) 0 0;
-  padding-left: adjust(14px);
+	transform: translate(56px, 80px);
 }
 
 .time--item:not(:last-child) {
-  margin-right: adjust(5px);
+	margin-right: adjust(5px);
 }
 
 .temp-data {
-  color: #0068ff;
-  font-size: adjust(h(88px));
-  letter-spacing: 1px;
+	color: #0068ff;
+	font-size: 80px;
+	letter-spacing: 2px;
 }
 
 .unit {
-  font-family: sans-serif !important;
-  font-size: adjust(h(48px));
-  font-weight: 400;
-  letter-spacing: 1px;
-  align-self: flex-end;
-  margin-bottom: 4px;
-  margin-left: 4px;
-  color: #0068ff;
+	font-family: sans-serif !important;
+	font-size: 48px;
+	font-weight: 400;
+	letter-spacing: 1px;
+	align-self: flex-end;
+	margin-bottom: 4px;
+	margin-left: 4px;
+	color: #0068ff;
 }
 </style>