CN-643 Dashboard - network overview - 表格点击事件开发:交互等内容开发

src/assets/css/components/components/layout/layout.scss

@@ -57,6 +57,98 @@
       font-size: 17px;
       color: #046ECA;
     }
+    .header__left-breadcrumb{
+      display:flex;
+      align-items:center;
+      .route-menu:hover{
+        cursor: pointer;
+        color:  #2C72C6;
+      }
+      .header__left-breadcrumb-item-select{
+        display:flex;
+        align-items: center;
+        .search-input{
+          width:100%;
+          padding: 4px 4px 0px 4px;
+          .el-input__inner{
+            padding:0px 4px;
+            background: #FFFFFF;
+            border: 1px solid #C5C5C5;
+            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+            border-radius: 2px;
+            font-size: 12px;
+            /*color: rgba(87,87,87,0.60);*/
+            letter-spacing: 0;
+            font-weight: 400;
+          }
+        }
+        .breadcrumb-button{
+          align-items: center;
+          width: 100%;
+          height: 24px;
+          justify-content: center;
+          line-height: 24px;
+          padding: 0px 6px;
+          span {
+            margin-right: 6px;
+          }
+        }
+        .breadcrumb-button:hover,.breadcrumb-button__active {
+          cursor:pointer;
+          background: rgba(113,113,113,0.10);
+          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+          border-radius: 2px;
+        }
+        .breadcrumb__popper{
+            top: -7px !important;
+            width:auto !important;
+            max-height:206px;
+            overflow:hidden;
+            padding: 0px !important;
+            background: #FFFFFF;
+            border:1px solid #C5C5C5 !important;
+            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+            border-radius: 2px !important;
+            .selected {
+              color: #0091ff;
+              font-weight: bold;
+            }
+            .el-popper {
+              max-height: 405px;
+            }
+            .select-dropdown {
+              max-height:172px;
+              width:100%;
+              margin: 1px 0px;
+              overflow:auto;
+              list-style: none;
+              padding:4px 0px;
+              box-sizing: border-box;
+              .select-dropdown__item:hover{
+                background-color: #F5F7FA !important;
+              }
+              .select-dropdown__item{
+                width:100%;
+                height:30px;
+                padding:0px 11px;
+                line-height:30px;
+                position: relative;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                color: #666665;
+                display: list-item;
+                text-align: -webkit-match-parent;
+                box-sizing: border-box;
+                cursor: pointer;
+                font-family: Helvetica;
+                font-size: 12px;
+                font-weight: 400;
+              }
+            }
+        }
+      }
+    }
   }
   .cn-menu-modal {
     top: 60px;
@@ -184,3 +276,16 @@
 .vue-grid-item{
   transition: none;
 }
+#breadcrumbSelectDropdown::-webkit-scrollbar {
+  width:10px;
+}
+#breadcrumbSelectDropdown::-webkit-scrollbar-track-piece {
+  background: #ECECEC;
+  border-radius: 0 0 2px 0;
+}
+#breadcrumbSelectDropdown::-webkit-scrollbar-thumb {
+  background-clip: content-box !important;
+  background: #C5C5C5;
+  border-radius: 4px;
+  border: 2px solid transparent;
+}

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

@@ -3,6 +3,9 @@
   $grey:#353636;
   height:100%;
   font-size:12px;
+  .tab-hide{
+    margin-top:40px;
+  }
   .cn-chart__tabs {
     height:100%;
     .tab-pane {
@@ -12,6 +15,9 @@
       border-radius: 4px;
       .tab-table {
         border:0px;
+        .data-click:hover{
+          cursor: pointer;
+        }
       }
       .data-total{
         display: flex !important;
@@ -84,6 +90,9 @@
     .el-tabs__content {
       height: calc(100% - 40px);
       border:none;
+      .el-table__body-wrapper {
+        height: calc(100% - 32px) !important;
+      }
     }
   }
   .tab-search {