<template>
    <!-- 表格 -->
    <div class="wibox" :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
        <span class="sjbiao"></span>
        <div class="from-top">
            <span style="color: #000;font-size: 19px;font-weight: 600px;">
                <el-icon>
                    <Document />
                </el-icon>
                {{ props.title }}</span>
        </div>
   <div>
      <slot name="center"></slot>
    </div>

    </div>

</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance } from "vue";
const props = defineProps({
    title: {
        default: '',
        type: String
    },
      marginBottom: {
    type: Number,
    default: 0
  },
    backgroundColor: {
    type: String,
    default: '#fff'
  }
});
const emits = defineEmits(["closeDialog"]);
onMounted(() => {
});
function closeDialog() {
    emits('closeDialog')
}

</script>

<style lang="scss" scoped>
.wibox {
    padding: 10px 5px;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #d4d4d4;
    display:flex;
    align-items:center;

    .sjbiao {
        display: inline-block;
        width: 49px;
        background: var(--el-color-primary);
        clip-path: polygon(100% 39%, 61% 117%, 62% 84%, 62% 14%);
        height: 27px;
        position: absolute;
        left: -34px;
        border-radius: 41%;
        top: -10px;
        text-align: left;
    }

}
</style>
