fix: set popup position

src/views/IncidentDetail/index.scss

@@ -3,27 +3,30 @@
 
 .incident-detail-page-container {
   flex: 1;
-  // position: absolute;
-  // width: 100%;
-  // height: 100vh;
-  // .detail-left,
-  // .detail-right {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 1;
-  // }
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  .detail-left,
+  .detail-right {
+    position: absolute;
+    top: calc(50% + px2rem(52px));
+    transform: translateY(calc(-50% - px2rem(52px / 2)));
+    height: max-content;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+  }
 
-  // .detail-left {
-  //   left: 0;
-  //   width: calc(px2rem(470px) * 2 + px2rem(21px));
-  //   height: calc(px2rem(472px) * 2 + px2rem(21px));
-  // }
-  // .detail-right {
-  //   right: 0;
-  //   width: px2rem(939px);
-  //   height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
-  // }
+  .detail-left {
+    left: px2rem(30px);
+    width: calc(px2rem(470px) * 2 + px2rem(21px));
+    // height: calc(px2rem(472px) * 2 + px2rem(21px));
+  }
+  .detail-right {
+    right: px2rem(30px);
+    width: px2rem(939px);
+    // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
+  }
   .echarts {
     width: px2rem(642px);
     height: px2rem(887px);
@@ -33,11 +36,12 @@
     transform: translateX(-50%);
   }
   .card-container {
-    position: absolute;
-    top: px2rem(83px);
+    // position: absolute;
+    // top: px2rem(83px);
 
     &-bg-incident-info {
-      left: px2rem(30px);
+      // left: px2rem(30px);
+      margin-right: px2rem(21px);
       .info-container {
         display: flex;
         flex-direction: column;
@@ -93,7 +97,7 @@
       }
     }
     &-bg-command-chain {
-      left: px2rem(521px);
+      // left: px2rem(521px);
       .command-chain-container {
         position: relative;
         .chain-item {
@@ -192,8 +196,10 @@
       }
     }
     &-bg-incident-plan {
-      top: px2rem(482px + 83px);
-      left: px2rem(30px);
+      // top: px2rem(482px + 83px);
+      // left: px2rem(30px);
+      margin-top: px2rem(21px);
+      margin-right: px2rem(21px);
       .plan-container {
         .el-checkbox__inner {
           background-color: transparent;
@@ -216,8 +222,10 @@
       }
     }
     &-bg-emergency-linkage {
-      top: px2rem(482px + 83px);
-      left: px2rem(521px);
+      // top: px2rem(482px + 83px);
+      // left: px2rem(521px);
+      margin-top: px2rem(21px);
+
       .linkage-chain-container {
         display: flex;
         flex-wrap: wrap;
@@ -239,7 +247,8 @@
       }
     }
     &-bg-execution-log {
-      right: px2rem(22px);
+      // right: px2rem(22px);
+      position: relative;
       &::before {
         content: '';
         position: absolute;
@@ -247,13 +256,13 @@
         height: calc(100% - px2rem(80px) - px2rem(30px));
 
         background: #112692;
-        top: px2rem(80px);
+        top: calc(px2rem(80px + 20px));
         left: 50%;
         transform: translateX(-50%);
         z-index: -1;
       }
       .execution-log-container {
-        padding: 20px 0;
+        padding: px2rem(20px) 0;
         .log-item {
           position: relative;
           margin-bottom: 40px;
@@ -381,8 +390,9 @@
       }
     }
     &-bg-live-monitoring {
-      top: px2rem(564px + 83px);
-      right: px2rem(22px);
+      // top: px2rem(564px + 83px);
+      // right: px2rem(22px);
+      margin-top: px2rem(21px);
       .live-container {
         overflow-x: auto;
         overflow-y: hidden;