dlearn-front/components/about-us/Slider.vue

<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
          @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"
          />
          <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>