123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <template>
- <div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb class="breadcrumb-container hidden-sm-and-down" />
- <div class="right-menu">
- <el-dropdown class="avatar-container" trigger="click">
- <div class="avatar-wrapper">
- <img src="../../assets/img/common/840702eef7eb4f6196853a99323c87cb.png" class="user-avatar">
- <i class="el-icon-caret-bottom" />
- </div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown">
- <router-link to="/">
- <el-dropdown-item>
- {{$t('route.dashboard')}}
- </el-dropdown-item>
- </router-link>
- <el-dropdown-item @click.native="modPassword" v-if="!isOnLineOperation">
- <span style="display:block;">{{$t('mod_password')}}</span>
- </el-dropdown-item>
- <el-dropdown-item divided @click.native="logout">
- <span style="display:block;">{{$t('logout')}}</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <modPassword v-if="modPasswordDialog.show" v-model="modPasswordDialog.show"></modPassword>
- </div>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import Breadcrumb from '@/components/Breadcrumb'
- import Hamburger from '@/components/Hamburger'
- import modPassword from '@/components/_dialog/modPassword';
- export default {
- components: {
- Breadcrumb,
- Hamburger,
- modPassword
- },
- computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar'
- ]),
- isOnLineOperation() {
- return this.$store.getters['user/isOnLineOperation']
- }
- },
- data() {
- return {
- modPasswordDialog: {
- show: false,
- }
- }
- },
- methods: {
- modPassword() {
- this.modPasswordDialog.show = true
- },
- toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
- },
- async logout() {
- await this.$store.dispatch('user/logout')
- this.$router.push(`/login`)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
- .hamburger-container {
- 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;
- }
- .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;
- transition: background .3s;
- &:hover {
- background: rgba(0, 0, 0, .025)
- }
- }
- }
- .avatar-container {
- margin-right: 30px;
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
- .el-icon-caret-bottom {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
- }
- }
- }
- </style>
|