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.
86 lines
1.7 KiB
86 lines
1.7 KiB
<script lang="ts" setup>
|
|
import { computed, unref } from 'vue'
|
|
import { Logo } from './components/Logo'
|
|
import { MainView } from './components/Main'
|
|
import { AsideMenu } from './components/Menu'
|
|
import { PageHeader } from './components/Header'
|
|
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
|
|
|
|
const {
|
|
menuSetting,
|
|
} = useProjectSetting()
|
|
|
|
const leftMenuWidth = computed(() => {
|
|
const { minMenuWidth } = unref(menuSetting)
|
|
return minMenuWidth
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout">
|
|
<!-- 左侧sider -->
|
|
<div class="layout-sider" :style="{ width: `${leftMenuWidth}px` }">
|
|
<Logo />
|
|
<AsideMenu />
|
|
</div>
|
|
|
|
<!-- 右侧内容区域 -->
|
|
<div class="layout-main">
|
|
<div class="layout-main-header">
|
|
<PageHeader />
|
|
</div>
|
|
|
|
<div class="layout-main-content">
|
|
<MainView />
|
|
</div>
|
|
</div>
|
|
<div />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: auto;
|
|
background-image: url('../assets/images/bg.png');
|
|
background-size: cover;
|
|
// height: 1100px;
|
|
// width: 1440px;
|
|
height: 100%;
|
|
max-height:1100px;
|
|
overflow: hidden;
|
|
.layout-sider {
|
|
min-height: 100vh;
|
|
border-right: 1px solid #dae4f3;
|
|
}
|
|
|
|
.layout-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
border-left: 1px solid #ffffff;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
&-header {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
z-index: 11;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex: auto;
|
|
height: 100%;
|
|
padding: 0px 16px 24px 16px;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|