Mamalizz
143 lines
5.3 KiB
Vue
143 lines
5.3 KiB
Vue
<script setup lang="ts">
|
|
// state
|
|
|
|
const counter = ref(1);
|
|
|
|
// methods
|
|
|
|
const handleDeleteFromCart = () => {};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50"
|
|
>
|
|
<div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
|
|
<div
|
|
class="size-[10rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
|
|
>
|
|
<img
|
|
src="/img/product-1.jpg"
|
|
class="object-cover size-full"
|
|
alt="product"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col w-full gap-5">
|
|
<span class="font-semibold typo-sub-h-md text-slate-600">
|
|
موبایل
|
|
</span>
|
|
|
|
<span class="font-semibold typo-sub-h-xl text-black">
|
|
فشارسنج بازویی امرن Omron M3
|
|
</span>
|
|
|
|
<div class="items-center justify-between hidden w-full lg:flex">
|
|
<div class="flex items-center">
|
|
<button
|
|
@click="counter++"
|
|
class="border size-10 flex-center rounded-100 border-slate-300"
|
|
>
|
|
<Icon name="bi:plus" class="**:stroke-slate-800" />
|
|
</button>
|
|
|
|
<div class="size-10 flex-center">{{ counter }}</div>
|
|
|
|
<button
|
|
@click="
|
|
counter > 1 ? counter-- : handleDeleteFromCart
|
|
"
|
|
class="border size-10 flex-center rounded-100 border-slate-300"
|
|
>
|
|
<Icon
|
|
v-if="counter == 1"
|
|
name="bi:trash"
|
|
class="**:fill-red-700"
|
|
/>
|
|
<Icon
|
|
v-else
|
|
name="bi:dash"
|
|
class="**:stroke-slate-800"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="typo-p-lg text-black font-semibold">
|
|
۲,۸۹۱,۰۰۰ تومان
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between w-full lg:hidden">
|
|
<div class="flex items-center">
|
|
<button
|
|
class="border size-10 flex-center rounded-100 border-slate-400"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
class="stroke-slate-800"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3.33334 8H12.6667"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<path
|
|
d="M8 3.33325V12.6666"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="size-10 text-[1.125rem] flex-center">1</div>
|
|
|
|
<button
|
|
class="border size-10 flex-center rounded-100 border-slate-400"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
class="stroke-status-error-primary"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M2 4H14"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<path
|
|
d="M12.6667 4V13.3333C12.6667 14 12 14.6667 11.3333 14.6667H4.66668C4.00001 14.6667 3.33334 14 3.33334 13.3333V4"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<path
|
|
d="M5.33334 3.99992V2.66659C5.33334 1.99992 6.00001 1.33325 6.66668 1.33325H9.33334C10 1.33325 10.6667 1.99992 10.6667 2.66659V3.99992"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="text-[1.125rem] text-slate-900 font-semibold">
|
|
۲,۸۹۱,۰۰۰ تومان
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|