123

src/css/index.scss

@@ -299,3 +299,6 @@ s {
   -webkit-background-clip: text;
   color: transparent;
 }
+.el-form-item__label {
+  width: 100px !important;
+}

src/views/Home.vue

@@ -33,7 +33,7 @@
         </fieldset>
       </div>
       <div class="bottom-div">
-          <fieldset class="left-div box2">
+          <fieldset class="left-div1 box2">
             <legend class="box-ht">磁盘信息</legend>
             <div class="process-div">
               <div v-for="(item, index) in deviceData.diskinfo" :key="index">
@@ -42,10 +42,10 @@
             </div>
           </fieldset>
  
-          <fieldset class="right-div box2">
+          <fieldset class="right-div1 box2">
             <legend class="box-ht">网卡信息</legend>
-          <div v-for="(item, index) of deviceData.netinfo" :key="index">
-            <p>网卡{{ item.name }}的使用情况</p>
+            <div v-for="(item, index) of deviceData.netinfo" :key="index" class="all-con">
+              <p class="title">网卡{{ item.name }}的使用情况</p>
               <div class="data">
                 <span>
                   <span class="name">字节</span>
@@ -135,14 +135,24 @@ export default {
             elements: [
               {
                 type: "text",
-                left: "40%",
-                top: "middle",
+                left: "center",
+                top: "40%",
                 style: {
-                  text: data.name + "\n" + "    " + data.usedPercent + "%",
+                  text: data.name + "\n",
                   fill: "#000",
-                  fontSize: 16,
+                  fontSize: 18,
                 },
               },
+              {
+                type: "text",
+                left: "center",
+                top: "55%",
+                style: {
+                  text: data.usedPercent + "%",
+                  fill: "#000",
+                  fontSize: 18,
+                },
+              }
             ],
           },
           series: [
@@ -193,7 +203,7 @@ export default {
   height: 8%;
   width: 100%;
   border-radius: 10px;
-  border: 1px solid #006b3b;
+  // border: 1px solid #006b3b;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -214,7 +224,7 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-.left-div {
+.left-div, .left-div1 {
   height: 100%;
   width: 65%;
   border: 1px solid #006b3b;
@@ -253,7 +263,8 @@ export default {
     }
   }
 }
-.right-div {
+
+.right-div, .right-div1 {
   height: 100%;
   width: 34%;
   border: 1px solid #006b3b;
@@ -261,7 +272,7 @@ export default {
   justify-content: space-around;
   border-radius: 10px;
   display: flex;
-  padding: 25px;
+  padding: 10px;
   > div {
     height: 49%;
     flex-direction: column;
@@ -269,16 +280,24 @@ export default {
     display: flex;
     align-items: center;
   }
+  .all-con {
+    width: 100%;
+    height: 50%;
+    // border: 1px solid red;
+  }
   .data {
+    padding: 5px 0;
     width: 70%;
-    height: 80%;
+    height: calc(100% - 30px);
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-direction: column;
+    // border: 1px solid greenyellow;
     >span {
-      height: 45%;
+      height: 30px;
       display: flex;
       align-items: center;
+      // border: 1px solid red;
       .name {
         width: 20%;
       }
@@ -292,7 +311,7 @@ export default {
           border: 1px solid #c3c3c3;
           text-align: center;
           border-radius: 10px;
-          padding: 10px 0;
+          padding: 8px 0;
           color: #098658
         }
         .recv {
@@ -304,11 +323,23 @@ export default {
       }
     }
   }
+  .title {
+    // border: 1px solid red;
+    width: 100%;
+    padding: 5px 0;
+    text-align: center;
+    background: #e2f4e5;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 5px;
+  }
+}
+.left-div1, .right-div1 {
+  width: 49.5%;
 }
 .echartDiv {
   width: 70% !important;
   height: 100% !important;
   margin: 0 auto;
 }
-
 </style>

src/views/Level.vue

@@ -217,21 +217,25 @@ export default {
   height: 95%;
   width: 100%;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
+  // flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   overflow: auto;
   display: flex;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
   align-items: start;
   > div {
     border: 1px solid #006b3b;
     border-radius: 8px;
-    width: 48%;
+    width: 33%;
     margin-bottom: 10px;
     p {
       text-align: center;
-      margin: 10px 0;
+      background: #e2f4e5;
+      height: 60px;
+      line-height: 60px;
+      font-size: 20px;
+      font-weight: 700;
     }
     .info-div {
       width: 98%;
@@ -244,14 +248,14 @@ export default {
     }
   }
   .ipDiv {
-    height: 60%;
+    height: 90%;
   }
   .moreipDiv {
-    height: 48%;
+    height: 90%;
     overflow: auto;
   }
   .dnsDiv {
-    height: 45%;
+    height: 90%;
     overflow: auto;
   }
 }