CN-240 feat: 实体详情

src/assets/css/components/components/charts/panel.scss

@@ -89,14 +89,17 @@
 .cn-panel-crypto {
   grid-template-columns: repeat(36, 1fr) !important;
 }
-
-.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
+.cn-chart:not(.cn-chart__group):not(.cn-chart__block) {
+  &>.cn-chart__body {
+    height: 100%;
+    width: 100%;
+  }
+}
+.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body, .cn-chart__block .cn-chart__body {
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   grid-auto-flow: row;
   grid-gap: 10px;
-  height: 100%;
-  width: 100%;
   overflow: auto;
   padding-right: 20px;
   position: relative;
@@ -107,6 +110,10 @@
     top: 10px;
     z-index: 1;
     display: flex;
+
+    &>div {
+      margin-left: 10px;
+    }
   }
 
   &>.cn-chart {
@@ -126,7 +133,7 @@
   &>.cn-chart__whois>.cn-chart__body {
     overflow: auto;
   }
-  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map, &>.cn-chart__group, &>.cn-chart__whois, &>.cn-chart__dns-record, &>.cn-chart__app-basic {
+  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map, &>.cn-chart__group, &>.cn-chart__block, &>.cn-chart__whois, &>.cn-chart__dns-record, &>.cn-chart__app-basic {
     display: flex;
     flex-direction: column;
     .cn-chart__header {
@@ -167,12 +174,40 @@
       }
     }
   }
-  &>.cn-chart__group {
+  &>.cn-chart__block {
+    &>.cn-chart__header {
+      height: 60px;
+      border-bottom: none !important;
+    }
+    &>.cn-chart__body {
+      display: grid !important;
+      grid-template-columns: repeat(30, 1fr);
+      grid-auto-flow: row;
+      grid-gap: 10px;
+      padding: 0 20px;
+      &>.cn-chart {
+        border: 1px solid #E7EAED;
+      }
+      /* detail页面block下的五连图的标题样式改变 */
+      .cn-chart__group .cn-chart__echarts {
+        .cn-chart__header {
+          border-bottom: none !important;
+
+          .header__title {
+            font-size: 14px !important;
+            color: #3976CB !important;
+          }
+        }
+      }
+    }
+  }
+  .cn-chart__group {
     .cn-chart__header {
       border-bottom: 1px solid $--content-right-background-color;
     }
     &>.cn-chart__body {
       display: grid !important;
+      grid-gap: 10px;
       padding: 0 20px;
       .cn-chart {
         border: none;
@@ -518,22 +553,29 @@
   }
 }
 @media only screen  and (min-width : 10px) {
-  .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
+  .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane,
+  .cn-chart__body {
     grid-auto-rows: 25px;
   }
 }
 @media only screen  and (min-width : 1224px) {
-  .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
+  .cn-panel,
+  .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane,
+  .cn-chart__body {
     grid-auto-rows: 30px;
   }
 }
 @media only screen  and (min-width : 1824px) {
-  .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
+  .cn-panel,
+  .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane,
+  .cn-chart__body {
     grid-auto-rows: 40px;
   }
 }
 @media only screen  and (min-width : 2424px) {
-  .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
+  .cn-panel,
+  .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane,
+  .cn-chart__body {
     grid-auto-rows: 55px;
   }
 }
@@ -627,32 +669,36 @@
     }
   }
   .entity-detail__body {
-    height: calc(100% - 70px);
+    height: 100%;
     width: 100%;
     overflow: auto;
     &>div {
       display: grid;
       grid-template-columns: repeat(30, 1fr);
       grid-auto-flow: row;
-      grid-auto-rows: var(--chart-height-unit);
       grid-gap: 10px;
+      height: 100%;
     }
+
     .cn-panel {
       padding: 20px;
       grid-gap: 10px;
 
       &>.cn-chart>.cn-chart__header {
         border-bottom: 1px solid $--content-right-background-color;
-        .header__title {
-          color: #333;
+        .header__title>span {
+          color: #1890FF;
+          font-weight: bold;
           font-size: 16px;
         }
       }
-      .cn-chart__header {
-        border-bottom: none;
-        .header__title {
-          color: #3976CB;
-          font-size: 14px;
+      &>.cn-chart>.cn-chart__body {
+        .cn-chart__header {
+          border-bottom: 1px solid $--content-right-background-color;
+          .header__title {
+            color: #666;
+            font-size: 16px;
+          }
         }
       }
     }

src/assets/css/components/index.scss

@@ -13,6 +13,7 @@
 @import './views/entityExplorer/entityExplorer';
 @import './views/entityExplorer/search/explorerSearch';
 @import './views/entityExplorer/entityFilter';
+@import './views/entityExplorer/entityDetail';
 @import './views/entityExplorer/entityList/entityList';
 @import './views/entityExplorer/entityList/card';
 @import './views/entityExplorer/entityList/row';

src/assets/css/components/views/charts/chart.scss

@@ -102,6 +102,11 @@
   .domain-detail-list__row {
     display: table-row;
 
+    &:last-of-type {
+      .domain-detail-list__label, .domain-detail-list__content {
+        border-bottom: none;
+      }
+    }
     .domain-detail-list__label {
       display: table-cell;
       padding: 13px 30px;

src/assets/css/components/views/entityExplorer/entityDetail.scss

@@ -0,0 +1,78 @@
+.entity-detail.cn-home {
+  flex-direction: column;
+
+  .entity-detail__header {
+    flex: 0 0 80px;
+    display: flex;
+    align-items: center;
+
+    .cn-entity__name {
+      font-size: 20px;
+      color: #333333;
+      font-weight: bold;
+    }
+    .cn-entity__icon {
+      margin-left: 26px;
+      margin-right: 10px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background-color: #F3F7FA;
+
+      i {
+        font-size: 22px;
+        color: #4E84B4;
+      }
+    }
+  }
+  &>.entity-detail__body {
+    width: 100%;
+    height: calc(100% - 52px);
+    display: flex;
+    flex-direction: row;
+
+    .entity-detail__menu {
+      flex: 0 0 240px;
+      display: flex;
+      flex-direction: column;
+      padding-top: 23px;
+      border-top: 1px solid $--content-right-background-color;
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        padding: 7px 0 7px 30px;
+        font-size: 14px;
+        color: #666666;
+
+        span {
+          padding-left: 10px;
+          cursor: pointer;
+        }
+
+        &.menu-item--active {
+          color: #1890FF;
+
+          span {
+            border-left: 2px solid #1890FF;
+          }
+        }
+      }
+    }
+    .entity-detail__content {
+      height: calc(100% - 28px);
+      flex: 1;
+      padding: 10px;
+      background-color: $--content-right-background-color;
+
+      &>.cn-entity-detail .entity-detail__body>.cn-panel {
+        background-color: white;
+      }
+    }
+  }
+}