46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="content-container">
|
||
|
|
<div class="content-container__header flex align-center" v-if="slots.header || header">
|
||
|
|
<back-button :to="backTo" v-if="showBack"></back-button>
|
||
|
|
<h3>{{ header }}</h3>
|
||
|
|
<slot name="header"> </slot>
|
||
|
|
</div>
|
||
|
|
<el-scrollbar>
|
||
|
|
<div class="content-container__main main-calc-height">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, useSlots } from 'vue'
|
||
|
|
defineOptions({ name: 'LayoutContainer' })
|
||
|
|
const slots = useSlots()
|
||
|
|
const props = defineProps({
|
||
|
|
header: String,
|
||
|
|
backTo: String
|
||
|
|
})
|
||
|
|
const showBack = computed(() => {
|
||
|
|
const { backTo } = props
|
||
|
|
return backTo
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scope>
|
||
|
|
.content-container {
|
||
|
|
transition: 0.3s;
|
||
|
|
padding: 0 var(--app-view-padding) var(--app-view-padding);
|
||
|
|
.content-container__header {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 16px 0;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.content-container__main {
|
||
|
|
background-color: var(--app-view-bg-color);
|
||
|
|
border-radius: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|