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

<script lang='ts' setup>
import { useCommonStore } from '@/stores/modules/common'

defineProps({
  item: Object as any,
})
const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()

async function clickLoginAndDownload(item: any) {
  try {
    const commonStore = useCommonStore()
    commonStore.setDownloadCatalog(item)
    const { status } = await openLoginAndDownloadModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div>
    <div class="pos-relative bg-#fff shadow-item flex b-rd-20px overflow-hidden p-40px items-center">
      <img
        :src="item.coverImg"
        :alt="item.coverAlt" 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.subhead }}
        </div>
        <div class="flex items-center">
          <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
            <NuxtLink :to="`/blog/${item.blogSlug}`">
              Learn More
            </NuxtLink>
          </el-button>
          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px" @click="clickLoginAndDownload(item)">
            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>