perf: 调整panel顶部工具栏样式

nezha-fronted/src/assets/stylus/main.scss

@@ -41,6 +41,18 @@ li{
 .margin-b-10 {
   margin-bottom: 10px !important;
 }
+.margin-l-20 {
+  margin-left: 20px !important;
+}
+.margin-r-20 {
+  margin-right: 20px !important;
+}
+.margin-t-20 {
+  margin-top: 20px !important;
+}
+.margin-b-20 {
+  margin-bottom: 20px !important;
+}
 .float-left {
   float: left;
 }
@@ -76,6 +88,9 @@ li{
   display: inline-block;
   width: 100%;
 }
+.global-active-color {
+  color: $global-text-color-active;
+}
 /* begin--按钮组件*/
 .nz-btn-min-width-35 {
   min-width: 35px;

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -44,17 +44,21 @@
                     <el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
-            <div class="panel-refresh-interval">
+          <div class="nz-btn-group float-right margin-r-20">
-                <div class="block">
+            <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"><i style="font-size: 13px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
-                    <!--
+              <ul class="popover_ul">
-              <button type="button"  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+                <li v-for="i in intervalList"  :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
-                <span class="top-tool-btn-txt"><i class="el-icon-refresh-right"></i></span>
+                  {{i.name}}
+                </li>
+              </ul>
+              <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+                <i style="font-size: 13px" class="nz-icon nz-icon-arrow-down" ></i>
               </button>
-            -->
+            </el-popover>
-                    <!--<el-select class="panel-refresh-interval-select" placeholder="" v-model="interval" @change="selectInterval" size="small">
+          </div>
-                        <el-option v-for="item in intervalList" :value="item.value" :label="item.name" :key="item.value">{{item.name}}</el-option>
+            <!--<div class="panel-refresh-interval">
-                    </el-select>
+                <div class="block">
-                    <!-- 刷新 -->
+                    &lt;!&ndash; 刷新 &ndash;&gt;
                     <div class="refresh">
                         <span style="cursor:pointer;" class="nz-dashboard-refresh">
                             <i class="nz-icon nz-icon-refresh" @click="Refresh()"></i>
@@ -66,15 +70,15 @@
                                 </li>
                             </ul>
                             <div style="cursor:pointer" slot="reference">
-                                <!-- {{interval}} -->
+                                &lt;!&ndash; {{interval}} &ndash;&gt;
                                 <i class="nz-icon nz-icon-arrow-down" ></i>
                             </div>
                         </el-popover>
                         
                     </div>
                 </div>
-            </div>
+            </div>-->
-            <div class="panel-calendar">
+            <div class="panel-calendar margin-r-20">
                 <div class="block">
                     <el-date-picker class="nz-dashboard-picker" size="mini" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right">
                     </el-date-picker>