155 lines
3.1 KiB
Vue
155 lines
3.1 KiB
Vue
<template>
|
||
<el-container class="wh-full main-container">
|
||
<el-header>
|
||
<NavbarRight2 v-if="isNav2" />
|
||
<NavbarRight v-else />
|
||
</el-header>
|
||
<el-container class="center-container">
|
||
<el-aside width="200px">
|
||
<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";
|
||
import NavbarRight2 from './components/NavBar/components/NavbarRight2.vue'
|
||
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);
|
||
let isNav2 = ref(false)
|
||
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();
|
||
}
|
||
});
|
||
|
||
|
||
onMounted(() => {
|
||
isNav2.value = location.href.indexOf("/home/index2") >= 0
|
||
});
|
||
|
||
const route = useRoute();
|
||
watch(route, (a, b, c) => {
|
||
isNav2.value = a.path == '/home/index2';
|
||
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: #EEF7FE;
|
||
}
|
||
|
||
.center-container {
|
||
padding-top: 12px;
|
||
|
||
.el-aside {
|
||
background-color: #fff;
|
||
|
||
.el-scrollbar {
|
||
padding: 12px;
|
||
}
|
||
|
||
.el-menu {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.el-main {
|
||
padding: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
html.dark {
|
||
.main-container {
|
||
background-color: #1F263D;
|
||
.router-link-active{
|
||
background-color: #fff;
|
||
.el-menu-item {
|
||
background-color: #ffff !important;
|
||
span.ml-1{
|
||
font-weight: bold;
|
||
color: #4F9EFA;
|
||
}
|
||
}
|
||
svg{
|
||
fill:#4F9EFA;
|
||
}
|
||
}
|
||
.el-menu-item {
|
||
background-color: #1F263D;
|
||
&.is-active {
|
||
background-color: #fff;
|
||
span.ml-1{
|
||
font-weight: bold;
|
||
color: #4F9EFA;
|
||
}
|
||
}
|
||
}
|
||
.el-sub-menu.is-active{
|
||
.el-sub-menu__title{
|
||
background-color: #1F263D;
|
||
}
|
||
}
|
||
|
||
.el-header {
|
||
background-color: #1F263D;
|
||
}
|
||
|
||
.center-container {
|
||
.el-aside {
|
||
background-color: #1F263D;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.main-container {
|
||
position: relative;
|
||
min-height: 100%;
|
||
transition: margin-left 0.28s;
|
||
}
|
||
</style>
|