<template>
  <div class="custom-products-card">
    <img :src="img" class="swiper_image" />
    <div class="silde-box-footer">
      <div class="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  img: string;
  title: string;
  content: string;
}>();
// 产品页card-轮播图card共用
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-products-card {
  width: 339px;
  height: 240px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  .silde-box-footer {
    background-color: #302e2f;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    color: #ffffff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    .title {
      font-size: @font-size-20;
      font-style: normal;
      font-weight: 700;
    }
    .content {
      font-style: normal;
      font-weight: 300;
      font-size: @font-size-14;
    }
  }
  .swiper_image {
    height: 87px;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
}
</style>
