root/wuHanXinRui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

头像居中

Browse Source
This commit is contained in:
lyd
2022-11-03 13:30:54 +08:00
parent 32de1474a6
commit 59cf0e67f6
1 changed files with 141 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
mes/qd/src/layout/components/Navbar.vue
View File

@@ -8,7 +8,7 @@
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" /> <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>-->
@@ -16,15 +16,15 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip> </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> </template>
<img :src="Avatar" class="user-avatar">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper"> <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> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@@ -50,18 +50,18 @@
</template> </template>
<script> <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,
@@ -120,11 +120,11 @@ export default {
}) })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -184,25 +184,25 @@ export default {
} }
} }
} }
.avatar-container {
margin-right: 10px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
} }
.avatar-container {
//margin-right: 10px;
.avatar-wrapper {
//margin-top: 5px;
position: relative;
.user-nickname { .user-nickname {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
margin-left: -10px;
}
} }
} }
} }
} }
}
</style> </style>