From 56ade3fc4f822cabc42d4687d3674f6500001e4d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 25 Apr 2022 15:42:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B4=E5=B1=8F=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts/panel.scss    | 20 +++++++++++++++++++
 src/views/charts/Panel.vue                    |  4 ++--
 .../charts/wholeScreenScroll/DnsScreen.vue    |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

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"