50 lines
871 B
Vue
50 lines
871 B
Vue
<!-- src/components/Layout.vue -->
|
|
<template>
|
|
<div class="layout">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar-container custom-sidebar">
|
|
<Sidebar />
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="main-content">
|
|
<div class="content">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Sidebar from './sidebar.vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-container {
|
|
width: 240px;
|
|
flex-shrink: 0;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
background: #fff;
|
|
min-height: calc(100vh - 40px);
|
|
}
|
|
</style> |