96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<template>
|
||
<el-container class="wh-full main-container">
|
||
<el-header><NavbarRight /></el-header>
|
||
<el-container class="center-container">
|
||
<el-aside width="240px">
|
||
<Sidebar class="sidebar-container" />
|
||
</el-aside>
|
||
<el-main>
|
||
<AppMain />
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { useAppStore, usePermissionStore } from "@/store";
|
||
import { DeviceEnum } from "@/enums/DeviceEnum";
|
||
const appStore = useAppStore();
|
||
const permissionStore = usePermissionStore();
|
||
const width = useWindowSize().width;
|
||
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
|
||
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
||
const isOpenSidebar = computed(() => appStore.sidebar.opened);
|
||
|
||
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
|
||
|
||
watch(
|
||
() => activeTopMenuPath.value,
|
||
(newVal) => {
|
||
permissionStore.setMixLeftMenus(newVal);
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true,
|
||
}
|
||
);
|
||
|
||
watchEffect(() => {
|
||
appStore.toggleDevice(
|
||
width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP
|
||
);
|
||
if (width.value >= WIDTH_DESKTOP) {
|
||
appStore.openSideBar();
|
||
} else {
|
||
appStore.closeSideBar();
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
const route = useRoute();
|
||
watch(route, () => {
|
||
if (isMobile.value && isOpenSidebar.value) {
|
||
appStore.closeSideBar();
|
||
}
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.main-container{
|
||
background-color: #F3F8FB;
|
||
.el-menu-item {
|
||
&.is-active{
|
||
background-color: #EEF3FB;
|
||
border-right:solid 3px var(--el-color-primary);
|
||
}
|
||
}
|
||
.el-header{
|
||
background-color: #fff;
|
||
}
|
||
.center-container{
|
||
padding-top:12px;
|
||
.el-aside{
|
||
background-color: #fff;
|
||
.el-scrollbar{
|
||
padding:12px;
|
||
}
|
||
.el-menu{
|
||
border-right:none;
|
||
}
|
||
}
|
||
.el-main{
|
||
padding:0px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
.main-container {
|
||
position: relative;
|
||
min-height: 100%;
|
||
transition: margin-left 0.28s;
|
||
}
|
||
</style>
|