fix:修复教师端考试管理入口被隐藏问题

This commit is contained in:
yuk255 2025-08-25 11:14:18 +08:00
parent 510b2b1b0c
commit 37198b3b37

View File

@ -24,6 +24,45 @@
<img :src="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" alt=""> <img :src="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" alt="">
<span>课程管理</span> <span>课程管理</span>
</router-link> </router-link>
<!-- 考试管理 - 可展开菜单 -->
<div class="nav-item" :class="{ active: activeNavItem === 4 }" @click="toggleExamMenu">
<img :src="activeNavItem === 4 ? '/images/teacher/练考通-选中.png' : '/images/teacher/练考通.png'" alt="">
<span>考试管理</span>
<n-icon class="expand-icon" :class="{ expanded: examMenuExpanded }">
<ChevronDownOutline />
</n-icon>
</div>
<!-- 考试管理子菜单 -->
<div class="submenu-container" :class="{ expanded: examMenuExpanded }">
<router-link
to="/teacher/exam-management/question-management"
class="submenu-item"
:class="{ active: activeSubNavItem === 'question-management' }"
@click="setActiveSubNavItem('question-management')"
>
<span>试题管理</span>
</router-link>
<router-link
to="/teacher/exam-management/exam-library"
class="submenu-item"
:class="{ active: activeSubNavItem === 'exam-library' }"
@click="setActiveSubNavItem('exam-library')"
>
<span>试卷管理</span>
</router-link>
<router-link
to="/teacher/exam-management/marking-center"
class="submenu-item"
:class="{ active: activeSubNavItem === 'marking-center' }"
@click="setActiveSubNavItem('marking-center')"
>
<span>阅卷中心</span>
</router-link>
</div>
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" <router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }"
@click="setActiveNavItem(1)"> @click="setActiveNavItem(1)">
@ -66,6 +105,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue' import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { ChevronDownOutline } from '@vicons/ionicons5'
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
@ -73,11 +114,36 @@ console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
// //
const activeNavItem = ref(0); // 0: , 1: , 2: , 3: const activeNavItem = ref(0); // 0: , 1: , 2: , 3:
const activeSubNavItem = ref(''); //
const examMenuExpanded = ref(false); //
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const setActiveNavItem = (index: number) => { const setActiveNavItem = (index: number) => {
activeNavItem.value = index; activeNavItem.value = index;
//
if (index !== 4) {
examMenuExpanded.value = false;
activeSubNavItem.value = '';
}
}
//
const toggleExamMenu = () => {
examMenuExpanded.value = !examMenuExpanded.value;
activeNavItem.value = 4;
//
if (examMenuExpanded.value && !activeSubNavItem.value) {
activeSubNavItem.value = 'question-management';
}
}
//
const setActiveSubNavItem = (subItem: string) => {
activeSubNavItem.value = subItem;
activeNavItem.value = 4;
examMenuExpanded.value = true;
} }
// //
@ -226,6 +292,56 @@ const updateActiveNavItem = () => {
overflow: hidden; overflow: hidden;
} }
/* 展开图标样式 */
.expand-icon {
margin-left: auto;
margin-right: 20px;
transition: transform 0.3s ease;
color: #666;
}
.expand-icon.expanded {
transform: rotate(180deg);
}
/* 子菜单容器 */
.submenu-container {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
margin-left: 20px;
}
.submenu-container.expanded {
max-height: 200px;
}
/* 子菜单项样式 */
.submenu-item {
display: flex;
align-items: center;
height: 40px;
margin-bottom: 8px;
margin-left: 10px;
margin-right: 10px;
padding-left: 40px;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
color: #666;
font-size: 16px;
position: relative;
}
.submenu-item:hover {
background: rgba(102, 183, 227, 0.05);
}
.submenu-item.active {
background: rgba(102, 183, 227, 0.1);
color: #0C99DA;
}
/* 响应式调整 */ /* 响应式调整 */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.top-image-container { .top-image-container {
@ -395,6 +511,10 @@ const updateActiveNavItem = () => {
width: 200px; width: 200px;
margin: 0 10px 15px; margin: 0 10px 15px;
} }
.submenu-container{
width: 200px;
}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -480,6 +600,23 @@ const updateActiveNavItem = () => {
background-color: #0C99DA; background-color: #0C99DA;
} }
@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;
}
.submenu-container{
width: 150px;
}
}
/* 可点击的面包屑项样式 */ /* 可点击的面包屑项样式 */
.breadcrumb :deep(.n-breadcrumb-item.clickable) { .breadcrumb :deep(.n-breadcrumb-item.clickable) {
cursor: pointer; cursor: pointer;