教师端页面
This commit is contained in:
parent
a4832dc8fc
commit
34738a29e1
14
src/components/admin/CourseComponents/CourseAnalysis.vue
Normal file
14
src/components/admin/CourseComponents/CourseAnalysis.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>课程分析</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
19
src/components/admin/CourseComponents/CourseCategory.vue
Normal file
19
src/components/admin/CourseComponents/CourseCategory.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>课程分类</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
body{
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1793px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
14
src/components/admin/CourseComponents/MaterialCategory.vue
Normal file
14
src/components/admin/CourseComponents/MaterialCategory.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>资料分类</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
116
src/components/admin/CourseManagement.vue
Normal file
116
src/components/admin/CourseManagement.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<div class="course-management-container">
|
||||||
|
<!-- 左侧导航栏 -->
|
||||||
|
<div class="nav-container">
|
||||||
|
<router-link to="/teacher/course-management" class="nav-item">
|
||||||
|
<span>全部课程</span><i>(10)</i>
|
||||||
|
<div class="icon-container">
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<div class="sub-nav-container">
|
||||||
|
<router-link to="/teacher/course-management/course-category" class="nav-item">
|
||||||
|
<span>课程分类</span>
|
||||||
|
<div class="icon-container">
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/teacher/course-management/material-category" class="nav-item">
|
||||||
|
|
||||||
|
<span>资料分类</span>
|
||||||
|
<div class="icon-container">
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/teacher/course-management/course-analysis" class="nav-item">
|
||||||
|
|
||||||
|
<span>课程分析</span>
|
||||||
|
<div class="icon-container">
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
<span class="icon icon-status"></span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧内容区域 -->
|
||||||
|
<div class="content-container">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.course-management-container{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.nav-container{
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 266px;
|
||||||
|
}
|
||||||
|
.sub-nav-container{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item{
|
||||||
|
width: 240px;
|
||||||
|
height: 54px;
|
||||||
|
margin-left: 13px;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item:hover{
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item span{
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item i{
|
||||||
|
font-style: normal;
|
||||||
|
color: #66b7e3;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon-container{
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.icon.icon-status{
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-image: url('../../../public/images/icon/top.jpg');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.nav-item:hover .icon.icon-status{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.content-container{
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
14
src/components/admin/MyResources.vue
Normal file
14
src/components/admin/MyResources.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>我的资源</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
14
src/components/admin/PersonalCenter.vue
Normal file
14
src/components/admin/PersonalCenter.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>个人中心</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
14
src/components/admin/StudentManagement.vue
Normal file
14
src/components/admin/StudentManagement.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>学员管理</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -6,7 +6,6 @@ import Home from '@/views/Home.vue'
|
|||||||
import Courses from '@/views/Courses.vue'
|
import Courses from '@/views/Courses.vue'
|
||||||
import CourseDetail from '@/views/CourseDetail.vue'
|
import CourseDetail from '@/views/CourseDetail.vue'
|
||||||
import CourseDetailEnrolled from '@/views/CourseDetailEnrolled.vue'
|
import CourseDetailEnrolled from '@/views/CourseDetailEnrolled.vue'
|
||||||
import CourseExchanged from '@/views/CourseExchanged.vue'
|
|
||||||
import CourseStudy from '@/views/CourseStudy.vue'
|
import CourseStudy from '@/views/CourseStudy.vue'
|
||||||
import Learning from '@/views/Learning.vue'
|
import Learning from '@/views/Learning.vue'
|
||||||
import Profile from '@/views/Profile.vue'
|
import Profile from '@/views/Profile.vue'
|
||||||
@ -23,14 +22,93 @@ import ExamNotice from '@/views/ExamNotice.vue'
|
|||||||
import ExamSubmitted from '@/views/ExamSubmitted.vue'
|
import ExamSubmitted from '@/views/ExamSubmitted.vue'
|
||||||
import TestSections from '@/views/TestSections.vue'
|
import TestSections from '@/views/TestSections.vue'
|
||||||
import LocalVideoDemo from '@/views/LocalVideoDemo.vue'
|
import LocalVideoDemo from '@/views/LocalVideoDemo.vue'
|
||||||
import DPlayerTest from '@/views/DPlayerTest.vue'
|
|
||||||
import SpecialTraining from '@/views/SpecialTraining.vue'
|
import SpecialTraining from '@/views/SpecialTraining.vue'
|
||||||
import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue'
|
import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue'
|
||||||
import HelpCenter from '@/views/HelpCenter.vue'
|
import HelpCenter from '@/views/HelpCenter.vue'
|
||||||
import Practice from '@/views/Practice.vue'
|
|
||||||
import LearningCenter from '@/views/LearningCenter.vue'
|
// 管理员路由
|
||||||
|
import AdminDashboard from '@/views/teacher/AdminDashboard.vue'
|
||||||
|
import PersonalCenter from '@/components/admin/PersonalCenter.vue'
|
||||||
|
import CourseManagement from '@/components/admin/CourseManagement.vue'
|
||||||
|
import MyResources from '@/components/admin/MyResources.vue'
|
||||||
|
import StudentManagement from '@/components/admin/StudentManagement.vue'
|
||||||
|
// 课程管理子路由组件
|
||||||
|
import CourseCategory from '@/components/admin/CourseComponents/CourseCategory.vue'
|
||||||
|
import MaterialCategory from '@/components/admin/CourseComponents/MaterialCategory.vue'
|
||||||
|
import CourseAnalysis from '@/components/admin/CourseComponents/CourseAnalysis.vue'
|
||||||
|
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
path: '/teacher',
|
||||||
|
|
||||||
|
name: 'AdminDashboard',
|
||||||
|
component: AdminDashboard,
|
||||||
|
meta: {
|
||||||
|
title: '管理后台',
|
||||||
|
requiresAuth: true
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'personal-center',
|
||||||
|
name: 'PersonalCenter',
|
||||||
|
component: PersonalCenter,
|
||||||
|
meta: {
|
||||||
|
title: '个人中心'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'course-management',
|
||||||
|
name: 'CourseManagement',
|
||||||
|
component: CourseManagement,
|
||||||
|
meta: {
|
||||||
|
title: '课程管理'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'course-category',
|
||||||
|
name: 'CourseCategory',
|
||||||
|
component: CourseCategory,
|
||||||
|
meta: {
|
||||||
|
title: '课程分类'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'material-category',
|
||||||
|
name: 'MaterialCategory',
|
||||||
|
component: MaterialCategory,
|
||||||
|
meta: {
|
||||||
|
title: '资料分类'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'course-analysis',
|
||||||
|
name: 'CourseAnalysis',
|
||||||
|
component: CourseAnalysis,
|
||||||
|
meta: {
|
||||||
|
title: '课程分析'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'my-resources',
|
||||||
|
name: 'MyResources',
|
||||||
|
component: MyResources,
|
||||||
|
meta: {
|
||||||
|
title: '我的资源'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'student-management',
|
||||||
|
name: 'StudentManagement',
|
||||||
|
component: StudentManagement,
|
||||||
|
meta: {
|
||||||
|
title: '学员管理'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/help-center',
|
path: '/help-center',
|
||||||
name: 'HelpCenter',
|
name: 'HelpCenter',
|
||||||
@ -71,14 +149,6 @@ const routes: RouteRecordRaw[] = [
|
|||||||
title: '课程详情 - 已报名'
|
title: '课程详情 - 已报名'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/course/:id/exchanged',
|
|
||||||
name: 'CourseExchanged',
|
|
||||||
component: CourseExchanged,
|
|
||||||
meta: {
|
|
||||||
title: '课程兑换成功'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/course/study/:id',
|
path: '/course/study/:id',
|
||||||
name: 'CourseStudy',
|
name: 'CourseStudy',
|
||||||
@ -106,14 +176,6 @@ const routes: RouteRecordRaw[] = [
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/learning-center',
|
|
||||||
name: 'LearningCenter',
|
|
||||||
component: LearningCenter,
|
|
||||||
meta: {
|
|
||||||
title: '学习中心'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/learning-paths',
|
path: '/learning-paths',
|
||||||
@ -219,14 +281,6 @@ const routes: RouteRecordRaw[] = [
|
|||||||
title: 'AI'
|
title: 'AI'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/ai-companion/:id?',
|
|
||||||
name: 'AICompanion',
|
|
||||||
component: () => import('@/views/AICompanion.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'AI伴学'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/ai-demo',
|
path: '/ai-demo',
|
||||||
name: 'AIDemo',
|
name: 'AIDemo',
|
||||||
@ -251,29 +305,14 @@ const routes: RouteRecordRaw[] = [
|
|||||||
title: '本地视频播放演示'
|
title: '本地视频播放演示'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/dplayer-test',
|
|
||||||
name: 'DPlayerTest',
|
|
||||||
component: DPlayerTest,
|
|
||||||
meta: {
|
|
||||||
title: 'DPlayer 测试页面'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/course/:courseId/practice/:sectionId',
|
|
||||||
name: 'Practice',
|
|
||||||
component: Practice,
|
|
||||||
meta: {
|
|
||||||
title: '练习页面'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)*',
|
path: '/:pathMatch(.*)*',
|
||||||
name: 'NotFound',
|
name: 'NotFound',
|
||||||
component: () => import('@/views/NotFound.vue'),
|
component: () => import('@/views/NotFound.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '页面未找到'
|
title: '页面未找到'
|
||||||
}
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -290,7 +329,7 @@ const router = createRouter({
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 路由守卫
|
// 路由守卫
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, _from, next) => {
|
||||||
// 设置页面标题
|
// 设置页面标题
|
||||||
if (to.meta.title) {
|
if (to.meta.title) {
|
||||||
document.title = `${to.meta.title} - 在线学习平台`
|
document.title = `${to.meta.title} - 在线学习平台`
|
||||||
@ -307,38 +346,6 @@ router.beforeEach((to, from, next) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 特殊处理:检测从其他页面进入积分中心
|
|
||||||
if (to.name === 'LearningCenter') {
|
|
||||||
// 如果是从其他页面进入积分中心,设置自动刷新标记
|
|
||||||
if (from.name && from.name !== 'LearningCenter') {
|
|
||||||
sessionStorage.setItem('learningCenterNeedsRefresh', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 特殊处理:检测从其他页面进入帮助中心
|
|
||||||
if (to.name === 'HelpCenter') {
|
|
||||||
// 如果是从其他页面进入帮助中心,设置自动刷新标记
|
|
||||||
if (from.name && from.name !== 'HelpCenter') {
|
|
||||||
sessionStorage.setItem('helpCenterNeedsRefresh', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 特殊处理:检测从其他页面进入已兑换页面
|
|
||||||
if (to.name === 'CourseExchanged') {
|
|
||||||
// 如果是从其他页面进入已兑换页面,设置自动刷新标记
|
|
||||||
if (from.name && from.name !== 'CourseExchanged') {
|
|
||||||
sessionStorage.setItem('refreshCourseExchanged', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 特殊处理:检测从其他页面进入个人中心
|
|
||||||
if (to.name === 'Profile') {
|
|
||||||
// 如果是从其他页面进入个人中心,设置自动刷新标记
|
|
||||||
if (from.name && from.name !== 'Profile') {
|
|
||||||
sessionStorage.setItem('refreshProfile', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
243
src/views/teacher/AdminDashboard.vue
Normal file
243
src/views/teacher/AdminDashboard.vue
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div class="admin-dashboard">
|
||||||
|
<!-- 顶部图片 -->
|
||||||
|
<div class="top-image-container">
|
||||||
|
<img src="https://picsum.photos/500/200" alt="顶部图片" class="top-image">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<div class="sidebar-container">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<div class="avatar-container">
|
||||||
|
<img src="https://picsum.photos/200/200" alt="头像" class="avatar">
|
||||||
|
<div class="avatar-text">
|
||||||
|
用户昵称~
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<div class="nav-container">
|
||||||
|
<router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
|
||||||
|
<img src="https://picsum.photos/200/200" alt="">
|
||||||
|
<span>课程管理</span>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">
|
||||||
|
|
||||||
|
<img src="https://picsum.photos/200/200" alt="">
|
||||||
|
<span>学员管理</span>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/teacher/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }" @click="setActiveNavItem(2)">
|
||||||
|
<img src="https://picsum.photos/200/200" alt="">
|
||||||
|
<span>我的资源</span>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
|
||||||
|
|
||||||
|
<img src="https://picsum.photos/200/200" alt="">
|
||||||
|
<span>个人中心</span>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧路由视图 -->
|
||||||
|
<div class="router-view-container">
|
||||||
|
<!-- 面包屑 -->
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<span class="breadcrumb-separator">|</span>
|
||||||
|
<n-breadcrumb>
|
||||||
|
<n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
|
||||||
|
{{ item.title }}
|
||||||
|
</n-breadcrumb-item>
|
||||||
|
</n-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
const width = window.innerWidth;
|
||||||
|
const height = window.innerHeight;
|
||||||
|
console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
|
||||||
|
|
||||||
|
// 添加导航项激活状态管理
|
||||||
|
const activeNavItem = ref(0);
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const setActiveNavItem = (index: number) => {
|
||||||
|
activeNavItem.value = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动态生成面包屑
|
||||||
|
const breadcrumbItems = computed(() => {
|
||||||
|
// 获取当前路由的matched数组
|
||||||
|
const matchedRoutes = route.matched;
|
||||||
|
|
||||||
|
// 处理matchedRoutes,过滤掉'管理后台'并生成面包屑项
|
||||||
|
return matchedRoutes
|
||||||
|
.filter(item => item.meta.title !== '管理后台')
|
||||||
|
.map(item => ({
|
||||||
|
title: item.meta.title || '未知页面',
|
||||||
|
path: item.path
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听路由变化,更新激活的导航项
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始设置
|
||||||
|
updateActiveNavItem();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用watch监听路由变化
|
||||||
|
watch(route, (newRoute) => {
|
||||||
|
updateActiveNavItem();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新激活的导航项
|
||||||
|
const updateActiveNavItem = () => {
|
||||||
|
const path = route.path;
|
||||||
|
if (path.includes('course-management')) {
|
||||||
|
activeNavItem.value = 0;
|
||||||
|
} else if (path.includes('student-management')) {
|
||||||
|
activeNavItem.value = 1;
|
||||||
|
} else if (path.includes('my-resources')) {
|
||||||
|
activeNavItem.value = 2;
|
||||||
|
} else if (path.includes('personal-center')) {
|
||||||
|
activeNavItem.value = 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.top-image-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-image {
|
||||||
|
width: 1920px;
|
||||||
|
height: 130px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 70px;
|
||||||
|
opacity: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container{
|
||||||
|
width: 294px;
|
||||||
|
height: calc(100vh - 130px);
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.avatar-container{
|
||||||
|
height: 230px;
|
||||||
|
position: relative;
|
||||||
|
/* 移除原来的边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加带间距的横线 */
|
||||||
|
.avatar-container::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 20px;
|
||||||
|
right: 20px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #E6E6E6;
|
||||||
|
}
|
||||||
|
.avatar-container img{
|
||||||
|
width: 95px;
|
||||||
|
height: 95px;
|
||||||
|
/* 圆角 */
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 55px;
|
||||||
|
margin-left: 100px;
|
||||||
|
margin-right: 99;
|
||||||
|
}
|
||||||
|
.avatar-text{
|
||||||
|
margin-left: 98px;
|
||||||
|
height: 31px;
|
||||||
|
font-family: AppleSystemUIFont;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.nav-container{
|
||||||
|
margin-top: 30px;
|
||||||
|
/* 鼠标变小手 */
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-container .nav-item{
|
||||||
|
margin-left: 20px;
|
||||||
|
width: 254px;
|
||||||
|
height: 54px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
/* 圆角 */
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item:hover {
|
||||||
|
background: rgba(102,183,227,0.05);
|
||||||
|
}
|
||||||
|
/* 添加激活状态样式 */
|
||||||
|
.nav-container .nav-item.active{
|
||||||
|
background: rgba(102,183,227,0.1);
|
||||||
|
}
|
||||||
|
.nav-container .nav-item img{
|
||||||
|
width: 17px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.nav-container .nav-item span{
|
||||||
|
width: 80px;
|
||||||
|
height: 28px;
|
||||||
|
font-family: AppleSystemUIFont;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #0C99DA;
|
||||||
|
line-height: 23px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-view-container {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
background: #F5F7FA;
|
||||||
|
height: calc(100vh - 130px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-separator {
|
||||||
|
margin-right: 10px;
|
||||||
|
color: #0C99DA;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
x
Reference in New Issue
Block a user