数据监测

src/views/echarts.vue

@@ -7,19 +7,19 @@
       <hr />
       <!-- 顶部展示信息区开始 -->
       <div class="topDataBlock">    
-        <div class="topData" style="background-image: linear-gradient(100deg, #3caef5 60%,#497df5);">
+        <div class="topData">
         
         </div>
-        <div class="topData" style="background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);">
+        <div class="topData">
         
         </div>
-        <div class="topData" style="background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);">
+        <div class="topData">
         
         </div>
-        <div class="topData" style="background-image: linear-gradient(100deg, #3caef5 60%,#497df5);">
+        <div class="topData">
         
         </div>
-        <div class="topData" style="background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);">
+        <div class="topData">
         
         </div>
         
@@ -125,21 +125,45 @@
 <style lang="less">
   .topDataBlock{
     margin-top: 20px;
-    width: 95%;
+    width: 100%;
     height: 130px;
     // background: #b65f5f;
     display: flex;
     justify-content:space-between;
     align-items: center;
-    .topData{
+    .topData:nth-child(1){
       width: 19%;
       height: 94%;
-      background: #fff;
+      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
+      border-radius: 5px;
+    }
+    .topData:nth-child(2){
+      width: 19%;
+      height: 94%;
+      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
+      border-radius: 5px;
+    }
+    .topData:nth-child(3){
+      width: 19%;
+      height: 94%;
+      background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);
+      border-radius: 5px;
+    }
+    .topData:nth-child(4){
+      width: 19%;
+      height: 94%;
+      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
+      border-radius: 5px;
+    }
+    .topData:nth-child(5){
+      width: 19%;
+      height: 94%;
+      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
       border-radius: 5px;
     }
   }
   .midBlock{     //中部大饼
-    width: 95%;
+    width: 100%;
     height: 300px;
     margin-top: 20px;
     // background: #ce7070;
@@ -155,8 +179,8 @@
 
   .histogram{       //柱状图
     margin-top: 20px;
-    width: 95%;
-    height: 270px;
+    width: 100%;
+    height: 350px;
     background: #f3f6f7;
   }