update 进出口实时

src/components/boxes/InWater.vue

@@ -2,17 +2,20 @@
 	<!-- 窑炉进口水温 -->
 	<Container class="in-water" usage="NumberAndChart">
 		<SubContainer title="进口实时水温" icon="inWater">
-      <div class="pic" style=""></div>
+			<!-- <div class="pic" style=""></div> -->
-      <div class="content flex flex-col">
+			<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="wave"></div>
 				<div class="graph flex-1">
-          <HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
+					<HistoryTrend
+						key="water-in"
+						title="窑炉进口水温历史"
+						:series="kilnWaterIn"
+					/>
 				</div>
 			</div>
 		</SubContainer>
@@ -47,31 +50,23 @@ export default {
 
 .in-water {
 	position: absolute;
-  top: adjust(h(430px));
+	top: -200px;
-  left: adjust(w(5630px));
+	left: 27px;
-  height: adjust(h(620px));
+	height: 509px;
-  width: adjust(w(880px));
+	width: 1323px;
-}
+	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
-
+		#0068ff33;
-.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));
 }
 
 .content {
 	height: 100%;
 }
 
-.wave {
+.realtime {
-  transform: translateX(adjust(-8px));
+	width: 530px;
-  width: adjust(w(852px));
+	// height: 337px;
-  height: adjust(h(76px));
+	background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
-  background: url(../../assets/inwater.png) no-repeat;
+		url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
-  background-size: 100% 100%;
 }
 
 .graph {
@@ -83,11 +78,9 @@ export default {
 	// background: #eee;
 }
 
-
 .time {
+	transform: translate(56px, 80px);
 	// background: #eee;
-  margin: adjust(6px) 0 0;
-  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
@@ -96,13 +89,13 @@ export default {
 
 .temp-data {
 	color: #0068ff;
-  font-size: adjust(h(88px));
+	font-size: 80px;
-  letter-spacing: 1px;
+	letter-spacing: 2px;
 }
 
 .unit {
 	font-family: sans-serif !important;
-  font-size: adjust(h(48px));
+	font-size: 48px;
 	font-weight: 400;
 	letter-spacing: 1px;
 	align-self: flex-end;

src/components/boxes/OutWater.vue

@@ -2,17 +2,19 @@
 	<!-- 窑炉出口水温 -->
 	<Container class="out-water" usage="NumberAndChart">
 		<SubContainer title="出口实时水温" icon="inWater">
-      <div class="pic" style=""></div>
+			<div class="content flex">
-      <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" />
+					<HistoryTrend
+						key="water-out"
+						title="窑炉出口水温历史"
+						:series="kilnWaterOut"
+					/>
 				</div>
 			</div>
 		</SubContainer>
@@ -46,31 +48,23 @@ export default {
 
 .out-water {
 	position: absolute;
-  top: adjust(h(1065px));
+	top: -200px;
-  left: adjust(w(5630px));
+	left: 1350px;
-  height: adjust(h(620px));
+	height: 509px;
-  width: adjust(w(880px));
+	width: 1323px;
-}
+	background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat,
-
+		#ff68ff33;
-.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));
 }
 
 .content {
 	height: 100%;
 }
 
-.wave {
+.realtime {
-  transform: translateX(adjust(-8px));
+	width: 530px;
-  width: adjust(w(852px));
+	// height: 337px;
-  height: adjust(h(76px));
+	background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
-  background: url(../../assets/outwater.png) no-repeat;
+		url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
-  background-size: 100% 100%;
 }
 
 .graph {
@@ -82,11 +76,8 @@ export default {
 	// background: #eee;
 }
 
-
 .time {
-  // background: #eee;
+	transform: translate(56px, 80px);
-  margin: adjust(4px) 0 0;
-  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
@@ -95,13 +86,13 @@ export default {
 
 .temp-data {
 	color: #0068ff;
-  font-size: adjust(h(88px));
+	font-size: 80px;
-  letter-spacing: 1px;
+	letter-spacing: 2px;
 }
 
 .unit {
 	font-family: sans-serif !important;
-  font-size: adjust(h(48px));
+	font-size: 48px;
 	font-weight: 400;
 	letter-spacing: 1px;
 	align-self: flex-end;