style:修复侧边栏高度溢出问题;修复课件导航条层级过高,浮动在nav上部错误样式

This commit is contained in:
yuk255 2025-09-19 10:59:17 +08:00
parent 23f6924711
commit 061a67a5e8
4 changed files with 34 additions and 19 deletions

View File

@ -191,6 +191,11 @@ const setActiveNavItem = (index: number) => {
// //
const toggleExamMenu = () => { const toggleExamMenu = () => {
//
if (!examMenuExpanded.value) {
studentMenuExpanded.value = false;
}
examMenuExpanded.value = !examMenuExpanded.value; examMenuExpanded.value = !examMenuExpanded.value;
activeNavItem.value = 4; activeNavItem.value = 4;
@ -202,6 +207,11 @@ const toggleExamMenu = () => {
// //
const toggleStudentMenu = (path: string) => { const toggleStudentMenu = (path: string) => {
//
if (!studentMenuExpanded.value) {
examMenuExpanded.value = false;
}
studentMenuExpanded.value = !studentMenuExpanded.value; studentMenuExpanded.value = !studentMenuExpanded.value;
activeNavItem.value = 1; activeNavItem.value = 1;
@ -727,6 +737,10 @@ const updateActiveNavItem = () => {
</script> </script>
<style scoped> <style scoped>
.admin-dashboard {
position: relative;
}
.top-image-container { .top-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -855,6 +869,7 @@ const updateActiveNavItem = () => {
width: 240px; width: 240px;
height: calc(100vh - var(--top-height, 130px)); height: calc(100vh - var(--top-height, 130px));
background: #FFFFFF; background: #FFFFFF;
overflow: auto;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -871,8 +886,12 @@ const updateActiveNavItem = () => {
} }
.avatar-container { .avatar-container {
height: 230px;
position: relative; position: relative;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* 移除原来的边框 */ /* 移除原来的边框 */
} }
@ -892,13 +911,10 @@ const updateActiveNavItem = () => {
height: 80px; height: 80px;
/* 圆角 */ /* 圆角 */
border-radius: 50%; border-radius: 50%;
margin-top: 55px; margin-top: 30px;
margin-left: 80px;
margin-right: 80px;
} }
.avatar-text { .avatar-text {
margin-left: 80px;
height: 31px; height: 31px;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
font-size: 20px; font-size: 20px;

View File

@ -124,6 +124,10 @@ const homeworkExpanded = ref(false)
// / // /
const toggleHomework = () => { const toggleHomework = () => {
//
if (!homeworkExpanded.value) {
practiceExpanded.value = false
}
homeworkExpanded.value = !homeworkExpanded.value homeworkExpanded.value = !homeworkExpanded.value
} }
@ -132,6 +136,10 @@ const practiceExpanded = ref(false)
// / // /
const togglePractice = () => { const togglePractice = () => {
//
if (!practiceExpanded.value) {
homeworkExpanded.value = false
}
practiceExpanded.value = !practiceExpanded.value practiceExpanded.value = !practiceExpanded.value
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="file-viewer"> <div class="file-viewer">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<div class="header"> <div class="header-top">
<div class="nav-left"> <div class="nav-left">
<n-button quaternary circle size="large" @click="goBack" class="back-button"> <n-button quaternary circle size="large" @click="goBack" class="back-button">
<template #icon> <template #icon>
@ -630,14 +630,13 @@ onUnmounted(() => {
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.header { .header-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
background: #fff; background: #fff;
z-index: 10;
} }
.nav-left { .nav-left {

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="folder-browser"> <div class="folder-browser">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<div class="header"> <div class="header-top">
<div class="nav-left"> <div class="nav-left">
<n-button quaternary circle size="large" @click="goBack" class="back-button"> <n-button quaternary circle size="large" @click="goBack" class="back-button">
<template #icon> <template #icon>
@ -426,11 +426,6 @@ const findFileById = (files: FileItem[], id: number): FileItem | null => {
// //
const loadFolder = async (folderId: number) => { const loadFolder = async (folderId: number) => {
// //
if (loading.value || (currentFolder.value && currentFolder.value.id === folderId)) {
console.log('🔄 跳过重复加载folderId:', folderId)
return
}
console.log('📂 开始加载文件夹folderId:', folderId) console.log('📂 开始加载文件夹folderId:', folderId)
loading.value = true loading.value = true
@ -814,9 +809,7 @@ const startUpload = async () => {
showUploadModal.value = false showUploadModal.value = false
// //
if (currentFolder.value) { loadFolder(currentFolder.value.id)
loadFolder(currentFolder.value.id)
}
} catch (error) { } catch (error) {
console.error('文件上传失败:', error) console.error('文件上传失败:', error)
@ -874,14 +867,13 @@ watch(
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.header { .header-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
background: #fff; background: #fff;
z-index: 10;
} }
.nav-left { .nav-left {