|
|
@@ -0,0 +1,96 @@
|
|
|
+<template>
|
|
|
+ <el-aside class="side_bar">
|
|
|
+ <div class="nav_menu">
|
|
|
+ <el-menu
|
|
|
+ :default-active="activeMenuName"
|
|
|
+
|
|
|
+ text-color="#666"
|
|
|
+ :router="true"
|
|
|
+ >
|
|
|
+ <el-menu-item
|
|
|
+ v-for="(item, index) in menuList"
|
|
|
+ :key="index"
|
|
|
+ :index="item.externalLink" class="menu_one_item"
|
|
|
+ >
|
|
|
+ <div class="menu_one_title">
|
|
|
+ <i class="iconfont" :class="item.icon"></i><span>{{ item.menuName }}</span>
|
|
|
+ </div>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "SideBarItem",
|
|
|
+ props: {
|
|
|
+ menuList: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeMenuName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route() {
|
|
|
+ this.activeMenu();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.activeMenu();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.activeMenu();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ activeMenu() {
|
|
|
+ const route = this.$route;
|
|
|
+ const { path } = route;
|
|
|
+
|
|
|
+ // if(path == '/userInfo'){
|
|
|
+ // this.activeMenuName = "/userInfo/personInfo";
|
|
|
+ // }else if(path.includes('examMarking')){
|
|
|
+ // console.log("打印当前路由地址path",path);
|
|
|
+ // console.log("打印menuList",this.menuList);
|
|
|
+ if(path=='/examMarking/help/detail')
|
|
|
+ {
|
|
|
+ // console.log("进来了",);
|
|
|
+ this.activeMenuName = '/examMarking/help';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ this.activeMenuName = path;
|
|
|
+ }
|
|
|
+ // console.log("打印当前选中菜单activeMenuName",this.activeMenuName);
|
|
|
+ // this.activeMenuName = path;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.side_bar {
|
|
|
+ width: 170px !important;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+@media screen and (max-width: 1400px) {
|
|
|
+ .side_bar {
|
|
|
+ width: 150px !important;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: fixed;
|
|
|
+ // background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|