vue自封组件 浅色卡片容器

//需要标题
<mation-card :is-header="true">
  <div slot="x_header">{{header}}</div>
</mation-card>
//不需要标题（图二）
<mation-card></mation-card>

<template>
  <div class="xx_card" :style="{height:height}">
    <div class="xx_card_header" v-if="isHeader">
      <slot name="x_header">{{ header }}</slot>
    </div>
    <div class="x_body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MationCard",
  props: {
    isHeader: Boolean,
    header: {},
    bodyStyle: {},
    shadow: {
      type: String
    },
    height: {
      type: String,
      default: ''
    },
  },
  // mounted(){
  //   alert(this.height)
  // },
}
</script>

<style scoped>
.xx_card{
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #FFFFFF40;
  box-shadow: #d7d7d7 0 0 2px;
}
.xx_card_header {
  min-height: 30px;
  color: #20b2aa;
  border-bottom: 1px solid #20b2aa;
  font-weight: bolder;
  font-size: 18px;
  padding: 3px 10px
}
.x_body{
  padding: 5px 2px;
}
</style>