<template>
    <section
        class="base-container"
        :style="`height: calc(100vh - ${hideTabs ? 48 : 81}px)`"
    >
        <slot></slot>
    </section>
</template>

<script setup>
import { computed } from 'vue';
import { useGlobal } from '@pureadmin/utils';
const { $storage } = useGlobal();

const hideTabs = computed(() => {
    return $storage?.configure.hideTabs;
});
</script>

<style lang="scss">
.base-container {
    overflow: hidden;
    display: flex;
    // flex: 1; 因为base-container的父元素高度不固定，所以自身的flex不能设置1，必须设置具体的高度数值，否则内部子元素的table不能自身内部滚动
    flex-direction: column;
    padding: 10px;
    // height: calc(100vh - 81px); 这里由hidetabs来动态决定高度
}
</style>
