43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<div class="layout-wrapper">
|
|
<Sidebar class="sidebar-container" />
|
|
|
|
<div class="main-container">
|
|
<AppMain />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Sidebar from './components/Sidebar/index.vue'
|
|
import AppMain from './components/AppMain.vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layout-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%; /* 继承 App.vue 中 app-content 的高度 */
|
|
overflow: hidden; /* 防止最外层出现滚动条 */
|
|
}
|
|
|
|
.sidebar-container {
|
|
width: 180px; /* 固定侧边栏宽度 */
|
|
height: 100%;
|
|
background-color: #304156; /* 侧边栏背景色 */
|
|
flex-shrink: 0; /* 防止被挤压 */
|
|
overflow-y: auto; /* 侧边栏内容过多时允许滚动 */
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main-container {
|
|
flex: 1; /* 自动占满右侧剩余空间 */
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto; /* 关键：页面内容过多时，只在右侧区域滚动 */
|
|
background-color: #f0f2f5; /* 右侧灰色背景，让白色卡片更明显 */
|
|
padding: 10px; /* 给内部页面留出边距 */
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |