<template>
|
<header class="app-header">
|
<div class="brand">
|
<repair-logo></repair-logo>
|
<span>临抢修管理系统</span>
|
<em>网络版</em>
|
<span v-if="menuPathText" class="menu-path" :title="menuPathText">{{ menuPathText }}</span>
|
</div>
|
<div class="header-right">
|
<span><i class="el-icon-user-solid"></i> {{ realName }}</span>
|
<el-button type="text" icon="el-icon-switch-button" @click="logout">退出登录</el-button>
|
</div>
|
</header>
|
</template>
|
|
<script>
|
import RepairLogo from '@/components/RepairLogo.vue'
|
|
export default {
|
name: 'AppHeader',
|
components: { RepairLogo },
|
props: {
|
menuPath: { type: Array, default: () => [] }
|
},
|
computed: {
|
menuPathText() {
|
return this.menuPath.join(' / ')
|
},
|
realName() {
|
return sessionStorage.getItem('realName') || '系统管理员'
|
}
|
},
|
methods: {
|
logout() {
|
this.$confirm('确定退出登录吗？', '提示', { type: 'warning' }).then(() => {
|
sessionStorage.clear()
|
this.$router.push('/login')
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-header {
|
gap: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 58px;
|
padding: 0 20px;
|
color: #fff;
|
background: #1d3b57;
|
box-shadow: 0 1px 4px rgba(18, 41, 63, 0.24);
|
flex-shrink: 0;
|
}
|
.brand { display: flex; flex: 1; align-items: center; min-width: 0; gap: 9px; font-size: 18px; font-weight: 600; }
|
.brand .repair-logo { color: #7fc4ff; font-size: 25px; transform: translateY(2px); }
|
.brand em { padding: 1px 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; font-size: 11px; font-style: normal; font-weight: 400; opacity: .85; }
|
.brand > .repair-logo, .brand > span:not(.menu-path), .brand > em { flex: 0 0 auto; }
|
.menu-path { flex: 0 1 auto; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28); overflow: hidden; color: #d8e9f7; font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
|
.header-right { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; font-size: 14px; }
|
.header-right .el-button { color: #d8e9f7; }
|
.header-right .el-button:hover { color: #fff; }
|
</style>
|
