<!-- src/components/LYcom/Lcard/index.vue -->
<template>
  <div class="l-card" :style="{ height: cardHeight }">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 定义组件props
interface Props {
  height?: string | number
}

const props = withDefaults(defineProps<Props>(), {
  height: 'auto'
})

// 计算卡片高度
const cardHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  }
  return props.height
})
</script>

<style scoped>
.l-card {
  width: 100%;
  min-height: 100px;
  border-radius: 8px;
  border: 1px solid #DDE4ED;
  background-color: #fff;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
</style>