修复首页Bug

src/styles/view/monitor/homePage.scss

@@ -10,19 +10,24 @@
 .yi {
   color: #48e0ff;
 }
+
 .er {
   color: #f1f10c;
 }
+
 .san {
   color: #ff8000;
 }
+
 .si {
   color: #fc2f1e;
 }
+
 .ant-calendar {
-  width: 180px !important;
+  width: vw(180) !important;
   background-color: #0e7fb4 !important;
 }
+
 .souh {
   height: 100%;
   width: 100%;
@@ -36,10 +41,10 @@
     text-align: center !important;
   }
 
-  .ant-table-thead > tr.ant-table-row-hover > td,
-  .ant-table-tbody > tr.ant-table-row-hover > td,
-  .ant-table-thead > tr:hover > td,
-  .ant-table-tbody > tr:hover > td {
+  .ant-table-thead>tr.ant-table-row-hover>td,
+  .ant-table-tbody>tr.ant-table-row-hover>td,
+  .ant-table-thead>tr:hover>td,
+  .ant-table-tbody>tr:hover>td {
     background: rgb(176, 204, 240);
   }
 
@@ -53,8 +58,8 @@
       background-color: rgba(23, 186, 252, 1);
     }
 
-    .ant-table-middle .ant-table-thead > tr > th:not(.ant-table-selection-column),
-    .ant-table-middle .ant-table-tbody > tr:nth-child(even) {
+    .ant-table-middle .ant-table-thead>tr>th:not(.ant-table-selection-column),
+    .ant-table-middle .ant-table-tbody>tr:nth-child(even) {
       background-color: #0e7fb4;
     }
 
@@ -62,72 +67,87 @@
       width: 4px;
       background-color: #0e487c;
     }
+
     ::-webkit-scrollbar-thumb {
       background-color: #4facfa;
     }
+
     .ant-table-header {
       margin-bottom: -1% !important;
     }
+
     .ant-table-content {
       max-height: 100% !important;
     }
+
     .ant-table-body {
       max-height: 340px !important;
       overflow-y: auto !important;
     }
-    .ant-table-tbody > tr > td {
+
+    .ant-table-tbody>tr>td {
       border: 0px solid #e9e9e9;
     }
+
     .table,
     td,
     tr,
     th {
-      font-size: 15px;
+      font-size: pxToRem(15px);
     }
-    .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
-      font-size: 15px !important;
+
+    .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
+      font-size: pxToRem(15px) !important;
       font-family: Microsoft YaHei UI !important;
-      font-weight: 400 !important;
-      line-height: 14px !important;
+      font-weight: vw(400) !important;
+      line-height: vh(14) !important;
       color: rgba(255, 255, 255, 1) !important;
       background: #265673 !important;
     }
+
     .ant-table table {
       text-align: center !important;
     }
+
     .ant-table-pagination {
-      font-size: 12px;
+      font-size: pxToRem(12px);
       font-family: Microsoft YaHei UI;
-      font-weight: 400;
-      line-height: 14px;
+      font-weight: vw(400);
+      line-height: vh(14);
       color: rgba(255, 255, 255, 1);
     }
+
     .ant-select-sm .ant-select-selection__rendered {
-      line-height: 21px !important;
-      font-size: 12px;
+      line-height: vh(21) !important;
+      font-size: pxToRem(12px);
       font-family: Microsoft YaHei UI;
       color: rgba(255, 255, 255, 1);
     }
+
     .ant-select-selection {
       background-color: rgba(23, 186, 252, 1);
     }
