diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 6f16332ae..87714035f 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -20,6 +20,12 @@
     box-sizing: border-box;
     background-color: $--background-color-base;
     &>div {
+      background-color: $--background-color-empty;
+    }
+    .nz-table-list>div{
+      height: 100%;
+    }
+    &>.chart-list-box{
       background-color: $--chart-box-background-color;
       &>.table-list-box {
         background-color: $--chart-box-background-color;
@@ -33,9 +39,6 @@
       padding-bottom: 5px;
       margin-bottom: 10px;
     }
-    .nz-table-list>div{
-      height: 100%;
-    }
   }
   .main-list.main-list-with-sub {
     height: 50%;
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 3a9419775..4beaf1722 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -44,11 +44,25 @@
         overflow: hidden;
       }
     }
+    &>.chart-list-box{
+      &>.table-list-box {
+        background-color: $--chart-box-background-color;
+      }
+      .vue-grid-item {
+        background-color: $--chart-background-color-base
+      }
+    }
   }
   & > .bottom-dashboard {
     padding: 15px 10px 0px 10px !important;
   }
 }
+.bottom-data-list  .chart-list-box {
+  background-color: $--chart-box-background-color;
+  .nz-table-list{
+    background-color: $--chart-box-background-color;
+  }
+}
 .sub-top-tools .top-tool-btn-txt .nz-icon {
   display: inline-block;
   font-size: 12px;
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 353b63507..53d89c3c2 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -38,7 +38,7 @@
         :table-class="true"
       ></element-set>
     </transition>
-    <div class="sub-container">
+    <div class="sub-container" :class="subBoxClass">
       <div :class="subContentClass">
         <slot></slot>
       </div>
@@ -106,6 +106,9 @@ export default {
     hideHeader: {
       type: Boolean,
       default: false
+    },
+    subBoxClass: {
+      type: String
     }
   },
   computed: {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
index fc3c1c165..128581bd2 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
@@ -8,6 +8,7 @@
       :tabs="tabs"
       :targetTab="targetTab"
       @changeTab="changeTab"
+      :subBoxClass="'chart-list-box'"
       class="full-width-height"
       :customClassName="paramsType === 'template' ? 'dashboard-tab-temp dashboard-tab-template' : 'dashboard-tab-temp'"
       :showPagination="false"
@@ -88,7 +89,7 @@
         </div>
       </template>
       <!--图表-->
-      <div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
+      <div id="tableList" class="table-list chart-list-box" style="padding-top: 0;overflow: hidden">
         <div id="dashboardScrollbar" class="table-list-box">
           <div class="box-content"  ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: scroll;display: flex;flex-direction: column;overflow-x: hidden">
             <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue
index 490b5632e..498284897 100644
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -95,7 +95,7 @@
             </template>
           </div>
         </div>
-        <div id="tableList" class="table-list" style='overflow-y: unset'>
+        <div id="tableList" class="table-list chart-list-box" style='overflow-y: unset'>
           <div class="table-list-box">
             <div  id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: scroll;display: flex;flex-direction: column;overflow-x: hidden'>
               <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>