fix:修复教师端考试管理入口被隐藏问题
This commit is contained in:
parent
510b2b1b0c
commit
37198b3b37
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user