You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.8 KiB
100 lines
2.8 KiB
<template>
|
|
<!-- 顶部导航栏 -->
|
|
<el-header>
|
|
<!-- 水平导航菜单 -->
|
|
<el-menu
|
|
background-color="#00c292" <!-- 设置背景颜色为绿色 -->
|
|
text-color="#FFFFFF" <!-- 设置文字颜色为白色 -->
|
|
active-text-color="#FFFFFF" <!-- 设置激活项的文字颜色为白色 -->
|
|
mode="horizontal" <!-- 设置菜单模式为水平 -->
|
|
>
|
|
<!-- 左侧项目名称 -->
|
|
<div class="fl title">{{this.$project.projectName}}</div> <!-- 显示项目名称 -->
|
|
|
|
<!-- 右侧退出登录区域 -->
|
|
<div class="fr logout" style="display:flex;">
|
|
<!-- 用户信息显示 -->
|
|
<el-menu-item index="3">
|
|
<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div> <!-- 显示用户角色和用户名 -->
|
|
</el-menu-item>
|
|
<!-- 退出登录按钮 -->
|
|
<el-menu-item @click="onLogout" index="2">
|
|
<div>退出登录</div> <!-- 点击时触发退出登录方法 -->
|
|
</el-menu-item>
|
|
</div>
|
|
</el-menu>
|
|
</el-header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false, // 对话框是否可见
|
|
ruleForm: {}, // 表单数据
|
|
user: {} // 当前用户信息
|
|
};
|
|
},
|
|
mounted() {
|
|
// 页面加载完成后获取当前用户的会话信息
|
|
this.$http({
|
|
url: `${this.$storage.get("sessionTable")}/session`, // 获取会话表名并拼接URL
|
|
method: "get" // 使用GET方法请求数据
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) { // 如果返回数据成功
|
|
this.user = data.data; // 将用户数据赋值给user变量
|
|
} else {
|
|
this.$message.error(data.msg); // 否则显示错误信息
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
onLogout() {
|
|
// 退出登录方法
|
|
this.$storage.remove("Token"); // 移除存储中的Token
|
|
this.$router.replace({ name: "login" }); // 路由跳转到登录页面
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 样式部分 */
|
|
.el-header .fr {
|
|
float: right; /* 设置右浮动 */
|
|
}
|
|
|
|
.el-header .fl {
|
|
float: left; /* 设置左浮动 */
|
|
}
|
|
|
|
.el-header {
|
|
width: 100%; /* 宽度占满父容器 */
|
|
color: #333; /* 文字颜色 */
|
|
text-align: center; /* 文本居中对齐 */
|
|
line-height: 60px; /* 行高 */
|
|
padding: 0; /* 去掉内边距 */
|
|
z-index: 99; /* 设置层级 */
|
|
}
|
|
|
|
.logo {
|
|
width: 60px; /* 设置宽度 */
|
|
height: 60px; /* 设置高度 */
|
|
margin-left: 70px; /* 左侧外边距 */
|
|
}
|
|
|
|
.avator {
|
|
width: 40px; /* 设置宽度 */
|
|
height: 40px; /* 设置高度 */
|
|
background: #ffffff; /* 背景颜色为白色 */
|
|
border-radius: 50%; /* 圆角设置为圆形 */
|
|
}
|
|
|
|
.title {
|
|
color: #ffffff; /* 文字颜色为白色 */
|
|
font-size: 20px; /* 字体大小 */
|
|
font-weight: bold; /* 字体加粗 */
|
|
margin-left: 20px; /* 左侧外边距 */
|
|
}
|
|
</style>
|