feat(首页): 风险程度概览

src/views/index.vue

@@ -130,8 +130,34 @@
     <el-row :gutter="20">
       <el-col :span="14">
         <div class="cardStyle">
-          <div>
+          <div style="display: flex">
             <UseCaseRisk></UseCaseRisk>
+            <div style="width: 50%; display: flex; align-items: center">
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-around;
+                  height: 149px;
+                "
+              >
+                <div class="dangerousCard" style="background: #f1f5f9">
+                  <div class="lineOne">高危</div>
+                  <div>高危</div>
+                  <div class="lineLast">83</div>
+                </div>
+                <div class="dangerousCard" style="background: #fef6e9">
+                  <div class="lineOne">中危</div>
+                  <div>高危</div>
+                  <div class="lineLast">45</div>
+                </div>
+                <div class="dangerousCard" style="background: #e8f1fb">
+                  <div class="lineOne">低危</div>
+                  <div>高危</div>
+                  <div class="lineLast">78</div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="dashed-divider"></div>
           <div>
@@ -218,6 +244,26 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.dangerousCard {
+  padding: 20px;
+  width: 106px;
+  height: 149px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+  .lineOne {
+    font-size: 14px;
+    font-weight: 400;
+    color: #606266;
+  }
+  .lineLast {
+    font-size: 16px;
+    font-weight: 400;
+    color: #303133;
+  }
+}
 .dashed-divider {
   border-top: 1px dashed #ccc;
   margin: 10px 0;
@@ -275,7 +321,7 @@ export default {
     margin-bottom: 40px;
   }
   .cardChild {
-    width: calc(50% - 20px);
+    width: calc(50% - 10px);
     height: 174px;
     border-radius: 8px;
   }