diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 9a8ee3f18..a2286a302 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -118,6 +118,12 @@ li{
   line-height: 16px;
   position: relative;
 }
+.nz-btn-metric-bottom{
+  position: absolute;
+  left:50%;
+  bottom: -70%;
+  
+}
 .nz-btn.nz-btn-size-normal {
   font-size: 12px;
   padding: 4px 8px;
@@ -151,7 +157,6 @@ li{
   border: 0px;
   color: $btn-light-txt-color;
   box-shadow: $btn-light-shadow;
-
   letter-spacing: 0;
 }
 .nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
@@ -251,6 +256,28 @@ li{
 }
 /* end--el-input扩展 */
 
+// metric组件
+.nz-tab-style {
+  line-height: 14px;
+  padding-bottom:6px;
+  color: #999;
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom:10px;
+  font-size: 14px;
+}
+ .nz-tab-style-light {  
+  border-bottom: 3px solid $global-text-color-active;
+  color: #333;
+  cursor: default;
+  box-sizing: border-box;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+ .nz-tab-style-light-right{
+  margin-left:30px;
+ }
+  
 /* begin--nz-tab组件*/
 .nz-tab {
   font-size: 14px;
@@ -273,6 +300,7 @@ li{
   color: #333;
   cursor: default;
 }
+ 
 /* end--nz-tab组件*/
 
 /* end--通用*/
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index d01aa76e9..cb3461152 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -72,23 +72,37 @@
       </el-col>
 
       <el-col span="8">
-        
-        <div class="nz-btn-group float-left"  v-show="tableShow == 2">
-          <!-- <button @click="clickTabelShow(1,'normal')" class="nz-tab-item nz-tab-item-active"> -->
-          <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
+
+        <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
+        <div class="nz-tab-item-box"  v-show="tableShow == 1">
+          <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
             <span>{{$t('dashboard.metric.normal')}}</span>
-          </button>
-          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
+          </div>
+          <!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
+            <span>{{$t('dashboard.metric.normal')}}</span>
+          </button> -->
+          <div @click="" class="nz-tab-style nz-tab-style-light-right">
             <span>{{$t('dashboard.metric.expert')}}</span>
-          </button>
+          </div>
+          <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
+            <span>{{$t('dashboard.metric.expert')}}</span>
+          </button> -->
         </div>
-        <div class="nz-btn-group float-left"  v-show="tableShow == 1">
-          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
+        <div class="nz-tab-item-box "  v-show="tableShow == 2">
+        <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 1"> -->
+          <div @click="" class="nz-tab-style">
+            <span>{{$t('dashboard.metric.normal')}}</span>
+          </div>
+
+          <div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
+            <span>{{$t('dashboard.metric.expert')}}</span>
+          </div>
+          <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
           <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('dashboard.metric.expert')}}</span>
-          </button>
+          </button> -->
         </div>
       </el-col>
     </el-row>
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index ad83777a2..47ea1c87d 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -71,21 +71,36 @@
         <span  class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
       <el-col span="8">
-        <div class="nz-btn-group float-left"  v-show="tableShow == 2">
-          <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
+        <div class="nz-tab-item-box"  v-show="tableShow == 1">
+        <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
+          <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
+            <span>{{$t('dashboard.metric.normal')}}</span>
+          </div>
+          <div @click="" class="nz-tab-style nz-tab-style-light-right">
+            <span>{{$t('dashboard.metric.expert')}}</span>
+          </div>
+          <!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
           <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.expert')}}</span>
-          </button>
+          </button> -->
         </div>
-        <div class="nz-btn-group float-left"  v-show="tableShow == 1">
-          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
+        <div class="nz-tab-item-box"  v-show="tableShow == 2">
+        <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 1"> -->
+           <div @click="" class="nz-tab-style">
+            <span>{{$t('dashboard.metric.normal')}}</span>
+          </div>
+
+          <div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
+            <span>{{$t('dashboard.metric.expert')}}</span>
+          </div>
+          <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
           <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('dashboard.metric.expert')}}</span>
-          </button>
+          </button> -->
         </div>
       </el-col>
     </el-row>
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index 7f0314a15..ddad33bac 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -23,18 +23,24 @@
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
       </el-row>
 
-      <el-row class="operate-area">
-        <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
-
+      <el-row class="operate-area nz-btn-metric-bottom">
+        <!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
         <button :disabled="saveDisabled" type="primary" @click="createNew"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-120 nz-btn-size-normal nz-btn-style-light  btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-light' : !saveDisabled}"
+        >{{$t('dashboard.metric.createPanel')}}</button>
+
+        <button :disabled="saveDisabled" type="primary" @click="selectPanel"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light  btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
+        >{{$t('dashboard.metric.selectPanel')}}</button>
+        <!-- <button :disabled="saveDisabled" type="primary" @click="createNew"
                 :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light  btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
         >{{$t('dashboard.metric.createPanel')}}</button>
         <button :disabled="saveDisabled" type="primary" @click="selectPanel"
                 :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
-        >{{$t('dashboard.metric.selectPanel')}}</button>
+        >{{$t('dashboard.metric.selectPanel')}}</button> -->
 
       </el-row>
-
+<!-- options -->
       <el-row class="mt-10">
         <el-checkbox :disabled="saveDisabled" v-model="isSave">options</el-checkbox>
       </el-row>
@@ -51,16 +57,18 @@
             </el-form-item>
           </div>
         </el-row>
+
         <el-row>
           <div class="common-float-left">
             <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
             :rules="{ required: true, type: 'number', trigger: 'change' }">
-
-              <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px
-
+              <el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input>
+              <span class='nz-input-append'>px</span>
+              <!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px -->
             </el-form-item>
           </div>
         </el-row>
+
         <el-row>
           <div class="common-float-left">
             <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"