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.
59 lines
1.8 KiB
59 lines
1.8 KiB
<template> |
|
<div class="min-h-full bg-[url('@/assets/images/1.png')] bg-[length:100%_100%] bg-no-repeat"> |
|
<app-header /> |
|
<Back v-if="hidePanel" class="mx-3" name="金融产品设计及数字化营销沙盘系统后台管理系统" :isLogout="true" /> |
|
<app-sidebar v-if="!hideNav" class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300" /> |
|
<div class="main h-[calc(100vh-86px)] transition-margin duration-300 overflow-auto" :class="{ ml: !hideNav }" id="appMain"> |
|
<app-main /> |
|
</div> |
|
<Panel /> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts"> |
|
import { defineComponent, computed } from 'vue'; |
|
import { useRoute } from 'vue-router'; |
|
import Settings from '@/settings'; |
|
import Panel from '@/components/Panel/index.vue'; |
|
import Back from '@/components/Back.vue'; |
|
import { AppSidebar, AppHeader, AppMain } from './components'; |
|
import useResizeHandler from './composables/useResizeHandler'; |
|
|
|
export default defineComponent({ |
|
name: 'Layout', |
|
components: { AppSidebar, AppHeader, AppMain, Panel, Back }, |
|
setup() { |
|
const route = useRoute(); |
|
const isConfig = computed(() => route.path.startsWith('/config')); |
|
// 是否隐藏左侧导航 |
|
const hideNav = computed(() => { |
|
// return Settings.hideNavPath.includes(route.path); |
|
return route.path.startsWith('/finance'); |
|
}); |
|
// 是否隐藏实验面板 |
|
const hidePanel = computed(() => { |
|
return Settings.hidePanelPath.includes(route.path); |
|
}); |
|
|
|
useResizeHandler(); |
|
return { |
|
hideNav, |
|
hidePanel, |
|
isConfig, |
|
}; |
|
}, |
|
}); |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.body { |
|
background: url(../assets/images/1.png) 0 0/100% auto no-repeat; |
|
@apply bg-gray-100; |
|
} |
|
.sidebar { |
|
@apply w-sidebar lg:w-[160px]; |
|
} |
|
.ml { |
|
@apply ml-sidebar lg:ml-[144px]; |
|
} |
|
</style>
|
|
|