feat: update screen width

src/components/Card/index.scss

@@ -7,13 +7,13 @@
 .card-container {
   width: 470px;
   height: 472px;
-  width: px2rem(470px);
-  height: px2rem(472px);
+  width: px2rem(470px * 2);
+  height: px2rem(770px / 2 * 2);
   background-position: top center;
   background-size: cover;
   z-index: 1;
   box-sizing: border-box;
-  padding: px2rem(80px) px2rem(30px) px2rem(30px);
+  padding: px2rem(60px * 2) px2rem(30px * 2) px2rem(25px * 2);
   display: flex;
   flex-direction: column;
   color: #fff;
@@ -53,15 +53,15 @@
   &-bg-execution-log {
     width: 939px;
     height: 554px;
-    width: px2rem(939px);
-    height: px2rem(554px);
+    width: px2rem(939px * 2);
+    height: px2rem(554px * 2 - 182px);
     background-image: url('../../assets/card-bg/frame_zxrz.png');
   }
   &-bg-live-monitoring {
     width: 939px;
     height: 390px;
-    width: px2rem(939px);
-    height: px2rem(390px);
+    width: px2rem(939px * 2);
+    height: px2rem(390px * 2 - 172px);
     background-image: url('../../assets/card-bg/frame_skjc.png');
   }
 }

src/components/MarkerMap/dialog.ts

@@ -175,7 +175,10 @@ export const renderElement = (image: any) => {
   el.id = 'marker';
   el.style.backgroundImage = `url(${image})`;
   el.style.backgroundSize = 'cover';
-  el.style.width = '24px';
-  el.style.height = '25px';
+  el.style.width = (24 * 2) / 576 + 'rem';
+  el.style.minWidth = '24px';
+  el.style.height = (25 * 2) / 576 + 'rem';
+  el.style.minHeight = '25px';
+
   return el;
 };

src/components/MarkerMap/index.scss

