<template>
  <el-card
    class="box-card"
    v-bind="attrs"
  >
    <template #header>
      <div class="card-header">
        <slot name="header" v-if="slots.header"></slot>
        <span v-else>{{ attrs.header }}</span>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<script setup>
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
</script>

<style lang="scss" scoped>
.box-card {
  .card-header {
    font-weight: 700;
    font-size: 16px;
  }
}
</style>