feat;隐患排查

app/src/App.vue

@@ -13,4 +13,8 @@ import ScaleBox from "vue2-scale-box";
   width: 100%;
   height: 100%;
 }
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>

app/src/views/components/HiddenDangerDetection.vue

@@ -1,11 +1,13 @@
 <script>
 import HiddenDangerTotal from "@/components/HiddenDangerTotal.vue";
 import RiskWarning from '@/components/RiskWarning.vue'
+import Rectification from './Rectification.vue'
 export default {
   name: "HiddenDangerDetection",
   components: {
     HiddenDangerTotal,
-    RiskWarning
+    RiskWarning,
+    Rectification
   }
 };
 </script>
@@ -23,7 +25,9 @@ export default {
       <div class="item">
         <RiskWarning />
       </div>
-      <div class="item">2</div>
+      <div class="item">
+        <Rectification/>
+        </div>
     </div>
   </div>
 </template>

app/src/views/components/Rectification.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="gress-box">
+        <div>
+            <div class="gress"> 
+                <span>按整改进度分</span>
+                <span>单位：条</span>
+            </div>
+            <div class="num">
+                <span class="gress-num">存在隐患数</span>
+                <span>3276</span>
+            </div>
+            <div>
+                <ul>
+                    <li class="list-one">
+                        <span class="line-list">待计划整改</span>
+                        <div class="line">
+                            <span class="line-num"  :style="{
+            width: Math.round(80) + '%',
+          }"></span>
+                        </div>
+                    </li>
+                    <li class="list-one">
+                        <span class="line-list">待计划整改</span>
+                        <div class="line">
+                            <span class="line-num"  :style="{
+            width: Math.round(80) + '%',
+          }"></span>
+                        </div>
+                    </li>
+                    <li class="list-one">
+                        <span class="line-list">待计划整改</span>
+                        <div class="line">
+                            <span class="line-num"  :style="{
+            width: Math.round(80) + '%',
+          }"></span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script >
+
+</script>
+
+<style scoped>
+.gress-box{
+    padding: 20px 10px;
+}
+.gress{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.gress-num{
+    color: #00C2FF;
+    margin-right: 18px;
+}
+.num{
+    font-size: 20px;
+    margin-top: 20px;
+}
+.list-one{
+    height: 34px;
+    background-color:#00D5FF ;
+    margin-top: 14px;
+    padding: 0 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.line{
+    width: 148px;
+    height: 10px;
+    background:#79A1C7 ;
+    display: inline-block;
+    position: relative;
+}
+.line-list{
+    margin-top: 2px;
+}
+.line-num{
+position: absolute;
+top: 0;
+display: inline-block;
+height: 10px;
+background: #00D1FF;
+z-index: 10059;
+}
+</style>