diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
index bd5fc8856..b13a423ec 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
@@ -92,7 +92,7 @@
     color: #60BEFF;
     font-size: 13px
   }
-
+  
   .panel-dropdown-btn:hover {
     color: #409EFF;
   }
@@ -151,6 +151,11 @@
       background: $--background-color-empty;
     }
   }
+  &.el-button--mini{
+    color: $--color-text-label;
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+  }
 
   .nz-dashboard-dropdown {
     height: 300px;
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 8d39d467b..b43d5a7c5 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -3,6 +3,7 @@
     id="panel-calender"
     :class="{ 'calendar--small': size === 'small' }"
     class="calendar"
+    v-clickoutside="changeDropdownFlag"
   >
 
     <div @click="showDropdown" class="date-range-text">
@@ -63,6 +64,7 @@
                 @click="timeRange(searchTime)"
                 type="primary"
                 size="mini"
+                class="time-range-button el-button--primary"
                 >Apply time range</el-button
               >
             </div>
@@ -248,6 +250,11 @@ export default {
     console.log(this.sign)
   },
   methods: {
+    changeDropdownFlag(){
+      if (this.dropdownFlag) {
+        this.dropdownFlag = false
+      }
+    },
     getItem () {
       this.rangeHistory = localStorage.getItem('date-range-history' + this.sign)
         ? JSON.parse(localStorage.getItem('date-range-history' + this.sign))