<template>
|
<div class="layout-container">
|
<div class="layout-container-header">
|
<slot name="header"></slot>
|
</div>
|
<div class="layout-container-body">
|
<div class="layout-absolute">
|
<div class="layout-content-container">
|
<div class="layout-container-left">
|
<slot name="left"></slot>
|
</div>
|
<div class="layout-content-container-body">
|
<div class="layout-absolute">
|
<slot></slot>
|
</div>
|
</div>
|
<div class="layout-container-right">
|
<slot name="right"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layout-container-footer">
|
<slot name="footer"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "LayoutContainer"
|
}
|
</script>
|
|
<style scoped>
|
.layout-container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
.layout-container-body,
|
.layout-content-container-body {
|
position: relative;
|
flex: 1;
|
}
|
.layout-absolute {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
box-sizing: border-box;
|
}
|
.layout-content-container {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
}
|
</style>
|
