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

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

<template>
  <div>
    <div class="custom-main mx-auto  overflow-hidden pos-relative">
      <h2 class="!mb-20px text-30px fw-800 text-#333 line-clamp-1">
        {{ item.contentTitle }}
      </h2>
      <img
        :src="item.bannerImg"
        alt=""
        srcset=""
        class="w-260px h-260px object-cover"
      >
    </div>
  </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 50px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
}
</style>