diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 4d430663..e33fc351 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -5,12 +5,27 @@
     top: 10px;
     z-index: 2;
     display: flex;
+    &.panel__time--scrolled-out {
+      position: fixed;
+      top: 70px;
+      padding-right: 10px;
+    }
     &>div {
       margin-left: 10px;
     }
   }
   position: relative;
   .chart-list {
+    &.chart-list--screen {
+      display: grid;
+      height: calc(100vh - 90px);
+      width: 100%;
+      grid-template-columns: repeat(30,1fr);
+      grid-template-rows: repeat(19,1fr);
+      grid-gap: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
     &>.vue-grid-layout>.vue-grid-item, &>.dns-screen {
       &>.panel-chart {
         border: 1px solid $--chart-box-border-color;
@@ -507,6 +522,11 @@
     }
   }
 }
+.panel-list {
+  padding: 10px 10px 20px 10px;
+  overflow: auto;
+  height: 100%;
+}
 .cn-panel2__whole-screen {
   height: calc(100vh - 50px);
   width: 100%;
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 19bbcd80..6b18690b 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -12,9 +12,9 @@
                   :entity="entity">
       </dns-screen>
     </div>
-    <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto; height: 100%;" v-if="!isEntityDetail" >
+    <div id="panelList" v-if="!isEntityDetail" class="panel-list">
       <div id="cn-panel" class="cn-panel2">
-        <div class="panel__time" :style="scrolledOut ? '' : 'position: fixed; top: 70px; padding-right: 10px;'">
+        <div class="panel__time" :class="{ 'panel__time--scrolled-out': !scrolledOut }">
           <date-time-range class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
           <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
         </div>
diff --git a/src/views/charts/wholeScreenScroll/DnsScreen.vue b/src/views/charts/wholeScreenScroll/DnsScreen.vue
index e66a8b9f..ae03dbd8 100644
--- a/src/views/charts/wholeScreenScroll/DnsScreen.vue
+++ b/src/views/charts/wholeScreenScroll/DnsScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-list" style="display:grid;height:calc(100vh - 90px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
+  <div class="chart-list chart-list--screen">
     <div v-for="item in dnsScreenDataList"
           :key="item.id"
           :ref="'grid-item' + item.id"