You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
43 lines
1.2 KiB
<template> |
|
<div class="min-h-full bg-[url('@/assets/images/1.png')] bg-[length:100%_100%] bg-no-repeat"> |
|
<app-header /> |
|
<app-sidebar v-if="!hideNav" |
|
class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" /> |
|
<div class="main min-h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto" |
|
:class="{ 'md:ml-sidebar': !hideNav }"> |
|
<app-main /> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts"> |
|
import { ref, defineComponent, computed, watch } from 'vue'; |
|
import { useRoute } from 'vue-router'; |
|
import Setting from '@/settings'; |
|
import { AppSidebar, AppHeader, AppMain } from './components'; |
|
import useResizeHandler from './composables/useResizeHandler'; |
|
|
|
export default defineComponent({ |
|
name: 'Layout', |
|
components: { AppSidebar, AppHeader, AppMain }, |
|
setup() { |
|
const route = useRoute(); |
|
// 是否隐藏左侧导航 |
|
const hideNav = computed(() => { |
|
return Setting.hideNavPath.includes(route.path); |
|
}); |
|
|
|
useResizeHandler(); |
|
return { |
|
hideNav, |
|
}; |
|
}, |
|
}); |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.body { |
|
background: url(../assets/images/1.png) 0 0/100% auto no-repeat; |
|
@apply bg-gray-100; |
|
} |
|
</style>
|
|
|