fix 图例

src/components/MarkerMap/index.scss

@@ -38,6 +38,7 @@
 .task-map-container {
     height: 100vh;
     .maptip {
+        display: none;
         position: absolute;
         bottom: px2rem(80px);
         // right: px2rem(20px);
@@ -157,6 +158,13 @@
                 font-size: px2rem(16px * 2);
                 font-weight: 400;
             }
+            .tipicon {
+                width: px2rem(25px * 2);
+                height: px2rem(25px * 2);
+                vertical-align: middle;
+                margin-top: px2rem(-2px * 2);
+                margin-right: px2rem(6px * 2);
+            }
         }
     }
 }

src/components/MarkerMap/index.tsx

@@ -149,6 +149,20 @@ export default defineComponent({
     const adrsMapTypes = computed(() =>
       props.adrsMapTypes.map((i) => ({
         name: i,
+        icon: ((name) => { 
+          switch(name)
+          { 
+            case "路况信息": return null;
+            case "应急事件": return icon_map_dpf;
+            case "视频监控": return icon_map_spjk;
+            case "应急车辆": return icon_map_yjcl;
+            case "应急队伍": return icon_map_yjdw;
+            case "应急仓库": return icon_map_yjck;
+            case "单兵": return icon_map_dbsb;
+             
+          }
+
+        })(i),
         disabled: route.query.id && i === '应急事件',
       })),
     );
@@ -779,7 +793,12 @@ export default defineComponent({
                 adrsMapTypes.value?.map((t) => (
                   <>
                     {!t.disabled && (
-                      <el-checkbox key={t} class="card-item" label={t.name} />
+                      <el-checkbox key={t} class="card-item" label={t.name}>
+                        <span>
+                          <img class="tipicon" v-show={t.icon!=null} src={t.icon} />
+                          {t.name}
+                        </span>
+                      </el-checkbox>
                     )}
                   </>
                 ))}

src/components/Popup/index.scss

@@ -1,39 +1,38 @@
 @import '../../styles/utils.scss';
-
 .popup-container {
-  box-sizing: border-box;
-  background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
-  background-position: top center;
-  background-repeat: repeat-y;
-  position: relative;
-  animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-
-  .card-border-bottom-left,
-  .card-border-bottom-right,
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: px2rem(40px * 2);
-    height: px2rem(40px * 2);
-    background-color: transparent;
-    border-left: px2rem(1px) solid #00a3ff;
-    border-top: px2rem(1px) solid #00a3ff;
-    top: 0;
-    left: 0;
-  }
-  .card-border-bottom-right,
-  &::after {
-    border-left: unset;
-    border-right: px2rem(1px) solid #00a3ff;
-    right: 0;
-    left: unset;
-  }
-  .card-border-bottom-left,
-  .card-border-bottom-right {
-    bottom: 0;
-    top: unset;
-    border-bottom: px2rem(1px) solid #00a3ff;
-    border-top: unset;
-  }
-}
+    box-sizing: border-box;
+    background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
+    background-position: top center;
+    background-repeat: repeat-y;
+    background-size: contain;
+    position: relative;
+    animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    .card-border-bottom-left,
+    .card-border-bottom-right,
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        width: px2rem(40px * 2);
+        height: px2rem(40px * 2);
+        background-color: transparent;
+        border-left: px2rem(1px) solid #00a3ff;
+        border-top: px2rem(1px) solid #00a3ff;
+        top: 0;
+        left: 0;
+    }
+    .card-border-bottom-right,
+    &::after {
+        border-left: unset;
+        border-right: px2rem(1px) solid #00a3ff;
+        right: 0;
+        left: unset;
+    }
+    .card-border-bottom-left,
+    .card-border-bottom-right {
+        bottom: 0;
+        top: unset;
+        border-bottom: px2rem(1px) solid #00a3ff;
+        border-top: unset;
+    }
+}