diff --git a/src/assets/css/components/views/charts/chartAppBasicInfo.scss b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
index 36acb01a..9fd3bf5d 100644
--- a/src/assets/css/components/views/charts/chartAppBasicInfo.scss
+++ b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
@@ -1,109 +1,99 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .cn-chart__app-basic {
+.cn-chart__app-basic {
+  display: flex;
+  flex-direction: column;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
+    }
+    .cn-chart__body-single {
+      display: flex;
+      .cn-chart__body-single-table {
+        display: flex;
+        width: 250px;
+        align-items: center;
+      }
+      .single-value-icon__box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 40%;
+      }
+      .single-value__icon {
+        display: flex;
+        justify-content: center;
+        width: 72px;
+        height: 72px;
+        background-color: $--chart-single-value-icon-background-color;
+        border-radius: 50%;
+
+        i {
           display: flex;
-          flex-direction: column;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-            .el-descriptions {
-              padding-top: 30px;
-            }
-            &>.el-descriptions {
-              flex: 0 0 350px;
-              padding: 30px 36px;
-            }
-            .chart-location {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              padding: 0 20px 20px 0;
-            }
-            .el-descriptions__content {
-              color: #3976CB;
-            }
-            .cn-chart__body-single {
-              display: flex;
-              .cn-chart__body-single-table {
-                display: flex;
-                width: 250px;
-                align-items: center;
-              }
-              .single-value-icon__box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 40%;
-              }
-              .single-value__icon {
-                display: flex;
-                justify-content: center;
-                width: 72px;
-                height: 72px;
-                background-color: $--chart-single-value-icon-background-color;
-                border-radius: 50%;
+          align-items: center;
+          font-size: 28px;
+          color: $--color-primary;
+        }
+      }
+      .single-value-color-g.single-value__icon {
+        background-color: limegreen;
+        i {
+          color: green;
+        }
+      }
+      .single-value-color-y.single-value__icon {
+        background-color: yellow;
+        i {
+          color: darkorange;
+        }
+      }
+      .single-value__content {
+        display: flex;
+        flex-direction: column;
+        max-width: 60%;
+        padding-left: 10px;
 
-                i {
-                  display: flex;
-                  align-items: center;
-                  font-size: 28px;
-                  color: $--color-primary;
-                }
-              }
-              .single-value-color-g.single-value__icon {
-                background-color: limegreen;
-                i {
-                  color: green;
-                }
-              }
-              .single-value-color-y.single-value__icon {
-                background-color: yellow;
-                i {
-                  color: darkorange;
-                }
-              }
-              .single-value__content {
-                display: flex;
-                flex-direction: column;
-                max-width: 60%;
-                padding-left: 10px;
+        div:nth-of-type(1) {
+          margin-bottom: 10px;
+        }
 
-                div:nth-of-type(1) {
-                  margin-bottom: 10px;
-                }
-
-                .content__data {
-                  padding-bottom: 7%;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-                .content__title {
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  font-size: 16px;
-                  color: #666666;
-                }
-                &.single-value__content--with-chart {
-                  .content__title {
-                    border-bottom: 1px solid $--content-right-background-color;
-                  }
-                }
-                .single-value__unit {
-                  font-weight: normal;
-                  padding-left: 10px;
-                  color: #666;
-                  font-size: 20px;
-                }
-              }
-            }
+        .content__data {
+          padding-bottom: 7%;
+          font-size: 24px;
+          color: #333333;
+          font-weight: bold;
+        }
+        .content__title {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          font-size: 16px;
+          color: #666666;
+        }
+        &.single-value__content--with-chart {
+          .content__title {
+            border-bottom: 1px solid $--content-right-background-color;
           }
         }
+        .single-value__unit {
+          font-weight: normal;
+          padding-left: 10px;
+          color: #666;
+          font-size: 20px;
+        }
       }
     }
   }
