fashion-ssr-vue3/components/common/category/item.vue

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

<template>
  <div>
    <NuxtLink :to="`/categories/${item.slug}`">
      <div class="custom-main mx-auto  overflow-hidden pos-relative">
        <h2 class="!mb-16px text-30px lh-32px fw-800 text-#333">
          {{ item.contentTitle }}
        </h2>
        <img
          :src="item.bannerImg"
          alt=""
          srcset=""
          class="w-260px h-260px object-cover mx-auto"
        >
      </div>
    </NuxtLink>
  </div>
</template>

<style lang="less" scoped>
.custom-main{
  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
  background-size: cover;
  width: 360px;
  height: 360px;
  border-radius: 10px;
  padding: 20px 0px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
}
</style>