<!-- 布局容器，由 header、main 组成 -->
|
<template>
|
<div class="h100 flex-column">
|
<el-card class="yw-layout-card" v-if="type === 'card'" shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<slot name="header"> </slot>
|
</el-card>
|
<slot v-else name="header"> </slot>
|
|
<el-card class="yw-layout-card flex-auto yw-layout-card_main" v-if="type === 'card'" shadow="hover" style="margin-top: 8px">
|
<slot name="main"> </slot>
|
</el-card>
|
<slot v-else name="main"> </slot> <slot> </slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { PropType } from 'vue';
|
|
const props = defineProps({
|
type: {
|
type: String as PropType<'card' | 'default'>,
|
default: 'default',
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.yw-layout-card.el-card {
|
> :deep(.el-card__body) {
|
height: 100%;
|
}
|
}
|
</style>
|
