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

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

<template>
  <div class="custom-main mx-auto  overflow-hidden pos-relative">
    <svgo-star class="pos-absolute top-20px right-20px w-20px h-20px" />
    <div class="p-20px pb-30px">
      <h2 class="!mb-15px w-250px text-24px fw-800 text-#333 line-clamp-2">
        {{ item.brandName }}
      </h2>
      <div class="text-#666 lh-24px ">
        {{ item.brandName }}
      </div>
    </div>
    <img
      :src="item.thumbnail || item.masterImage"
      alt=""
      srcset=""
      class="w-100% b-rd-tl-10px h-100% b-rd-tr-10px object-cover"
    >
  </div>
</template>

<style lang="less" scoped>
.custom-main{
  width: 386px;
  height: 468px;
  border-radius: 10px;
//   background: #fff;
}
</style>