54 lines
2.3 KiB
Vue
54 lines
2.3 KiB
Vue
<template>
|
|
<NuxtLink>
|
|
<li class="bg-block rounded-2xl min-h-[420px] w-[330px] list-none overflow-hidden p-5">
|
|
<article class="group h-full">
|
|
<div class="h-full flex flex-col">
|
|
<div class="h-[205px]">
|
|
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`"
|
|
:alt="props.product?.description" class="h-full object-contain w-auto block mx-auto">
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start text-start mt-[50px] justify-between h-full">
|
|
<div class="space-y-[15px]">
|
|
<h4 class="font-bold">{{ props.product?.name }}</h4>
|
|
<p class="text-sm font-normal">{{ props.product?.tax_name }}</p>
|
|
</div>
|
|
<div class="flex items-center justify-between w-full">
|
|
<p class="font-bold text-accent-green-light text-sm sm:text-2xl">{{ props.product?.formatted_price }}</p>
|
|
<div class="w-12 h-12 bg-button flex items-center justify-center rounded-[10px]">
|
|
<i class="uil uil-shopping-cart text-[31px] cursor-pointer text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div v-if="!props.product?.is_sale_active"
|
|
class="absolute top-0 flex items-center justify-center w-full h-full px-4 bg-black bg-opacity-90 cursor-progress">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
|
|
<path fill="#ffcc00" d="M5.7 22H42.5V26H5.7z" transform="rotate(-45.001 24.036 24.037)"></path>
|
|
<path fill="#ffcc00"
|
|
d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,40c-8.8,0-16-7.2-16-16S15.2,8,24,8 s16,7.2,16,16S32.8,40,24,40z">
|
|
</path>
|
|
</svg>
|
|
<span class="font-bold text-center uppercase text-yellow">
|
|
{{ $t("FrontTranslations", "not available") }}
|
|
</span>
|
|
</div>
|
|
</div> -->
|
|
</article>
|
|
</li>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import imgUrl from "~/utils/imgUrl";
|
|
const props = defineProps({
|
|
product: Object,
|
|
});
|
|
|
|
// const addToCartAndPreventNavigation = (event: any) => {
|
|
// event.preventDefault();
|
|
// useCartStore().addToCart(props.product);
|
|
// };
|
|
</script>
|