html
<div class="landingPerson">
<span class="head-span">您好,{{ form.username }}</span>
<div class="head-img">
<img :src="form.avatar" alt="" @mouseover="showInfo" @mouseleave="hideInfo" />
<!-- 退出 -->
<div v-show="userInfo" class="box2">
<p @click="personMessage">个人信息</p>
<p @click="quit">退出</p>
</div>
</div>
</div>
js
<script setup >
import { onMounted, reactive, ref } from 'vue'
import NavCom from '@/components/Home/NavCom.vue' //导航
import { ElMessageBox } from 'element-plus'
import { EnterpriseExitApi } from '@/api/index'
import { useRouter } from "vue-router";
let route = useRouter();
// import BannerCom from "@/components/Home/BannerCom.vue"; //轮播图
// import WorkCom from "@/components/Home/WorkCom.vue"; //工作台
// import DoubleCom from "@/components/Home/DoubleCom.vue"; //双选会
// 退出
const userInfo = ref(false)
const showInfo = () => {
console.log('111', 111)
userInfo.value = true
}
const hideInfo = () => {
setTimeout(() => {
userInfo.value = false
}, 3000)
}
const quit = () => {
EnterpriseExitApi().then((res) => {
console.log('res', res)
})
//跳转到登录
route.push('/login')
ElMessageBox({
title: '提示',
message: '退出成功!'
})
}
// 获取当前登录人信息
const form = reactive({
username: 'XXX',
avatar: '/imgs/header-default.png',
orgName: 'XXXX',
orglogo: '/imgs/default_org_logo.png'
})
onMounted(() => {
getUserInfo()
})
const getUserInfo = function () {
var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
// debugger
form.username = userInfo.realName ?? 'XXX'
form.avatar = !userInfo.avatar ? form.avatar : userInfo.avatar
form.orgName = userInfo.orgName ?? 'XXXX'
form.orgLogo = !userInfo.orgLogo ? form.orglogo : userInfo.orglogo
}
</script>
css
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
/* background-color: antiquewhite; */
}
header {
width: 100%;
height: 40px;
background-color: #409eff;
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.center {
width: 1200px;
height: 40px;
line-height: 40px;
margin: 0 auto;
display: flex;
justify-content: space-between;
/* background-color: palegreen; */
}
.hear-left {
width: 50%;
/* padding-left: 50px; */
}
.hear-left > img {
height: 15px;
}
.head-span {
display: block;
line-height: 40px;
margin: 0 20px;
color: white;
font-size: 14px;
}
/* 头像 */
.head-img {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.landingPerson {
display: flex;
}
.box2 {
position: absolute;
bottom: -100px;
left: -60%;
border: 1px solid #ccc;
width: 100px;
height: 100px;
background-color: #fff;
box-sizing: border-box;
// background-color: palegreen;
z-index: 999;
p {
margin-top: 3px;
text-align: center;
font-size: 8px;
&:hover {
cursor: pointer;
}
}
}
main {
width: 1200px;
min-height: 500px;
/* background-color: aquamarine; */
margin: 0 auto;
}
.el-input {
width: 200px;
}
</style>