feat: 新增app的部分交互和样式

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

@@ -72,6 +72,24 @@
       border-radius: 4px;
       display: flex;
       flex-direction: column;
+
+      &.app-card--create {
+        background-color: #F7F7F7;
+        justify-content: center;
+        align-items: center;
+
+        .cn-icon {
+          padding-bottom: 2px;
+          font-size: 17px;
+          color: #38ACD2;
+          cursor: pointer;
+        }
+        span {
+          font-size: 12px;
+          color: #353636;
+          cursor: pointer;
+        }
+      }
       .app-card-title {
         display: flex;
         padding: 0 12px;
@@ -112,7 +130,6 @@
           }
         }
         .app-card__body-content-percent {
-          font-family: NotoSansHans-Medium;
           font-size: 12px;
           font-weight: 500;
           height: 20px;
@@ -144,6 +161,94 @@
       }
     }
   }
+  .add-app-drawer {
+    height: 526px !important;
+
+    .add-app {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .add-app__header {
+        display: flex;
+        justify-content: space-between;
+        height: 46px;
+        background-color: white;
+
+        .header__title {
+          padding-left: 20px;
+          font-size: 16px;
+          font-weight: bold;
+          line-height: 46px;
+          color: #353636;
+        }
+        .header__operations {
+          display: flex;
+          align-items: center;
+
+          .header__operation {
+            width: 80px;
+            height: 30px;
+            margin-right: 20px;
+            line-height: 30px;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+
+            &.header__operation--cancel {
+              border: 1px solid rgba(0,0,0,0.15);
+              color: #333;
+            }
+            &.header__operation--save {
+              background-color: #38ACD2;
+              color: white;
+            }
+          }
+        }
+      }
+      .add-app__body {
+        position: relative;
+        flex: 1;
+        background-color: #EBF1F4;
+
+        .body__searcher {
+          position: absolute;
+          right: 20px;
+          top: 15px;
+        }
+        .el-tabs__nav-wrap::after {
+          height: 0;
+        }
+        .el-tabs__header {
+          padding-left: 20px;
+        }
+        .body__apps {
+          height: 420px;
+          padding: 0 20px;
+          overflow: auto;
+          display: grid;
+          grid-template-rows: repeat(auto-fill, 120px);
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+          grid-gap: 20px;
+
+          &::-webkit-scrollbar-thumb {
+            background-color: #c5c5c5;
+            border-radius: 5px;
+          }
+          &::-webkit-scrollbar-thumb:hover {
+            background-color: #a0a0a0;
+            border-radius: 5px;
+          }
+          .body__app {
+            height: 120px;
+            background: #FFFFFF;
+            border: 1px solid #E2E5EC;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
 }
 .app-dropdown.el-popper.is-pure {
   top: 720px !important;