优化图例显示

src/component/rain-earthquake/LeftLegendComponent.vue

@@ -2,22 +2,31 @@
 <template>
   <div
     class="legend-container"
-    v-show="useStatusStore().uiComponents.leftLegend.show"
+    v-show="
+      useStatusStore().uiComponents.leftLegend.show &&
+      Object.keys(useLeftLegendStore().legendListInfo).length > 0
+    "
   >
-    <div class="legend-title">
-      {{ useLeftLegendStore().legendListInfo.title }}
-    </div>
     <div
-      class="legend-item"
-      v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
-      :key="index"
+      class="legend-box"
+      v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
+      :key="key"
     >
+      <div class="legend-title">
+        {{ useLeftLegendStore().legendListInfo[key].title }}
+      </div>
       <div
-        class="legend-color"
-        :style="{ 'background-color': `${item.color}` }"
-      ></div>
-      <div class="legend-text">
-        <span class="legend-text-title">{{ item.label }}</span>
+        class="legend-item"
+        v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
+        :key="index"
+      >
+        <div
+          class="legend-color"
+          :style="{ 'background-color': `${item.color}` }"
+        ></div>
+        <div class="legend-text">
+          <span class="legend-text-title">{{ item.label }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -35,14 +44,10 @@
     left: 20px;
     z-index: 1000;
     padding: 6px;
-    position: absolute;
-    bottom: 10px;
-    left: 15px;
     border-radius: 2px;
-    z-index: 1000;
     display: flex;
-    flex-direction: column;
-    width: 240px;
+    gap: 30px;
+    min-width: 240px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: white;
@@ -51,6 +56,10 @@
     border: 1px solid rgb(0, 225, 255);
   }
 
+  .legend-box:not(:last-child) {
+    border-right: 1px solid rgb(0, 225, 255);
+  }
+
   .legend-title {
     font-weight: bold;
     font-size: 16px;