wt_project_web_bak/src/layout/top.vue

<template>
  <el-row class='flex flex-align-center flex-justify-between top '>
    <el-col :span='12'>
      <div class='flex flex-justify-start flex-align-center padding'>
        <img class="ml-10" src="../assets/svg/top.svg"/>
        <el-breadcrumb class='ml-10' separator="/">
          <el-breadcrumb-item v-for='item in nav.menus' :key='item.id'>
            <a :href="item.path">{{ item.name }}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <el-col :span='12'>
      <div class='flex-child-average flex-justify-end flex padding-right '>
        <div class='padding flex flex-align-center'>
          <el-avatar :size="30"
                     :src="user.info && user.info.avatarUrl ?  user.info.avatarUrl : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                     class='mr-10'/>
          <el-dropdown @command='dropDown'>
                <span class="flex flex-center">
                  {{ user.info.nikeName }} / ({{ user.info.typeName }})
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                  </el-icon>
                </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command='info'>个人中心</el-dropdown-item>
                <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import navStore from '../store/nav.js'
import {useStore} from '../store/user.js'

export default {
  name: 'top',
  setup() {
    const nav = navStore()
    const user = useStore()
    return {nav, user}
  },
  created() {

  },
  methods: {
    dropDown(res) {
      if (res === 'info') {
        this.$message.success('个人中心')
      } else if (res === 'logout') {
        this.$api.login.logout().then(res => {
          if (res.success === 'true') {
            this.nav.cleanMenu()
            this.$message.success('退出登录')
            this.$router.replace('/login')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.top {
  height: 60px;
  z-index: 1;
  background-color: white;
  top: 0;
  left: 240px;
  right: 0;
  position: fixed;
  border-bottom: whitesmoke solid 1px;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
}

.avatar {
  background-color: #c4c3c3;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
</style>