marzban-dev
63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import Tag from "~/components/ui/Tag.vue";
|
|
import Rate from "~/components/ui/Rate.vue";
|
|
import ColorCircle from "~/components/ui/ColorCircle.vue";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
brand: string;
|
|
title: string;
|
|
colors: string[];
|
|
price: number;
|
|
picture: string;
|
|
tag?: string;
|
|
rate?: number;
|
|
}
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative h-[500px] w-[400px] rounded-2xl bg-black/10 overflow-hidden p-6">
|
|
<img
|
|
src="~/assets/img/product-2.jpg"
|
|
class="size-full object-cover absolute inset-0"
|
|
alt="product-background"
|
|
/>
|
|
<div class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0">
|
|
<Rate v-if="rate">
|
|
{{ rate }}
|
|
</Rate>
|
|
<Tag v-if="tag">
|
|
{{ tag }}
|
|
</Tag>
|
|
</div>
|
|
<div class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center">
|
|
<span class="typo-p-md">
|
|
${{ price }}
|
|
</span>
|
|
<div class="flex flex-col gap-2 items-end">
|
|
<span class="typo-p-md ">
|
|
{{ brand }}
|
|
</span>
|
|
<span class="typo-sub-h-md">
|
|
{{ title }}
|
|
</span>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<ColorCircle
|
|
v-for="color in colors"
|
|
:key="color"
|
|
:style="{backgroundColor: color}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |