CN-1594 feat: 部分css重构内容：npm第一个tab

2024-03-28 19:35:44 +08:00
parent 80c555940c
commit a0b44806bd
9 changed files with 99 additions and 93 deletions
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -14,7 +14,7 @@
  height: 0 !important;
 }*/

-.el-select__wrapper {
+/*.el-select__wrapper {
  min-height: 28px !important;
 }
 .el-input__wrapper {
@@ -26,7 +26,7 @@
 }
 .el-table td.el-table__cell div {
  margin-left: -1px;
-}
+}*/
 .el-table .sort-caret.ascending {
  border-bottom-color: #c0c4cc !important;
 }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -63,24 +63,22 @@
  .date-range-title {
    font-size: 14px;
    color: var(--el-text-color-regular);
-    font-weight: 600;
+    font-weight: bold;
    padding: 14px 0 7px 8px;
  }

-  .calendar-popover-text.calendar-popover__small {
-    i {
-      font-weight: 300;
-      color: #575757;
-    }
-  }
  .calendar-popover-text {
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
    color: var(--el-text-color-primary);
+
    .cn-icon-Data {
      color: var(--el-text-color-regular);
    }
+    .cn-icon-dropdown {
+      color: var(--el-text-color-placeholder);
+    }
  }

  .calendar-popover-text:first-of-type {
@@ -108,7 +106,6 @@
      .content-title {
        font-size: 14px;
        color: var(--el-text-color-regular);
-        font-weight: 400;
        margin-bottom: 12px;
      }

--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,9 +1,9 @@
 .el-popper.analysis-popper {
  margin-top: -5px !important;
  padding: 0;
-  border: 1px solid var(--el-border-color-light);
+  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base); // 4px
-  box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
+  box-shadow: var(--el-box-shadow-light);

  .el-popper__arrow {
    display: none;
@@ -79,7 +79,7 @@
    width: 100%;
    margin-top: 21px;
    //background-color: #EFF2F5;
-    background-color: var(--el-border-color);
+    background-color: var(--el-bg-color-page);
  }

  .entity-type {
@@ -111,7 +111,7 @@
        width: 28px;
        border-radius: 50%;
        //background-color: #EFF1F4;
-        background-color: var(--el-color-info-light-9);
+        background-color: var(--el-bg-color-page);
        cursor: pointer;

        i {
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -10,7 +10,7 @@
    top: 1px;
    background-color: var(--el-color-primary);
    border-radius: $tab-border-radius $tab-border-radius 0 0;
-    transition: all linear var(--el-transition-duration);
+    transition: all linear var(--el-transition-duration-fast);
    z-index: 3;
  }

@@ -70,7 +70,7 @@

    .tab-pane-warn--icon {
      width: 16px;
-      color: #E48F3E;
+      color: var(--el-color-warning);
      margin-left: 10px;
      margin-right: 0 !important;
    }
@@ -116,7 +116,6 @@

          .legend-name {
            width: 180px;
-            font-weight: 400;
          }

          .legend-value {
@@ -124,7 +123,6 @@
            justify-content: left;
            margin-left: 20px;
            width: 90px;
-            font-weight: 500;
          }

          .legend-percent {
@@ -132,7 +130,6 @@
            width: 70px;
            justify-content: left;
            display: flex;
-            font-weight: 500;
          }
        }
      }
@@ -147,7 +144,7 @@
        position: absolute;
        height: 0;
        width: 195px;
-        border-bottom: 1px dashed #d3d3d3;
+        border-bottom: 1px dashed var(--el-border-color-light);
        top: 319px;
        left: 575px;
      }
@@ -156,7 +153,7 @@
        position: absolute;
        height: 0;
        width: 195px;
-        border-bottom: 1px dashed #d3d3d3;
+        border-bottom: 1px dashed var(--el-border-color-light);
        top: 319px;
        left: 830px;
      }
@@ -169,11 +166,11 @@
  }

  .entity-subscriber-detail-error {
-    margin-top: 0px;
-    margin-left: 0px;
+    margin-top: 0;
+    margin-left: 0;

    .error-block {
-      margin: 0px;
+      margin: 0;
    }
  }

--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -166,7 +166,6 @@
        align-items: center;
        margin-top: 2px;
        border-radius: 10px;
