perf: entity详情头部样式调整

src/components/charts/panel.scss

@@ -522,34 +522,70 @@
   overflow: hidden;
   .entity-detail__header {
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     height: 70px;
     padding-right: 20px;
     background-color: #F7F9FB;
-    & > .el-tabs > .el-tabs__header { // header背景色
+
-      margin: 0;
+    .detail-header__title {
-      & > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {
+      display: flex;
-        & > .el-tabs__item.is-active { // 激活的tab上边框和背景色
+      align-items: center;
+      padding-left: 20px;
+      font-size: 20px;
+      font-weight: bold;
+
+      .title__icon-circle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 38px;
+        width: 38px;
+        border-radius: 50%;
+        background-color: #B8C1D1;
+
+        i {
           background-color: white;
-          border-top: 2px solid #0091ff;
+          font-size: 17px;
-        }
-        & > .el-tabs__active-bar {
-          display: none;
-        }
-        & > div:last-of-type {
-          padding-right: 20px;
-        }
-        & > div:nth-of-type(2) {
-          padding-left: 20px;
         }
       }
+      .title__name {
+        padding-left: 10px;
+      }
     }
-    & > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap::after { // 去掉tabs下方边框
+    .detail-header__operation {
-      height: 0 !important;
-    }
-    &>.el-tabs { // 底部对齐
       display: flex;
       align-items: end;
+
+      & > .el-tabs > .el-tabs__header { // header背景色
+        margin: 0 0 -1px 0;
+
+        & > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {
+          & > .el-tabs__item {
+            height: 35px;
+            line-height: 35px;
+          }
+          & > .el-tabs__item.is-active { // 激活的tab上边框和背景色
+            background-color: white;
+            border-top: 2px solid #0091ff;
+          }
+          & > .el-tabs__active-bar {
+            display: none;
+          }
+          & > div:last-of-type {
+            padding-right: 20px;
+          }
+          & > div:nth-of-type(2) {
+            padding-left: 20px;
+          }
+        }
+      }
+      & > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap::after { // 去掉tabs下方边框
+        height: 0 !important;
+      }
+      &>.el-tabs { // 底部对齐
+        display: flex;
+        align-items: end;
+      }
     }
   }
   .entity-detail__body {

src/views/charts/Panel.vue

@@ -27,22 +27,29 @@
     </div>
   </div>
   <div class="cn-entity-detail" id="cn-entity-detail" v-else>
-    <div class="panel__time">
-      <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
-      <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
-    </div>
     <div class="entity-detail__header">
-      <el-tabs v-model="currentTab">
+      <div class="detail-header__title">
-        <el-tab-pane
+        <span class="title__icon-circle">
-            v-for="(tab, index) in detailTabs"
+          <i class="cn-icon cn-icon-ip"></i>
-            :label="tab.i18n ? $t(tab.i18n) : tab.name"
+        </span>
-            :name="`${tab.id}`"
+        <span class="title__name">{{entity.name}}</span></div>
-            :key="tab.id"
+      <div class="detail-header__operation">
-            :ref="`chart-${tab.id}`"
+        <div class="panel__time">
-            @tab-click="changeTab(index)"
+          <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
-        >
+          <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
-        </el-tab-pane>
+        </div>
-      </el-tabs>
+        <el-tabs v-model="currentTab">
+          <el-tab-pane
+              v-for="(tab, index) in detailTabs"
+              :label="tab.i18n ? $t(tab.i18n) : tab.name"
+              :name="`${tab.id}`"
+              :key="tab.id"
+              :ref="`chart-${tab.id}`"
+              @tab-click="changeTab(index)"
+          >
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
     <div class="entity-detail__body">
       <div class="cn-panel">