头部导航组件显示优化

 <!--
 <!--
  * @Date: 2024-09-26 13:42:11
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-27 13:35:32
+ * @LastEditTime: 2024-09-29 14:19:50
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div class="hager-header">
   <div class="hager-header">
-    <el-row class="hidden-xs-only">
+    <el-row class="hidden-xs-only" style="background-color: #fff;">
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-      <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;">
-        <el-row>
+      <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
+        <el-row style="">
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
-            <div style="display: flex; background-color: gray;">
+            <div style="display: flex;height: 5rem; align-items: center; justify-content: space-around;">
               <div>图标</div>
               <div>图标</div>
               <div @click="onClickProduct">产品中心</div>
               <div @click="onClickProduct">产品中心</div>
               <div>解决方案</div>
               <div>解决方案</div>
@@ -24,10 +24,13 @@
             </div>
             </div>
           </el-col>
           </el-col>
           <el-col :sm="8" :md="8" :lg="8" :xl="8">
           <el-col :sm="8" :md="8" :lg="8" :xl="8">
-            <div style="display: flex; background-color: blue;">
-              <div>搜索</div>
-              <div>地球仪</div>
-              <div>用户</div>
+            <div style="display: flex; height: 5rem; align-items: center;justify-content: right;">
+              <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid# f5f5f5;  background-color: #e3f1f7; padding: 0.5rem 1rem;">
+                <i class=el-icon-zoom-out></i>&nbsp;
+                <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
+              </div>
+              <div style="margin: 0 1rem;"><i class=el-icon-eleme></i></div>
+              <div><i class=el-icon-eleme></i></div>
             </div>
             </div>
           </el-col>
           </el-col>
         </el-row>
         </el-row>
@@ -224,7 +227,7 @@ export default {
     z-index: 9;
     z-index: 9;
     .product-center {
     .product-center {
       position: absolute;
       position: absolute;
-      top: 2rem;
+      top: 5rem;
       left: 0;
       left: 0;
       width: 100%;
       width: 100%;
       height: auto;
       height: auto;