fashion-ssr-vue3/components/common/catalogs/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 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 custom-title-font">
        {{ item.title }}
      </h2>
      <div class="text-#666 lh-24px line-clamp-2">
        {{ item.subhead }}
      </div>
    </div>
    <img
      :src="item.coverImg"
      :alt="item.coverAlt"
      srcset=""
      class="w-100% b-rd-tl-10px  b-rd-tr-10px object-cover"
    >
    <div class="pos-absolute bottom-20px left-20px cursor-pointer text-#fff bg-#fff/50 b-1px  b-transparent b-solid h-40px pr-8px pl-30px hover:b-1px hover:b-#fff hover:b-solid backdrop-blur-20px text-14px fw-bold  b-rd-400px flex items-center justify-center" @click="clickLoginAndDownload(item)">
      <div>Download</div>
      <div class="p-5px b-rd-50% bg-#fff ml-20px">
        <svgo-download class="w-14px h-14px text-#333333" />
      </div>
    </div>
  </div>
</template>

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