138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
class="el-menu-vertical-demo"
|
|
background-color="#333"
|
|
text-color="#fff"
|
|
active-text-color="#ffd04b"
|
|
>
|
|
<el-menu-item index="1" @click="goTo('home')">
|
|
<i class="el-icon-house"></i>
|
|
<span>使用必看</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="2" @click="goTo('rating')">
|
|
<i class="el-icon-setting"></i>
|
|
<span>选修课评分</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="3" @click="goTo('ratingforcomp')">
|
|
<i class="el-icon-setting"></i>
|
|
<span>必修课评分</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4" @click="goTo('course-list')">
|
|
<i class="el-icon-setting"></i>
|
|
<span>我的课程</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="5" @click="goTo('my-qa')">
|
|
<i class="el-icon-message"></i>
|
|
<span>我的追问</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="6" @click="goTo('about')">
|
|
<i class="el-icon-info"></i>
|
|
<span>关于</span>
|
|
</el-menu-item>
|
|
<div class="sidebar-footer">
|
|
<span class="footer-title">NEU小站课程评分系统 - v1.1</span>
|
|
<div class="footer-info">
|
|
© 2025 <a href="https://www.xn--xhq44jb2fzpc.com/" target="_blank">NEU小站</a>
|
|
</div>
|
|
</div>
|
|
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SideBar",
|
|
computed: {
|
|
// 动态计算当前选中的菜单项
|
|
activeMenu() {
|
|
const routeName = this.$route.name;
|
|
if (routeName === 'home') return '1';
|
|
if (routeName === 'rating') return '2';
|
|
if (routeName === 'ratingforcomp') return '3';
|
|
if (routeName === 'course-list') return '4';
|
|
if (routeName === 'my-qa') return '5';
|
|
if (routeName === 'about') return '6';
|
|
return '1'; // 默认选中第一个选项卡
|
|
}
|
|
},
|
|
methods: {
|
|
goTo(routeName) {
|
|
this.$router.push({ name: routeName });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-menu-vertical-demo {
|
|
border-right: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 98%; /* 使侧边栏填满整个视口高度 */
|
|
/* position: fixed; */
|
|
width: 250px;
|
|
|
|
|
|
}
|
|
|
|
.el-menu-item {
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
.el-menu-item:hover {
|
|
background-color: #1d1e1f;
|
|
}
|
|
|
|
.el-menu-item span {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* 新增样式 */
|
|
.sidebar-footer {
|
|
margin-top: auto; /* 将底部内容推到底部 */
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 14px; /* 调整字体大小 */
|
|
color: #888; /* 调整字体颜色 */
|
|
}
|
|
|
|
.sidebar-footer a {
|
|
color: #e0e4e8;
|
|
text-decoration: none; /* 确保悬停时也没有下划线 */
|
|
bottom: 20px;
|
|
width: 100%; /* 确保footer占满宽度 */
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.sidebar-footer a:hover {
|
|
color: #9a9ea2;
|
|
text-decoration: none; /* 确保悬停时也没有下划线 */
|
|
}
|
|
|
|
.footer-title {
|
|
font-size: 12px; /* 设置更小的字体 */
|
|
color: #f6f0f0; /* 设置较浅的颜色 */
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-info {
|
|
margin-top: 7px; /* 增加与上一行的间距 */
|
|
font-size: 12px; /* 设置更小的字体 */
|
|
color: #beb5b5; /* 设置较浅的颜色 */
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-info a {
|
|
color: #beb5b5; /* 设置较浅的颜色 */
|
|
text-decoration: none; /* 确保悬停时也没有下划线 */
|
|
}
|
|
|
|
.footer-info a:hover {
|
|
color: #a8a4a6; /* 确保悬停时也没有下划线 */
|
|
}
|
|
|
|
|
|
</style> |