-    .ant-table-thead > tr > th {
+
+    .ant-table-thead>tr>th {
       text-align: center;
       background: #265673;
       border: 0px solid #265673;
-      font-size: 15px;
+      font-size: pxToRem(15px);
       font-family: Microsoft YaHei;
       color: rgba(255, 255, 255, 1);
     }
+
     .ant-table-fixed-header .ant-table-scroll .ant-table-header {
       overflow: hidden;
     }
-    .ant-table-bordered .ant-table-header > table,
-    .ant-table-bordered .ant-table-body > table,
+
+    .ant-table-bordered .ant-table-header>table,
+    .ant-table-bordered .ant-table-body>table,
     .ant-table-bordered .ant-table-fixed-left table,
     .ant-table-bordered .ant-table-fixed-right table {
       border: 0px solid #e9e9e9;
     }
+
     //   .ant-table-middle .ant-table-thead > tr > th:not(.ant-table-selection-column), .ant-table-middle .ant-table-tbody > tr > td {
     //     padding: 16px 8px;
 
@@ -135,18 +155,23 @@
     .ant-table-placeholder {
       background: #265673;
     }
+
     .ant-table-wrapper {
       height: 100%;
     }
+
     .ant-spin-nested-loading {
       height: 100%;
     }
+
     .ant-spin-container {
       height: 100%;
     }
+
     .ant-.ant-spin-container {
       height: 100%;
     }
+
     .ant-table {
       height: 87%;
     }
@@ -171,9 +196,9 @@
         background-image: url('/src/assets/safetyManage/sousuo.png');
         background-repeat: no-repeat !important;
         right: 26%;
-        height: 20px;
+        height: vh(20);
         position: relative;
-        width: 20px;
+        width: vw(20);
         /* margin-top: 10%; */
         margin-top: -1%;
         float: right;
@@ -186,7 +211,7 @@
 
         .ant-input-affix-wrapper .ant-input-suffix {
           position: absolute;
-          padding-right: 24px;
+          padding-right: vw(24);
           top: 50%;
           transform: translateY(-50%);
           line-height: 0;
@@ -198,7 +223,7 @@
           margin: 0;
           font-family: 'Helvetica Neue For Number', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
             'Helvetica Neue', Helvetica, Arial, sans-serif;
-          font-size: 12px;
+          font-size: pxToRem(12px);
           font-variant: tabular-nums;
           line-height: 1.5;
           color: rgba(0, 0, 0, 0.65);
@@ -206,9 +231,9 @@
           box-sizing: border-box;
           position: relative;
           display: inline-block;
-          width: 50;
-          padding-left: 24px;
-          padding-right: 24px;
+          width: vw(50);
+          padding-left: vw(24);
+          padding-right: vw(24);
         }
 
         .ant-input-search {
@@ -217,8 +242,8 @@
               position: relative;
               display: inline-block;
               background: url('/src/assets/safetyManage/sousuo.png') no-repeat;
-              width: 20px;
-              height: 20px;
+              width: vw(20);
+              height: vh(20);
               background-size: 100% 100%;
 
               top: 0px;
@@ -229,9 +254,9 @@
 
         .ant-input {
           // width: 10.7rem;
-          height: 30px;
+          height: vh(30);
           // position: relative;
-          font-size: 10px;
+          font-size: pxToRem(10px);
           font-family: Microsoft YaHei;
           font-weight: bold;
           // line-height:50px;
@@ -242,9 +267,11 @@
           background: rgba(0, 185, 255, 0.3) !important;
           border-radius: 17px;
           left: 34%;
+
           .anticon:before {
             margin-top: 1px;
           }
+
           border-color: rgba(0, 185, 255, 0.3);
         }
       }
@@ -263,9 +290,9 @@
         background-image: url('/src/assets/safetyManage/sousuo.png');
         background-repeat: no-repeat !important;
         right: 26%;
-        height: 20px;
+        height: vh(20);
         position: relative;
-        width: 20px;
+        width: vw(20);
         /* margin-top: 10%; */
         margin-top: -1%;
         float: right;
@@ -278,7 +305,7 @@
 
         .ant-input-affix-wrapper .ant-input-suffix {
           position: absolute;
-          padding-right: 24px;
+          padding-right: vw(24);
           top: 50%;
           transform: translateY(-50%);
           line-height: 0;
@@ -290,17 +317,17 @@
           margin: 0;
           font-family: 'Helvetica Neue For Number', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
             'Helvetica Neue', Helvetica, Arial, sans-serif;
-          font-size: 12px;
+          font-size: pxToRem(12px);
           font-variant: tabular-nums;
-          line-height: 1.5;
+          line-height: vh(1.5);
           color: rgba(0, 0, 0, 0.65);
           list-style: none;
           box-sizing: border-box;
           position: relative;
           display: inline-block;
-          width: 50;
-          padding-left: 24px;
-          padding-right: 24px;
+          width: vw(50);
+          padding-left: vw(24);
+          padding-right: vw(24);
         }
 
         .ant-input-search {
@@ -309,8 +336,8 @@
               position: relative;
               display: inline-block;
               background: url('/src/assets/safetyManage/sousuo.png') no-repeat;
-              width: 20px;
-              height: 20px;
+              width: vw(20);
+              height: vh(20);
               background-size: 100% 100%;
 
               top: 0px;
@@ -321,9 +348,9 @@
 
         .ant-input {
           // width: 10.7rem;
-          height: 30px;
+          height: vh(30);
           // position: relative;
-          font-size: 10px;
+          font-size: pxToRem(10px);
           font-family: Microsoft YaHei;
           font-weight: bold;
           // line-height:50px;
@@ -334,9 +361,11 @@
           background: rgba(0, 185, 255, 0.3) !important;
           border-radius: 17px;
           left: 34%;
+
           .anticon:before {
             margin-top: 1px;
           }
+
           border-color: rgba(0, 185, 255, 0.3);
         }
       }
@@ -352,7 +381,7 @@
 
       .amos-popover-trigger {
         border-color: rgba(0, 185, 255, 0.3);
-        font-size: 10px;
+        font-size: pxToRem(10px);
         font-family: Microsoft YaHei;
         font-weight: bold;
         // line-height:50px;
@@ -367,13 +396,14 @@
         position: relative;
         display: inline-block;
         background: url('/src/assets/safetyManage/xiangxia.png') no-repeat;
-        width: 20px;
-        height: 20px;
+        width: vw(20);
+        height: vh(20);
         background-size: 100% 100%;
-        top: 4px;
+        top: vh(4);
         content: '' !important;
       }
     }
