OL-LearnPlatform-Frontend/src/components/admin/CourseManagement.vue

<template>
    <div class="course-management-container">
        <!-- 左侧导航栏 -->
        <div class="nav-container">
            <router-link to="/teacher/course-management" class="nav-item"
                :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>
            </router-link>
            <div class="sub-nav-container">
                <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 class="content-container">
            <!-- 全部课程页面直接显示课程分类组件 -->
            <div v-if="$route.path === '/teacher/course-management'">
                <CourseCategory />
            </div>
            <!-- 其他子路由内容 -->
            <router-view v-else></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import CourseCategory from './CourseComponents/CourseCategory.vue'
</script>


<style scoped>
.course-management-container {
    display: flex;
}

.nav-container {
    margin-top: 20px;
    padding: 15px;
    width: 274px;
    background-color: #fff;
}

.sub-nav-container {
    margin-left: 10px;
}

.nav-container .nav-item {
    width: 240px;
    height: 54px;
    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: 18px;
}

.sub-nav-item {
    width: 220px !important;
    font-size: 16px !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: 8px;
    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: 20px 20px 20px 5px;
    min-height: 100vh;
    box-sizing: border-box;
}
</style>