102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<el-dropdown class="avatar-container" trigger="click">
|
||
|
|
<div class="avatar-wrapper">
|
||
|
|
<el-avatar
|
||
|
|
shape="circle"
|
||
|
|
:size="28"
|
||
|
|
:src="require('@/assets/images/ly-person-icon.png')"
|
||
|
|
></el-avatar>
|
||
|
|
</div>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu class="user-dropdown">
|
||
|
|
<el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
<UpdatePwdDialog v-model="UpdatePwdVisible"></UpdatePwdDialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useRouter, useRoute,onBeforeRouteLeave } from "vue-router";
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import UpdatePwdDialog from "./UpdatePwdDialog.vue";
|
||
|
|
const UpdatePwdVisible = ref(false);
|
||
|
|
const updatePwd = () => {
|
||
|
|
UpdatePwdVisible.value = true;
|
||
|
|
};
|
||
|
|
const store = useStore();
|
||
|
|
|
||
|
|
const logout = () => {
|
||
|
|
store.dispatch("user/logout");
|
||
|
|
store.commit("app/clearTag", null, {
|
||
|
|
immediate: true
|
||
|
|
});
|
||
|
|
store.commit("permission/deleteRouter", {
|
||
|
|
immediate: true
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.navbar {
|
||
|
|
height: 50px;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||
|
|
|
||
|
|
.hamburger-container {
|
||
|
|
line-height: 46px;
|
||
|
|
height: 100%;
|
||
|
|
float: left;
|
||
|
|
cursor: pointer;
|
||
|
|
// hover 动画
|
||
|
|
transition: background 0.5s;
|
||
|
|
&:hover {
|
||
|
|
background: rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumb-container {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-menu {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
float: right;
|
||
|
|
padding-right: 16px;
|
||
|
|
|
||
|
|
::v-deep .right-menu-item {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0 18px 0 0;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #5a5e66;
|
||
|
|
vertical-align: text-bottom;
|
||
|
|
|
||
|
|
&.hover-effect {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.3s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(0, 0, 0, 0.025);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .avatar-container {
|
||
|
|
cursor: pointer;
|
||
|
|
.avatar-wrapper {
|
||
|
|
margin-top: 5px;
|
||
|
|
position: relative;
|
||
|
|
.el-avatar {
|
||
|
|
--el-avatar-background-color: none;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|