262 lines
7.8 KiB
Vue
262 lines
7.8 KiB
Vue
<template>
|
|
<div class="course-management-container">
|
|
<!-- 左侧导航栏 -->
|
|
<!-- <div class="nav-container">
|
|
<div class="nav-group">
|
|
<router-link to="/teacher/course-management" class="nav-item nav-header"
|
|
:class="{ active: $route.path === '/teacher/course-management' }">
|
|
<span>全部课程</span><i>(10)</i>
|
|
<div class="icon-container">
|
|
<span class="icon icon-status icon-add"></span>
|
|
<span class="icon icon-status icon-edit"></span>
|
|
<span class="icon icon-status icon-delete"></span>
|
|
</div>
|
|
<div class="arrow-container" @click.prevent="toggleMainNav">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="collapse-arrow"
|
|
:style="{ transform: isMainNavExpanded ? 'rotate(-90deg)' : 'rotate(90deg)' }">
|
|
<path
|
|
d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
</div>
|
|
</router-link>
|
|
<div class="sub-nav-container" v-show="isMainNavExpanded">
|
|
<router-link to="/teacher/course-management/course-category" class="nav-item sub-nav-item"
|
|
:class="{ active: $route.path === '/teacher/course-management/course-category' }">
|
|
<span>课程分类</span>
|
|
<div class="icon-container">
|
|
<span class="icon icon-status icon-add"></span>
|
|
<span class="icon icon-status icon-edit"></span>
|
|
<span class="icon icon-status icon-delete"></span>
|
|
</div>
|
|
</router-link>
|
|
<router-link to="/teacher/course-management/material-category" class="nav-item sub-nav-item"
|
|
:class="{ active: $route.path === '/teacher/course-management/material-category' }">
|
|
<span>资料分类</span>
|
|
<div class="icon-container">
|
|
<span class="icon icon-status icon-add"></span>
|
|
<span class="icon icon-status icon-edit"></span>
|
|
<span class="icon icon-status icon-delete"></span>
|
|
</div>
|
|
</router-link>
|
|
<router-link to="/teacher/course-management/course-analysis" class="nav-item sub-nav-item"
|
|
:class="{ active: $route.path === '/teacher/course-management/course-analysis' }">
|
|
<span>资料分析</span>
|
|
<div class="icon-container">
|
|
<span class="icon icon-status icon-add"></span>
|
|
<span class="icon icon-status icon-edit"></span>
|
|
<span class="icon icon-status icon-delete"></span>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- 右侧内容区域 -->
|
|
<div class="content-container">
|
|
<!-- 全部课程页面直接显示课程分类组件 -->
|
|
<template v-if="$route.path === '/teacher/course-management'">
|
|
<CourseCategory />
|
|
</template>
|
|
<!-- 其他子路由内容 -->
|
|
<router-view v-else></router-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import { ref } from 'vue'
|
|
import CourseCategory from './CourseComponents/CourseCategory.vue'
|
|
|
|
// 主导航展开状态
|
|
// const isMainNavExpanded = ref(true)
|
|
|
|
// 切换主导航展开状态
|
|
// const toggleMainNav = () => {
|
|
// isMainNavExpanded.value = !isMainNavExpanded.value
|
|
// }
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.course-management-container {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-container {
|
|
margin-top: 8px;
|
|
padding: 15px;
|
|
width: 220px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.nav-group {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.nav-header {
|
|
position: relative;
|
|
}
|
|
|
|
.arrow-container {
|
|
position: absolute;
|
|
right: 50%;
|
|
bottom: 4%;
|
|
transform: translateX(50%);
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.collapse-arrow {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #666;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.collapse-arrow:hover {
|
|
color: #0288D1;
|
|
}
|
|
.sub-nav-container {
|
|
margin-left: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-container .nav-item {
|
|
width: 190px;
|
|
height: 50px;
|
|
margin-top: 5px;
|
|
margin-bottom: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 15px;
|
|
border-radius: 8px;
|
|
background-color: transparent;
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sub-nav-item {
|
|
width: 170px !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.nav-container .nav-item:hover {
|
|
background-color: #e6f7ff;
|
|
}
|
|
|
|
/* 鼠标悬停在导航项上时显示图标 */
|
|
.nav-container .nav-item:hover .icon.icon-status {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 选中状态样式 */
|
|
.nav-container .nav-item.active {
|
|
background-color: #F5F8FB;
|
|
color: #0288D1;
|
|
}
|
|
|
|
.nav-container .nav-item.active span {
|
|
color: #0288D1;
|
|
}
|
|
|
|
.nav-container .nav-item.active i {
|
|
color: #0288D1;
|
|
}
|
|
|
|
.nav-container .nav-item span {
|
|
margin-right: 2px;
|
|
color: #666666;
|
|
}
|
|
|
|
.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-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
opacity: 0; /* 默认不显示图标 */
|
|
transition: opacity 0.3s ease, background-image 0.3s ease;
|
|
}
|
|
|
|
/* 加号图标 */
|
|
.icon.icon-add {
|
|
background-image: url('/images/teacher/加号.png');
|
|
}
|
|
|
|
/* 编辑图标 */
|
|
.icon.icon-edit {
|
|
background-image: url('/images/teacher/编辑.png');
|
|
}
|
|
|
|
/* 删除图标 */
|
|
.icon.icon-delete {
|
|
background-image: url('/images/teacher/删除.png');
|
|
}
|
|
|
|
/* 鼠标悬停在导航项上时显示灰色图标（更暗） */
|
|
.nav-container .nav-item:hover .icon.icon-status {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* 鼠标直接悬停在图标上时显示蓝色图标（优先级更高） */
|
|
.icon.icon-add:hover {
|
|
background-image: url('/images/teacher/加号(选中).png') !important;
|
|
opacity: 1 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon.icon-edit:hover {
|
|
background-image: url('/images/teacher/编辑(选中).png') !important;
|
|
opacity: 1 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon.icon-delete:hover {
|
|
background-image: url('/images/teacher/删除(选中).png') !important;
|
|
opacity: 1 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 选中状态下显示有颜色的图标 */
|
|
.nav-item.active .icon.icon-add {
|
|
background-image: url('/images/teacher/加号(选中).png');
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-item.active .icon.icon-edit {
|
|
background-image: url('/images/teacher/编辑(选中).png');
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-item.active .icon.icon-delete {
|
|
background-image: url('/images/teacher/删除(选中).png');
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.content-container {
|
|
flex: 1;
|
|
padding-top: 5px; /* 进一步减少padding */
|
|
box-sizing: border-box;
|
|
overflow-x: hidden; /* 防止水平滚动 */
|
|
}
|
|
</style>
|