danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
HAM!DREZA
2024-12-31 11:52:10 +03:30
parent 6c388b6e07
commit 01c8e31ee1
27 changed files with 331 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/about-us/Slider.vue
+178 -93
View File
@@ -1,96 +1,181 @@
<template>
<div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
<div class="w-[81.2vw] flex justify-between">
<div class="w-full md:w-[30.5%] flex gap-[1vw]">
<div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
<svg
class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
بخشی از فعالیت های ShinanLearning
</p>
</div>
</div>
<div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
<svg
class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="30"
r="29.5"
transform="rotate(-180 30 30)"
stroke="#878787"
/>
<path
d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="30" cy="30" r="29.5" stroke="#383E43" />
<g clip-path="url(#clip0_1_1122)">
<path
d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
stroke="#383E43"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_1_1122">
<rect
width="24"
height="24"
fill="white"
transform="translate(18 18)"
/>
</clipPath>
</defs>
</svg>
</div>
<div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
<div class="w-[81.2vw] flex justify-between">
<div class="w-full md:w-[30.5%] flex gap-[1vw]">
<div
class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]"
>
<svg
class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<p
class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold"
>
بخشی از فعالیت های ShinanLearning
</p>
</div>
<div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
<div>
<h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] ">آموزش آنلاین</h2>
<p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
</div>
<img
class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
src="/public/images/about-slider.jpg"
alt=""
</div>
<div
class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]"
>
<svg
@click="change_step('prev')"
class="h-[12.308vw] cursor-pointer md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="30"
r="29.5"
transform="rotate(-180 30 30)"
stroke="#878787"
/>
</div>
</div>
</template>
<path
d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
@click="change_step('next')"
class="h-[12.308vw] cursor-pointer md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="30" cy="30" r="29.5" stroke="#878787" />
<g clip-path="url(#clip0_1_1122)">
<path
d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_1_1122">
<rect
width="24"
height="24"
fill="white"
transform="translate(18 18)"
/>
</clipPath>
</defs>
</svg>
</div>
</div>
<div
v-show="step === 1"
class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]"
>
<div>
<h2
class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43]"
>
آموزش آنلاین
</h2>
<p
class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]"
>
یکی از فعالیت‌های اصلی ما آموزش آنلاین است که به افراد این امکان را
می‌دهد تا در هر زمان و مکانی، به محتوای آموزشی با کیفیت دسترسی پیدا
کنند. با استفاده از فناوری‌های روز و پلتفرم‌های تعاملی، ما دوره‌های
آموزشی را به گونه‌ای طراحی کرده‌ایم که دانش‌پذیران بتوانند با راحتی و
انعطاف‌پذیری کامل، مهارت‌های جدید بیاموزند و به اهداف شخصی و حرفه‌ای
خود برسند. آموزش آنلاین به ما این فرصت را می‌دهد که به صورت گسترده و
بی‌مرز، به افراد در سراسر جهان کمک کنیم تا بدون نیاز به حضور فیزیکی در
کلاس‌ها، از بهترین منابع آموزشی بهره‌مند شوند.
</p>
</div>
<img
class="border h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
src="/public/images/ban1.jpg"
alt=""
/>
</div>
<div
v-show="step === 2"
class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]"
>
<div>
<h2
class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43]"
>
فروش محصولات ارگانیک
</h2>
<p
class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]"
>
یکی دیگر از فعالیت‌های ما فروش محصولات ارگانیک است که با هدف ارتقاء سلامت و تندرستی افراد ارائه می‌شود. ما مجموعه‌ای از محصولات ارگانیک با بالاترین کیفیت را از منابع معتبر و پایدار انتخاب کرده‌ایم تا به مشتریان خود امکان دسترسی به مواد غذایی و محصولات مراقبتی سالم و طبیعی را فراهم کنیم. تمامی محصولات ما بدون استفاده از مواد شیمیایی یا فرآیندهای صنعتی تولید می‌شوند، به‌طوری که نه تنها سلامت فردی را تضمین می‌کنند، بلکه از حفظ محیط‌زیست و منابع طبیعی نیز حمایت می‌کنند.
</p>
</div>
<img
class="h-[85.692vw] md:h-[20.469vw] border w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
src="/public/images/ban3.jpg"
alt=""
/>
</div>
<div
v-show="step === 3"
class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]"
>
<div>
<h2
class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43]"
>
همکاری در فروش
</h2>
<p
class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]"
>
این فرصت برای کسب‌وکارها و تولیدکنندگان فراهم شده است تا به‌راحتی محصولات خود را ثبت‌نام کرده و از طریق پلتفرم ما به فروش برسانند. ما فضایی کاربرپسند و امن ایجاد کرده‌ایم که فروشندگان بتوانند محصولات خود را به مخاطبان گسترده معرفی کنند و با استفاده از ابزارهای مدیریتی حرفه‌ای، فروش خود را بهینه کنند. این بخش برای آن دسته از افرادی است که می‌خواهند محصولات خود را در یک بازار آنلاین معتبر و پررونق عرضه کنند و از مزایای دسترسی به مشتریان جدید و گسترش کسب‌وکار بهره‌مند شوند.
</p>
</div>
<img
class="h-[85.692vw] md:h-[20.469vw] border w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
src="/public/images/ban2.png"
alt=""
/>
</div>
</div>
</template>
<script setup>
const step = ref(1);
const change_step = (target) => {
if (target === "next") {
if (step.value < 3) {
step.value++;
} else {
step.value = 1;
}
} else {
if (step.value > 1) {
step.value--;
} else {
step.value = 3;
}
}
};
</script>