合并分支 'yp-dev' 到 'master'

src/views/exportControl/v2.0SingleSanction/components/deepMining/components/RelationGraph.vue

@@ -178,7 +178,7 @@ const initNormalGraph = (layoutType, width, height) => {
 		defaultEdge: {
 			type: "quadratic",
 			style: {
-				stroke: "#5B8FF9",
+				stroke: "red",
 				lineWidth: 3,
 				opacity: 0.9,
 				shadowColor: "rgba(231, 243, 255, 1)",
@@ -734,16 +734,25 @@ defineExpose({
 .graph-controls {
 	position: absolute;
 	top: 16px;
-	right: 16px;
+	// right: 16px;
 	display: flex;
 	gap: 8px;
 	z-index: 10;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	padding: 0 20px;
+	.graph-chart-controls {
+		display: flex;
+		gap: 0px;
+		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+	}
 
 	.control-btn {
 		width: 32px;
 		height: 32px;
 		border-radius: 4px;
-		border: 1px solid rgba(234, 236, 238, 1);
+		// border: 1px solid rgba(234, 236, 238, 1);
 		background: rgba(255, 255, 255, 1);
 		display: flex;
 		align-items: center;
@@ -764,6 +773,30 @@ defineExpose({
 		border-color: rgba(5, 95, 194, 1);
 		background: rgba(231, 243, 255, 1);
 	}
+
+	.graph-chart-legend {
+		display: flex;
+		gap: 8px;
+		.legend-item {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			font-size: 14px;
+			font-family: "Microsoft YaHei";
+			color: rgba(59, 65, 75, 1);
+			.legend-dot {
+				width: 12px;
+				height: 12px;
+				border-radius: 50%;
+				background: rgba(5, 95, 194, 1);
+			}
+		}
+		.legend-item:last-child {
+			.legend-dot {
+				background: #333;
+			}
+		}
+	}
 }
 
 .node-popup {