diff --git a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
index e7d344e1..3215599c 100644
--- a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
+++ b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
@@ -1,72 +1,63 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        .cn-chart__table.eventList {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-            height: 100%;
-            width: 100%;
-            .el-descriptions {
-              padding-top: 30px;
-            }
-            &>.el-descriptions {
-              flex: 0 0 350px;
-              padding: 30px 36px;
-            }
-            .chart-location {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              padding: 0 20px 20px 0;
-            }
-            .el-descriptions__content {
-              color: #3976CB;
-            }
-            .crypto-eventList__record {
-              display: flex;
-              height: 100%;
-              width: 100%;
-              .record__table {
-                display: table;
-                height: 100%;
-                width: 100%;
+.cn-chart__table.eventList {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
+    }
+    .crypto-eventList__record {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      .record__table {
+        display: table;
+        height: 100%;
+        width: 100%;
 
-                .record__table-row {
-                  display: table-row;
-                  font-size: 14px;
-                  color: #333333;
-                }
-                .record__table-row.record__table-row--header {
-                  padding: 13px 30px 0;
-                  height: 40px;
-                  color: #6B717B;
-                }
-                .record__table-cell {
-                  display: table-cell;
-                  vertical-align: middle;
-                  padding: 15px 10px;
-                  .record_second{
-                    color:#7e8088;
-                    font-size:12px;
-                  }
-                  .circle-red {
-                    color: #EC7F66;
-                    font-size: 28px;
-                  }
-                }
-                .record__table-cell:first-of-type {
-                  padding-left:30px;
-                }
-              }
-            }
+        .record__table-row {
+          display: table-row;
+          font-size: 14px;
+          color: #333333;
+        }
+        .record__table-row.record__table-row--header {
+          padding: 13px 30px 0;
+          height: 40px;
+          color: #6B717B;
+        }
+        .record__table-cell {
+          display: table-cell;
+          vertical-align: middle;
+          padding: 15px 10px;
+          .record_second{
+            color:#7e8088;
+            font-size:12px;
           }
+          .circle-red {
+            color: #EC7F66;
+            font-size: 28px;
+          }
+        }
+        .record__table-cell:first-of-type {
+          padding-left:30px;
         }
       }
     }
diff --git a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
index ba127814..45de90d9 100644
--- a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
+++ b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
@@ -1,38 +1,29 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .cn-chart__dns-record {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-            height: 100%;
-            width: 100%;
-            .el-descriptions {
-              padding-top: 30px;
-            }
-            &>.el-descriptions {
-              flex: 0 0 350px;
-              padding: 30px 36px;
-            }
-            .chart-location {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              padding: 0 20px 20px 0;
-            }
-            .el-descriptions__content {
-              color: #3976CB;
-            }
-          }
-        }
-      }
+.cn-chart__dns-record {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
     }
   }
 }
+
diff --git a/src/assets/css/components/views/charts/chartDomainWhois.scss b/src/assets/css/components/views/charts/chartDomainWhois.scss
index 708438a4..876d8181 100644
--- a/src/assets/css/components/views/charts/chartDomainWhois.scss
+++ b/src/assets/css/components/views/charts/chartDomainWhois.scss
@@ -1,13 +1,4 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .cn-chart__whois {
-          overflow: auto;
-        }
-      }
-    }
-  }
+.cn-chart__whois {
+  overflow: auto;
 }
