修复el-header内组件对不齐的问题

src/App.vue

@@ -1,15 +1,15 @@
 <template>
   <router-view v-slot="{ Component }">
     <keep-alive>
-      <component :is="Component"/>
+      <component :is="Component" />
     </keep-alive>
   </router-view>
 </template>
 
 <script>
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
-import {useStore} from 'vuex'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'App',
@@ -36,7 +36,7 @@ export default defineComponent({
 function getWindowSize() {
   const w = window.innerWidth
   const h = window.innerHeight - 96
-  return {w, h}
+  return { w, h }
 }
 </script>
 
@@ -69,6 +69,16 @@ function getWindowSize() {
 
 .el-header {
   padding: 0 14px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.el-header > * {
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  flex-grow: 0;
 }
 
 .el-main {
@@ -201,9 +211,9 @@ table th.star div::before {
   background-color: #71abed66;
 }
 
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
   background-color: #fac44d;
   color: white;
 }
-
 </style>

src/layout/Header/index.vue

@@ -117,7 +117,7 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 60px;
+  height: 60px !important;
   background-color: var(--system-header-background);
   padding-right: 22px;
 }

src/layout/index.vue

@@ -6,7 +6,7 @@
       <Menu />
     </el-aside>
     <el-container>
-      <el-header v-show="!contentFullScreen">
+      <el-header v-show="!contentFullScreen" style="height: 60px; display: block">
         <Header />
       </el-header>
       <Tabs v-show="showTabs" />

src/views/examination/UploadToHealthCard.vue

@@ -8,9 +8,10 @@
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         :shortcuts="healthCardShortcuts"
-        style="width: 400px"
+        style="width: 200px"
       ></el-date-picker>
-      <el-button style="margin-left: 3px" type="primary" icon="Tickets" @click="scanBarCode">扫描健康证条码</el-button>
+      <el-divider direction="vertical"></el-divider>
+      <el-button type="primary" icon="Camera" @click="scanBarCode">扫描健康证条码</el-button>
       <el-button type="primary" icon="Edit" @click="fixTjNo">修正体检号</el-button>
       <el-button type="primary" icon="Upload" @click="uploadSelected(null)">推送选中检查</el-button>
       <el-divider direction="vertical"></el-divider>

src/views/medical-insurance/inpatient/AdmissVerification.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-header style="height: 38px; margin-top: 5px">
+    <el-header>
       <el-select v-model="medType" placeholder="医疗类别" style="width: 145px" clearable>
         <el-option v-for="item in needVerifyMedTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
       </el-select>

src/views/medical-insurance/inpatient/Home.vue

@@ -5,7 +5,7 @@
     </el-aside>
     <el-main>
       <el-container>
-        <el-header height="36px" style="margin-top: 6px">
+        <el-header>
           <el-select v-model="search.current" style="width: 70px" @change="handleSelectSearchMehtod">
             <el-option v-for="item in search.methods" :key="item.code" :value="item.code" :label="item.name"></el-option>
           </el-select>

src/views/medical-insurance/outpatient/MzSpltryRcrd.vue

@@ -1,18 +1,18 @@
 <template>
   <el-container>
-    <el-header style="height: 35px; margin-top: 10px">
+    <el-header>
       <el-input v-model="patNo" style="width: 120px; margin-left: 2px" clearable placeholder="门诊id"> </el-input>
       <el-select v-model="medType" style="width: 120px" placeholder="医疗类别">
         <el-option v-for="item in medTypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
       </el-select>
       <el-date-picker
+        style="width: 200px"
         v-model="dateRange"
         type="daterange"
         :shortcuts="shortcuts"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
-        style="width: 240px"
       ></el-date-picker>
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" @click="fetchHistoryReceipts">历史处方</el-button>

src/views/medical-insurance/outpatient/SpcChrRcd.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="height: 100%; overflow-y: scroll">
     <el-container>
-      <el-header style="height: 35px; margin-top: 10px">
+      <el-header>
         <el-input style="width: 320px" size="small" v-model="patNo" clearable>
           <template #prepend>门诊ID/身份证</template>
         </el-input>