style: 公用 header 时间选择器和刷新部分样式调整

src/assets/css/components/components/common/TimeRange/date-time-range.scss

@@ -1,6 +1,7 @@
 .date-range-box {
   font-size: 14px;
   border-radius: 2px;
+  margin-right: 10px;
   display: flex;
   cursor: pointer;
 
@@ -31,12 +32,12 @@
     padding: 0 10px;
     display: flex;
     justify-content: space-around;
-    height: 26px;
     background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    border: 1px solid #DEDEDE;
-    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
     border-radius: 2px;
-    line-height: 26px;
+    height: 28px;
+    line-height: 28px;
     transition: width .3s;
 
     .cn-icon {
@@ -60,10 +61,19 @@
     padding: 14px 0 7px 8px;
   }
 
+  .calendar-popover-text.calendar-popover__small {
+    i {
+      font-weight: 300;
+      color: #575757;
+    }
+  }
   .calendar-popover-text {
     white-space: nowrap;
     display: inline-block;
     margin: 0 5px;
+    .cn-icon-Data {
+      color: #575757;
+    }
   }
 
   .calendar-popover-text:first-of-type {

src/assets/css/components/components/common/TimeRange/time-refresh.scss

@@ -4,8 +4,9 @@
 
   .cn-icon-refresh{
     font-size: 14px;
+    color:  #575757;
   }
-  .cn-icon-dropdown{
+  .cn-icon-dropdown {
     font-size: 14px;
     transition: all .3s;
     display: inline-block;
@@ -17,7 +18,8 @@
     position: absolute;
     z-index: 2;
     background: #FFFFFF;
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
+    border: 1px solid #DEDEDE;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
     border-radius: 2px;
     top: 30px;
     right: 0;
@@ -47,8 +49,22 @@
       color: #0091FF;
     }
   }
+  .el-button--mini.cn-button {
+    span {
+      font-size: 14px;
+      color: #2C72C6;
+      font-weight: 400;
+      .cn-button-label {
+        padding: 0 8px 0 3px;
+      }
+      i {
+        font-size: 14px;
+        color: #575757;
+      }
+    }
+  }
   .el-button--mini{
     padding: 4px 6px !important;
-    min-height: 26px !important;
+    min-height: 28px !important;
   }
 }

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
     <div @click="showDropdown" class="date-range-text">
-      <div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
+      <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(startTime) }}</div>
         <div class="calendar-popover-text"> -</div>
@@ -10,8 +10,8 @@
       <div class="calendar-popover-text" v-else>
         {{ showDetail }}
       </div>
-      <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"
+      <div class="calendar-popover-text calendar-popover__small"><i class="cn-icon cn-icon-dropdown"
-                                            :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
+                                            :class="dropdownFlag ? 'cn-icon-up' : ''"></i></div>
     </div>
     <transition name="el-zoom-in-top">
       <div v-if="dropdownFlag" class="date-range-panel">

src/components/common/TimeRange/TimeRefresh.vue

@@ -2,9 +2,9 @@
     <div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
         <span>
             <el-button-group size="mini">
-              <el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh"></i></el-button>
+              <el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
-              <el-button size="mini" @click="showRefreshList">
+              <el-button class="cn-button" size="mini" @click="showRefreshList">
-                  {{interLabel}}
+                  <span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
                   <i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
               </el-button>
             </el-button-group>
@@ -12,8 +12,8 @@
         <transition name="el-zoom-in-top">
             <div v-if="dropdownShow" class="refresh-list">
                 <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
-                    {{item.label}}
+                  {{item.label}}
-                    <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
+                  <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
                 </div>
             </div>
         </transition>