122 lines
2.2 KiB
Vue
122 lines
2.2 KiB
Vue
<template>
|
|
<el-container class="layout">
|
|
<el-aside
|
|
class="aside"
|
|
:class="uiStore.asideShow ? 'aside-show' : 'el-aside-hide'">
|
|
<Aside />
|
|
</el-aside>
|
|
<div
|
|
:class="(uiStore.asideShow && isMobile)? 'overlay-show':'overlay-hide'"
|
|
@click="uiStore.asideShow = false"
|
|
></div>
|
|
|
|
<el-container class="main-container">
|
|
<el-main>
|
|
<el-header>
|
|
<Header />
|
|
</el-header>
|
|
<Main />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Aside from '@/layout/aside/index.vue'
|
|
import Header from '@/layout/header/index.vue'
|
|
import Main from '@/layout/main/index.vue'
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
import {useUiStore} from "@/store/ui.js";
|
|
|
|
const uiStore = useUiStore();
|
|
const isMobile = ref(window.innerWidth < 768)
|
|
|
|
|
|
const handleResize = () => {
|
|
isMobile.value = window.innerWidth < 768
|
|
uiStore.asideShow = window.innerWidth >= 992;
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', handleResize)
|
|
handleResize()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', handleResize)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-aside-hide {
|
|
position: fixed;
|
|
left: 0;
|
|
height: 100%;
|
|
z-index: 100;
|
|
transform: translateX(-100%);
|
|
transition: all 100ms ease;
|
|
}
|
|
|
|
.aside-show {
|
|
transform: translateX(0);
|
|
transition: all 100ms ease;
|
|
z-index: 101;
|
|
@media (max-width: 767px) {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 101;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.el-aside {
|
|
width: auto;
|
|
transition: all 100ms ease;
|
|
}
|
|
|
|
.layout {
|
|
height: 100%;
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-container {
|
|
min-height: 100%;
|
|
background: #FFFFFF;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.el-main {
|
|
padding: 0;
|
|
}
|
|
|
|
.el-header {
|
|
background: #FFFFFF;
|
|
border-bottom: solid 1px var(--el-menu-border-color);
|
|
padding: 0 0 0 0;
|
|
}
|
|
|
|
.overlay-show {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
z-index: 99;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.overlay-hide {
|
|
display: flex;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
</style>
|