heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed percent icon

Browse Source
This commit is contained in:
Mamalizz
2025-03-13 02:37:51 +03:30
parent 88d9212a95
commit 420e79f6a3
2 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/product/ProductHero.vue
+1 -1
View File
@@ -98,7 +98,7 @@ watch(
v-if="selectedVariant.discount > 0"
class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1"
>
<Icon name="material-symbols:percent" class="size-4" />
<Icon name="bi:percent" class="size-4" />
{{ selectedVariant.discount }}
درصد تخفیف
</div>
frontend/components/product/ProductVariant.vue
+27 -25
View File
@@ -1,36 +1,36 @@
<script lang="ts" setup>
// types
type Props = {
isSelected: boolean;
variantDetail: ProductVariant;
}
};
// props
defineProps<Props>();
</script>
<template>
<div
:class="[
isSelected ? 'border-blue-500' : 'border-slate-300',
variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100'
variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
]"
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
>
<div>
<div
:class="[
isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300',
variantDetail.in_stock > 0 ? '' : '!ring-slate-100 !bg-slate-300-100'
isSelected
? 'ring-blue-500 bg-blue-500'
: 'ring-slate-300 bg-slate-300',
variantDetail.in_stock > 0
? ''
: '!ring-slate-100 !bg-slate-300-100',
]"
class="size-3 mt-2 ring-2 ring-offset-2 rounded-full "
>
</div>
class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
></div>
</div>
<div class="w-full">
<div class="w-full flex justify-between items-center gap-2">
@@ -39,29 +39,32 @@ defineProps<Props>();
</span>
<div
v-if="variantDetail.discount > 0"
:class="variantDetail.in_stock > 0 ? 'bg-blue-500' :'bg-slate-400/60'"
:class="
variantDetail.in_stock > 0
? 'bg-blue-500'
: 'bg-slate-400/60'
"
class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
>
<template v-if="variantDetail.in_stock > 0">
<Icon name="material-symbols:percent" class="size-3.5" />
<Icon name="bi:percent" class="size-3.5" />
<span class="mt-px">
{{ variantDetail.discount }}
</span>
</template>
<span v-else class="mt-px">
اتمام موجودی
</span>
<span v-else class="mt-px"> اتمام موجودی </span>
</div>
</div>
<div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
<!-- <div-->
<!-- class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
<!-- >-->
<!-- <span>رنگ</span>-->
<!-- <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
<!-- </div>-->
<div
class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
>
<!-- <div-->
<!-- class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
<!-- >-->
<!-- <span>رنگ</span>-->
<!-- <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
<!-- </div>-->
<div
v-for="attribute in variantDetail.product_attributes"
@@ -70,8 +73,7 @@ defineProps<Props>();
<span>{{ attribute.attribute_type.name }}</span>
<span>{{ attribute.value }}</span>
</div>
</div>
</div>
</div>
</template>
</template>