From 4e0f88c5ea81fa9ae4d30c8b521de15bafb908fd Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Thu, 11 May 2023 11:23:09 +0800
Subject: [PATCH] update adjust

---
 src/components/boxes/BottomTemp.vue           |   6 +-
 src/components/boxes/FanRuntime.vue           |  18 +--
 src/components/boxes/GasFlow.vue              |   6 +-
 src/components/boxes/HistoryTemp.vue          |   9 +-
 src/components/boxes/InWater.vue              |  38 +++---
 src/components/boxes/KilnPressure.vue         |  20 ++--
 src/components/boxes/KilnRuntime.vue          |  16 +--
 src/components/boxes/OilFlow.vue              |   6 +-
 src/components/boxes/OutWater.vue             |  38 +++---
 src/components/boxes/TopTemp.vue              |   6 +-
 src/components/boxes/XicaoTemp.vue            |   6 +-
 .../boxes/subcomponents/TableStatus.vue       |  16 +--
 src/components/charts/BarChart.vue            |  27 +++--
 src/components/charts/LineChart.vue           |  75 ++++++------
 src/components/common/DigitalBox.vue          |  22 ++--
 src/components/common/SmallBox2.vue           |  29 ++---
 src/components/icons/clockSvg.vue             |   4 +-
 src/components/icons/fireSvg.vue              |   4 +-
 src/components/icons/sandSvg.vue              |   4 +-
 src/components/icons/switchSvg.vue            |   4 +-
 src/components/icons/tempSvg.vue              |   4 +-
 src/components/isolate-area-1/Area.vue        |   4 +-
 src/components/layout/Container.vue           |  16 +--
 src/components/layout/Header.vue              |  30 ++---
 src/components/layout/Main.vue                | 111 +++++++++---------
 src/components/layout/SubContainer.vue        |  28 +++--
 src/views/HomeView.vue                        |   4 +-
 27 files changed, 281 insertions(+), 270 deletions(-)

diff --git a/src/components/boxes/BottomTemp.vue b/src/components/boxes/BottomTemp.vue
index ac4f622..48b3bdf 100644
--- a/src/components/boxes/BottomTemp.vue
+++ b/src/components/boxes/BottomTemp.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑底温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑底温度" icon="oil" padding="17px">
+		<SubContainer title="窑底温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
diff --git a/src/components/boxes/FanRuntime.vue b/src/components/boxes/FanRuntime.vue
index cd5926d..70d0be6 100644
--- a/src/components/boxes/FanRuntime.vue
+++ b/src/components/boxes/FanRuntime.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 风机运行情况 -->
 	<Container usage="Table">
-		<SubContainer title="风机运行情况" icon="docs" padding="17px">
+		<SubContainer title="风机运行情况" icon="docs" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<table class="table-1 flex-1 align-start">
 					<thead>
@@ -114,8 +114,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
@@ -126,7 +126,7 @@ export default {
 }
 
 table {
-	border-spacing: 1px;
+	border-spacing: adjust(1px);
 }
 
 // tr, td, th {
