<!--
 ****--@date 2024-06-07 09:48:38
 ****--@author yizhiyang
 ****--@description base card
-->
<template>
  <view class="base-card" :style="[cardStyle]">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'base-card',
  props: {
    padding: {
      type: String,
      default: '32rpx',
    },
    radius: {
      type: String,
      default: '16rpx',
    },
    shadow: {
      type: String,
      default: '',
    },
    marginBottom: {
      type: String,
      default: '',
    },
  },
  computed: {
    cardStyle() {
      const { padding, radius, shadow, marginBottom } = this;
      return {
        padding,
        borderRadius: radius,
        boxShadow: shadow,
        marginBottom,
      };
    },
  },
};
</script>

<style lang="scss">
.base-card {
  background-color: #fff;
}
</style>