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

<script lang='ts' setup>
defineProps({
  item: Object as any,
})
</script>

<template>
  <div>
    <div class="pos-relative">
      <nuxt-link :to="{ name: 'categories-slug', params: { slug: item?.slug } }">
        <div class="px-30px py-10px bg-#F3F4FB shadow-item b-rd-6px hover:bg-#EAE5FA">
          <img :src="item.bannerImg" srcset="" class="w-100% h-240px  object-contain">
        </div>
        <h3
          class="!mb-15px !mt-30px 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">
          {{ item.subhead }}
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

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