静态排版及修复

src/assets/css/index.css

@@ -38,6 +38,26 @@ body {
     min-height: 600px;
 }
 
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+    color: #fff;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+    color: #fff;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+    color: #fff;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+    color: #fff;
+}
+
 header {
     position: relative;
     /* height: 1.25rem; */
@@ -450,7 +470,8 @@ p {
     background-image: url(../images/statisTop-bg.png);
 }
 
-.deviceSum {
+.deviceSum,
+.operStatus {
     background-image: url(../images/deviceSum.png);
 }
 
@@ -458,6 +479,10 @@ p {
     background-image: url(../images/currentUsage-bg.png);
 }
 
+.alarmStatis {
+    background-image: url(../images/deviceSum.png);
+}
+
 .statisSec .statisBottom ul {
     height: 100%;
 }
@@ -496,7 +521,7 @@ p {
 
 .filterSec {
     position: absolute;
-    top: .7rem;
+    top: .62rem;
     right: 10px;
     z-index: 11111111
 }

src/views/home/components/mapStaticTop.vue

@@ -46,6 +46,7 @@
       align-items: center;
       justify-content: center;
       border: 1px solid #00f4fd;
+      background: rgba(8,31,47,0.50);
       p{
           font-size:.2rem
       }

src/views/home/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <section class="mainbox">
+      <!-- topBox start -->
       <div class="topBox">
         <div class="column statisSec">
           <statis-top></statis-top>
@@ -25,7 +26,6 @@
                 <option value="4">月</option>
               </select>
             </div>
-
             <pie-chart></pie-chart>
             <div class="panel-footer"></div>
           </div>
@@ -36,6 +36,10 @@
           </div>
         </div>
       </div>
+       <!-- topBox end -->
+
+
+      <!-- bottomBox start -->
       <div class="bottomBox">
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
@@ -62,6 +66,8 @@
           </div>
         </div>
       </div>
+      <!-- bottomBox end -->
+
     </section>
   </div>
 </template>
@@ -72,6 +78,8 @@ import pieChart from "./components/pieChart";
 import barChart from "./components/barChart";
 import lineChart from "./components/lineChart";
 import mapStaticTop from "./components/mapStaticTop";
+
+
 // 地图
 import AMap from "AMap";
 import AMapUI from "AMapUI";
@@ -265,6 +273,7 @@ export default {
   right:.15rem;
    width: 3rem;
   height:.425rem;
+  font-size:.15rem
  
 }
  .el-icon-search{
@@ -286,22 +295,6 @@ color:#fff;
 
 }
 
-input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
-  color:#fff;
-}
-
-input:-moz-placeholder, textarea:-moz-placeholder {
-  color:#fff;
-}
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  color:#fff;
-}
-
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  color:#fff;
-}
-
 #poiInfo {
   background: #fff;
 }
@@ -368,4 +361,6 @@ input:-ms-input-placeholder, textarea:-ms-input-placeholder {
     /* Chrome Safari */
   }
 }
+
+
 </style>

src/views/site/Overview.vue

@@ -122,11 +122,11 @@ export default {
 <style lang="scss">
 .powerBox {
   height: 100%;
-  border: 1px solid pink;
+  // border: 1px solid pink;
  
   .poerrViewBottom {
     height: 70%;
-    border: 1px solid red;
+    // border: 1px solid red;
   }
 }
 </style>

src/views/site/components/Overview/barChart.vue

@@ -45,7 +45,7 @@ export default {
           left: "4%",
           top: "18%",
           right: "5%",
-          bottom: "27%",
+          bottom: "22%",
         },
         legend: {
           // data: ["昨日总人数", "今日实时人数", "昨日使用率"],

src/views/site/components/Overview/mapStaticTop.vue

@@ -37,7 +37,8 @@
       align-items: center;
       justify-content: center;
       background: #081f2f;
-      border: 1px solid rgba(0,244,253,.5);
+      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253,.6);
+
       p {
         font-size: 0.2rem;
       }

src/views/site/components/Overview/pieChart.vue

@@ -120,16 +120,17 @@ export default {
         series: [
           {
             label: {
-              position: "inside",//此处将展示的文字在内部展示
               normal: {
                 show: true,
-                formatter: " {b}:{c} ",
+                textStyle:{
+                  color:'#fff'
+                },
+                formatter: " {b}:\n{c} ",   
               },
               emphasis: {
                 show: true,
               },
             },
-            name: "访问来源",
             radius: ["43%", "65%"],
             type: "pie", 
             data: pie,
@@ -140,11 +141,6 @@ export default {
 
 							}
 						},
-            // labelLine:{  
-            //     normal:{  
-            //         length:5  
-            //     }  
-            // }, 
           },
         ],
         color: ["#39BBFE", "#FCCB35", "#FC7735"],

src/views/site/components/Overview/pieChart2.vue

@@ -90,19 +90,20 @@ export default {
         },
   
 
-        series: [
+         series: [
           {
             label: {
-              position: "inside",//此处将展示的文字在内部展示
               normal: {
                 show: true,
-                formatter: " {b}:{c} ",
+                textStyle:{
+                  color:'#fff'
+                },
+                formatter: " {b}:\n{c} ",   
               },
               emphasis: {
                 show: true,
               },
             },
-            name: "访问来源",
             radius: ["43%", "65%"],
             type: "pie", 
             data: pie,
@@ -113,11 +114,6 @@ export default {
 
 							}
 						},
-            // labelLine:{  
-            //     normal:{  
-            //         length:5  
-            //     }  
-            // }, 
           },
         ],
         color: ["#39FEFC", "#FC3535"],

src/views/site/components/Overview/powerTop.vue

@@ -31,12 +31,20 @@ export default {
 <style lang="scss">
  .poerrViewTop {
     height: 30%;
-    border: 1px solid red;
+    // border: 1px solid red;
   }
  .poerrViewTop ul {
     display: flex;
     text-align: center;
     height:100%;
+    li:first-child{
+      margin-right:.07rem;
+      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253,.6);
+    }
+    li:last-child{
+      margin-left:.07rem;
+       box-shadow: inset 0 0 0.1rem 0.0125rem rgba(251,183,86,.6);
+    }
 
     li {
       height:100%;
@@ -47,7 +55,7 @@ export default {
       align-items: center;
       justify-content: center;
       background: #081f2f;
-      border: 1px solid rgba(0,244,253,.5);
+      // border: 1px solid rgba(0,244,253,.5);
       p {
         font-size: 0.2rem;
       }