@@ -12,8 +12,8 @@
   &::after {
     content: '';
     position: absolute;
-    width: px2rem(40px);
-    height: px2rem(40px);
+    width: px2rem(40px * 2);
+    height: px2rem(40px * 2);
     background-color: transparent;
     border-left: px2rem(1px) solid #00a3ff;
     border-top: px2rem(1px) solid #00a3ff;
@@ -45,8 +45,8 @@
     .minemap-popup-content {
       max-width: unset !important;
       padding: unset;
-      width: px2rem(332px);
-      width: 332px;
+      width: px2rem(332px * 2);
+      // width: 332px;
       border-radius: unset;
 
       @extend .card-bg-container;
@@ -55,25 +55,25 @@
       color: #fff;
 
       .title {
-        padding: 22px 20px 15px;
+        padding: px2rem(22px * 2) px2rem(24px * 2) px2rem(15px * 2);
         box-sizing: border-box;
         // background: #003a8c;
         // border-radius: 1px;
-        font-size: 20px;
+        font-size: px2rem(20px * 2);
         color: #00e9ff;
       }
       .action {
-        margin: 0 24px 24px;
+        margin: 0 px2rem(24px * 2) px2rem(24px * 2);
       }
       .content {
         height: max-content;
-        padding: 24px;
+        padding: px2rem(24px * 2);
         // background: #fff;
         > div {
           display: flex;
-          font-size: 14px;
-          line-height: 20px;
-          margin-bottom: 10px;
+          font-size: px2rem(14px * 2);
+          line-height: px2rem(20px * 2);
+          margin-bottom: px2rem(10px * 2);
           > span:first-child {
             min-width: max-content;
           }
@@ -84,11 +84,11 @@
   .address-type-card-container {
     &.in-detail {
       position: absolute;
-      height: px2rem(965px);
-      right: px2rem(939px + 30px + 30px);
+      height: px2rem(965px * 2);
+      right: px2rem((939px + 30px + 30px) * 2);
 
-      top: calc(50% + px2rem(52px));
-      transform: translateY(calc(-50% - px2rem(52px / 2)));
+      top: calc(50% + px2rem(242px * 2));
+      transform: translateY(calc(-50% - px2rem((242px / 2) * 2)));
       .address-type-card {
         top: 0;
         right: 0;
@@ -98,28 +98,41 @@
   }
   .address-type-card {
     position: absolute;
-    top: px2rem(83px);
-    right: px2rem(30px);
+    top: px2rem(83px * 2);
+    right: px2rem(30px * 2);
     // min-width: px2rem(178px);
     // min-height: px2rem(293px);
     width: max-content;
     height: max-content;
     border-radius: 1px;
-    padding: px2rem(27px) px2rem(36px);
+    padding: px2rem(27px * 2) px2rem(36px * 2);
     box-sizing: border-box;
 
     .el-checkbox__inner {
+      width: px2rem(16px * 2);
+      min-width: 14px;
+      height: px2rem(16px * 2);
+      min-height: 14px;
       background-color: transparent;
+      &::after {
+        width: px2rem(10px);
+        height: px2rem(20px);
+        left: px2rem(8px);
+      }
     }
     .el-checkbox__label {
       color: #fff;
+      padding-left: px2rem(28px);
     }
     .card-item {
       display: flex;
       align-items: center;
       margin-right: 0;
+      padding-bottom: px2rem(40px);
       & > span {
         font-size: 14px;
+        font-size: px2rem(16px * 2);
+
         font-weight: 400;
       }
     }

src/components/Popup/index.scss

@@ -14,8 +14,8 @@
   &::after {
     content: '';
     position: absolute;
-    width: px2rem(40px);
-    height: px2rem(40px);
+    width: px2rem(40px * 2);
+    height: px2rem(40px * 2);
     background-color: transparent;
     border-left: px2rem(1px) solid #00a3ff;
     border-top: px2rem(1px) solid #00a3ff;

src/layout/BaseLayout/index.scss

@@ -9,10 +9,11 @@
 
   header {
     width: 100%;
-    height: 94px;
-    height: px2rem(94px);
+    height: 94px * 2;
+    height: px2rem(94px * 2);
     background: transparent;
-    background-image: url('../../assets/header.png');
+    // background-image: url('../../assets/header.png');
+    background-image: url('../../assets/header@2x.png');
     background-repeat: no-repeat;
     background-size: contain;
     position: fixed;
@@ -20,7 +21,7 @@
     z-index: 1;
     .back-to-home {
       position: absolute;
-      width: px2rem(600px);
+      width: px2rem(600px * 2);
       cursor: pointer;
       height: 100%;
       left: 50%;

src/styles/utils.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
 
-@function px2rem($px, $base-font-size: 384px) {
+@function px2rem($px, $base-font-size: 576px) {
   @return math.div($px, $base-font-size) * 1rem;
 }

src/views/HomePage/index.scss

@@ -13,11 +13,11 @@
   }
   .card-container {
     position: absolute;
-    top: px2rem(83px);
+    top: px2rem(83px * 2);
     &-bg-message-list {
-      left: px2rem(30px);
-      width: px2rem(528px);
-      height: px2rem(448px);
+      left: px2rem(30px * 2);
+      width: px2rem(528px * 2);
+      height: px2rem(448px * 2);
     }
   }
 }
@@ -35,23 +35,23 @@
     }
   }
   .message-item {
-    padding-bottom: px2rem(30px);
+    padding-bottom: px2rem(30px * 2);
     .title {
-      font-size: px2rem(16px);
+      font-size: px2rem(16px * 2);
       display: flex;
       align-items: top;
-      padding-bottom: px2rem(13px);
+      padding-bottom: px2rem(13px * 2);
       color: #fff;
       .index {
         color: #fff;
-        width: px2rem(20px);
-        width: 20px;
+        width: px2rem(20px * 2);
+        // width: 20px * 2;
       }
     }
     .desc {
-      font-size: px2rem(16px);
-      padding-left: px2rem(20px);
-      padding-left: 20px;
+      font-size: px2rem(16px * 2);
+      padding-left: px2rem(20px * 2);
+      // padding-left: 20px * 2;
     }
   }
 }

src/views/IncidentDetail/index.scss

@@ -5,38 +5,64 @@
   position: absolute;
   z-index: 1;
   height: 100%;
-  width: px2rem(481px) * 2 + px2rem(25px);
+  width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
 
   animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 .live-video-container {
+  background-image: url('../../assets/card-bg/live_video_bg.png');
+  background-size: cover;
   position: absolute;
-  left: px2rem(30px);
-  top: calc(50% + px2rem(52px));
-  transform: translateY(calc(-50% - px2rem(52px / 2)));
-  width: px2rem(481px) * 2 + px2rem(25px);
-  height: px2rem(301px) * 3 + px2rem(31px);
-  display: flex;
-  flex-wrap: wrap;
+  left: px2rem(30px * 2);
+  top: calc(50% + px2rem(52px * 2));
+  transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
+  width: px2rem(1964px);
+  height: px2rem(233.5px * 2) * 3 + px2rem(34px * 2) + px2rem(32px * 2) +
+    px2rem(25px * 2);
+  // display: flex;
+  // flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: px2rem(50px) px2rem(74px) px2rem(64px);
+
+  .live-video-close {
+    position: absolute;
+    right: px2rem(-60px);
+    // right: px2rem(0px);
+    top: 50%;
+    transform: translateY(-50%);
+    width: px2rem(60px);
+    height: px2rem(170px);
+    background-image: url('../../assets/card-bg/pack.png');
+    background-size: cover;
+    cursor: pointer;
+  }
+
   .popup-container {
+    background-image: url('../../assets/card-bg/frame_video.png');
+
+    float: left;
+    margin-bottom: px2rem(34px);
+
     &:first-child,
     &:nth-child(3),
     &:nth-child(5) {
-      margin-bottom: px2rem(31px);
-      margin-right: px2rem(25px);
+      margin-right: px2rem(35px);
     }
-    &:nth-child(5) {
+    &:nth-child(5),
+    &:nth-child(6) {
       margin-bottom: unset;
     }
-    width: px2rem(481px);
-    height: px2rem(301px);
+    width: px2rem(445px * 2);
+    height: px2rem(233.5px * 2);
     display: flex;
     justify-content: center;
     align-items: center;
     video {
       max-height: 100%;
       max-width: 100%;
+      height: px2rem(442px);
+      width: px2rem(862px);
     }
   }
 }
@@ -49,8 +75,8 @@
   .detail-left,
   .detail-right {
     position: absolute;
-    top: calc(50% + px2rem(52px));
-    transform: translateY(calc(-50% - px2rem(52px / 2)));
+    top: calc(50% + px2rem(52px * 2));
+    transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
     height: max-content;
     z-index: 1;
     display: flex;
@@ -58,20 +84,20 @@
   }
 
   .detail-left {
-    left: px2rem(30px);
-    width: calc(px2rem(470px) * 2 + px2rem(21px));
+    left: px2rem(30px * 2);
+    width: calc(px2rem(470px * 2) * 2 + px2rem(21px * 2));
     // height: calc(px2rem(472px) * 2 + px2rem(21px));
   }
   .detail-right {
-    right: px2rem(30px);
-    width: px2rem(939px);
+    right: px2rem(30px * 2);
+    width: px2rem(939px * 2);
     // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
   }
   .echarts {
-    width: px2rem(642px);
-    height: px2rem(887px);
+    width: px2rem(642px * 2);
+    height: px2rem(887px * 2);
     position: absolute;
-    top: px2rem(38px);
+    top: px2rem(38px * 2);
     left: 50%;
     transform: translateX(-50%);
   }
@@ -81,7 +107,7 @@
 
     &-bg-incident-info {
       // left: px2rem(30px);
-      margin-right: px2rem(21px);
+      margin-right: px2rem(21px * 2);
       .info-container {
         display: flex;
         flex-direction: column;
@@ -91,25 +117,29 @@
       .info-item {
         display: flex;
         align-items: center;
-        padding-bottom: px2rem(34px);
-        line-height: px2rem(50px);
-        font-size: px2rem(18px);
+        padding-bottom: px2rem(52px);
+        &:last-child {
+          padding-bottom: 0;
+        }
+        line-height: px2rem(50px * 2);
+        height: px2rem(50px * 2);
+        font-size: px2rem(18px * 2);
         flex: 1;
         width: 100%;
         .info-item-lebel {
-          padding: 0 px2rem(20px);
-          border-top-left-radius: px2rem(50px);
-          border-bottom-left-radius: px2rem(50px);
+          padding: 0 px2rem(20px * 2);
+          border-top-left-radius: px2rem(50px * 2);
+          border-bottom-left-radius: px2rem(50px * 2);
           display: flex;
           align-items: center;
           img {
             min-width: 13px;
             min-height: 13px;
-            width: px2rem(18px);
-            height: px2rem(18px);
+            width: px2rem(18px * 2);
+            height: px2rem(18px * 2);
           }
           span {
-            padding-left: px2rem(13px);
+            padding-left: px2rem(13px * 2);
           }
           &[data-idx='0'] {
             background: linear-gradient(to right, #035fd8, #1acfff);
@@ -126,10 +156,10 @@
         }
         .info-item-value {
           flex: 1;
-          padding: 0 px2rem(20px);
+          padding: 0 px2rem(20px * 2);
           background-color: #01016b;
-          border-top-right-radius: px2rem(50px);
-          border-bottom-right-radius: px2rem(50px);
+          border-top-right-radius: px2rem(50px * 2);
+          border-bottom-right-radius: px2rem(50px * 2);
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -144,11 +174,11 @@
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
-          top: px2rem(24px);
-          width: px2rem(165px);
-          height: px2rem(106px);
+          top: px2rem(24px * 2);
+          width: px2rem(165px * 2);
+          height: px2rem(106px * 2);
           box-sizing: border-box;
-          margin-bottom: calc(px2rem(65px) - 2px);
+          margin-bottom: calc(px2rem(65px * 2) - 2px);
 
           border: 2px solid #feb459;
           border-top-left-radius: 10px;
@@ -158,9 +188,9 @@
           align-items: center;
           justify-content: center;
           .title {
-            font-size: px2rem(18px);
+            font-size: px2rem(17px * 2);
             color: #feb459;
-            padding-bottom: px2rem(13px);
+            padding-bottom: px2rem(13px * 2);
           }
           .desc {
             text-align: center;
@@ -169,37 +199,38 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;
-            padding: 0 px2rem(6px);
+            padding: 0 px2rem(6px * 2);
+            font-size: px2rem(13px * 2);
           }
           .logo {
             position: absolute;
-            width: px2rem(40px);
-            height: px2rem(40px);
+            width: px2rem(40px * 2);
+            height: px2rem(40px * 2);
             // min-width: 20px;
             // min-height: 20px;
             z-index: 1;
-            bottom: px2rem(-40px);
+            bottom: px2rem(-40px * 2);
             left: 50%;
             transform: translateX(-50%)
-              translateY(px2rem(math.div(65px, 2)) - px2rem(28px));
+              translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
           }
           &::after {
             content: '';
             position: absolute;
             left: -2px;
-            bottom: calc(px2rem(-65px) - 2px);
+            bottom: calc(px2rem(-65px * 2) - 2px);
             width: 0;
             height: 0;
-            border-top: px2rem(65px) solid #feb459;
-            border-left: px2rem(math.div(165px, 2)) solid transparent;
-            border-right: px2rem(math.div(165px, 2)) solid transparent;
+            border-top: px2rem(65px * 2) solid #feb459;
+            border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
+            border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
           }
           &:nth-child(3),
           &:nth-child(2) {
-            bottom: px2rem(40px);
+            bottom: px2rem((40px - 40px) * 2);
             margin-bottom: 0;
             top: unset;
-            left: px2rem(20px);
+            left: px2rem(20px * 2);
             border-top-left-radius: 0;
             border-top-right-radius: 0;
             border-color: #33d3a8;
@@ -209,10 +240,10 @@
             }
             .logo {
               bottom: unset;
-              top: px2rem(-40px);
+              top: px2rem(-40px * 2);
               left: 50%;
               transform: translateX(-50%)
-                translateY(px2rem(math.div(-65px, 2)) + px2rem(24px));
+                translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
             }
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
@@ -220,16 +251,16 @@
               position: absolute;
               left: -2px;
               bottom: unset;
-              top: calc(px2rem(-65px) - 2px);
-              border-bottom: px2rem(65px) solid #33d3a8;
+              top: calc(px2rem(-65px * 2) - 2px);
+              border-bottom: px2rem(65px * 2) solid #33d3a8;
               border-top: unset;
-              border-left: px2rem(math.div(165px, 2)) solid transparent;
-              border-right: px2rem(math.div(165px, 2)) solid transparent;
+              border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
+              border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
             }
           }
           &:nth-child(3) {
             left: unset;
-            right: px2rem(20px);
+            right: px2rem(20px * 2);
             border-color: #1bbbf8;
             .title {
               color: #1bbbf8;
@@ -244,14 +275,24 @@
     &-bg-incident-plan {
       // top: px2rem(482px + 83px);
       // left: px2rem(30px);
-      margin-top: px2rem(21px);
-      margin-right: px2rem(21px);
+      margin-top: px2rem(21px * 2);
+      margin-right: px2rem(21px * 2);
       .plan-container {
         .el-checkbox__inner {
+          width: px2rem(16px * 2);
+          min-width: 14px;
+          height: px2rem(16px * 2);
+          min-height: 14px;
           background-color: transparent;
+          &::after {
+            width: px2rem(10px);
+            height: px2rem(20px);
+            left: px2rem(8px);
+          }
         }
         .el-checkbox__label {
           color: #fff;
+          padding-left: px2rem(28px);
         }
         .plan-item {
           display: flex;
@@ -261,7 +302,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           & > span {
-            font-size: px2rem(18px);
+            font-size: px2rem(18px * 2);
             font-weight: 400;
           }
         }
@@ -270,7 +311,7 @@
     &-bg-emergency-linkage {
       // top: px2rem(482px + 83px);
       // left: px2rem(521px);
-      margin-top: px2rem(21px);
+      margin-top: px2rem(21px * 2);
 
       .linkage-chain-container {
         display: flex;
@@ -281,12 +322,14 @@
           display: flex;
           flex-direction: column;
           align-items: center;
+          font-size: px2rem(18px * 2);
           img {
-            width: px2rem(117px);
-            height: px2rem(102px);
+            width: px2rem(117px * 2);
+            height: px2rem(102px * 2);
           }
           span {
-            margin-top: px2rem(17px);
+            margin-top: px2rem(10px * 2);
+            margin-bottom: px2rem(10px * 2);
             color: #87baf8;
           }
         }
@@ -299,7 +342,7 @@
         content: '';
         position: absolute;
         width: 14px;
-        height: calc(100% - px2rem(80px) - px2rem(30px));
+        height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
 
         background: #112692;
         top: calc(px2rem(80px + 20px));

src/views/IncidentDetail/index.tsx

@@ -64,6 +64,7 @@ export default defineComponent({
           <div ref={liveVideoRef} class="live-video-container-left">
             <div class="live-video-container">
               <LiveVideoCard />
+              <div class="live-video-close" onClick={() => markerStore.livevideovisible = false} />
             </div>
           </div>
         )}