style: 调整layout布局

This commit is contained in:
张传龙 2022-04-18 22:01:30 +08:00
parent 238bceb500
commit 967ae1c483

View File

@ -1,26 +1,23 @@
<template> <template>
<div class="layout"> <n-layout has-sider style="height: 100%">
<n-layout has-sider position="absolute"> <n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false">
<n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false"> <SideBar />
<SideBar /> </n-layout-sider>
</n-layout-sider> <n-layout>
<n-layout> <n-layout-header :style="{ height: useTheme.header.height + 'px' }">
<n-layout-header :style="{ height: useTheme.header.height + 'px' }" style="border-left: none"> <AppHeader />
<AppHeader /> </n-layout-header>
</n-layout-header>
<n-layout <n-layout
position="absolute" style="background-color: #f5f6fb"
style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`"
:style="{ top: useTheme.header.height + 'px' }" :native-scrollbar="false"
:native-scrollbar="false" >
> <AppTags v-if="useTheme.tags.visible" />
<AppTags v-if="useTheme.tags.visible" /> <AppMain />
<AppMain />
</n-layout>
</n-layout> </n-layout>
</n-layout> </n-layout>
</div> </n-layout>
</template> </template>
<script setup> <script setup>