<template>
  <el-col :xs="24" :sm="12" :md="6">
    <el-card class="product-card" shadow="hover">
      <img :src="product.img" class="product-img" />
      <h3>{{ product.name }}</h3>
      <p class="desc">{{ product.desc }}</p>
      <p class="price">￥{{ product.price }}</p>
      <slot name="footer"></slot>
    </el-card>
  </el-col>
</template>

<script setup>
defineProps(['product'])
</script>

<style scoped>
.product-card {
  border-radius: 18px;
  transition: box-shadow 0.3s, transform 0.3s;
  margin-bottom: 32px;
  text-align: center;
  box-shadow: 0 2px 12px #e0e0e0;
}
.product-card:hover {
  box-shadow: 0 8px 32px #b0c4de80;
  transform: translateY(-6px) scale(1.03);
}
.product-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}
.price {
  color: #e67e22;
  font-weight: bold;
  font-size: 20px;
}
.desc {
  color: #888;
  min-height: 32px;
}
</style> 