<template>
  <view :class="['my-card', customClass]" :style="cardStyle">
    <!-- 标题 -->
    <view v-if="title" class="my-card__header">
      {{ title }}
    </view>

    <!-- 内容 -->
    <view class="my-card__body">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mycard',
  props: {
    title: {
      type: String,
      default: ''
    },
    margin: {           // 外边距
      type: String,
      default: '20rpx'
    },
    borderRadius: {     // 圆角
      type: String,
      default: '12rpx'
    },
    shadow: {           // 是否显示阴影
      type: Boolean,
      default: true
    },
    customClass: {      // 自定义类名
      type: String,
      default: ''
    }
  },
  computed: {
    cardStyle() {
      return {
        margin: this.margin,
        borderRadius: this.borderRadius,
        boxShadow: this.shadow ? '0 4rpx 10rpx rgba(0,0,0,0.05)' : 'none',
        backgroundColor: '#fff',
        overflow: 'hidden'
      }
    }
  }
}
</script>

<style scoped>
.my-card__header {
  padding: 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #f0f0f0;
}

.my-card__body {
  padding: 20rpx;
}
</style>