1
0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-12-28 12:10:20 +08:00

style: use unocss rewrite css

This commit is contained in:
张传龙
2022-07-14 18:05:47 +08:00
parent d10b8f0e96
commit 5856f601fa
16 changed files with 51 additions and 93 deletions

View File

@@ -1,27 +1,29 @@
<template>
<n-layout has-sider style="height: 100%">
<n-layout has-sider h-full>
<n-layout-sider
bordered
collapse-mode="width"
:collapsed-width="64"
:width="220"
:native-scrollbar="false"
:collapsed="appStore.collapsed">
:collapsed="appStore.collapsed"
>
<SideBar />
</n-layout-sider>
<n-layout>
<n-layout-header :style="{ height: useTheme.header.height + 'px' }">
<n-layout-header bg-white border-b bc-eee :style="`height: ${useTheme.header.height ?? 60}px`">
<AppHeader />
</n-layout-header>
<n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
<n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`">
<AppTags v-if="useTheme.tags.visible" />
<AppMain
class="cur-scroll border-t bc-eee"
:style="{
height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`,
height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`,
overflow: 'auto',
}" />
}"
/>
</n-layout>
</n-layout>
</n-layout>
@@ -38,11 +40,3 @@ import { useAppStore } from '@/store/modules/app'
const useTheme = useThemeStore()
const appStore = useAppStore()
</script>
<style lang="scss" scoped>
.n-layout-header {
height: 60px;
background-color: #fff;
border-bottom: 1px solid #eee;
}
</style>