49 lines
835 B
Vue
49 lines
835 B
Vue
<template>
|
|
<div class="page-layout">
|
|
<div class="page-layout-left">
|
|
<page-menu :menus="menus" />
|
|
</div>
|
|
<div class="page-layout-main">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup name="page-layout">
|
|
const props = defineProps({
|
|
menus: { type: Array, default: () => [] },
|
|
showMenu: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-layout {
|
|
width: $width-main;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
min-height: calc(100vh - 230px);
|
|
@include flex-row();
|
|
|
|
&-left,
|
|
&-main {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
&-left {
|
|
width: 240px;
|
|
margin-right: 16px;
|
|
background: $color-fff;
|
|
}
|
|
&-main {
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|