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

change content

Browse Source
This commit is contained in:
HAM!DREZA
2024-07-20 18:17:31 +03:30
parent ba0c128832
commit dec2788106
25 changed files with 1191 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/AboutUs.vue
+22 -36
View File
@@ -98,72 +98,58 @@
<div class="mt-[16vw] md:mt-0 panels relative">
<div
class="panel first leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
class="panel first bg-white leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw] mb-[3vw]"
>
<h1
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
class="mt-[5vw] md:mt-[1.3vw] text-[4.11vw] md:text-[1.335vw] ps-4 md:ps-8"
>
لورم ایپسوم
نسل نوین فروشگاه ها
</h1>
<p
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
class="md:h-[10vw] mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
کرد، در این صورت می توان امید داشت.
تاسیس نسل نوین فروشگاه های عرضه محصولات به فضای به متراژ ۱۰۰۰ مترمربع با برند تجاری جوانه با تنوع
بیش از هزار قلم کالا در بخش های تخصصی سبک زندگی ، سوغات ، پک های هدایا ، مارکت غذای سالم، نان
سالم و مشتقات آن
</p>
</div>
<div
class="hidden md:block panel leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:!top-[10]"
class="hidden md:block panel leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:!top-[10]"
>
<h1
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
>
لورم ایپسوم
انواع نان
</h1>
<p
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
class="h-[10vw] mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
کرد، در این صورت می توان امید داشت.
راه اندازی اولین و تنها مجموعه تولیدی در کشور در حوزه انواع نان سنتی تافتون و بربری کامل و سبوس دار ،
مبتکر استفاده از خمیر ترش در محصولات ، انواع فتیر با تنوع بیش از ۱۰ مدل ، انواع نان حجیم و غذای
صبحانه ای سبوس دار ، انواع شیرینی های دیابتی و رژیمی، انواع کیک ، کوکی و شیرینی ها، صبحانه سالم و
انواع میان وعده ها، بسته بندی انواع سوغات استان در پک های vip و اکونومی، انواع آجیل و ... در فضای به
وسعت ۳۰۰ متر مربع با برند تجاری شینان.
</p>
</div>
<div
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
>
<h1
<!-- <h1
class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
>
لورم ایپسوم
</h1>
</h1> -->
<p
class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
class="h-[10vw] mt-[5vw] md:mt-[4vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
کرد، در این صورت می توان امید داشت.
راه اندازی وب سایت و اپلیکیشن اختصاصی در حوزه فروشگاهی ، آموزشی و گردشگری به عنوان مرجع فروشگاه
های سلامت محور در کشور.
</p>
</div>
</div>
<svg
class="absolute mt-[75vw] right-0 block md:hidden"
class="absolute mt-[75vw] right-0 block hidden"
width="66"
height="30"
viewBox="0 0 66 30"
components/home-page/Header.vue
+6 -8
View File
@@ -98,18 +98,16 @@
/>
</svg>
<h1
<!-- <h1
class="text-[7.277vw] md:text-[3.718vw] font-[700] mt-[100px] md:mt-[120px] md:mt-[9.115vw]"
>
JAVANEH
</h1> -->
<h1 class=" mt-[100px] md:mt-[14.115vw] text-[4.544vw] md:text-[1.927vw] font-[500]">
بانوی سلامت هستی
</h1>
<h1 class="text-[4.544vw] md:text-[1.927vw] font-[500]">
فروشگاه محصولات ارگانیک
</h1>
<p class="hidden md:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و سالم
میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع محصولات تازه را
با حق انتخاب و تنوع بسیار بالا و با مناسب‌ترین قیمت داشته باشد.
<p class="hidden md:block text-[0.938vw] w-[40vw] text-center mt-[1vw]">
شرکت بانوی سلامت هستی با هدف ترویج سبک زندگی سالم فعالیت خود را از سال ۱۳۹۵ در بخش های مختلف به شرح زیر آغاز نموده است:
</p>
</div>
<div class="test"></div>
components/home-page/Instagram.vue
+6 -2
View File
@@ -40,10 +40,11 @@
مارا در اینستاگرام دنبال کنید
</h2>
<div class="birder-b border-[1px] w-[40vw] md:w-[13vw]"></div>
<p class="pb-[20vw] md:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] md:text-[1.055vw] text-[#878787]">
<p class="cursor-pointer hover:text-black group/edit pb-[20vw] md:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] md:text-[1.055vw] text-[#878787]">
دنبال کردن
<svg
class="ms-5 h-[6.667vw] w-[6.667vw] md:h-[2.604vw] md:w-[2.604vw]"
class="group-hover/edit:-translate-x-2 transition duration-300 group-hover/edit:duration-300 ms-5 h-[6.667vw] w-[6.667vw] md:h-[2.604vw] md:w-[2.604vw]"
width="2.604vw"
height="2.604vw"
viewBox="0 0 50 50"
@@ -51,6 +52,7 @@
xmlns="http://www.w3.org/2000/svg"
>
<path
class="group-hover/edit:stroke-black"
d="M25.0003 45.8332C36.5063 45.8332 45.8337 36.5058 45.8337 24.9998C45.8337 13.4939 36.5063 4.1665 25.0003 4.1665C13.4944 4.1665 4.16699 13.4939 4.16699 24.9998C4.16699 36.5058 13.4944 45.8332 25.0003 45.8332Z"
stroke="#878787"
stroke-width="1.5"
@@ -58,6 +60,7 @@
stroke-linejoin="round"
/>
<path
class="group-hover/edit:stroke-black"
d="M32.292 25H19.792"
stroke="#878787"
stroke-width="1.5"
@@ -65,6 +68,7 @@
stroke-linejoin="round"
/>
<path
class="group-hover/edit:stroke-black"
d="M23.958 18.75L17.708 25L23.958 31.25"
stroke="#878787"
stroke-width="1.5"
components/home-page/MediaSlider.vue
+267 -100
View File
@@ -9,37 +9,79 @@
<p
class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
>
رسانه
دیگر محصولات
</p>
<div class="hidden md:flex h-[50px] me-[0.5vw]">
<svg
class="cursor-pointer h-[2.604vw] w-[2.604vw]"
@click="this.$refs.carousel.next()"
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
<path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg
class="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
@click="this.$refs.carousel.prev()"
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
<g clip-path="url(#clip0_836_14507)">
<path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
class="group/edit cursor-pointer h-[2.604vw] w-[2.604vw]"
@click="prev"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
class="group-hover/edit:stroke-black"
cx="25"
cy="25"
r="24.5"
transform="rotate(-180 25 25)"
stroke="#878787"
/>
<path
class="group-hover/edit:stroke-black"
d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="group/edit cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
@click="next"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
class="group-hover/edit:stroke-black"
cx="25"
cy="25"
r="24.5"
stroke="#878787"
/>
<g clip-path="url(#clip0_836_14507)">
<path
class="group-hover/edit:stroke-black"
d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_836_14507">
<rect width="24" height="24" fill="white" transform="translate(13 13)"/>
<rect
width="24"
height="24"
fill="white"
transform="translate(13 13)"
/>
</clipPath>
</defs>
</svg>
</defs>
</svg>
</div>
</div>
<div class="mt-[1vw] space-y-[1vw] text-[#878787]">
<p class="flex items-center">
<p
:class="{ 'text-black': itemindex === 9 }"
@click="changeSlide(9)"
class="flex items-center hover:text-black cursor-pointer"
>
<svg
class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
height="16"
@@ -50,13 +92,16 @@
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span
class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold text-black"
>
فواید و مضرات مصرف گندم
<span class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold">
انواع کلوچه های سلامت محور در مدل های <br />
زنجبیلی ، کلاسیک ، دارچینی ، خرمایی و ...
</span>
</p>
<p class="items-center hidden md:flex">
<p
@click="changeSlide(1)"
:class="{ 'text-black': itemindex === 1 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
@@ -68,10 +113,14 @@
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
انواع دسر ها شامل تارتها و دسر های کافه ای
</span>
</p>
<p class="items-center hidden md:flex">
<p
@click="changeSlide(2)"
:class="{ 'text-black': itemindex === 2 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
@@ -83,10 +132,14 @@
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
انواع ترافلهای شکلاتی و خرمایی در طعم های اختصاصی
</span>
</p>
<p class="items-center hidden md:flex">
<p
@click="changeSlide(3)"
:class="{ 'text-black': itemindex === 3 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
@@ -98,10 +151,14 @@
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
انواع حلواهای بوتیکی سلامت محور اختصاصی
</span>
</p>
<p class="items-center hidden md:flex">
<p
@click="changeSlide(4)"
:class="{ 'text-black': itemindex === 4 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
@@ -113,21 +170,102 @@
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
فواید و مضرات مصرف گندم
سمنوی ساده و بدون شکر و سمنوی مغزیجات
</span>
</p>
<p
@click="changeSlide(5)"
:class="{ 'text-black': itemindex === 5 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
انواع بیسکوییت جوانه گندم سلامت محور در ۶ مدل
</span>
</p>
<p
@click="changeSlide(6)"
:class="{ 'text-black': itemindex === 6 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
انواع کرم های صبحانه سلامت محور
</span>
</p>
<p
@click="changeSlide(7)"
:class="{ 'text-black': itemindex === 7 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
انواع آرد بسته بندی گندم ، جو و جودوسر
</span>
</p>
<p
@click="changeSlide(-1)"
:class="{ 'text-black': itemindex === -1 }"
class="items-center hidden md:flex hover:text-black cursor-pointer"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span class="ps-3 text-[0.938vw] font-semibold">
انواع پک سوغاتی اداری و سازمانی vip
</span>
</p>
<button
class="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
class="group/edit hidden md:flex text-[0.833vw] hover:border-black border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
>
ادامه مطلب
<span class="group-hover/edit:text-black"> ادامه مطلب </span>
<svg
class="ms-3 h-[1.25vw] w-[1.25vw]"
class="group-hover/edit:-translate-x-2 transition duration-300 group-hover/edit:duration-300 ms-3 h-[1.25vw] w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="group-hover/edit:stroke-black"
d="M9.57 5.93018L3.5 12.0002L9.57 18.0702"
stroke="#383E43"
stroke-width="1.5"
@@ -136,6 +274,7 @@
stroke-linejoin="round"
/>
<path
class="group-hover/edit:stroke-black"
d="M20.4999 12H3.66992"
stroke="#383E43"
stroke-width="1.5"
@@ -147,87 +286,115 @@
</button>
</div>
</div>
<Carousel
ref="carousel"
class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
:wrap-around="true"
:breakpoints="breakpoints"
>
<Slide v-for="slide in 10" :key="slide">
<div
class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
>
<div
class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</Slide>
</Carousel>
<!--
<div
class="mt-[8vw] md:mt-0 w-full grid grid-cols-1 md:grid-cols-3 border-s-none md:border-s-[1px] ms-0 md:ms-[3vw] ps-0 md:ps-[1vw]"
>
<div
class="w-[64.103vw] md:w-[20.156vw] h-[85.641vw] md:h-[28.021vw]
border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">
<div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
border-[1.5px] rounded-[500px]"></div>
</div>
<div
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
<Carousel
@slide-end="handleSlideStart"
ref="myCarousel"
class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
:wrap-around="true"
:breakpoints="breakpoints"
>
<div
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
<div
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</div> -->
<Slide v-for="(slide, index) in 9" :key="index">
<div
class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
>
<div
:class="`test-${index}`"
class="mx-[3vw] mediagallery md:mx-[1vw] w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
>
</div>
</div>
</Slide>
</Carousel>
</div>
</template>
<script>
import { ref } from "vue";
const myCarousel = ref(null);
const list = ref([])
export default defineComponent({
name: 'Breakpoints',
name: "Breakpoints",
data: () => ({
itemindex: 0,
list: [],
datas: [
{ htm: '<h1>parag</h1>' ,url: "https://www.google.com/imgres?q=QWSAD%27&imgurl=https%3A%2F%2Fyt3.googleusercontent.com%2Fytc%2FAIdro_lzldHSacRGWtHljOIVE6nwxc8vW74S1HBiy9ls1AU7wBQ%3Ds900-c-k-c0x00ffffff-no-rj&imgrefurl=https%3A%2F%2Fm.youtube.com%2F%40shiitakiaandqwsad3859&docid=dq5X-El72TSwGM&tbnid=J3taltW7PWqUPM&vet=12ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA..i&w=900&h=900&hcb=2&ved=2ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA" },
{ name: 10, url: "/public/images/products/1.jpg" },
{ name: 10, url: "public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
{ name: 10, url: "./../../public/images/products/1.jpg" },
],
breakpoints: {
// 700px and up
300: {
itemsToShow: 1.4,
snapAlign: 'end',
snapAlign: "end",
},
700: {
itemsToShow: 3.3,
snapAlign: 'center',
snapAlign: "center",
},
// 1024 and up
1024: {
itemsToShow: 3.3,
snapAlign: 'start',
snapAlign: "start",
},
}
})
})
</script>
},
}),
methods: {
prev: function () {
this.$refs.myCarousel.prev();
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
},
next: function () {
this.$refs.myCarousel.next();
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
},
handleSlideStart(data) {
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
console.log(data);
},
changeSlide(index) {
this.$refs.myCarousel.slideTo(index);
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
},
},
});
</script>
<style>
.carousel__slide--next .carousel-item:nth-child(1) {
border: 1px solid black;
}
.carousel__slide {
opacity: 0.8;
}
.carousel__slide--next {
opacity: 1;
}
</style>
components/home-page/road-map-components/Banner.vue
+8 -5
View File
@@ -1,12 +1,15 @@
<template>
<div class="baner flex flex-col w-[84.61vw] md:w-[70.41%] mt-[50vw] md:mt-[20vw]">
<img src="/public/images/baner.jpg" alt="organic" class="h-[45.12vw] md:h-[26.302vw] w-full object-cover rounded-[25px]">
<div class="flex flex-col flex-col-reverse px-[1vw] md:flex-row justify-between items-center mt-12">
<p class="mt-[17vw] md:mt-0 w-full md:w-[50%] text-[3.59vw] md:text-[1.502vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
<div class=" px-[1vw] md:flex-row justify-between items-center mt-12">
<p class="mt-[17vw] md:mt-[0.5vw] text-[3.59vw] md:text-[1.3vw]">
با توجه به رویکرد و دغدغه سلامت محور بودن تولید محصولات، این مجموعه در سال ۱۴۰۱ با دعوت سازمان اداره
غله استان مرکزی به عضویت شورای سایستگذاری آرد و نان کامل درآمد و در همایش نان کامل که توسط وزارت
بهداشت برگزار شد به عنوان برگزیده در حوزه نان سالم موفق به کسب لوح تقدیر و تندیس این همایش گردید.
</p>
<p class="w-full md:w-[40%] text-[4.544vw] md:text-[1.186vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
<p class=" text-[4.544vw] md:text-[1.186vw] mt-[2.2vw]">
نان این مجموعه توسط آزمایشگاه های اداره غله و سازمان غذا و دارو گواهی سلاعرضهمت و کیفیت دریافت نموده
است.
</p>
</div>
components/home-page/road-map-components/ProductionStage.vue
+26 -11
View File
@@ -51,7 +51,11 @@
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
تحقیق و آزمایش
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
@@ -105,10 +109,12 @@
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
انتخاب مواد اولیه
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">02</span>
</div>
<div
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
@@ -158,10 +164,12 @@
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
تولید آزمایشی
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">03</span>
</div>
<div
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
@@ -211,10 +219,12 @@
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
ارزیابی مجدد محصول
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">04</span>
</div>
<div
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
@@ -264,10 +274,13 @@
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
تولید انبوه
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">05</span>
</div>
<div
class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
@@ -317,10 +330,12 @@ class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] ro
/>
</svg>
<span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
>تحقیق و توسعه</span
>
عرضه انبوه
</span
>
</div>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">06</span>
</div>
</div>
</div>
components/home-page/road-map-components/ShopNavigator.vue
+9 -7
View File
@@ -3,17 +3,17 @@
class="ps-[6vw] md:ps-[15%] text-[#383E43] flex flex-col items-start justify-center mt-[28vw] md:mt-[14.4vw] h-[87.179vw] md:h-[22.396vw] w-[81.61%] md:w-[81.04%] border-[2px] border-[##E5E5E5] rounded-[25px]"
>
<p class="mt-[5vw] md:mt-0 w-[36.154vw] md:w-auto md:text-[1.69vw] text-[5.11vw]">
ما اینجا هستیم تا از شما حمایت کنیم
عرضه انواع محصولات سلامت و ارگانیک
</p>
<p class="text-[3.19vw] md:text-[0.938vw] mt-3">سلامتی با محصولات شینان</p>
<nuxt-link
to="/"
class="flex items-center mt-[8vw] border-black md:mt-[2vw] text-[3.19vw] md:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
<a
href="https://shinan.ir/store"
class="group/edit flex items-center mt-[8vw] border-black md:mt-[2vw] text-[3.19vw] md:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
>
<svg
class="me-1"
class="me-1 group-hover/edit:-translate-x-[22.5vw] md:group-hover/edit:-translate-x-[6.5vw] transition group-hover/edit:transition group-hover/edit:duration-300 duration-30"
width="24"
height="25"
viewBox="0 0 24 25"
@@ -25,8 +25,10 @@
fill="#383E43"
/>
</svg>
<span class="group-hover/edit:translate-x-[5.5vw] md:group-hover/edit:translate-x-[1.5vw] transition duration-300 group-hover/edit:duration-300 group-hover/edit:transition">
رفتن به فروشگاه
</nuxt-link>
رفتن به فروشگاه
</span>
</a>
</div>
</template>