123

src/css/index.scss

@@ -298,4 +298,7 @@ s {
   background: linear-gradient(180deg, #a7fcff, #08ced0);
   -webkit-background-clip: text;
   color: transparent;
+}
+.el-form-item__label {
+  width: 100px !important;
 }

src/views/Home.vue

@@ -33,37 +33,37 @@
         </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">
-              <div :id="'echartDiv' + index" class="echartDiv"></div>
+            <div class="process-div">
+              <div v-for="(item, index) in deviceData.diskinfo" :key="index">
+                <div :id="'echartDiv' + index" class="echartDiv"></div>
+              </div>
             </div>
-          </div>
-        </fieldset>
+          </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 class="data">
-              <span>
-                <span class="name">字节</span>
-                <span class="dataValue">
-                  <span class="recv">{{ item.bytesRecv }}↓</span>
-                  <span class="sent">{{ item.bytesSent }}↑</span>
+            <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>
+                  <span class="dataValue">
+                    <span class="recv">{{ item.bytesRecv }}↓</span>
+                    <span class="sent">{{ item.bytesSent }}↑</span>
+                  </span>
                 </span>
-              </span>
-              <span>
-                <span  class="name">包</span>
-                <span class="dataValue">
-                  <span class="recv">{{ item.packetsRecv }}↓</span>
-                  <span class="sent">{{ item.packetsSent }}↑</span>
+                <span>
+                  <span  class="name">包</span>
+                  <span class="dataValue">
+                    <span class="recv">{{ item.packetsRecv }}↓</span>
+                    <span class="sent">{{ item.packetsSent }}↑</span>
+                  </span>
                 </span>
-              </span>
+              </div>
             </div>
-          </div>
-        </fieldset>
+          </fieldset>
       </div>
     </div>
   </el-card>
@@ -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;
   }
 }