<template>
|
<page>
|
<div class="contentBox">
|
<div class="breadcrumbBox">
|
<span>位置：</span>
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>个人中心</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ label }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<el-divider />
|
<div class="personalPage clear">
|
<div class="leftList fl">
|
<ul class="menu">
|
<li
|
v-for="item in listMenu"
|
:key="item.key"
|
@click="goRouter(item)"
|
:class="`/${item.path}` === path ? 'activeItem hover' : 'menuItem hover'"
|
>
|
<span
|
:style="{
|
fill: `/${item.path}` === path ? '#fff' : '#000',
|
}"
|
v-html="item.icon"
|
>
|
</span>
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="rightContent">
|
<div>
|
<!-- 让主体做子路由的显示 -->
|
<router-view />
|
</div>
|
</div>
|
</div>
|
</div>
|
</page>
|
</template>
|
|
<script setup lang="ts">
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import { menu } from './config.ts'
|
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
|
import { ref, onMounted } from 'vue'
|
const router = useRouter()
|
const routerVal = router.currentRoute.value
|
const path = ref(routerVal.path)
|
const label = ref('')
|
const listMenu: any = ref([])
|
onBeforeRouteUpdate(async (to, from) => {
|
path.value = to.fullPath
|
})
|
onMounted(() => {
|
menu.forEach((item) => {
|
if ('/' + item.path === path.value) {
|
label.value = item.label
|
}
|
})
|
// const userCache: any = localStorage.getItem('jesk-userInfo')
|
// const userInfo = JSON.parse(userCache)
|
// if(!userInfo){
|
// router.push({
|
// path:'/'
|
// })
|
// return false;
|
// }
|
// if (userInfo.role == 'Teacher') {
|
// const data: any = menu.filter((item) => item.path != 'class')
|
// listMenu.value = data
|
// } else {
|
const data: any = menu.filter((item) => item.path != 'course')
|
listMenu.value = data
|
// }
|
})
|
const goRouter = (item: any) => {
|
// if (!localStorage.getItem('jsek-token') || localStorage.getItem('jsek-token') == null) {
|
// router.push({
|
// path: '/home',
|
// query: {
|
// showLogin: '1'
|
// }
|
// })
|
// } else {
|
label.value = item.label
|
router.push({ path: item.path })
|
// }
|
}
|
</script>
|
<style lang="less" scoped>
|
.breadcrumbBox {
|
display: flex;
|
padding: 20px;
|
}
|
|
.personalPage {
|
padding: 20px 10px;
|
display: flex;
|
|
.leftList {
|
width: 275px;
|
border-radius: 10px 10px 10px 10px;
|
background: #e1ebe3;
|
height: max-content;
|
.menu {
|
li {
|
height: 50px;
|
padding: 10px 40px;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #ffffff;
|
|
img {
|
width: 19px;
|
height: 24px;
|
}
|
|
span {
|
margin-left: 10px;
|
}
|
}
|
|
.activeItem {
|
background: linear-gradient(90deg, #019e58 0%, #144941 100%);
|
background-size: 100% 100%;
|
color: #fff;
|
svg {
|
fill: #fff;
|
}
|
}
|
}
|
}
|
|
.rightContent {
|
flex: 1;
|
overflow: auto;
|
margin-left: 15px;
|
background-color: #fff;
|
}
|
}
|
</style>
|
