update homepage

src/layout/components/Navbar.vue

@@ -1,27 +1,24 @@
 <template>
-  <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
-    <hamburger
-      v-if="showhome"
-      id="hamburger-container"
-      :is-active="sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
-
-    <div
-      v-if="showTitle"
-      style="cursor: pointer; color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px"
-      @click="goToRootPage"
-    >
+  <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
+    <div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
       <img
         src="../../assets/img/cnbm.png"
         style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px"
         alt=""
-      >
+      />
       {{ 'title' | i18nFilter }}
     </div>
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <div v-if="showhome" style="display:flex; align-items: center;">
+      <hamburger
+        id="hamburger-container"
+        :is-active="sidebar.opened"
+        class="hamburger-container"
+        @toggleClick="toggleSideBar"
+      />
+
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    </div>
 
     <div class="right-menu">
       <div v-if="showhome" class="right-menu-back" @click="toHome">
@@ -96,7 +93,7 @@
         trigger="click"
       >
         <div class="avatar-wrapper">
-          <img :src="require('@/assets/img/head.png')" class="user-avatar">
+          <img :src="require('@/assets/img/head.png')" class="user-avatar" />
           <div class="avatar-username" :title="username">{{ username }}</div>
           <div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
           <!-- <i class="el-icon-caret-bottom" /> -->
@@ -143,7 +140,7 @@
         <el-tooltip class="item" effect="dark" placement="bottom-end">
           <div slot="content">
             {{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }}
-            <br>
+            <br />
             {{ 'copyright.version' | i18nFilter }}：3.0
           </div>
           <svg-icon
@@ -328,15 +325,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.time-menu {
-  display: inline-block;
-}
 .navbar {
-  height: 48px;
+  // height: 48px;
+  height: calc(100vh / 1600 * 80);
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  padding-right: calc(100vw / 2560 * 32);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .homeNavIcon {
+    cursor: pointer;
+    color: #fff;
+    font-size: calc(100vh / 1600 * 32);
+    line-height: 1;
+    float: left;
+    letter-spacing: 1px;
+    font-weight: 500;
+    padding-left: calc(100vw / 2560 * 32);
+
+    * {
+      vertical-align: middle;
+    }
+  }
 
   .hamburger-container {
     line-height: 48px;