fix: 调整实体详情的流量折线图右侧的选项卡样式

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;
+    }
   }
 }

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'],

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,6 +45,8 @@
                   @change="reload"
               />
             </div>
+            <div class="line-select-metric">
+              <span class="select-prefix line-margin-right">Metric:</span>
               <el-select
                   size="mini"
                   v-model="metric"
@@ -53,14 +55,12 @@
                   :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>
+          </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"