header.vue

<template>
  <div class="navbar">
    <div class="title-box">
      <hamburger
        :is-active="sidebar.opened"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
      />
<!--      <el-dropdown-->
<!--        class="change-sys"-->
<!--        @command="handleCommand"-->
<!--      >-->
<!--&lt;!&ndash;        <span class="el-dropdown-link">&ndash;&gt;-->
<!--&lt;!&ndash;          业务中台<i class="el-icon-arrow-down el-icon&#45;&#45;right" />&ndash;&gt;-->
<!--&lt;!&ndash;        </span>&ndash;&gt;-->
<!--        <el-dropdown-menu-->
<!--          slot="dropdown"-->
<!--        >-->
<!--          <el-dropdown-item-->
<!--            v-for="(item) in appList"-->
<!--            :key="item.businessId"-->
<!--            :command="specialTag !== '1' ? item.pcUrl : ''"-->
<!--          >-->
<!--            {{ item.system }}-->
<!--          </el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
    </div>
    <div class="right-menu">
      <!--      <i class="el-icon-info" />-->
      <!--      <i class="el-icon-user-solid" />-->
      <!--      <i class="el-icon-question" />-->
      <!--      <el-badge :value="200" :max="99" class="item">-->
      <!--        <i class="el-icon-date" />-->
      <!--      </el-badge>-->
      <!--      <el-badge :value="200" :max="99" class="item">-->
      <!--        <i class="el-icon-message-solid" />-->
      <!--      </el-badge>-->

      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <span class="username-text">
            [您好，{{ userName }}]
           </span>
<!--          <img :src="avatar" class="user-avatar">-->
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item>
            <router-link to="/reSetPsw">
              修改密码
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryInAdhibitions } from '@/api/internal.js'
import Hamburger from '@/components/Hamburger'
export default {
  data() {
    return {
      appList: [],
      userName: this.$store.state.user.name,
      specialTag: this.$store.state.user.specialTag
    }
  },
  components: {
    Hamburger
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  mounted() {
    // this.getInAdhibitions()
  },
  methods: {
    handleCommand(param) {
      if (param) {
        window.location.href = param
      }
    },
    // getInAdhibitions() {
    //   queryInAdhibitions({ businessId: 'zt' }).then(res => {
    //     this.appList.splice(0, 0, ...res.data)
    //   })
    // },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.clear()
        this.$store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      })
      // await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 6.4vh;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  display: flex;
  justify-content: space-between;
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
  .title-box{
    display: flex;
    align-items: center;
    .change-sys{
      margin-left: 20px;
    }
  }

  .app-logo{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 6px;
  }

  .hamburger-container {
    line-height: 6.3vh;
    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;
    display: flex;
    align-items: center;
    &:focus {
      outline: none;
    }
    & > i {
      margin-right: 50px;
      font-size: 18px;
    }
    .username-text {
      margin-right: 12px;
    }
    .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 :hover{
        cursor: pointer;
      }

      .avatar-wrapper {
        position: relative;
        height: 40px;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.navbar {
  .right-menu {
    .el-badge {
      margin-right: 50px;
      font-size: 22px;
      .el-badge__content.is-fixed {
        top: 12px !important;
      }
    }
  }
}
</style>