<template>
|
<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 style="margin: 5px 0;" />
|
<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>
|
</template>
|
|
<script setup lang="ts">
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import { menu } from './config'
|
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
|
import { ref, onMounted, inject } from 'vue'
|
const router = useRouter()
|
const routerVal = router.currentRoute.value
|
const path = ref(routerVal.path)
|
const label = ref('')
|
const listMenu: any = ref([])
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
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(config.userInfoKey)
|
const userInfo = JSON.parse(userCache)
|
if (!userInfo) {
|
router.push({
|
path: '/',
|
})
|
return false
|
}
|
if (userInfo.role == 'Teacher') {
|
const data: any = menu.filter((item) => item.path != 'myClass')
|
listMenu.value = data
|
} else {
|
const data: any = menu.filter((item) => item.path != 'myCourse')
|
listMenu.value = data
|
}
|
})
|
const goRouter = (item: any) => {
|
if (!localStorage.getItem(config.tokenKey) || localStorage.getItem(config.tokenKey) == null) {
|
router.push({
|
path: '/home',
|
query: {
|
showLogin: '1',
|
},
|
})
|
} else {
|
label.value = item.label
|
router.push({ path: item.path })
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.homePage {
|
min-width: 1220px;
|
min-height: calc(100vh - 61.8%);
|
background-color: #fff;
|
padding-bottom: 100px;
|
}
|
.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;
|
background-image: url('@/assets/images/personalCenter/Account_bg.png');
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
.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>
|
