<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>