2025-08-20 14:10:48 +08:00
|
|
|
|
<template>
|
|
|
|
|
<div class="admin-dashboard">
|
|
|
|
|
<!-- 顶部图片 -->
|
2025-08-21 19:39:07 +08:00
|
|
|
|
<div class="top-image-container">
|
|
|
|
|
<img src="/images/teacher/顶部.png" alt="顶部图片" class="top-image">
|
2025-08-21 11:31:49 +08:00
|
|
|
|
|
2025-08-21 19:39:07 +08:00
|
|
|
|
</div>
|
2025-08-20 14:10:48 +08:00
|
|
|
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<!-- 侧边栏 -->
|
|
|
|
|
<div class="sidebar-container">
|
2025-08-21 19:39:07 +08:00
|
|
|
|
<!-- 头像 -->
|
|
|
|
|
<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="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" alt="">
|
|
|
|
|
<span>课程管理</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }"
|
|
|
|
|
@click="setActiveNavItem(1)">
|
|
|
|
|
|
|
|
|
|
<img :src="activeNavItem === 1 ? '/images/teacher/学院管理(选中).png' : '/images/teacher/学员管理.png'" alt="">
|
|
|
|
|
<span>学员管理</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
<router-link to="/teacher/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }"
|
|
|
|
|
@click="setActiveNavItem(2)">
|
|
|
|
|
<img :src="activeNavItem === 2 ? '/images/teacher/我的资源(选中).png' : '/images/teacher/我的资源.png'" alt="">
|
|
|
|
|
<span>我的资源</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
<router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }"
|
|
|
|
|
@click="setActiveNavItem(3)">
|
|
|
|
|
|
|
|
|
|
<img :src="activeNavItem === 3 ? '/images/teacher/个人中心(选中).png' : '/images/teacher/个人中心.png'" alt="">
|
|
|
|
|
<span>个人中心</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
2025-08-20 14:10:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧路由视图 -->
|
|
|
|
|
<div class="router-view-container">
|
|
|
|
|
<!-- 面包屑 -->
|
|
|
|
|
<div class="breadcrumb">
|
2025-08-21 19:39:07 +08:00
|
|
|
|
<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>
|
2025-08-20 14:10:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
<router-view></router-view>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2025-08-20 22:30:37 +08:00
|
|
|
|
import { ref, onMounted, computed, watch } from 'vue'
|
2025-08-20 14:10:48 +08:00
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
const width = window.innerWidth;
|
|
|
|
|
const height = window.innerHeight;
|
|
|
|
|
console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
|
|
|
|
|
|
|
|
|
|
// 添加导航项激活状态管理
|
2025-08-21 19:39:07 +08:00
|
|
|
|
const activeNavItem = ref(0); // 0: 课程管理, 1: 学员管理, 2: 我的资源, 3: 个人中心
|
2025-08-20 14:10:48 +08:00
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
|
|
|
|
const setActiveNavItem = (index: number) => {
|
|
|
|
|
activeNavItem.value = index;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 动态生成面包屑
|
|
|
|
|
const breadcrumbItems = computed(() => {
|
|
|
|
|
// 获取当前路由的matched数组
|
|
|
|
|
const matchedRoutes = route.matched;
|
2025-08-21 19:39:07 +08:00
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
// 处理matchedRoutes,过滤掉'管理后台'并生成面包屑项
|
|
|
|
|
return matchedRoutes
|
|
|
|
|
.filter(item => item.meta.title !== '管理后台')
|
|
|
|
|
.map(item => ({
|
|
|
|
|
title: item.meta.title || '未知页面',
|
|
|
|
|
path: item.path
|
|
|
|
|
}));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 监听路由变化,更新激活的导航项
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 初始设置
|
|
|
|
|
updateActiveNavItem();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 使用watch监听路由变化
|
2025-08-20 22:30:37 +08:00
|
|
|
|
watch(route, () => {
|
2025-08-20 14:10:48 +08:00
|
|
|
|
updateActiveNavItem();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 更新激活的导航项
|
|
|
|
|
const updateActiveNavItem = () => {
|
|
|
|
|
const path = route.path;
|
|
|
|
|
if (path.includes('course-management')) {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
activeNavItem.value = 0; // 课程管理
|
2025-08-20 14:10:48 +08:00
|
|
|
|
} else if (path.includes('student-management')) {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
activeNavItem.value = 1; // 学员管理
|
2025-08-20 14:10:48 +08:00
|
|
|
|
} else if (path.includes('my-resources')) {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
activeNavItem.value = 2; // 我的资源
|
2025-08-20 14:10:48 +08:00
|
|
|
|
} else if (path.includes('personal-center')) {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
activeNavItem.value = 3; // 个人中心
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.top-image-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 130px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-22 19:52:05 +08:00
|
|
|
|
/* 响应式调整 */
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.top-image-container {
|
|
|
|
|
height: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
|
.top-image-container {
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
.top-image {
|
2025-08-22 19:52:05 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2025-08-20 14:10:48 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0px;
|
2025-08-22 19:52:05 +08:00
|
|
|
|
top: 0px;
|
2025-08-20 14:10:48 +08:00
|
|
|
|
opacity: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-22 19:52:05 +08:00
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.main-content {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.router-view-container {
|
|
|
|
|
height: auto;
|
|
|
|
|
min-height: calc(100vh - var(--top-height, 100px) - 300px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-21 19:39:07 +08:00
|
|
|
|
.sidebar-container {
|
|
|
|
|
width: 294px;
|
2025-08-22 19:52:05 +08:00
|
|
|
|
height: calc(100vh - var(--top-height, 130px));
|
2025-08-21 19:39:07 +08:00
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
2025-08-21 19:39:07 +08:00
|
|
|
|
|
2025-08-22 19:52:05 +08:00
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
--top-height: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
--top-height: 80px;
|
|
|
|
|
width: 240px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-21 19:39:07 +08:00
|
|
|
|
.avatar-container {
|
|
|
|
|
height: 230px;
|
|
|
|
|
position: relative;
|
|
|
|
|
/* 移除原来的边框 */
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 添加带间距的横线 */
|
|
|
|
|
.avatar-container::after {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-22 19:52:05 +08:00
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.avatar-container {
|
|
|
|
|
height: 180px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-container img {
|
|
|
|
|
margin: 0 0 15px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-text {
|
|
|
|
|
margin: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
|
.avatar-container {
|
|
|
|
|
height: 150px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-container img {
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-text {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-21 19:39:07 +08:00
|
|
|
|
.nav-container {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
/* 鼠标变小手 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
2025-08-21 19:39:07 +08:00
|
|
|
|
|
|
|
|
|
.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;
|
2025-08-22 19:52:05 +08:00
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.nav-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-container .nav-item {
|
|
|
|
|
width: 200px;
|
|
|
|
|
margin: 0 10px 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
|
.nav-container .nav-item {
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
margin: 0 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-container .nav-item img {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
2025-08-21 19:39:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
.nav-container .nav-item:hover {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
background: rgba(102, 183, 227, 0.05);
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
2025-08-21 19:39:07 +08:00
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
/* 添加激活状态样式 */
|
2025-08-21 19:39:07 +08:00
|
|
|
|
.nav-container .nav-item.active {
|
|
|
|
|
background: rgba(102, 183, 227, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-container .nav-item.active span {
|
|
|
|
|
color: #0C99DA;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-container .nav-item img {
|
|
|
|
|
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: #666666;
|
|
|
|
|
line-height: 23px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
text-transform: none;
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.router-view-container {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background: #F5F7FA;
|
2025-08-22 19:52:05 +08:00
|
|
|
|
height: calc(100vh - var(--top-height, 130px));
|
2025-08-21 19:39:07 +08:00
|
|
|
|
overflow-y: auto;
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
|
|
|
|
|
2025-08-22 19:52:05 +08:00
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.router-view-container {
|
|
|
|
|
--top-height: 100px;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
|
.router-view-container {
|
|
|
|
|
--top-height: 80px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-20 14:10:48 +08:00
|
|
|
|
.breadcrumb {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb-separator {
|
2025-08-21 19:39:07 +08:00
|
|
|
|
width: 4px;
|
|
|
|
|
height: 17px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
background-color: #0C99DA;
|
2025-08-20 14:10:48 +08:00
|
|
|
|
}
|
|
|
|
|
</style>
|