40 lines
1.7 KiB
Vue
40 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
class="w-[150px] sm:w-[260px] md:w-[330px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-[50px]">
|
|
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
|
|
class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px]" />
|
|
<div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
|
|
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
|
|
<h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
|
|
{{ props.product?.name }}
|
|
</h3>
|
|
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
|
|
{{ props.product?.tax_name }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
|
{{ props.product?.formatted_price }}
|
|
</p>
|
|
<button
|
|
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
|
|
<UButton icon="i-lucide-shopping-cart" variant="ghost"
|
|
class="text-xl sm:text-[25px] md:text-2xl text-bg-light" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|