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

updated style

Browse Source
This commit is contained in:
Mamalizz
2025-03-18 16:22:19 +03:30
parent 2438eceee6
commit 4fbc131de2
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ServiceHighlights.vue
+23 -14
View File
@@ -13,48 +13,57 @@ const highlights = ref<Highlight[]>([
{
icon: "/img/footer-support.svg",
title: "خدمات مشتری",
description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما"
description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
},
{
icon: "/img/footer-send.svg",
title: "ارسال سریع و رایگان",
description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار"
description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
},
{
icon: "/img/footer-share.svg",
title: "معرفی به دوستان",
description: "ما را به دوستان خود معرفی کنید"
description: "ما را به دوستان خود معرفی کنید",
},
{
icon: "/img/footer-security.svg",
title: "پرداخت امن",
description: "پرداخت شما به‌صورت امن پردازش می‌شود"
}
description: "پرداخت شما به‌صورت امن پردازش می‌شود",
},
]);
</script>
<template>
<section class="w-full border-t-[0.5px] border-slate-200">
<div class="w-full py-[5rem] gap-12 xs:gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4">
<div
class="w-full py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4"
>
<template v-for="(highlight, index) in highlights" :key="index">
<div class="flex flex-col-center gap-[.75rem] px-5">
<img :src="highlight.icon" class="size-[70px] md:size-[90px]" alt="" />
<img
:src="highlight.icon"
class="size-[70px] md:size-[90px]"
alt=""
/>
<div class="w-full flex-col-center gap-[.25rem]">
<span class="typo-sub-h-md text-black text-center">
<span
class="typo-sub-h-sm lg:typo-sub-h-md text-black text-center"
>
{{ highlight.title }}
</span>
<p class="text-slate-500 typo-p-sm mt-1 text-center">
<p
class="text-slate-500 typo-p-xs lg:typo-p-sm mt-1 text-center"
>
{{ highlight.description }}
</p>
</div>
</div>
<!-- <div-->
<!-- class="w-[1px] h-[5rem] bg-slate-200"-->
<!-- v-if="index + 1 != highlights.length"-->
<!-- />-->
<!-- <div-->
<!-- class="w-[1px] h-[5rem] bg-slate-200"-->
<!-- v-if="index + 1 != highlights.length"-->
<!-- />-->
</template>
</div>
</section>