feat: networkoverview app列表图

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

@@ -0,0 +1,76 @@
+.network-overview-apps {
+  height: 100%;
+
+  .line-select-metric {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    &>span {
+      font-size: 12px;
+      color: #575757;
+      font-weight: 400;
+      margin-right: 3px;
+    }
+    .line-select__operation {
+      height: 24px;
+      margin-left: 3px;
+      box-shadow: none;
+      border-radius: 2px;
+      .option__select {
+        pointer-events:none;
+        .el-input__inner {
+          width: 80px;
+          height: 24px;
+          padding-left: 4px;
+          line-height: 24px;
+          font-size: 12px;
+          color: #2C72C6;
+          font-weight: 400;
+        }
+        .el-input__suffix {
+          display: flex;
+          .el-input__suffix-inner {
+            line-height: 24px;
+            .el-select__caret {
+              line-height: 24px;
+              width: 16px;
+              color: #575757;
+            }
+          }
+        }
+      }
+      .option__select.select-column {
+        .el-input__inner {
+          width: 86px;
+          padding-left: 8px;
+        }
+      }
+      .icon-group-divide {
+        height: 14px;
+        width: 1px;
+        background-color: $--color-primary;
+      }
+      i {
+        font-size: 12px;
+      }
+    }
+  }
+
+
+  .app-cards {
+    display: grid;
+    grid-template-rows: repeat(auto-fill, 100px);
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-gap: 20px;
+    width: 100%;
+    padding-top: 10px;
+    height: calc(100% - 24px);
+
+    .app-card {
+      height: 100%;
+      border: 1px solid #E2E5EC;
+      border-radius: 4px;
+    }
+  }
+}