图例

src/views/GroupEvolution/components/groupGraph.vue

@@ -2,9 +2,18 @@
   <div class="groupGraph-component">
     <img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
     <div class="container" id="container"></div>
+
     <div class="legends" v-show="storeId == 'anomalousGroup'">
-      <img class="legend-icon" src="@/assets/images/abnormalGroup/abnormal-node-legend-icon.png" />
-      <div class="legend-text">疑似异常社团</div>
+      <div class="legend-item" v-for="item in legendsMap.abnormalGroup" :key="item.text">
+        <img class="legend-icon" :src="item.icon" />
+        <div class="legend-text">{{ item.text }}</div>
+      </div>
+    </div>
+    <div class="legends" v-show="!(storeId == 'anomalousGroup')">
+      <div class="legend-item" v-for="item in legendsMap.normalGroup" :key="item.text">
+        <img class="legend-icon" :src="item.icon" />
+        <div class="legend-text">{{ item.text }}</div>
+      </div>
     </div>
     <div class="timeList">
       <TimeAxis
@@ -27,12 +36,30 @@ import { convertToUtcIsoString } from "@/utils/transform"
 import { paintNodeFunction, paintLineFunction } from "@/utils/customePaint"
 import TimeAxis from "@/components/timeAxis.vue"
 import GraphVis from "@/assets/package/graphvis.esm.min2.js"
+import group1Leg from "@/assets/images/groupEvolution/legends-group1.png"
+import group2Leg from "@/assets/images/groupEvolution/legends-group2.png"
+import group3Leg from "@/assets/images/groupEvolution/legends-group3.png"
+import abnormalLeg from "@/assets/images/groupEvolution/legends-abnormal-group.png"
+
 
 const props = defineProps({
   store: {
     required: true
   }
 })
+const legendsMap = {
+  normalGroup: [
+    { icon: group1Leg, text: '群体一' },
+    { icon: group2Leg, text: '群体二' },
+    { icon: group3Leg, text: '群体三' },
+  ],
+  abnormalGroup: [
+    { icon: group1Leg, text: '社团组一' },
+    { icon: group2Leg, text: '社团组二' },
+    { icon: group3Leg, text: '社团组三' },
+    { icon: abnormalLeg, text: '疑似异常社团' },
+  ]
+}
 const emit = defineEmits(["click:pointerDownAndSlide"])
 const { timeList, graph } = storeToRefs(props.store)
 let isPlay = ref(false)
@@ -365,31 +392,41 @@ watch(
   .legends {
     position: absolute;
     display: flex;
-    align-items: center;
+    flex-direction: column; /* 改为垂直排列 */
+    align-items: flex-start; /* 左对齐 */
     justify-content: center;
     width: 160px;
-    height: 55px;
+    height: auto; /* 高度自适应内容 */
     right: 2%;
-    top: 76%;
-    background-image: url("@/assets/images/abnormalGroup/abnormal-group-legends.png");
+    top: 60%;
+    background: linear-gradient(286.05deg, rgba(0, 82, 125, 0.48) 32.99%, rgba(0, 200, 255, 0.2304) 233.73%);
+    border: 1px solid;
+    border-radius: 5px;
+    border-image-source: linear-gradient(153.08deg, rgba(183, 222, 255, 0.32) 3.37%, rgba(58, 161, 248, 0.064) 83.16%);
+    padding: 10px; /* 添加内边距 */
+    gap: 10px; /* 设置项间距 */
+    .legend-item {
+      display: flex;
+      flex-direction: row; /* 改为水平排列 */
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+      /* 移除gap属性，因为现在在.legends上设置 */
+    }
     .legend-icon {
-      position: absolute;
-      top: 17px;
-      left: 15px;
+      /* 移除绝对定位 */
       width: 30px;
       height: 30px;
+      margin-right: 10px; /* 图标和文本之间的间距 */
     }
     .legend-text {
-      position: absolute;
-      top: 12px;
-      left: 50px;
+      /* 移除绝对定位 */
       height: 30px;
       line-height: 30px;
       font-family: "PingFang SC";
       font-style: normal;
       font-weight: 400;
       font-size: 16px;
-      font-weight: 400;
       color: #fff;
     }
   }