+
     .search-three {
       position: relative;
       height: 100%;
@@ -391,7 +421,7 @@
       }
 
       .ant-input {
-        font-size: 10px;
+        font-size: pxToRem(10px);
         font-family: Microsoft YaHei;
         font-weight: bold;
         // line-height:50px;
@@ -407,19 +437,21 @@
         display: inline-block;
         background: url('/src/assets/safetyManage/rjd.png') no-repeat;
         background-size: 100% 100%;
-        width: 18px;
-        height: 20px;
-        bottom: 4px;
-        right: -2px;
+        width: vw(18);
+        height: vh(20);
+        bottom: vh(4);
+        right: vw(-2);
         content: '' !important;
       }
+
       .three-font {
-        font-size: 15px;
+        font-size: pxToRem(15px);
         font-family: Microsoft YaHei;
-        font-weight: 400;
-        line-height: 23px;
+        font-weight: vw(400);
+        line-height: vh(23);
         color: rgba(255, 255, 255, 1);
       }
+
       .ant-calendar-picker-icon {
         // background-image: url('/src/assets/safetyManage/sousuo.png');
         // background-repeat: no-repeat !important;
@@ -443,7 +475,7 @@
       }
 
       .ant-input {
-        font-size: 10px;
+        font-size: pxToRem(10px);
         font-family: Microsoft YaHei;
         font-weight: bold;
         // line-height:50px;
@@ -459,19 +491,21 @@
         display: inline-block;
         background: url('/src/assets/safetyManage/rjd.png') no-repeat;
         background-size: 100% 100%;
-        width: 18px;
-        height: 20px;
-        bottom: 4px;
-        right: -2px;
+        width: vw(18);
+        height: vh(20);
+        bottom: vh(4);
+        right: vw(-2);
         content: '' !important;
       }
