<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>