@@ -134,7 +134,7 @@ table {
 // }
 
 .t-row {
-	height: 13.88px;
+	height: adjust(13.88px);
 }
 
 .align-start {
@@ -142,8 +142,8 @@ table {
 }
 
 thead > tr th {
-	font-size: 8px;
-	padding: 1px 3px;
+	font-size: adjust(8px);
+	padding: adjust(1px) adjust(3px);
 	font-weight: 400;
 	background: #044a8446;
 }
@@ -153,8 +153,8 @@ tbody > tr:nth-child(odd) {
 }
 
 tbody > tr td {
-	font-size: 7px;
-	padding: 1px 6px;
+	font-size: adjust(7px);
+	padding: adjust(1px) adjust(6px);
 	font-weight: 400;
 	background: inherit;
 }
diff --git a/src/components/boxes/GasFlow.vue b/src/components/boxes/GasFlow.vue
index 5aed92d..f21adc8 100644
--- a/src/components/boxes/GasFlow.vue
+++ b/src/components/boxes/GasFlow.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 天然气流量 -->
 	<Container usage="Charts">
-		<SubContainer title="天然气流量" icon="oil" padding="17px">
+		<SubContainer title="天然气流量" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue
index 8c17be1..e8c46fc 100644
--- a/src/components/boxes/HistoryTemp.vue
+++ b/src/components/boxes/HistoryTemp.vue
@@ -22,9 +22,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// .history-temp {
-  
-// }
+@import "../../assets/styles/functions";
+
 
 .flex-1 {
 	flex: 1;
@@ -35,8 +34,8 @@ h3 {
   margin: 0;
   font-family: sans-serif;
   font-weight: 400;
-  font-size: 10px;
-  letter-spacing: 1px;
+  font-size: adjust(10px);
+  letter-spacing: adjust(1px);
   color: #52fff8;
   margin: 8px 0;
 }
diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index c2ab2a8..cb6b289 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 窑炉进口水温 -->
   <Container usage="NumberAndChart">
-    <SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
+    <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
       <div class="pic" style=""></div>
       <div class="content flex flex-col">
         <div class="realtime">
@@ -52,10 +52,10 @@ export default {
   background-size: 100% 100%;
   background-position: center;
   position: absolute;
-  top: 24px;
+  top: adjust(24px);
   right: 0;
-  width: w(386px);
-  height: h(364px);
+  width:adjust(w(386px));
+  height: adjust(h(364px));
 }
 
 .content {
@@ -63,9 +63,9 @@ export default {
 }
 
 .wave {
-  transform: translateX(-16px);
-  width: w(793px);
-  height: h(72px);
+  transform: translateX(adjust(-16px));
+  width: adjust(w(793px));
+  height: adjust(h(72px));
   background: url(../../assets/inwater.png) no-repeat;
   background-size: 100% 100%;
 }
@@ -81,29 +81,29 @@ export default {
 
 .time {
   // background: #eee;
-  margin: 12px 0;
-  padding-left: 14px;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-  margin-right: 5px;
+  margin-right: adjust(5px);
 }
 
 .unit {
   font-family: Ubuntu, monospace, sans-serif !important;
-  font-size: 20px;
-  letter-spacing: 1px;
+  font-size: adjust(20px);
+  letter-spacing: adjust(1px);
   align-self: flex-end;
 }
 
 .text {
   display: inline-block;
-  margin-left: 24px;
-  margin-bottom: 10px;
-  padding: 12px 0;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
   text-align: center;
-  font-size: 22px;
-  letter-spacing: 1px;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
   position: relative;
   z-index: 10;
   user-select: none;
@@ -115,8 +115,8 @@ export default {
   position: absolute;
   z-index: 0;
   left: 0;
-  bottom: 10px;
-  height: 4px;
+  bottom: adjust(10px);
+  height: adjust(4px);
   width: 100%;
   /* 渐变色 */
   background: radial-gradient(
diff --git a/src/components/boxes/KilnPressure.vue b/src/components/boxes/KilnPressure.vue
index 2bdf980..a24be26 100644
--- a/src/components/boxes/KilnPressure.vue
+++ b/src/components/boxes/KilnPressure.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑炉压力 -->
 	<Container usage="NumberOrDate">
-		<SubContainer title="窑炉压力" icon="docs" padding="17px">
+		<SubContainer title="窑炉压力" icon="docs" padding="34px">
 			<div class="pressure flex flex-col flex-start">
 				<div class="time flex flex-center">
 					<DigitalBox
@@ -46,17 +46,17 @@ export default {
 
 .time {
 	// background: #eee;
-	margin: 12px 0;
+	margin: adjust(12px) 0;
 }
 
 .time--item:not(:last-child) {
-	margin-right: 4px;
+	margin-right: adjust(4px);
 }
 
 .unit {
 	font-family: sans-serif;
-	font-size: 20px;
-	letter-spacing: 1px;
+	font-size: adjust(20px);
+	letter-spacing: adjust(1px);
 	align-self: flex-end;
 }
 
@@ -65,10 +65,10 @@ export default {
 }
 
 .text {
-	padding: 12px 0;
+	padding: adjust(12px) 0;
 	text-align: center;
-	font-size: 23px;
-	letter-spacing: 1px;
+	font-size: adjust(23px);
+	letter-spacing: adjust(1px);
 	position: relative;
 	z-index: 10;
 	user-select: none;
@@ -80,8 +80,8 @@ export default {
 	position: absolute;
 	z-index: 0;
 	left: 0;
-	bottom: 10px;
-	height: 4px;
+	bottom: adjust(10px);
+	height: adjust(4px);
 	width: 100%;
 	/* 渐变色 */
 	background: radial-gradient(
diff --git a/src/components/boxes/KilnRuntime.vue b/src/components/boxes/KilnRuntime.vue
index f52f46e..99aab2a 100644
--- a/src/components/boxes/KilnRuntime.vue
+++ b/src/components/boxes/KilnRuntime.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑炉运行时间 -->
 	<Container usage="NumberOrDate">
-		<SubContainer title="窑炉运行时间" icon="clock" padding="17px">
+		<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
 			<div class="flex flex-col">
 				<div class="time flex flex-center">
 					<DigitalBox
@@ -39,7 +39,7 @@ export default {
 
 .time {
 	// background: #eee;
-	margin: 12px 0;
+	margin: adjust(12px) 0;
 }
 
 .flex-center {
@@ -48,14 +48,14 @@ export default {
 }
 
 .time--item:not(:last-child) {
-	margin-right: 8px;
+	margin-right: adjust(8px);
 }
 
 .text {
-	padding: 12px 0;
+	padding: adjust(12px) 0;
 	text-align: center;
-	font-size: 23px;
-	letter-spacing: 4px;
+	font-size: adjust(23px);
+	letter-spacing: adjust(4px);
   position: relative;
 	z-index: 10;
 	user-select: none;
@@ -67,8 +67,8 @@ export default {
   position: absolute;
 	z-index: 0;
 	left: 12%;
-	bottom: 10px;
-	height: 4px;
+	bottom: adjust(10px);
+	height: adjust(4px);
 	width: 76%;
 	/* 渐变色 */
 	background: radial-gradient(
diff --git a/src/components/boxes/OilFlow.vue b/src/components/boxes/OilFlow.vue
index b5ce36b..c0bfa58 100644
--- a/src/components/boxes/OilFlow.vue
+++ b/src/components/boxes/OilFlow.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 油流量 -->
 	<Container usage="Charts">
-		<SubContainer title="油流量" icon="oil" padding="17px">
+		<SubContainer title="油流量" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index 30829c5..b30a2b7 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 窑炉出口水温 -->
   <Container usage="NumberAndChart">
-    <SubContainer title="窑炉出口水温" icon="inWater" padding="17px">
+    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
       <div class="pic" style=""></div>
       <div class="content flex flex-col">
         <div class="realtime">
@@ -52,10 +52,10 @@ export default {
   background-size: 100% 100%;
   background-position: center;
   position: absolute;
-  top: 24px;
+  top: adjust(24px);
   right: 0;
-  width: w(386px);
-  height: h(364px);
+  width: adjust(w(386px));
+  height: adjust(h(364px));
 }
 
 .content {
@@ -63,9 +63,9 @@ export default {
 }
 
 .wave {
-  transform: translateX(-16px);
-  width: w(793px);
-  height: h(72px);
+  transform: translateX(adjust(-16px));
+  width: adjust(w(793px));
+  height: adjust(h(72px));
   background: url(../../assets/inwater.png) no-repeat;
   background-size: 100% 100%;
 }
@@ -81,29 +81,29 @@ export default {
 
 .time {
   // background: #eee;
-  margin: 12px 0;
-  padding-left: 14px;
+  margin: adjust(12px) 0;
+  padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-  margin-right: 5px;
+  margin-right: adjust(5px);
 }
 
 .unit {
   font-family: Ubuntu, monospace, sans-serif !important;
-  font-size: 20px;
-  letter-spacing: 1px;
+  font-size: adjust(20px);
+  letter-spacing: adjust(1px);
   align-self: flex-end;
 }
 
 .text {
   display: inline-block;
-  margin-left: 24px;
-  margin-bottom: 10px;
-  padding: 12px 0;
+  margin-left: adjust(24px);
+  margin-bottom: adjust(10px);
+  padding: adjust(12px) 0;
   text-align: center;
-  font-size: 22px;
-  letter-spacing: 1px;
+  font-size: adjust(22px);
+  letter-spacing: adjust(1px);
   position: relative;
   z-index: 10;
   user-select: none;
@@ -115,8 +115,8 @@ export default {
   position: absolute;
   z-index: 0;
   left: 0;
-  bottom: 10px;
-  height: 4px;
+  bottom: adjust(10px);
+  height: adjust(4px);
   width: 100%;
   /* 渐变色 */
   background: radial-gradient(
diff --git a/src/components/boxes/TopTemp.vue b/src/components/boxes/TopTemp.vue
index b9cda8c..b880750 100644
--- a/src/components/boxes/TopTemp.vue
+++ b/src/components/boxes/TopTemp.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 窑顶温度 -->
 	<Container usage="Charts">
-		<SubContainer title="窑顶温度" icon="oil" padding="17px">
+		<SubContainer title="窑顶温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
diff --git a/src/components/boxes/XicaoTemp.vue b/src/components/boxes/XicaoTemp.vue
index 9f62237..f1aae2c 100644
--- a/src/components/boxes/XicaoTemp.vue
+++ b/src/components/boxes/XicaoTemp.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- 锡槽温度 -->
 	<Container usage="Charts">
-		<SubContainer title="锡槽温度" icon="oil" padding="17px">
+		<SubContainer title="锡槽温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
 				<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 3px;
-	width: 3px;
+	margin: 0 adjust(3px);
+	width: adjust(3px);
 	background: radial-gradient(
 		ellipse at center,
 		#6fe2ff,
diff --git a/src/components/boxes/subcomponents/TableStatus.vue b/src/components/boxes/subcomponents/TableStatus.vue
index fc9383f..220c453 100644
--- a/src/components/boxes/subcomponents/TableStatus.vue
+++ b/src/components/boxes/subcomponents/TableStatus.vue
@@ -27,21 +27,21 @@ export default {
 .table-status {
 	/* font-family: Ubuntu, sans-serif !important; */
 	color: #3984ff;
-	padding-left: 10px;
+	padding-left: adjust(10px);
 	position: relative;
 }
 
 .table-status::after {
 	content: "";
 	position: absolute;
-	left: 1px;
-	top: 2px;
+	left: adjust(1px);
+	top: adjust(2px);
 	display: inline-block;
-	width: 4px;
-	height: 4px;
-	border-radius: 100px;
+	width: adjust(4px);
+	height: adjust(4px);
+	border-radius: adjust(100px);
 	background: #3984ff;
-	box-shadow: 0px 0px 2px 2px rgba(39, 96, 255, 0.5);
+	box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(39, 96, 255, 0.5);
 }
 
 .invalid {
@@ -50,6 +50,6 @@ export default {
 
 .invalid::after {
 	background: #ff0c0c;
-	box-shadow: 0px 0px 2px 2px rgba(255, 39, 39, 0.5);
+	box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(255, 39, 39, 0.5);
 }
 </style>
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index e197200..f417b6f 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -27,6 +27,10 @@ echarts.use([
   CanvasRenderer,
 ]);
 
+function adjust(v) {
+	return v * 2
+}
+
 export default {
   name: "BarChart",
   props: {
@@ -50,10 +54,10 @@ export default {
         this.chart = echarts.init(document.getElementById(this.id));
       this.chart.setOption({
         grid: {
-          top: 28,
-          left: 28,
-          bottom: 18,
-          right: 12,
+          top: adjust(28),
+          left: adjust(28),
+          bottom: adjust(18),
+          right: adjust(12),
         },
         xAxis: {
           type: "category",
@@ -62,7 +66,6 @@ export default {
             .map((_, index) => index + 1),
           axisLine: {
             lineStyle: {
-              // width: 1,
               color: "#5982b2a0",
             },
           },
@@ -71,8 +74,8 @@ export default {
           },
           axisLabel: {
             color: "#ffffff",
-            fontSize: 7,
-            lineHeight: 1,
+            fontSize: adjust(7),
+            lineHeight: adjust(1),
           },
         },
         yAxis: {
@@ -80,7 +83,7 @@ export default {
           name: "单位/℃",
           nameTextStyle: {
             color: "#fff9",
-            fontSize: 8,
+            fontSize: adjust(8),
             align: "right",
           },
           axisLine: {
@@ -95,8 +98,8 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#fff9",
-            fontSize: 7,
-            lineHeight: 1,
+            fontSize: adjust(7),
+            lineHeight: adjust(1),
           },
           splitLine: {
             lineStyle: {
@@ -117,10 +120,10 @@ export default {
                 return v;
               }),
             type: "bar",
-            barWidth: 4,
+            barWidth: adjust(4),
             label: {
               show: true,
-              fontSize: 6,
+              fontSize: adjust(6),
               color: "#eee8",
               position: "top",
             },
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index 4c896d2..3238183 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -3,7 +3,7 @@
 	<div class="line-chart__wrapper">
 		<div class="line-chart__custom-legend flex">
 			<span>产线1 - 产线5</span>
-			<ul style="margin-left: 8px; padding-left: 8px" class="flex">
+			<ul style="" class="flex">
 				<li>产线1</li>
 				<li>产线2</li>
 				<li>产线3</li>
@@ -39,12 +39,16 @@ echarts.use([
 	CanvasRenderer,
 ]);
 
+function adjust(v) {
+	return v * 2;
+}
+
 export default {
 	name: "LineChart",
 	props: {
 		id: {
 			type: String,
-			default: 'line-chart'
+			default: "line-chart",
 		},
 		config: {
 			type: Object,
@@ -78,16 +82,16 @@ export default {
 	methods: {
 		init() {
 			if (!this.chart)
-				this.chart = echarts.init(document.getElementById(this.id))
+				this.chart = echarts.init(document.getElementById(this.id));
 			this.chart.setOption({
 				// title: {
 				// 	text: "ECharts 入门示例",
 				// },
 				grid: {
-					top: 32,
-					left: 32,
-					bottom: 24,
-					right: 12,
+					top: adjust(32),
+					left: adjust(32),
+					bottom: adjust(24),
+					right: adjust(12),
 				},
 				// tooltip: {
 				// 	trigger: "axis",
@@ -112,8 +116,8 @@ export default {
 					},
 					axisLabel: {
 						color: "#ffffff",
-						fontSize: 6,
-						lineHeight: 1,
+						fontSize: adjust(6),
+						lineHeight: adjust(1),
 					},
 				},
 				yAxis: {
@@ -121,7 +125,7 @@ export default {
 					name: "单位/m³",
 					nameTextStyle: {
 						color: "#fff9",
-						fontSize: 6,
+						fontSize: adjust(6),
 						// lineHeight: 6,
 						// height: 6,
 						// padding: 0,
@@ -139,8 +143,8 @@ export default {
 					},
 					axisLabel: {
 						color: "#fff9",
-						fontSize: 6,
-						lineHeight: 1,
+						fontSize: adjust(6),
+						lineHeight: adjust(1),
 					},
 					splitLine: {
 						lineStyle: {
@@ -156,9 +160,9 @@ export default {
 						name: Math.random(),
 						type: "line",
 						symbol: "circle",
-						symbolSize: 3,
+						symbolSize: adjust(3),
 						lineStyle: {
-							width: "1",
+							width: adjust(1),
 						},
 						areaStyle: {
 							// color: {
@@ -203,17 +207,17 @@ export default {
 
 ::-webkit-scrollbar {
 	// display: none;
-	height: 2px;
+	height: adjust(2px);
 }
 
 ::-webkit-scrollbar-thumb {
-	height: 2px;
-	border-radius: 2px;
+	height: adjust(2px);
+	border-radius: adjust(2px);
 	background: #ccc3;
 }
 
 // ::-webkit-scrollbar-track {
-// height: 1px;
+// height: adjust(1px);
 // background: blue;
 // }
 
@@ -222,7 +226,12 @@ li {
 	margin: 0;
 	padding: 0;
 	list-style: none;
-	min-width: 20px;
+	min-width: adjust(20px);
+}
+
+ul {
+	margin-left: adjust(8px);
+	padding-left: adjust(8px);
 }
 
 li {
@@ -232,11 +241,11 @@ li {
 li::before {
 	content: "";
 	position: absolute;
-	top: 2px;
-	left: -6px;
-	width: 4px;
-	height: 4px;
-	border-radius: 1px;
+	top: adjust(2px);
+	left: adjust(-6px);
+	width: adjust(4px);
+	height: adjust(4px);
+	border-radius: adjust(1px);
 	background: #eee6;
 }
 
@@ -273,31 +282,31 @@ li:nth-child(10)::before {
 
 ul {
 	flex: 1;
-	width: 144px;
+	width: adjust(154px);
 	display: flex;
 	overflow-x: auto;
-	padding-bottom: 2px;
+	padding-bottom: adjust(2px);
 }
 
 li:not(:last-child) {
-	margin-right: 8px;
+	margin-right: adjust(8px);
 }
 
 .line-chart__wrapper {
 	position: relative;
 	background: #7771;
-	border-radius: 3px;
-	backdrop-filter: blur(2px);
-	box-shadow: inset 0 0 10px 2px rgba($color: #fff, $alpha: 0.1);
+	border-radius: adjust(3px);
+	backdrop-filter: blur(adjust(2px));
+	box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
 	height: 100%;
-	width: 1px;
+	width: adjust(1px);
 }
 
 .line-chart__custom-legend {
 	position: absolute;
-	top: -13px;
+	top: adjust(-13px);
 	right: 0;
-	font-size: 7px;
+	font-size: adjust(7px);
 	font-family: Ubuntu, sans-serif;
 	// background: #fff2;
 	padding: 0;
diff --git a/src/components/common/DigitalBox.vue b/src/components/common/DigitalBox.vue
index 9a32262..bea7b38 100644
--- a/src/components/common/DigitalBox.vue
+++ b/src/components/common/DigitalBox.vue
@@ -35,34 +35,34 @@ export default {
 .digit-box {
 	// height: h(80px);
 	// width: w(64px);
-	height: h(80px);
-	width: w(56px);
+	height: adjust(h(80px));
+	width: adjust(w(56px));
 	color: white;
 	background: url(../../assets/digit.png) no-repeat;
 	background-size: 100% 100%;
-	padding: 2px;
+	padding: adjust(2px);
 	text-align: center;
 	user-select: none;
 }
 
 .digit {
 	font-family: "站酷庆科黄油体", sans-serif;
-	font-size: 32px;
-	line-height: 39px;
+	font-size: adjust(32px);
+	line-height: adjust(39px);
 }
 
 .zhHans {
-	font-size: 18px;
-	line-height: 48px;
+	font-size: adjust(18px);
+	line-height: adjust(48px);
 }
 
 .another-hw {
-	height: h(72px);
-	width: w(62px);
+	height: adjust(h(72px));
+	width: adjust(w(62px));
 }
 
 .another-hw.digit {
-	font-size: 32px;
-	line-height: 32px;
+	font-size: adjust(32px);
+	line-height: adjust(32px);
 }
 </style>
diff --git a/src/components/common/SmallBox2.vue b/src/components/common/SmallBox2.vue
index 930c0de..3846ccb 100644
--- a/src/components/common/SmallBox2.vue
+++ b/src/components/common/SmallBox2.vue
@@ -56,38 +56,39 @@ export default {
 @import "../../assets/styles/functions";
 
 .small-box-2 {
-	padding: 14px;
+	padding: adjust(14px);
 	// border: 1px solid gray;
-	box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
-	border-radius: 6px;
+	// box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
+	box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
+	border-radius: adjust(6px);
 	user-select: none;
-	// width: w(465px);
-	// height: h(200px);
-	width: w(528px);
-	height: h(240px);
+	// width: adjust(w(465px));
+	// height: adjust(h(200px));
+	width: adjust(w(528px));
+	height: adjust(h(240px));
 	display: flex;
 
 	.icon {
-		width: h(128px);
-		height: h(128px);
+		width: adjust(h(128px));
+		height: adjust(h(128px));
 	}
 
 	.info {
 		font-family: "微软雅黑", Helvicate, sans-serif;
 
 		h2 {
-			font-size: 16px;
+			font-size: adjust(16px);
 			opacity: 0.7;
-			// line-height: 12px;
-			letter-spacing: 1px;
+			// line-height: adjust(12px);
+			letter-spacing: adjust(1px);
 			font-weight: 400;
 			color: hsla(0, 0%, 100%, 0.9);
 		}
 
 		.value {
 			color: #fff;
-			font-size: 30px;
-			line-height: 29px;
+			font-size: adjust(30px);
+			line-height: adjust(29px);
 		}
 	}
 }
diff --git a/src/components/icons/clockSvg.vue b/src/components/icons/clockSvg.vue
index 53c4028..577ce4e 100644
--- a/src/components/icons/clockSvg.vue
+++ b/src/components/icons/clockSvg.vue
@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="64px"
-		height="64px"
+		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 6c3a0f6..7f35084 100644
--- a/src/components/icons/fireSvg.vue
+++ b/src/components/icons/fireSvg.vue
@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="64px"
-		height="64px"
+		width="adjust(64px)"
+		height="adjust(64px)"
 		viewBox="0 0 94 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 c53243e..952c77a 100644
--- a/src/components/icons/sandSvg.vue
+++ b/src/components/icons/sandSvg.vue
@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="64px"
-		height="64px"
+		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/switchSvg.vue b/src/components/icons/switchSvg.vue
index 55b6a8b..c26e6cd 100644
--- a/src/components/icons/switchSvg.vue
+++ b/src/components/icons/switchSvg.vue
@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="64px"
-		height="64px"
+		width="adjust(64px)"
+		height="adjust(64px)"
 		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 14512d0..c4eac1a 100644
--- a/src/components/icons/tempSvg.vue
+++ b/src/components/icons/tempSvg.vue
@@ -1,7 +1,7 @@
 <template>
 	<svg
-		width="64px"
-		height="64px"
+		width="adjust(64px)"
+		height="adjust(64px)"
 		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 6ebcbd9..9b98550 100644
--- a/src/components/isolate-area-1/Area.vue
+++ b/src/components/isolate-area-1/Area.vue
@@ -31,12 +31,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/styles/functions";
+
 .isolate-area-1 {
 	display: flex;
 
 	> .small-box-2:not(:last-child) {
 		margin: {
-			right: 15px;
+			right: adjust(15px);
 		}
 	}
 }
diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue
index 6a7dbd5..9628a29 100644
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -45,8 +45,8 @@ export default {
 
 .number-or-date {
   display: inline-block;
-  width: w(800px);
-  height: h(375px);
+  width: adjust(w(800px));
+  height: adjust(h(375px));
   background: url(../../assets/box-number.png);
   background-position: 0 0; /** top left */
   background-size: 100% 100%;
@@ -54,8 +54,8 @@ export default {
 
 .tables {
   display: inline-block;
-  width: w(800px);
-  height: h(528px);
+  width: adjust(w(800px));
+  height: adjust(h(528px));
   background: url(../../assets/box-table.png);
   background-position: 0 0; /** top left */
   background-size: 100% 100%;
@@ -63,8 +63,8 @@ export default {
 
 .charts {
   display: inline-block;
-  width: w(1580px);
-  height: h(520px);
+  width: adjust(w(1580px));
+  height: adjust(h(520px));
   background: url(../../assets/box-chart.png);
   background-position: 0 0; /** top left */
   background-size: 100% 100%;
@@ -72,8 +72,8 @@ export default {
 
 .number-and-chart {
   display: inline-block;
-  width: w(800px);
-  height: h(931px);
+  width: adjust(w(800px));
+  height: adjust(h(931px));
   background: url(../../assets/box-right.png);
   background-position: 0 0; /** top left */
   background-size: 100% 100%;
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index af52e8d..8c48214 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -24,29 +24,29 @@ export default {
 header {
 	background: url(../../assets/header.png) center/contain no-repeat;
 	background-size: 105%;
-	height: h(280px);
-	width: $actual_width;
+	height: adjust(h(280px));
+	width: adjust($actual_width);
 	display: grid;
 	place-items: center;
 
 	> div {
 		display: flex;
 		align-items: center;
-		margin-bottom: 20px;
+		margin-bottom: adjust(20px);
 
 		.header--logo {
-			width: 56px;
-			height: 56px;
+			width: adjust(56px);
+			height: adjust(56px);
 			background: url(../../assets/logo.png) center/contain no-repeat;
 		}
 
 		h1 {
-			margin-left: 20px;
-			font-size: 35px;
-			// line-height: 100px;
+			margin-left: adjust(20px);
+			font-size: adjust(35px);
+			// line-height: adjust(100px);
 			// background: #eee;
 			user-select: none;
-			letter-spacing: 8px;
+			letter-spacing: adjust(8px);
 			font-weight: 600;
 			// color: #6bf2ff;
 			color: $main-color;
@@ -57,19 +57,19 @@ header {
 
 .header--wing {
 	left: 0;
-	bottom: 10px;
-	height: h(78px);
+	bottom: adjust(10px);
+	height: adjust(h(78px));
 }
 
 .company {
-	margin-left: w(1420px);
-	width: w(1460px);
+	margin-left: adjust(w(1420px));
+	width: adjust(w(1460px));
 	background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
-	margin-left: w(6050px);
-	width: w(1407px);
+	margin-left: adjust(w(6050px));
+	width: adjust(w(1407px));
 	background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 970dd3a..a769e77 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -1,27 +1,11 @@
 <template>
 	<main class="">
 		<div class="eq-main absolute">
-			<!-- style="
-					position: absolute;
-					top: 224px;
-					left: 59px;
-					transform: scale(1, 1.05);
-					width: 360px;
-					height: 100px;
-				" -->
-			<div
-				class="video-bottom"
-				style="
-					position: absolute;
-					bottom: 151px;
-					left: 64px;
-					transform: scale(1.02, 1.05);
-				"
-			>
+			<div class="video-bottom" style="">
 				<video
 					id="1"
 					preload="auto"
-					height="100"
+					height="200"
 					muted
 					autoplay
 					loop
@@ -30,20 +14,12 @@
 				></video>
 			</div>
 
-			<div
-				class="video-bottom"
-				style="
-					position: absolute;
-					top: 131px;
-					left: 72px;
-					transform: scale(1.02, 1.05);
-				"
-			>
+			<div class="video-top" style="">
 				<video
 					id="2"
 					class="video-top"
 					preload="auto"
-					height="100"
+					height="200"
 					muted
 					autoplay
 					loop
@@ -51,10 +27,9 @@
 					src="../../assets/videos/fire-to-bottom.mp4"
 				></video>
 			</div>
-			<!-- style="position: absolute; top: 0; left: 0; transform: scale(1, 1.05) width: 360px; height: 100px;" -->
 		</div>
 
-		<AreaOne style="position: absolute; top: 160px; left: 1588px" />
+		<AreaOne class="area-one" />
 
 		<div class="absolute left kiln-runtime">
 			<KilnRuntime />
@@ -139,73 +114,93 @@ main {
 	// background: #eee2;
 }
 
+.area-one {
+	position: absolute;
+	top: adjust(160px);
+	left: adjust(1588px);
+}
+
+.video-bottom {
+	position: absolute;
+	bottom: adjust(153.5px);
+	left: adjust(63.5px);
+	transform: scale(1.02, 1.02);
+}
+
+.video-top {
+	position: absolute;
+	top: adjust(64px);
+	left: adjust(35px);
+	transform: scale(1.02, 1.02);
+}
+
 .eq-main {
-	width: w(7150px);
-	height: h(960px);
+	width: adjust(w(7150px));
+	height: adjust(h(960px));
 	background: url(../../assets/eq.png) no-repeat;
 	background-size: 100%;
-	top: 170px;
-	left: 380px;
+	top: adjust(170px);
+	left: adjust(380px);
 	position: relative;
 }
 
 .eq-main::after {
 	content: "";
 	position: absolute;
-	right: 1000px;
-	top: 164px;
-	width: 150px;
-	height: 150px;
+	right: adjust(1000px);
+	top: adjust(164px);
+	width: adjust(150px);
+	height: adjust(150px);
 	background: url(../../assets/mirror.png) no-repeat;
 	background-size: 100% 100%;
 }
 
 .kiln-runtime {
-	top: h(200px);
-	left: w(60px);
+	top: adjust(h(200px));
+	left: adjust(w(60px));
 }
 
 .kiln-pressure {
-	top: h(610px);
-	left: w(60px);
+	top: adjust(h(610px));
+	left: adjust(w(60px));
 }
 
 .fan-runtime {
-	top: h(1020px);
-	left: w(60px);
+	top: adjust(h(1020px));
+	left: adjust(w(60px));
 }
 
 .oil-flow {
-	top: h(1588px);
-	left: w(60px);
+	top: adjust(h(1588px));
+	left: adjust(w(60px));
 }
 
 .gas-flow {
-	top: h(1588px);
-	left: w(1660px);
+	top: adjust(h(1588px));
+	left: adjust(w(1660px));
 }
 .top-temp {
-	top: h(1588px);
-	left: w(3260px);
+	top: adjust(h(1588px));
+	left: adjust(w(3260px));
 }
 .bottom-temp {
-	top: h(1588px);
-	left: w(4860px);
+	top: adjust(h(1588px));
+	left: adjust(w(4860px));
 }
 .ou-temp {
-	top: h(1588px);
-	left: w(6460px);
+	top: adjust(h(1588px));
+	left: adjust(w(6460px));
 }
 .in-water {
-	top: h(200px);
-	left: w(8096px);
+	top: adjust(h(200px));
+	left: adjust(w(8096px));
 	//   left: w(5096px);
 	z-index: 100;
 }
 
 .out-water {
-	top: h(1177px);
-	left: w(8096px);
+	top: adjust(h(1177px));
+	left: adjust(w(8096px));
 	//   left: w(5096px);
 	z-index: 100;
 }
diff --git a/src/components/layout/SubContainer.vue b/src/components/layout/SubContainer.vue
index c440646..35d9367 100644
--- a/src/components/layout/SubContainer.vue
+++ b/src/components/layout/SubContainer.vue
@@ -31,17 +31,19 @@ export default {
 	data() {
 		return {
 			iconClass: {
-				clock: 'icon-clock',
-				docs: 'icon-docs',
-				oil: 'icon-oil',
-				inWater: 'icon-water-in'
-			}
+				clock: "icon-clock",
+				docs: "icon-docs",
+				oil: "icon-oil",
+				inWater: "icon-water-in",
+			},
 		};
-	}
+	},
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
 .sub-container {
 	height: 100%;
 	display: flex;
@@ -49,9 +51,9 @@ export default {
 }
 
 .icon {
-	height: 16px;
-	width: 16px;
-	margin-right: 8px;
+	height: adjust(16px);
+	width: adjust(16px);
+	margin-right: adjust(8px);
 }
 
 .icon-clock {
@@ -75,9 +77,9 @@ export default {
 }
 
 .title {
-  /* margin: 12px 0; */
-	margin-bottom: 12px;
-	font-size: 16px;
+	/* margin: 12px 0; */
+	margin-bottom: adjust(12px);
+	font-size: adjust(16px);
 	color: #72f2ff;
 	font-family: sans-serif;
 	user-select: none;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 62befe0..a038a1c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -28,8 +28,8 @@ export default {
 .home-view {
 	// width: 100vw;
 	// height: 100vh;
-	height: $actual_height;
-	width: $actual_width;
+	height: adjust($actual_height);
+	width: adjust($actual_width);
 	overflow: hidden;
 	background: url(../assets/bg.png) center/cover no-repeat ;
 	color: white;