+
       .three-font {
-        font-size: 15px;
+        font-size: pxToRem(15px);
         font-family: Microsoft YaHei;
-        font-weight: 400;
-        line-height: 23px;
+        font-weight: vw(400);
+        line-height: vh(23);
         color: rgba(255, 255, 255, 1);
       }
+
       .ant-calendar-picker-icon {
         // background-image: url('/src/assets/safetyManage/sousuo.png');
         // background-repeat: no-repeat !important;
@@ -490,17 +524,21 @@
     opacity: 1;
     border-radius: 17px;
     border: 0 solid #e8e8e8;
-    line-height: 32px;
+    line-height: vh(32);
   }
+
   .amos-std-form-content {
     width: 100%;
   }
+
   .ant-calendar-picker {
     width: 100% !important;
   }
+
   .amos-std-form-label {
     width: 4em;
   }
+
   .ant-input {
     background-color: rgba(0, 185, 255, 0.3);
     opacity: 1;
@@ -508,27 +546,32 @@
     border: 0 solid #e8e8e8;
   }
 }
+
 .inputxq3 {
   margin-left: 15%;
   float: left;
   width: 24%;
+
   .amos-std-form-content {
     width: 100%;
   }
+
   .amos-search {
     width: 80%;
   }
+
   .amos-search-inner {
     background-color: rgba(0, 185, 255, 0.3);
     opacity: 1;
     border-radius: 17px;
-    height: 34px;
+    height: vh(34);
   }
+
   .amos-search-inner {
     color: rgba(240, 242, 243, 1);
     font-family: Microsoft YaHei;
-    font-weight: 400;
-    line-height: 26px;
+    font-weight: vw(400);
+    line-height: vh(26);
   }
 }
 
@@ -537,34 +580,38 @@
     background: rgba(14, 127, 180, 0.29);
     height: 70%;
   }
+
   .amos-modal-content {
     padding: 0.5em;
     height: 100%;
   }
+
   .amos-modal-header {
     background: rgba(14, 127, 180, 0.29);
     padding: 0.3em 0.3em;
     border-bottom: 0px solid #e5e5e5;
+
     .amos-modal-title {
       font-size: 15px;
       font-family: Microsoft YaHei;
-      font-weight: 400;
-      margin-left: 10px;
+      font-weight: vh(400);
+      margin-left: vw(10);
       height: 100%;
-      line-height: 20px;
+      line-height: vh(20);
       color: rgba(255, 255, 255, 1);
       -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
       opacity: 1;
     }
   }
+
   .amos-modal-close-x {
     width: 100%;
     height: 100%;
     font-size: 20px;
     font-style: normal;
-    line-height: 24px;
-    margin-right: 13px;
-    margin-top: 4px;
+    line-height: vh(24);
+    margin-right: vw(13);
+    margin-top: vh(4);
     background-color: rgba(252, 47, 30, 1);
   }
 }
@@ -577,6 +624,7 @@
   margin-left: 1.9%;
   z-index: 1;
   top: 8.51%;
