fashion-ssr-vue3/components/business/trends/comp/item.vue

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

<template>
  <div>
    <div class="pos-relative bg-#fff shadow-item flex b-rd-20px overflow-hidden p-40px items-center">
      <img :src="item.img" alt="" srcset="" class="w-500px h-380px b-rd-10px object-cover mr-50px">
      <div class="flex-1 text-left">
        <h3
          class="!mb-20px fw-800 text-24px text-#333 line-clamp-2"
        >
          {{ item.title }}
        </h3>
        <div class="text-16px text-#999 lh-24px mb-60px">
          {{ item.subTitle }}
        </div>
        <div class="flex items-center">
          <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
            Learn More
          </el-button>
          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px">
            Download Catalog
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

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