头像居中

mes/qd/src/layout/components/Navbar.vue

@@ -8,7 +8,7 @@
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-<!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
+        <!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
                   <Doc class="right-menu-item hover-effect" />
                 </el-tooltip>-->
 
@@ -16,15 +16,15 @@
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-<!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
+        <!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
                   <size-select id="size-select" class="right-menu-item hover-effect" />
                 </el-tooltip>-->
 
       </template>
-
+      <img :src="Avatar" class="user-avatar">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
         <div class="avatar-wrapper">
-            <img :src="Avatar" class="user-avatar" >
+          <!--          <img :src="Avatar" class="user-avatar" style="border: #f5141e 1px solid">-->
           <span class="user-nickname">{{ user.nickName }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -50,18 +50,18 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import TopNav from '@/components/TopNav'
+  import { mapGetters } from 'vuex'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import Hamburger from '@/components/Hamburger'
+  import TopNav from '@/components/TopNav'
 
-import Doc from '@/components/Doc'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import Avatar from '@/assets/images/avatar.png'
+  import Doc from '@/components/Doc'
+  import Screenfull from '@/components/Screenfull'
+  import SizeSelect from '@/components/SizeSelect'
+  import Search from '@/components/HeaderSearch'
+  import Avatar from '@/assets/images/avatar.png'
 
-export default {
+  export default {
     components: {
       Breadcrumb,
       Hamburger,
@@ -120,11 +120,11 @@ export default {
         })
       }
     }
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.navbar {
+  .navbar {
     height: 50px;
     overflow: hidden;
     position: relative;
@@ -184,25 +184,25 @@ export default {
           }
         }
       }
-
-    .avatar-container {
-      margin-right: 10px;
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
       .user-avatar {
         cursor: pointer;
         width: 40px;
         height: 40px;
         border-radius: 10px;
       }
+
+      .avatar-container {
+        //margin-right: 10px;
+        .avatar-wrapper {
+          //margin-top: 5px;
+          position: relative;
           .user-nickname {
             cursor: pointer;
             font-size: 18px;
+            margin-left: -10px;
+          }
         }
       }
     }
   }
-}
 </style>