+
   .AlarmControl {
     margin-top: 10%;
     height: 29.9%;
@@ -585,131 +633,148 @@
     background-repeat: no-repeat;
     background-size: 100% 100%;
     -moz-background-size: 100% 100%;
+
     .AlarmControl_1 {
       height: 10%;
       width: 100%;
+
       // border:1px solid rgba(23,186,252,1);
       .AlarmControl_1_1 {
         width: 50%;
         margin-left: 9.4%;
         height: 100px;
-        font-size: 15px;
+        font-size: pxToRem(15px);
         font-family: Microsoft YaHei;
-        font-weight: 400;
-        line-height: 24px;
+        font-weight: vw(400);
+        line-height: vh(24);
         color: rgba(255, 255, 255, 1);
         text-shadow: 0px 0px 4px rgba(9, 35, 61, 1);
         opacity: 1;
       }
     }
+
     .AlarmControl_2 {
       height: 90%;
       width: 100%;
+
       .AlarmControl_2_1 {
         float: right;
         color: rgb(89, 240, 251);
         line-height: 60%;
         text-align: center;
-        font-size: 22px;
-        width: 28px;
-        height: 28px;
-        background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%);
+        font-size: pxToRem(22px);
+        width: vw(28);
+        height: vh(28);
+        background: linear-gradient(180deg, rgba(95, 255, 253, 0.6) 0%, rgba(95, 255, 253, 0.1) 100%);
         cursor: pointer;
         //border:1px solid rgba(23,186,252,1);
       }
+
       .AlarmControl_2_2 {
         width: 100%;
         float: right;
         height: 87%;
+
         // border:1px solid rgba(23,186,252,1);
         .AlarmControl_2_2_1 {
           width: 50%;
           float: right;
           height: 100%;
+
           // border:1px solid rgba(23,186,252,1);
           .AlarmControl8 {
             margin-top: 32%;
           }
+
           .AlarmControl2 {
             width: 100%;
             float: right;
             height: 20%;
+
             //  border:1px solid rgba(23,186,252,1);
             .AlarmControl2_2 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(243, 12, 12, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_3 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(219, 121, 23, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_4 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(209, 209, 52, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_1 {
               height: 100%;
               width: 90%;
               float: right;
+
               //  border:1px solid rgba(23,186,252,1);
               .AlarmControl2_12 {
                 float: left;
                 margin-left: 2%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_13 {
                 float: left;
                 margin-left: 2%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_12 {
                 float: left;
                 margin-left: 2%;
                 font-size: 10px;
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_13 {
                 float: left;
                 margin-left: 2%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
             }
           }
         }
+
         .AlarmControl_2_2_2 {
           width: 50%;
           float: right;
@@ -728,55 +793,65 @@
     background-repeat: no-repeat;
     background-size: 100% 100%;
     -moz-background-size: 100% 100%;
+
     .DangerControl_1 {
       height: 10%;
       width: 100%;
+
       // border:1px solid rgba(23,186,252,1);
       .DangerControl_1_1 {
         width: 50%;
         margin-left: 9.4%;
         height: 100px;
-        font-size: 15px;
+        font-size: pxToRem(15px);
         font-family: Microsoft YaHei;
-        font-weight: 400;
-        line-height: 24px;
+        font-weight: vw(400);
+        line-height: vh(24);
         color: rgba(255, 255, 255, 1);
         text-shadow: 0px 0px 4px rgba(9, 35, 61, 1);
         opacity: 1;
       }
     }
+
     .DangerControl_2 {
       height: 90%;
       width: 100%;
+
       .DangerControl_2_1 {
         float: right;
         color: rgb(89, 240, 251);
         line-height: 60%;
         text-align: center;
-        font-size: 22px;
-        width: 28px;
-        height: 28px;
-        background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%);
+        font-size: pxToRem(22px);
+        ;
+        width: vw(28);
+        height: vh(28);
+        background: linear-gradient(180deg, rgba(95, 255, 253, 0.6) 0%, rgba(95, 255, 253, 0.1) 100%);
         cursor: pointer;
         // border:1px solid rgba(23,186,252,1);
       }
+
       .DangerControl_2_2 {
         width: 100%;
         float: right;
         height: 87%;
+
         //border:1px solid rgba(23,186,252,1);
         .DangerControl_2_2_1 {
           width: 50%;
           float: right;
           height: 100%;
+
           // border:1px solid rgba(23,186,252,1);
           .AlarmControl8 {
             margin-top: 20%;
           }
+
           .AlarmControl2 {
             width: 100%;
             float: right;
             height: 20%;
+
             //  border:1px solid rgba(23,186,252,1);
             .AlarmControl2_2 {
               float: right;
@@ -787,81 +862,90 @@
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_3 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(255, 214, 0, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_4 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(0, 255, 238, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_5 {
               float: right;
               margin-top: 5%;
-              width: 10px;
-              height: 10px;
+              width: vw(10);
+              height: vh(10);
               background: rgba(0, 255, 238, 1);
               border-radius: 50%;
               opacity: 1;
             }
+
             .AlarmControl2_1 {
               height: 100%;
               width: 90%;
               float: right;
+
               //  border:1px solid rgba(23,186,252,1);
               .AlarmControl2_12 {
                 float: left;
                 margin-left: 1%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_13 {
                 float: left;
                 margin-left: 1%;
                 font-size: 10px;
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_12 {
                 float: left;
                 margin-left: 1%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
+
               .AlarmControl2_13 {
                 float: left;
                 margin-left: 1%;
-                font-size: 10px;
+                font-size: pxToRem(10px);
                 font-family: Microsoft YaHei;
                 font-weight: bold;
-                line-height: 20px;
+                line-height: vh(30);
                 color: rgba(255, 255, 255, 1);
                 opacity: 1;
               }
             }
           }
         }
+
         .DangerControl_2_2_2 {
           width: 50%;
           float: right;
@@ -883,6 +967,7 @@
     .RiskControl_1 {
       height: 10%;
       width: 100%;
+
       // border:1px solid rgba(23,186,252,1);
       .RiskControl_1_1 {
         width: 50%;
@@ -897,9 +982,11 @@
         opacity: 1;
       }
     }
+
     .RiskControl_2 {
       height: 64%;
       width: 100%;
+
       .RiskControl_2_1 {
         float: right;
         color: rgb(89, 240, 251);
@@ -908,40 +995,48 @@
         font-size: pxToRem(22px);
         width: vw(28);
         height: vh(28);
-        background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%);
+        background: linear-gradient(180deg, rgba(95, 255, 253, 0.6) 0%, rgba(95, 255, 253, 0.1) 100%);
         cursor: pointer;
         //border:1px solid rgba(23,186,252,1);
       }
+
       .RiskControl_2_2 {
         width: 100%;
         float: right;
         height: 82%;
+
         // border:1px solid rgba(23,186,252,1);
         .RiskControl_2_2_1 {
           width: 50%;
           float: right;
           height: 100%;
+
           // border:1px solid rgba(23,186,252,1);
           .RiskControl_2_2_19 {
             margin-left: 30%;
             margin-top: 2%;
             height: 40%;
+
             .shi {
               color: rgba(243, 12, 12, 1);
               font-size: pxToRem(22px);
             }
+
             .shi1 {
               color: rgba(243, 12, 12, 1);
             }
+
             .shou {
               color: rgba(0, 255, 238, 1);
               font-size: pxToRem(22px);
             }
+
             .shou1 {
               color: rgba(0, 255, 238, 1);
             }
           }
         }
+
         .RiskControl_2_2_2 {
           width: 50%;
           float: right;
@@ -952,24 +1047,28 @@
 
       // border:1px solid rgba(23,186,252,1);
     }
+
     .RiskControl_3 {
       height: 26%;
       width: 100%;
+
       // border:1px solid rgba(23,186,252,1);
       .RiskControl_3_1 {
         height: 40%;
         width: 50%;
         float: right;
+
         //border:1px solid rgba(23,186,252,1);
         .RiskControl_3_1_1 {
           height: 100%;
           width: 90%;
           float: right;
+
           //  border:1px solid rgba(23,186,252,1);
           .RiskControl_3_1_8 {
             float: left;
             margin-left: 8%;
-            font-size:  pxToRem(10px);
+            font-size: pxToRem(10px);
             font-family: Microsoft YaHei;
             font-weight: bold;
             line-height: vh(20);
@@ -977,15 +1076,17 @@
             opacity: 1;
           }
         }
+
         .RiskControl_3_1_17 {
           height: 100%;
           width: 60%;
           float: right;
+
           //  border:1px solid rgba(23,186,252,1);
           .RiskControl_3_1_8 {
             float: left;
             margin-left: 8%;
-            font-size:  pxToRem(10px);
+            font-size: pxToRem(10px);
             font-family: Microsoft YaHei;
             font-weight: bold;
             line-height: vh(20);
@@ -993,6 +1094,7 @@
             opacity: 1;
           }
         }
+
         .RiskControl_3_1_2 {
           float: right;
           margin-top: 5%;
@@ -1002,24 +1104,27 @@
           border-radius: 50%;
           opacity: 1;
         }
+
         .RiskControl_3_1_3 {
           float: right;
           margin-top: 5%;
           width: vw(10);
-          height:  vh(10);
+          height: vh(10);
           background: rgba(243, 12, 12, 1);
           border-radius: 50%;
           opacity: 1;
         }
+
         .RiskControl_3_1_4 {
           float: right;
           margin-top: 5%;
-          width:  vw(10);
+          width: vw(10);
           height: vh(10);
           background: rgba(12, 3, 185, 1);
           border-radius: 50%;
           opacity: 1;
         }
+
         .RiskControl_3_1_5 {
           float: right;
           margin-top: 5%;
@@ -1084,6 +1189,7 @@
         height: 100%;
         width: 100%;
         display: flex;
+
         .all-safety-left {
           height: 89%;
           width: 53%;
@@ -1138,6 +1244,7 @@
             width: 100%;
             text-align: center;
             margin-top: 12%;
+
             .right-three-font {
               font-size: pxToRem(15px);
               font-family: Microsoft YaHei;
@@ -1175,18 +1282,22 @@
     margin-top: 10%;
     height: 34%;
     width: 100%;
+
     .common-card .card-content .card-contain .card-corner {
-      bottom: vh(12) !important;
+      bottom: vh(10) !important;
     }
 
     .fire-safety-content {
       // background-image: url('/src/assets/homePage/xfsl.png');
-      margin-top: vh(30);
+      // margin-top: vh(30);
       background-repeat: no-repeat !important;
       height: 100%;
       width: 100%;
       background-size: 100% 100%;
       -moz-background-size: 100% 100%;
+      position: relative;
+      top: vh(25);
+
       .fire-safety-font {
         height: 11%;
         width: 100%;
@@ -1274,8 +1385,10 @@
       cursor: pointer;
       margin-top: 3%;
       padding-left: 6px;
+
       .content-tongji {
         width: 100%;
+
         .left-div {
           display: inline-block;
         }
@@ -1299,14 +1412,15 @@
     margin-top: 10%;
     height: 34%;
     width: 100%;
+
     .common-card .card-content .card-contain .card-corner {
-      bottom: 11px !important;
+      bottom: vh(11) !important;
     }
 
     .strength-safety-font {
       height: 11%;
       width: 100%;
-      font-size:  pxToRem(15px);
+      font-size: pxToRem(15px);
       font-family: Microsoft YaHei;
       font-weight: vw(400);
       line-height: vh(24);
@@ -1403,11 +1517,13 @@
           background: linear-gradient(90deg, rgba(82, 237, 242, 0.1) 0%, rgba(28, 98, 100, 0.31) 100%);
           box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
+
           .item-img-div {
             width: vw(20);
             float: left;
             margin-right: 5%;
           }
+
           .item-value {
             float: right;
             margin-right: 5%;
@@ -1415,12 +1531,16 @@
         }
       }
     }
-     .strength-safety-div {
-        margin-top: vh(30);
 
-        height: 100%;
-        width: 100%;
-     }
+    .strength-safety-div {
+      // margin-top: vh(30);
+
+      height: 100%;
+      width: 100%;
+      position: relative;
+      top: vh(25);
+    }
+
     .strength-safety-tongji {
       width: 84%;
       height: 12.3%;
@@ -1431,8 +1551,10 @@
       cursor: pointer;
       margin-top: 3%;
       padding-left: 6px;
+
       .content-tongji {
         width: 100%;
+
         .left-div {
           display: inline-block;
         }
@@ -1446,10 +1568,11 @@
           color: rgba(255, 255, 255, 1);
           opacity: 1;
           float: right;
-          margin-right:vw(10);
+          margin-right: vw(10);
         }
       }
     }
   }
 }
+
 //}