perf: 修改头部布局，修复标题居中问题

src/views/main/components/Header/index.vue

@@ -1,13 +1,15 @@
 <template >
   <div class="main-header">
-    <div class="nav-list">
-      <NavPanel :items="navLeftItems" default-active="dataV" @active="onActiveHandler" />
-    </div>
     <div class="title">
       重庆市消防远程监控
     </div>
-    <div class="nav-list">
-      <NavPanel :items="navRightItems" default-active="dataV" dir="right" @active="onActiveHandler" />
+    <div class="nav-content">
+      <div class="nav-list">
+        <NavPanel :items="navLeftItems" default-active="dataV" @active="onActiveHandler" />
+      </div>
+      <div class="nav-list">
+        <NavPanel :items="navRightItems" default-active="dataV" dir="right" @active="onActiveHandler" />
+      </div>
     </div>
   </div>
 </template>
@@ -72,8 +74,9 @@ export default {
   background: url('@/assets/images/main-header.png') no-repeat;
   background-size: 100% 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  position: relative;
   .title {  
     display: flex;
     justify-content: center;
@@ -84,5 +87,15 @@ export default {
     -webkit-background-clip:text; 
     -webkit-text-fill-color:transparent;
   }
+  .nav-content {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>