diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index c7afe2088..0d0937e3f 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -309,6 +309,9 @@
     }
   }
 }
+.date-range-panel--top {
+  top: -460px;
+}
 .el-date-range-picker.el-picker-panel__body__only,.el-picker-panel__body {
   width: 324px;
   .el-date-range-picker__header,.el-date-picker__header{
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 0a5cb783c..e2c6c4960 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -304,7 +304,7 @@ export default {
       this.$emit('closeSubList')
     },
     listResize (e) {
-      this.$emit('listResize', e)
+      this.$emit('listResize', e, this.afterResize)
       this.$nextTick(() => { this.afterResize() })
     },
     changeTab (tab) {
@@ -321,10 +321,20 @@ export default {
           this.$refs.reminalLogRecordTab.consoleResize()
         }, 600)
       }
+      const subListDom = document.querySelector('.sub-list') // 副列表
+      console.log(subListDom.style.height, subListDom.offsetHeight)
+      if (subListDom.offsetHeight < 505) {
+        this.$store.dispatch('dispatchTimeBoxClass', 'date-range-panel--top')
+      } else {
+        this.$store.dispatch('dispatchTimeBoxClass', '')
+      }
     },
     getTableData () {
       this.$emit('getTableData')
     }
+  },
+  beforeDestroy () {
+    this.$store.dispatch('dispatchTimeBoxClass', '')
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 71d15b2b3..deddf8a4a 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -239,7 +239,7 @@ export const cancelWithChange = {
 // 底部上滑框窗口控制
 export const bottomBoxWindow = {
   // 鼠标拖动二级列表
-  listResize (vm, e) {
+  listResize (vm, e, cb) {
     window.resizing = true
     const mainListDom = document.querySelector('.main-list') // 主列表
     const subBoxDom = document.querySelector('.sub-box') // 副列表
@@ -310,6 +310,9 @@ export const bottomBoxWindow = {
 
       document.onmousemove = null
       document.onmouseup = null
+      if (cb) {
+        cb()
+      }
     }
   },
   exitFullScreen (vm) {
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index 3c0a9e5c1..bd3da8c4f 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -214,9 +214,9 @@ export default {
       bottomBoxWindow.exitFullScreen(vm)
     },
     // 鼠标拖动二级列表
-    listResize (e) {
+    listResize (e, cb) {
       const vm = this
-      bottomBoxWindow.listResize(vm, e)
+      bottomBoxWindow.listResize(vm, e, cb)
     },
     showBottomBox (targetTab, row) {
       this.sign = row.id
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 8a346c842..007716d0c 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -20,8 +20,8 @@
         </div>
       </div>
       <div class="calendar-popover-text" v-else>
-        <el-tooltip class="item" effect="light"  placement="bottom">
-          <div slot="content"> {{searchTime[0]}}<br/><p style="text-align:center">{{$t("dashboard.panel.to")}} </p>{{searchTime[1]}}</div>
+    <el-tooltip class="item" effect="light"  placement="bottom">
+      <div slot="content"> {{searchTime[0]}}<br/><p style="text-align:center">{{$t("dashboard.panel.to")}} </p>{{searchTime[1]}}</div>
       <div class="time-no-data">{{ showTime.text }}</div>
     </el-tooltip>
         <!-- <div class="time-no-data">{{ showTime.text }}</div> -->
@@ -31,7 +31,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-top">
-      <div v-if="dropdownFlag" class="date-range-panel popper-z-index">
+      <div v-if="dropdownFlag" class="date-range-panel popper-z-index" :class="timeBoxClass">
         <el-row class="date-range-panel-top" style="position: relative">
           <el-col
             :span="16"
@@ -267,6 +267,11 @@ export default {
       }
     }
   },
+  computed: {
+    timeBoxClass () {
+      return this.$store.getters.getTimeBoxClass
+    }
+  },
   mounted () {
     this.getItem()
     this.getUtcStr()
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index c0a7bd732..90df54984 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -25,7 +25,8 @@ const panel = {
     isConnect: 'none',
     // 当前鼠标所在的图表id
     currentMousemove: 0,
-    variablesArr: []
+    variablesArr: [],
+    timeBoxClass: ''
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -93,6 +94,9 @@ const panel = {
     },
     setVariablesArr (state, value) {
       state.variablesArr = value
+    },
+    setTimeBoxClass (state, value) {
+      state.timeBoxClass = value
     }
   },
   getters: {
@@ -146,6 +150,9 @@ const panel = {
     },
     getVariablesArr (state) {
       return state.variablesArr
+    },
+    getTimeBoxClass (state, value) {
+      return state.timeBoxClass
     }
   },
   actions: {
@@ -187,6 +194,9 @@ const panel = {
     },
     dispatchVariablesArr (store, variablesArr) {
       store.commit('setVariablesArr', variablesArr)
+    },
+    dispatchTimeBoxClass (store, timeBoxClass) {
+      store.commit('setTimeBoxClass', timeBoxClass)
     }
   }
 }