157 lines
3.8 KiB
Vue
157 lines
3.8 KiB
Vue
<template>
|
||
<el-aside :width="isCollapse ? '64px' : '200px'" class="sider-container">
|
||
<div class="logo-container">
|
||
<img v-if="!isCollapse" src="@/assets/logo.png" alt="Logo" class="logo mr-3">
|
||
<i v-else class="el-icon-menu text-white" style="font-size: 24px;"></i>
|
||
<span style="color:#DEDEDE;font-weight:bold;font-size:1.5rem!important">考试系统</span>
|
||
</div>
|
||
<el-menu
|
||
:default-active="activeMenu"
|
||
class="el-menu-vertical-demo"
|
||
@open="handleOpen"
|
||
@close="handleClose"
|
||
background-color="#304156"
|
||
text-color="#bfcbd9"
|
||
active-text-color="#409EFF"
|
||
:collapse="isCollapse"
|
||
@select="handleMenuSelect"
|
||
>
|
||
<el-menu-item index="/admin/home">
|
||
<i class="el-icon-menu"></i>
|
||
<span slot="title">后台首页</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/question">
|
||
<i class="el-icon-document-checked"></i>
|
||
<span slot="title">试题管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/examinee">
|
||
<i class="el-icon-user-solid"></i>
|
||
<span slot="title">考生管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="/admin/exam">
|
||
<i class="el-icon-date"></i>
|
||
<span slot="title">考试管理</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="logout">
|
||
<i class="el-icon-switch-button"></i>
|
||
<span slot="title">退出登录</span>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
<!-- 删除折叠按钮 -->
|
||
</el-aside>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'AdminSider',
|
||
components: {
|
||
ElAside: require('element-ui').Aside,
|
||
ElMenu: require('element-ui').Menu,
|
||
ElMenuItem: require('element-ui').MenuItem
|
||
},
|
||
data() {
|
||
return {
|
||
isCollapse: false,
|
||
activeMenu: '/admin/home'
|
||
}
|
||
},
|
||
mounted() {
|
||
// 监听路由变化，更新当前激活的菜单
|
||
this.$router.afterEach((to) => {
|
||
this.activeMenu = to.path
|
||
})
|
||
},
|
||
methods: {
|
||
handleOpen(key, keyPath) {
|
||
console.log(key, keyPath)
|
||
},
|
||
handleClose(key, keyPath) {
|
||
console.log(key, keyPath)
|
||
},
|
||
// 处理菜单选择事件
|
||
handleMenuSelect(index) {
|
||
if (index === 'logout') {
|
||
this.handleLogout()
|
||
} else {
|
||
// 其他菜单项根据index进行路由跳转
|
||
this.$router.push(index)
|
||
}
|
||
},
|
||
// 退出登录逻辑
|
||
handleLogout() {
|
||
this.$confirm('确定要退出登录吗？', '确认退出', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// 清除登录状态等操作
|
||
// 例如：localStorage.removeItem('token')
|
||
// 跳转到登录页
|
||
this.$router.push('/')
|
||
}).catch(() => {
|
||
// 用户取消退出
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消退出'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
'$route'(to) {
|
||
this.activeMenu = to.path
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.sider-container {
|
||
height: 100vh;
|
||
background-color: #304156;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.logo-container {
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #2d3a4b;
|
||
border-bottom: 1px solid #3d526f;
|
||
}
|
||
|
||
.logo {
|
||
width: 28px;
|
||
height: auto;
|
||
}
|
||
|
||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 确保菜单中的图标和文字正确显示 */
|
||
.el-menu-item i {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.sider-container::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.sider-container::-webkit-scrollbar-track {
|
||
background: #2d3a4b;
|
||
}
|
||
|
||
.sider-container::-webkit-scrollbar-thumb {
|
||
background: #4b6a97;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.sider-container::-webkit-scrollbar-thumb:hover {
|
||
background: #587ba0;
|
||
}
|
||
</style> |