<template>
    <div class="wrap">
        <div class="header">
            <slot name="header" />
        </div>
        <div :class="`main ${needPadding ? '' : 'noPadding'}`">
            <slot name="main" />
        </div>
    </div>
</template>

<script>
export default {
    name: "WlPic",
    props: {
        needPadding: {
            type: Boolean,
            default: false,
        },
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    height: 100%;
    background-color: rgb(247, 248, 250);
    @extend %flex-direction-column;

    .main {
        flex: 1;
        padding: 0 j(15);
        @extend %overflow-auto;

        &.noPadding {
            padding: 0;
        }
    }
}
</style>
