reactor:样式调整

src/views/comprehensive-overview/right.vue

@@ -50,7 +50,7 @@
           <template v-slot:mainArea>
             <div class="card-item">
               <div class="warning-content">
-                <div class="warning-title">
+                <div class="warning-title mb16">
                   <div class="title">预警总数</div>
                   <div class="num">30</div>
                   <div class="unit">条</div>
@@ -186,9 +186,9 @@ export default {
             },
             legend: {
               orient: 'vertical',
-              right: 10,
-              top: 35,
-              bottom: 20,
+              right:55,
+              top: 20,
+              bottom: 10,
               itemWidth: 12,
               itemHeight: 6,
               textStyle: { color: '#F5F5F5', fontSize: this.pxToRem(14) },
@@ -416,7 +416,7 @@ export default {
   .card-item {
     position: relative;
     width: 3.68rem;
-    padding: px-to-rem(22) px-to-rem(16) px-to-rem(27) px-to-rem(26);
+    padding: px-to-rem(15) px-to-rem(16) px-to-rem(20) px-to-rem(26);
     .icon-content {
       display: flex;
       align-items: center;
@@ -546,5 +546,8 @@ export default {
       }
     }
   }
+  .mb16{
+    margin-bottom: px-to-rem(20);
+  }
 }
 </style>