fashion-ssr-vue3/components/business/categories/comp/item.vue

<script lang='ts' setup>
import { Condition } from '@/enums/const-enums'

defineProps({
  item: Object as any,
})
const emit = defineEmits(['select'])
</script>

<template>
  <div>
    <div class="pos-relative b-rd-12px bg-#fff shadow-item overflow-hidden">
      <img :src="item.coverImg" :alt="item.coverAlt" srcset="" class="w-100% h-310px  object-cover">
      <div class="p-30px">
        <h3
          class="!mb-10px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
        >
          {{ item.title }}
        </h3>
        <div class="text-16px text-#999 lh-22px line-clamp-2 mb-20px">
          {{ item.subhead }}
        </div>
        <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !h-40px px-24px" @click="$emit('select', item)">
          {{ item.downloadCondition === Condition.REQUEST ? 'Request' : 'Download' }}
          <svgo-arrow-line-r class="w-16px h-16px ml-10px !text-#fff" />
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.shadow-item{
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
</style>