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