CN-714 feat: dns图表定义

src/assets/css/components/views/charts2/linkDirectionGrid.scss

@@ -1,3 +1,72 @@
 .link-direction-grid {
+  display: flex;
+  border: 1px solid #E2E5EC;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
 
+  .link-statistical-dimension {
+    width: 50%;
+    padding: 20px;
+
+    .dimension-title {
+      font-size: 14px;
+      color: #046ECA;
+    }
+    .data-grid {
+      height: 100px;
+      .egress-row {
+        padding-left: 190px;
+        height: 100%;
+        display: flex;
+
+        .egress-id {
+          display: flex;
+          align-items: flex-end;
+          width: 50px;
+          height: 100%;
+          margin-right: 8px;
+          transform: rotate(-45deg) translate(-5px,-15px);
+          color: #353636;
+          font-size: 12px;
+        }
+      }
+      .data-row {
+        display: flex;
+
+        .ingress-id {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          width: 190px;
+          height: 50px;
+          margin-bottom: 10px;
+          padding-right: 12px;
+          color: #353636;
+          font-size: 12px;
+        }
+        .data-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 50px;
+          width: 50px;
+          margin: 0 8px 8px 0;
+          border: 1px solid #DEDEDE;
+          border-radius: 4px;
+
+          .data-item__point {
+            height: 8px;
+            width: 8px;
+            border-radius: 50%;
+            background-color: #749F4D;
+
+            &:first-of-type {
+              margin-right: 6px;
+            }
+          }
+        }
+      }
+    }
+  }
 }