CN-652 Dahsboard - npm - event app事件表格开发

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

@@ -0,0 +1,135 @@
+.npm-app-event {
+  $blue:#046ECA;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .metric-select {
+    color:#575757;
+    display: flex;
+    margin-bottom: 10px;
+    flex-direction: row-reverse;
+    align-items: center;
+    .el-scrollbar {
+      width:100%;
+    }
+    span {
+      font-size: 12px;
+      font-weight: 400;
+    }
+    .option__select.select-column {
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+      border-radius: 2px;
+      .el-input__inner {
+        width: 100px;
+        height:24px;
+        padding-left: 8px;
+        font-size: 12px;
+        color: #2C72C6;
+        font-weight:400;
+      }
+    }
+    .option-popper {
+      margin-bottom:0px;
+      .el-select-dropdown__item.selected {
+        span{
+          color: #2C72C6 !important;
+        }
+      }
+    }
+  }
+  .npm-app-event-table {
+    height: calc(100% - 30px) !important;
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    padding: 1px;
+    .el-table__header-wrapper {
+      tr th {
+        padding: 4px 0;
+        .data-column__span {
+          font-family: NotoSansHans-Medium;
+          font-size: 12px;
+          color: #353636;
+          font-weight: 500;
+        }
+      }
+    }
+    .el-table__body-wrapper.is-scrolling-none {
+      tr td {
+        padding: 7.5px 0;
+      }
+    }
+  }
+  .data-app-event-table{
+    display: flex !important;
+    height: 20px;
+    line-height: 20px;
+    flex-direction: row;
+    align-items: center;
+    .data-severity {
+      font-size: 12px;
+      color: #353636;
+      font-weight: 400;
+      margin-left:6px;
+    }
+    .red-dot {
+      width:6px;
+      height:6px;
+      background: #E26154;
+      border-radius: 3px;
+      margin-right:4px;
+    }
+    .grey-dot {
+      opacity: 0.35;
+      background: #717171;
+      border-radius: 3px;
+      width:6px;
+      height:6px;
+      margin-right:4px;
+    }
+    .critical {
+      color: #E26154;
+      background: rgba(226,97,84, .18);
+    }
+    .high {
+      color: #E48E4D;
+      background: rgba(228,142,77, .18);
+    }
+    .info {
+      color: #88AF65;
+      background: rgba(136,175,101, .18);
+    }
+    .medium {
+      color: #E7B34E;
+      background: rgba(231,179,78, .18);
+    }
+    .low {
+      color: #DAC74B;
+      background: rgba(218,199,75, .18);
+    }
+    .data-applications {
+      font-size: 12px;
+      color: $blue;
+      font-weight: 400;
+    }
+    .data-eventType {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: $blue;
+      font-weight: 500;
+      background: #EBF1F4;
+      border-radius: 4px;
+      padding: 0 6px;
+      margin-right:10px;
+    }
+    .data-eventCount {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: #046ECA;
+      font-weight: 500;
+    }
+  }
+  .el-table--group::after,.el-table--border::after, .el-table::before {
+    height: 0px;
+  }
+}