danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create sliders with vue3-carousel package

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-03 14:19:28 +03:30
parent aa38f8e7b4
commit 10a012ec8e
24 changed files with 14016 additions and 13809 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/Catalogs.vue
+155 -155
View File
@@ -1,156 +1,156 @@
<template>
<div class="flex justify-center">
<div class="w-[81%] lg:w-[52.96%] my-[8vw] grid grid-cols-1 lg:grid-cols-3 gap-6">
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
</div>
</div>
<template>
<div class="flex justify-center">
<div class="w-[81%] lg:w-[52.96%] my-[8vw] grid grid-cols-1 lg:grid-cols-3 gap-6">
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
<div
class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
>
<div class="flex flex-col items-center">
<img
src="/public/images/catalog1.jpg"
alt=""
class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
/>
<p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
<p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
</div>
<div class="flex flex-col items-center !m-0">
<p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw] flex items-center text-[#A62186]">
<svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
دانلود کاتالوگ</p>
<p class="
mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
<img
src="/public/images/catalog1.jpg"
alt=""
class="
mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw]
rounded-full"
/>
</div>
</div>
</div>
</div>
</template>