Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/views/drain/configImg/index.vue

@@ -133,18 +133,18 @@ export default {
   background-blend-mode: multiply;
 }
 .table1 {
-  top: 0px;
-  left: -1px;
+  top: 0%;
+  left: 0%;
   position: absolute;
 }
 .table2 {
-  top: 0px;
-  left: 475px;
+  top: 0%;
+  left: 30%;
   position: absolute;
 }
 .table3 {
-  top: 0px;
-  left: 950px;
+  top: 0%;
+  left: 60%;
   position: absolute;
 }
 #imgSwitch {
@@ -159,91 +159,91 @@ export default {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 68px;
-  left: 63px;
+  top: 8%;
+  left: 4%;
 }
 .botton1 {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 374px;
-  left: 146px;
+  top: 44%;
+  left: 9%;
 }
 .botton2 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 375px;
-  left: 378px;
+  top: 44.5%;
+  left: 23.6%;
 }
 .botton3 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 305px;
-  left: 430px;
+  top: 36%;
+  left: 27%;
 }
 .botton4 {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 140px;
-  left: 542px;
+  top: 16%;
+  left: 34%;
 }
 .botton5 {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 375px;
-  left: 624px;
+  top: 44%;
+  left: 39%;
 }
 .botton6 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 375px;
-  left: 855px;
+  top: 44.5%;
+  left: 53.5%;
 }
 .botton7 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 305px;
-  left: 907px;
+  top: 36%;
+  left: 57%;
 }
 .botton8 {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 137px;
-  left: 1021px;
+  top: 16%;
+  left: 63.7%;
 }
 .botton9 {
   width: 15px;
   height: 30px;
   position: absolute;
-  top: 372px;
-  left: 1103px;
+  top:44.5%;
+  left: 69%;
 }
 .botton10 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 380px;
-  right: 245px;
+  top: 44.5%;
+  right: 15.5%;
 }
 .botton11 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 306px;
-  right: 195px;
+  top: 36%;
+  right: 12%;
 }
 .red {
   background-color: #f90005;

src/views/drain/configImg/tableData.vue

@@ -34,21 +34,20 @@
     <ul class="bottom2">
       <li>
         <span>液位:</span> <span>{{ tableData.liquidLevel }}m</span>
-         </br>
+        <br />
         <span>{{ id }}号电压:</span>
         <span>{{ tableData.positivePressure }}V</span>
-        </br>
+        <br />
         <span> {{ id }}号电流:</span>
         <span>{{ tableData.negativePressure }}A</span>
-        </br>
-         
+        <br />
+
         <span>{{ id }}号前轴温度:</span>
         <span>{{ tableData.frontAxleTemp }}℃</span>
-        </br>
-        <span>{{ id }}号后轴温度:
-        </span><span>{{ tableData.rearAxleTemp }}℃</span>
-        </br>
-       
+        <br />
+        <span>{{ id }}号后轴温度: </span
+        ><span>{{ tableData.rearAxleTemp }}℃</span>
+        <br />
       </li>
     </ul>
     <!-- <div class="bottom3">
@@ -70,7 +69,7 @@ div {
   color: #4adefe;
   position: relative;
   top: 80px;
-  left: 180px;
+  left: 70%;
 }
 .header span:nth-of-type(1) {
   display: inline-block;
@@ -85,8 +84,8 @@ div {
 .center {
   color: #4adefe;
   position: relative;
-  top: 200px;
-  left: 180px;
+  top: 150px;
+  left: 70%;
 }
 .center span:nth-of-type(1) {
   display: inline-block;
@@ -102,7 +101,7 @@ div {
   color: #4adefe;
   position: relative;
   top: 310px;
-  left: -20px;
+  left: -10%;
 }
 .bottom1 span:nth-of-type(1) {
   display: inline-block;
@@ -118,7 +117,7 @@ div {
   color: #4adefe;
   position: relative;
   top: 410px;
-  left: -20px;
+  left: -10%;
 }
 .bottom2 span:nth-of-type(odd) {
   display: inline-block;
@@ -148,4 +147,4 @@ li {
   list-style-type: none;
   line-height: 30px;
 }
-</style>
+</style>