头像居中

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

@@ -8,24 +8,24 @@
       <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" />
+                  <Doc class="right-menu-item hover-effect" />
-        </el-tooltip>-->
+                </el-tooltip>-->
 
         <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
           <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" />
+                  <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
+                </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>
+          <span class="user-nickname">{{ user.nickName }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
           <span style="display:block;" @click="show = true">
@@ -50,159 +50,159 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
+  import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+  import Hamburger from '@/components/Hamburger'
-import TopNav from '@/components/TopNav'
+  import TopNav from '@/components/TopNav'
 
-import Doc from '@/components/Doc'
+  import Doc from '@/components/Doc'
-import Screenfull from '@/components/Screenfull'
+  import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
+  import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+  import Search from '@/components/HeaderSearch'
-import Avatar from '@/assets/images/avatar.png'
+  import Avatar from '@/assets/images/avatar.png'
 
-export default {
+  export default {
-  components: {
+    components: {
-    Breadcrumb,
+      Breadcrumb,
-    Hamburger,
+      Hamburger,
-    Screenfull,
+      Screenfull,
-    SizeSelect,
+      SizeSelect,
-    Search,
+      Search,
-    Doc,
+      Doc,
-    TopNav
+      TopNav
-  },
+    },
-  data() {
+    data() {
-    return {
+      return {
-      Avatar: Avatar,
+        Avatar: Avatar,
-      dialogVisible: false
+        dialogVisible: false
-    }
+      }
-  },
+    },
-  computed: {
+    computed: {
-    ...mapGetters([
+      ...mapGetters([
-      'sidebar',
+        'sidebar',
-      'device',
+        'device',
-      'user',
+        'user',
-      'baseApi'
+        'baseApi'
-    ]),
+      ]),
-    show: {
+      show: {
-      get() {
+        get() {
-        return this.$store.state.settings.showSettings
+          return this.$store.state.settings.showSettings
+        },
+        set(val) {
+          this.$store.dispatch('settings/changeSetting', {
+            key: 'showSettings',
+            value: val
+          })
+        }
       },
-      set(val) {
+      topNav: {
-        this.$store.dispatch('settings/changeSetting', {
+        get() {
-          key: 'showSettings',
+          return this.$store.state.settings.topNav
-          value: val
+        }
+      }
+    },
+    methods: {
+      toggleSideBar() {
+        this.$store.dispatch('app/toggleSideBar')
+      },
+      open() {
+        this.$confirm('确定注销并退出系统吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.logout()
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload()
         })
       }
-    },
-    topNav: {
-      get() {
-        return this.$store.state.settings.topNav
-      }
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    open() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.logout()
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload()
-      })
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.navbar {
+  .navbar {
-  height: 50px;
+    height: 50px;
-  overflow: hidden;
+    overflow: hidden;
-  position: relative;
+    position: relative;
-  background: #fff;
+    background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
-  .hamburger-container {
+    .hamburger-container {
-    line-height: 46px;
+      line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, .025)
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .topmenu-container {
-    position: absolute;
-    left: 50px;
-  }
-
-  .errLog-container {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
       height: 100%;
-      font-size: 18px;
+      float: left;
-      color: #5a5e66;
+      cursor: pointer;
-      vertical-align: text-bottom;
+      transition: background .3s;
+      -webkit-tap-highlight-color:transparent;
 
-      &.hover-effect {
+      &:hover {
-        cursor: pointer;
+        background: rgba(0, 0, 0, .025)
-        transition: background .3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, .025)
-        }
       }
     }
 
-    .avatar-container {
+    .breadcrumb-container {
-      margin-right: 10px;
+      float: left;
-      .avatar-wrapper {
+    }
-        margin-top: 5px;
-        position: relative;
 
-        .user-avatar {
+    .topmenu-container {
+      position: absolute;
+      left: 50px;
+    }
+
+    .errLog-container {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .right-menu {
+      float: right;
+      height: 100%;
+      line-height: 50px;
+
+      &:focus {
+        outline: none;
+      }
+
+      .right-menu-item {
+        display: inline-block;
+        padding: 0 8px;
+        height: 100%;
+        font-size: 18px;
+        color: #5a5e66;
+        vertical-align: text-bottom;
+
+        &.hover-effect {
           cursor: pointer;
-          width: 40px;
+          transition: background .3s;
-          height: 40px;
+
-          border-radius: 10px;
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
         }
-        .user-nickname {
+      }
-          cursor: pointer;
+      .user-avatar {
-          font-size: 18px;
+        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>