You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.3 KiB
60 lines
1.3 KiB
<template>
|
|
<div class="app-container">
|
|
<!-- 引入侧边栏组件 -->
|
|
<Menu
|
|
:initial-active="0"
|
|
@menu-click="handleSidebarClick"
|
|
/>
|
|
|
|
<!-- 主内容区域 -->
|
|
<div class="main-content">
|
|
<h1 class="text-2xl font-bold mb-4">首页</h1>
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<p>欢迎使用面向疾病预测的知识图谱应用系统</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Menu from '../components/Menu.vue';
|
|
|
|
// 处理侧边栏菜单点击
|
|
const handleSidebarClick = (menuItem) => {
|
|
console.log('点击了菜单项:', menuItem);
|
|
// 这里可以添加路由跳转或其他逻辑
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 确保左侧导航栏完全固定 */
|
|
.app-container > :first-child {
|
|
position: fixed;
|
|
height: 100vh;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 为右侧内容添加左边距，避免被固定导航栏遮挡 */
|
|
.main-content {
|
|
margin-left: 240px; /* 与Menu.vue中的sidebar-container宽度相同 */
|
|
transition: margin-left 0.3s ease;
|
|
}
|
|
|
|
/* 当菜单折叠时调整内容区域 */
|
|
.app-container:has(.sidebar-container.collapsed) .main-content {
|
|
margin-left: 60px;
|
|
}
|
|
</style>
|