<template>
  <view class="card" :class="{ 'card--shadow': shadow, 'card--border': border }">
    <view class="card__header" v-if="title || $slots.header">
      <slot name="header">
        <view class="card__title">{{ title }}</view>
      </slot>
    </view>
    <view class="card__body">
      <slot></slot>
    </view>
    <view class="card__footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup>
// 定义props
defineProps({
  // 卡片标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示阴影
  shadow: {
    type: Boolean,
    default: false
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  
  // 阴影样式
  &--shadow {
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
  
  // 边框样式
  &--border {
    border: 1rpx solid #f0f0f0;
  }
  
  &__header {
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  &__title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  &__body {
    padding: 32rpx;
  }
  
  &__footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style>