+
diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
index 401436ce..cf59a53c 100644
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -1,223 +1,214 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .cn-chart__single-value {
-          &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
-            .single-value__icon {
-              width: 38px;
-              height: 38px;
-              i {
-                font-size: 15px;
-              }
-            }
-            .single-value__content {
-              .content__data {
-                font-size: 14px;
-              }
-              .content__title {
-                font-size: 12px;
-              }
-            }
+.cn-chart__single-value {
+  &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
+    .single-value__icon {
+      width: 38px;
+      height: 38px;
+      i {
+        font-size: 15px;
+      }
+    }
+    .single-value__content {
+      .content__data {
+        font-size: 14px;
+      }
+      .content__title {
+        font-size: 12px;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value-icon__box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 40%;
+    }
+    .single-value__icon {
+      display: flex;
+      justify-content: center;
+      width: 72px;
+      height: 72px;
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      i {
+        display: flex;
+        align-items: center;
+        font-size: 28px;
+        color: $--color-primary;
+      }
+    }
+    .single-value__content {
+      display: flex;
+      flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
+      .content__data {
+        padding-bottom: 7%;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+      .content__title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        color: #666666;
+      }
+      &.single-value__content--with-chart {
+        .content__title {
+          border-bottom: 1px solid $--content-right-background-color;
+        }
+      }
+      .single-value__unit {
+        font-weight: normal;
+        padding-left: 10px;
+        color: #666;
+        font-size: 20px;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-right {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value__icon {
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      position: relative;
+      margin-right: 7.5%;
+      margin-bottom: 6%;
+      width: 56px;
+      height: 56px;
+      i {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        font-size: 24px;
+        color: $--color-primary;
+      }
+    }
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      .content__title {
+        display: flex;
+        align-items: center;
+        height: 50%;
+        font-size: 16px;
+        color: #666666;
+      }
+      .content__data {
+        display: flex;
+        padding-top: 5%;
+        height: 50%;
+        flex: auto;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-right--color {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
+      .single-value-icon__box {
+        padding-right: 30px;
+        .single-value__icon {
+          border-radius: 50%;
+          position: relative;
+          margin-right: 7.5%;
+          margin-top: 30%;
+          .cn-icon-svg {
+            width: 50px;
+            height: 50px;
+            vertical-align: middle;
+            fill: currentColor;
+            overflow: hidden;
           }
-          &.cn-chart__single-value--icon-left {
-            display: flex;
-            align-items: center;
-            height: 100%;
-            width: 100%;
-            .single-value-icon__box {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              flex: 0 0 40%;
-            }
-            .single-value__icon {
-              display: flex;
-              justify-content: center;
-              width: 72px;
-              height: 72px;
-              background-color: $--chart-single-value-icon-background-color;
-              border-radius: 50%;
-              i {
-                display: flex;
-                align-items: center;
-                font-size: 28px;
-                color: $--color-primary;
-              }
-            }
-            .single-value__content {
-              display: flex;
-              flex-direction: column;
-              max-width: 60%;
-              padding-right: 10px;
-              .content__data {
-                padding-bottom: 7%;
-                font-size: 24px;
-                color: #333333;
-                font-weight: bold;
-              }
-              .content__title {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                font-size: 16px;
-                color: #666666;
-              }
-              &.single-value__content--with-chart {
-                .content__title {
-                  border-bottom: 1px solid $--content-right-background-color;
-                }
-              }
-              .single-value__unit {
-                font-weight: normal;
-                padding-left: 10px;
-                color: #666;
-                font-size: 20px;
-              }
-            }
-          }
-          &.cn-chart__single-value--icon-right {
-            display: flex;
-            flex-direction: row-reverse;
-            justify-content: space-around;
-            align-items: center;
-            height: 100%;
-            width: 100%;
-            .single-value__icon {
-              background-color: $--chart-single-value-icon-background-color;
-              border-radius: 50%;
-              position: relative;
-              margin-right: 7.5%;
-              margin-bottom: 6%;
-              width: 56px;
-              height: 56px;
-              i {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%,-50%);
-                font-size: 24px;
-                color: $--color-primary;
-              }
-            }
-            .single-value__content {
-              display: flex;
-              height: 100%;
-              flex-direction: column;
-              .content__title {
-                display: flex;
-                align-items: center;
-                height: 50%;
-                font-size: 16px;
-                color: #666666;
-              }
-              .content__data {
-                display: flex;
-                padding-top: 5%;
-                height: 50%;
-                flex: auto;
-                font-size: 24px;
-                color: #333333;
-                font-weight: bold;
-              }
-            }
-          }
-          &.cn-chart__single-value--icon-right--color {
-            display: flex;
-            flex-direction: row-reverse;
-            justify-content: space-around;
-            align-items: center;
-            height: 100%;
-            width: 100%;
-            .single-value__content {
-              display: flex;
-              height: 100%;
-              width: 100%;
-              flex-direction: row-reverse;
-              justify-content: space-between;
-              align-items: center;
-              .single-value-icon__box {
-                padding-right: 30px;
-                .single-value__icon {
-                  border-radius: 50%;
-                  position: relative;
-                  margin-right: 7.5%;
-                  margin-top: 30%;
-                  .cn-icon-svg {
-                    width: 50px;
-                    height: 50px;
-                    vertical-align: middle;
-                    fill: currentColor;
-                    overflow: hidden;
-                  }
-                  i {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    font-size: 24px;
-                  }
-                }
-              }
-              .single-value__data{
-                display: flex;
-                height: 100%;
-                flex-direction: column;
-                padding-left: 20px;
-                .content__title {
-                  display: flex;
-                  align-items: end;
-                  height: 50%;
-                  font-size: 16px;
-                  color: #666666;
-                  padding-bottom: 5px;
-                }
-                .content__data {
-                  display: flex;
-                  padding-top: 5%;
-                  height: 50%;
-                  flex: auto;
-                  font-size: 24px;
-                  color: #333333;
-                  font-weight: bold;
-                }
-              }
-            }
-          }
-          &.cn-chart__single-value--chart {
-            display: flex;
-            padding: 13px 20px;
-            height: 100%;
-            width: 100%;
-            .single-value__content {
-              display: flex;
-              height: 100%;
-              width: 100%;
-              flex-direction: column;
-              .content__title {
-                display: flex;
-                align-items: center;
-                height: 30%;
-                font-size: 16px;
-                color: #666666;
-              }
-              .content__data {
-                display: flex;
-                align-items: center;
-                height: 25%;
-                font-size: 24px;
-                color: #333333;
-                font-weight: bold;
-              }
-              .content__chart {
-                flex: auto
-              }
-            }
+          i {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            font-size: 24px;
           }
         }
       }
+      .single-value__data{
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        padding-left: 20px;
+        .content__title {
+          display: flex;
+          align-items: end;
+          height: 50%;
+          font-size: 16px;
+          color: #666666;
+          padding-bottom: 5px;
+        }
+        .content__data {
+          display: flex;
+          padding-top: 5%;
+          height: 50%;
+          flex: auto;
+          font-size: 24px;
+          color: #333333;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &.cn-chart__single-value--chart {
+    display: flex;
+    padding: 13px 20px;
+    height: 100%;
+    width: 100%;
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: column;
+      .content__title {
+        display: flex;
+        align-items: center;
+        height: 30%;
+        font-size: 16px;
+        color: #666666;
+      }
+      .content__data {
+        display: flex;
+        align-items: center;
+        height: 25%;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+      .content__chart {
+        flex: auto
+      }
     }
   }
 }
+
diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss
index d7d68894..583e9159 100644
--- a/src/assets/css/components/views/charts/chartTable.scss
+++ b/src/assets/css/components/views/charts/chartTable.scss
@@ -1,81 +1,71 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .active-ip.cn-chart__table {
-          height: calc(100% - 47px) !important;
-        }
-        .cn-chart__table{
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          .cn-chart__body {
-            flex: auto;
-            overflow-y: auto;
-            height: 100%;
-            width: 100%;
+.active-ip.cn-chart__table {
+  height: calc(100% - 47px) !important;
+}
+.cn-chart__table{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .cn-chart__body {
+    flex: auto;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
 
-            .el-table {
-              padding: 0 10px;
-              .el-table__body-wrapper.is-scrolling-none {
-                height: 100%;
-                overflow-y: auto;
-              }
-
-              &:before {
-                height: 0;
-              }
-              thead {
-                color: #333;
-              }
-              th.is-leaf, td {
-                border-bottom: none;
-              }
-              th {
-                padding-bottom: 5px;
-              }
-              td {
-                padding: 4px 0;
-                color: #333;
-              }
-            }
-            .active-ip__icon {
-              overflow: hidden;
-              position: absolute;
-              top: 8px;
-              left: 6px;
-              display: flex;
-              justify-content: center;
-              justify-items: center;
-              align-items: center;
-              width: 23px;
-              height: 23px;
-              border-radius: 50%;
-              background: #e8fbf9;
-              border: 2px solid #e8fbf9;
-            }
-            .ip-green {
-              color: #23BF9A;
-            }
-            .active-ip__content {
-              position: absolute;
-              top: 7px;
-              left: 35px;
-              overflow: hidden;
-            }
-          }
-          .chart-table-pagination.el-pagination {
-            padding: 12px 0 9px 0;
-            text-align: center;
-
-            .el-pagination__jump {
-              margin-left: 10px;
-            }
-          }
-        }
+    .el-table {
+      padding: 0 10px;
+      .el-table__body-wrapper.is-scrolling-none {
+        height: 100%;
+        overflow-y: auto;
       }
+
+      &:before {
+        height: 0;
+      }
+      thead {
+        color: #333;
+      }
+      th.is-leaf, td {
+        border-bottom: none;
+      }
+      th {
+        padding-bottom: 5px;
+      }
+      td {
+        padding: 4px 0;
+        color: #333;
+      }
+    }
+    .active-ip__icon {
+      overflow: hidden;
+      position: absolute;
+      top: 8px;
+      left: 6px;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 23px;
+      height: 23px;
+      border-radius: 50%;
+      background: #e8fbf9;
+      border: 2px solid #e8fbf9;
+    }
+    .ip-green {
+      color: #23BF9A;
+    }
+    .active-ip__content {
+      position: absolute;
+      top: 7px;
+      left: 35px;
+      overflow: hidden;
+    }
+  }
+  .chart-table-pagination.el-pagination {
+    padding: 12px 0 9px 0;
+    text-align: center;
+
+    .el-pagination__jump {
+      margin-left: 10px;
     }
   }
 }
diff --git a/src/assets/css/components/views/charts/ipBasicInfo.scss b/src/assets/css/components/views/charts/ipBasicInfo.scss
index ec1f4525..35914623 100644
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ b/src/assets/css/components/views/charts/ipBasicInfo.scss
@@ -1,29 +1,20 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        height: 100% !important;
-        .cn-chart__ip-basic {
-          display: flex;
-          .el-descriptions {
-            padding-top: 30px;
-          }
-          &>.el-descriptions {
-            flex: 0 0 350px;
-            padding: 30px 36px;
-          }
-          .chart-location {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            padding: 0 20px 20px 0;
-          }
-          .el-descriptions__content {
-            color: #3976CB;
-          }
-        }
-      }
-    }
+.cn-chart__ip-basic {
+  display: flex;
+  .el-descriptions {
+    padding-top: 30px;
+  }
+  &>.el-descriptions {
+    flex: 0 0 350px;
+    padding: 30px 36px;
+  }
+  .chart-location {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 0 20px 20px 0;
+  }
+  .el-descriptions__content {
+    color: #3976CB;
   }
 }
+
diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 6ce63966..b0f1d2a3 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -196,7 +196,7 @@
         &>.cn-chart {
           position: relative;
           border-radius: 2px;
-          height: calc(100% - 47px);
+          height: 100%;
           width: 100%;
           .chart-drawing {
             height: 100%;