sidewest

pages/demo/lid/components/sideWest.vue

  <template>
   <div>
-    <div class="gradient" >
+    <div class="gradient">
       <p>井盖总数</p>
-    <p><span class="f20 fwBold">1234</span>个</p>
+      <p>
+        <span class="f20 fwBold">1234</span>个
+      </p>
     </div>
-    <div class="mt30 gradient1" >
+    <div class="mt30 gradient1">
       <p>正常数量</p>
-    <p><span class="f20 fwBold">1204</span>个</p>
+      <p>
+        <span class="f20 fwBold">1204</span>个
+      </p>
     </div>
-    <div class="mt30 gradient2" >
+    <div class="mt30 gradient2">
       <p>报警数量</p>
-    <p><span class="f20 fwBold">30</span>个</p>
+      <p>
+        <span class="f20 fwBold">30</span>个
+      </p>
     </div>
     <div class="mt30 demoDiv">
-     <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
+      <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000;">
         <p slot="title" class="tl">实时行车异常列车</p>
-          <div  class="divInfo">
+        <div class="divInfos">
           <p>地址：山西省西安市未央区</p>
           <p>设备名称：凤城五路11号井盖</p>
           <p>报警时间：2020-06-06 08:08:08</p>
           <p class="red">报警数值：甲烷浓度-55%</p>
-          </div>
           <divider></divider>
-          <div  class="mt20 divInfo">
           <p>地址：山西省西安市未央区</p>
           <p>设备名称：凤城五路11号井盖</p>
           <p>报警时间：2020-06-06 08:08:08</p>
@@ -64,62 +68,63 @@ export default {
   height: 100px;
   width: 300px;
   text-align: left;
-  padding:20px ;
+  padding: 20px;
 }
 .gradient1 {
   background: url(/imgshow/bg3.png) right top no-repeat,
-    -moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
+    -moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
   background: -webkit-gradient(
     linear,
     left top,
     left bottom,
-    color-stop(0%, #05E99C),
-    color-stop(100%, #7CF538)
+    color-stop(0%, #05e99c),
+    color-stop(100%, #7cf538)
   );
-  background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
-  background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
-  background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
+  background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
+  background: -o-linear-gradient(top, #05e99c 0%, #7cf538 100%);
+  background: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
   background: url(/imgshow/bg3.png) right top no-repeat,
-    linear-gradient(to right, #05E99C 0%, #7CF538 100%);
+    linear-gradient(to right, #05e99c 0%, #7cf538 100%);
   border-radius: 5px;
   box-shadow: 0 0 10px #000;
   color: white;
   height: 100px;
   width: 300px;
   text-align: left;
-  padding:20px ;
+  padding: 20px;
 }
 .gradient2 {
   background: url(/imgshow/bg5.png) right top no-repeat,
-    -moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
+    -moz-linear-gradient(left, #f95577 0%, #fca534 100%);
   background: -webkit-gradient(
     linear,
     left top,
     left bottom,
-    color-stop(0%, #F95577),
-    color-stop(100%, #FCA534)
+    color-stop(0%, #f95577),
+    color-stop(100%, #fca534)
   );
-  background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
-  background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
-  background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
+  background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
+  background: -o-linear-gradient(top, #f95577 0%, #fca534 100%);
+  background: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
   background: url(/imgshow/bg5.png) right top no-repeat,
-    linear-gradient(to right, #F95577 0%, #FCA534 100%);
+    linear-gradient(to right, #f95577 0%, #fca534 100%);
   border-radius: 5px;
   box-shadow: 0 0 10px #000;
   color: white;
   height: 100px;
   width: 300px;
   text-align: left;
-  padding:20px ;
+  padding: 20px;
 }
-.divInfo {
+.divInfos {
   background: #fff;
   padding: 0 20px;
 }
-.divInfo p {
+.divInfos p {
   text-align: left;
   line-height: 26px;
 }
+
 .demoDiv .ivu-card-head {
   background: #dedde4;
 }