diff --git a/src/assets/css/components/views/charts2/EntityDetailLine.scss b/src/assets/css/components/views/charts2/EntityDetailLine.scss
index e847b0c5..e9f5d1e1 100644
--- a/src/assets/css/components/views/charts2/EntityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/EntityDetailLine.scss
@@ -31,10 +31,34 @@
         display: flex;
       }
     }
+    .line-select-metric {
+      margin-right: 20px;
+
+      .el-input__inner {
+        width: 127px;
+        height: 24px;
+        line-height: 24px;
+        padding-left: 4px;
+        font-size: 12px;
+        color: #2C72C6;
+        font-weight: 400;
+        border-radius: 2px;
+      }
+    }
 
     .line-select-reference-line {
       margin-left: 0 !important;
       line-height: 1;
     }
+
+    .line-margin-right {
+      margin-right: 10px;
+    }
+
+    .entity-detail-date-time-range {
+      height: 24px;
+      line-height: 24px;
+      border: 1px solid #DCDFE6;
+    }
   }
 }
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 757bb1b6..9f88ff66 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 3" class="date-range-box">
-    <div @click="showDropdown" class="date-range-text">
+    <div @click="showDropdown" class="date-range-text" :class="class" :style="style">
       <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
         <div class="calendar-popover-text">{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
@@ -95,6 +95,12 @@ export default {
     },
     dateRange: {
       type: Number
+    },
+    class: {
+      type: String
+    },
+    style: {
+      type: String
     }
   },
   emits: ['change'],
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
index b1ffdc44..f89b5121 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -35,9 +35,9 @@
         </div>
         <div class="line-select line-header-right">
           <div class="panel__tools">
-            <div class="panel__time">
+            <div class="panel__time line-margin-right">
               <date-time-range
-                  class="date-time-range"
+                  class="entity-detail-date-time-range"
                   :start-time="timeFilter.startTime"
                   :end-time="timeFilter.endTime"
                   :date-range="timeFilter.dateRangeValue"
@@ -45,22 +45,22 @@
                   @change="reload"
               />
             </div>
-            <el-select
-                size="mini"
-                v-model="metric"
-                placeholder=""
-                popper-class="common-select"
-                :popper-append-to-body="false"
-                @change="metricChange"
-            >
-              <template #prefix>
-                <span class="select-prefix">Metric:</span>
-              </template>
-              <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
+            <div class="line-select-metric">
+              <span class="select-prefix line-margin-right">Metric:</span>
+              <el-select
+                  size="mini"
+                  v-model="metric"
+                  placeholder=""
+                  popper-class="common-select"
+                  :popper-append-to-body="false"
+                  @change="metricChange"
+              >
+                <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </div>
           </div>
           <div class="line-select-reference-line">
-            <span>{{ $t('network.referenceLine') }}:</span>
+            <span class="line-margin-right">{{ $t('network.referenceLine') }}:</span>
             <div class="line-select__operation">
               <el-select
                   size="mini"