-        font-weight:500;
        padding: 0 9px;

        span {
@@ -174,8 +173,8 @@
        }
      }
      .data-total-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
        height: 20px;
      }
      .data-total-trend-green {
@@ -220,7 +219,7 @@
        .data-score {
          border-radius: 10px;
          font-size: 12px;
-          color: #FFFFFF;
+          color: var(--el-color-white);
          height: 20px;
          width: 34px;
          line-height: 20px;
@@ -272,6 +271,7 @@
    .el-tabs__content {
      height: calc(100% - 40px);
      border: none;
+
      .el-table__body-wrapper {
        height: calc(100% - 45px) !important;
      }
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -1,13 +1,14 @@
 .npm-app {
-  $grey:#353636;
  height: 100%;
  width: 100%;
  display: flex;
+
  .npm-app-left {
    position: relative;
    height: 100%;
    display: flex;
    flex: 1;
+
    .npm-app-letter-no-data.npm-app-letter {
      min-width: 500px;
    }
@@ -15,6 +16,7 @@
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
+
      div {
        width: 40px;
        height: 40px;
@@ -22,8 +24,7 @@
        text-align: center;
        margin: 0 5px 12.3px 0;
        font-size: 14px;
-        color: #353636;
-        font-weight: 500;
+        color: var(--el-text-color-primary);
      }
      div:nth-of-type(1) {
        height: 25px;
@@ -32,24 +33,26 @@
    }
    .npm-app-body {
      display: flex;
+
      .npm-app-body-patch {
        display: flex;
        flex-direction: column-reverse;
+
        .npm-app-body-color {
          width: 40px;
          height: 40px;
          margin: 0 36px 12.3px 0;
-          background: #EFEFEF;
+          background: var(--el-fill-color-dark);
          border-radius: 4px;;
        }
        .npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
-          background: #E26154;
+          background: var(--el-color-error);
        }
        .npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
-          background: #E5A219;
+          background: var(--el-color-warning);
        }
        .npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
-          background: #749F4D;
+          background: var(--el-color-success);
        }
        .npm-app-body-icon {
          width: 40px;
@@ -57,6 +60,7 @@
          line-height: 25px;
          text-align: center;
          margin-right: 36px;
+
          span {
            i {
              font-size: 20px;
@@ -67,15 +71,17 @@
    }
  }
  .app-table.el-table {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
    border-bottom: none;
+
    .el-table__header-wrapper {
      tr th {
        padding: 5px 0;
+
        .data-column__span {
          font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
        }
      }
    }
@@ -89,11 +95,13 @@
    }
    .el-table__body-wrapper.is-scrolling-none {
      height: 306px !important;
+
      tr td {
        padding: 13px 0 !important;
      }
      tr td:nth-last-child(-n+3) {
        text-align: center;
+
        .data-total {
          justify-content: center;
        }
@@ -102,25 +110,25 @@
  }
  .data-total {
    display: flex !important;
+
    .data-total-category-icon {
      margin-left: -2px;
+
      i {
        font-size: 16px;
        margin-right: 12px;
-        color:  #717171;
+        color: var(--el-text-color-regular);
      }
    }
    .data-total-category-value {
      font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
      cursor: pointer;
    }
    .data-score {
      border-radius: 10px;
      font-size: 12px;
-      color: #FFFFFF;
-      font-weight: 500;
+      color: var(--el-color-white);
      height: 20px;
      width: 34px;
      line-height: 20px;
@@ -128,13 +136,13 @@
      margin-left: -2px;
    }
    .data-score.data-score-red {
-      background: #E26154;
+      background: var(--el-color-danger);
    }
    .data-score.data-score-yellow {
-      background: #E5A219;
+      background: var(--el-color-warning);
    }
    .data-score.data-score-green {
-      background: #749F4D;
+      background: var(--el-color-success);
    }
    .data-score-no-data {
      width: 34px;
@@ -147,8 +155,7 @@
    justify-content: right;
    width: 50%;
    font-size: 12px;
-    color: #353636;
-    font-weight: 400;
+    color: var(--el-text-color-primary);
  }
  .data-trend{
    display: flex;
@@ -156,40 +163,38 @@
  }
  .data-total-trend {
    display: flex;
-    justify-content: left;
    margin-left: 6px;
-    font-size: 12px;
    justify-content: center;
    margin-top: 2px;
    border-radius: 10px;
-    font-weight: 500;
    font-size: 12px;
    height: 20px;
    padding: 0 5px;
  }
  .data-total-trend-black {
-    background-color: rgba(113,113,113,0.12);
-    color: #717171;
+    background-color: var(--el-fill-color-dark);
+    color: var(--el-text-color-regular);
    width: 36px;
  }
  .data-total-trend-green {
-    background-color: rgba(126,159,84,0.12);
-    color: #7E9F54;
+    background-color: rgba(var(--el-color-success-rgb),0.12);
+    color: var(--el-color-success);
  }
  .data-total-trend-red {
-    background-color: rgba(226,97,84,0.12);
-    color: #E26154;
+    background-color: rgba(var(--el-color-error-rgb),0.12);
+    color: var(--el-color-error);
+
    .cn-icon-rise1{
-      color: #E44D3E;
+      color: var(--el-color-error);
    }
  }
  .el-table--group::after,.el-table--border::after, .el-table::before {
-    height: 0px;
+    height: 0;
  }
  .el-table thead {
-    color: $grey;
+    color: var(--el-text-color-primary);
  }
 }
 .npm-app-border {
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
 }
--- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
+++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
@@ -1,9 +1,10 @@
 .npm-network-quantity {
  display: flex;
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
  height: 100%;
  width: 100%;
  border-radius: 4px;
+
  .single-value:nth-of-type(1) {
    border-left: none;
  }
@@ -12,24 +13,25 @@
    padding-left: 20px;
    height: calc(100% - 48px);
    margin: auto;
-    border-left: 1px solid #E2E5EC;
+    border-left: 1px solid var(--el-border-color-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
+
    .single-value__title {
      font-size: 14px;
-      color: #575757;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
    }
    .single-value__content {
      margin: 10px 0 12px 0;
      display: flex;
      align-items: center;
+
      .single-value__content-number {
        font-family: Helvetica-Bold;
        font-size: 24px;
-        color: #353636;
-        font-weight: 700;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
        margin-right: 12px;
      }
      .single-value__content-trend {
@@ -39,33 +41,33 @@
        justify-content: center;
        margin-top: 2px;
        border-radius: 10px;
-        font-weight:500;
        font-size: 12px;
        height: 20px;
        padding: 0 5px;
      }
      .single-value__content-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
        width: 36px;
      }
      .single-value__content-trend-green {
-        background-color: rgba(126,159,84,0.12);
-        color:#7E9F54;
+        background-color: rgba(var(--el-color-success-rgb),0.12);
+        color: var(--el-color-success);
      }
      .single-value__content-trend-red {
-        background-color: rgba(226,97,84,0.12);
-        color:#E26154;
+        background-color: rgba(var(--el-color-error-rgb),0.12);
+        color: var(--el-color-error);
+
        .cn-icon-rise1 {
-          color: #E44D3E;
+          color: var(--el-color-error);
        }
      }
    }
    .single-value__circle {
      display: flex;
      font-size: 12px;
-      color: #717171;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
+
      .single-value__circle-p95 {
        margin-right: 10px;
      }
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -1,13 +1,15 @@
 .npm-traffic-line {
  height: 100%;
  width: 100%;
+
  .npm-traffic-line-header {
    display: flex;
    justify-content: space-between;
+
    .npm-traffic-line-title {
      font-size: 14px;
-      color: #353636;
-      font-weight: 600;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
      height: 32px;
    }
    .line-select-metric {
@@ -16,8 +18,7 @@

      &>span {
        font-size: 12px;
-        color: #575757;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
        margin-right: 3px;
      }
      .line-select__operation {
@@ -26,6 +27,7 @@
        margin-left: 3px;
        box-shadow: none;
        border-radius: 2px;
+
        .el-select__wrapper {
          width: 225px;
          height: 24px !important;
@@ -33,9 +35,9 @@
          padding-left: 4px;
          line-height: 24px;
          font-size: 12px;
-          font-weight: 400;
+
          .el-select__placeholder {
-            color: #2C72C6;
+            color: var(--el-color-primary);
            margin-left: 1px;
          }
          .el-input__inner {
@@ -44,23 +46,24 @@
            padding-left: 4px;
            line-height: 24px;
            font-size: 12px;
-            color: #2C72C6;
-            font-weight: 400;
+            color: var(--el-color-primary);
          }
          .el-select__suffix {
            i {
-              color: #575757 !important;
+              color: var(--el-color-primary) !important;
            }
          }
        }
        .el-input__suffix {
          display: flex;
+
          .el-input__suffix-inner {
            line-height: 24px;
+
            .el-select__caret {
              line-height: 24px;
              width: 16px;
-              color: #575757;
+              color: var(--el-color-primary);
            }
          }
        }
@@ -68,23 +71,27 @@
    }
  }
  .npm-traffic-line-body {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    height: calc(100% - 32px);
    width: 100%;
+
    .panel-chart__no-data {
      height: calc(100% - 32px);
    }
    .chart-drawing {
      height: 100%;
      width: 100%;
+
      .echarts-tooltip.echarts-tooltip-dark {
        .cn-chart-body {
          display: flex;
+
          .cn-chart-tooltip {
            display: flex;
            flex-direction: column;
            flex: 1;
+
            .cn-chart-tooltip-box {
              margin-right: 10px;
            }
@@ -92,7 +99,7 @@
              font-size: 12px;
              color: var(--el-text-color-primary);
              line-height: 21px;
-              font-weight: 600;
+              font-weight: bold;
            }
          }
        }
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -10,9 +10,7 @@
        <template #label>
          <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
          <i :class="tab.icon"></i>{{$t(tab.label)}}
-          <el-tag size="small" class="margin-l-6" :color="tab.name === activeTab ? 'var(--el-color-primary-light-9)' : 'var(--el-fill-color-dark)'" round>
-            <span :style="{color: tab.name === activeTab ? 'var(--el-color-primary)' : 'var(--el-text-color-regular)'}">{{ tab.tag }}</span>
-          </el-tag>
+          <el-tag :type="tab.name === activeTab ? 'primary' : 'info'" size="small" class="margin-l-6" round>{{ tab.tag }}</el-tag>
        </template>
        <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading"  :entity="entity" @checkTag="setTag"></information-aggregation>
        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity"  @checkTag="setTag"></domain-name-resolution>