dlearn-front/components/product-page/course-details/Course-information.vue

<template>
    <div
    class="mt-[5vw] md:mt-[1vw] rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[0.4vw] thin"
  >
    <h2
      class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
    >
      اطلاعات دوره
      <svg
        class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
          stroke="#0D3F40"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M12 8V13"
          stroke="#0D3F40"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M11.9946 16H12.0036"
          stroke="#0D3F40"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </h2>

    <div
      class="flexBox w-full flex-col text-[3.59vw] md:text-[0.938vw] text-[#878787]"
    >
      <div
        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
      >
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.53 20.42H6.21C3.05 20.42 2 18.32 2 16.21V7.78996C2 4.62996 3.05 3.57996 6.21 3.57996H12.53C15.69 3.57996 16.74 4.62996 16.74 7.78996V16.21C16.74 19.37 15.68 20.42 12.53 20.42Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M19.5202 17.1L16.7402 15.15V8.84001L19.5202 6.89001C20.8802 5.94001 22.0002 6.52001 22.0002 8.19001V15.81C22.0002 17.48 20.8802 18.06 19.5202 17.1Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M11.5 11C12.3284 11 13 10.3284 13 9.5C13 8.67157 12.3284 8 11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          تعداد ویدیو ها
        </p>
        <p class="text-[#383E43] font-semibold">3</p>
      </div>
      <div
        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
      >
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.31982 11.6801L11.8798 14.2401L14.4398 11.6801"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M11.8799 4V14.17"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M20 12.1801C20 16.6001 17 20.1801 12 20.1801C7 20.1801 4 16.6001 4 12.1801"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          حجم فایل ها
        </p>
        <p class="text-[#383E43] font-semibold">14 گیگابایت</p>
      </div>
      <div
        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
      >
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.01 2.91995L18.91 5.53995C20.61 6.28995 20.61 7.52995 18.91 8.27995L13.01 10.8999C12.34 11.1999 11.24 11.1999 10.57 10.8999L4.67002 8.27995C2.97002 7.52995 2.97002 6.28995 4.67002 5.53995L10.57 2.91995C11.24 2.61995 12.34 2.61995 13.01 2.91995Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 11C3 11.84 3.63 12.81 4.4 13.15L11.19 16.17C11.71 16.4 12.3 16.4 12.81 16.17L19.6 13.15C20.37 12.81 21 11.84 21 11"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 16C3 16.93 3.55 17.77 4.4 18.15L11.19 21.17C11.71 21.4 12.3 21.4 12.81 21.17L19.6 18.15C20.45 17.77 21 16.93 21 16"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          سطح دوره
        </p>
        <p class="text-[#383E43] font-semibold">متوسط</p>
      </div>
      <div
        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
      >
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M8.0001 3H9.0001C7.0501 8.84 7.0501 15.16 9.0001 21H8.0001"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15 3C16.95 8.84 16.95 15.16 15 21"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 16V15C8.84 16.95 15.16 16.95 21 15V16"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 8.99998C8.84 7.04998 15.16 7.04998 21 8.99998"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          زبان
        </p>
        <p class="text-[#383E43] font-semibold">فارسی</p>
      </div>
      <div
        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
      >
        <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
        <p class="text-[#383E43] font-semibold">5.0</p>
      </div>

      <h2
        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
      >
        220,000
        <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
      </h2>
      <button
        class="greenButton h-[11.795vw] md:h-auto w-full flexBox text-[4.038vw] md:text-[1.055vw] rounded-[2.564vw] md:rounded-[0.521vw]"
        @click="paidStatus = true"
      >
        <svg
          class="h-[5.641vw] md:h-[1.458vw] w-[5.641vw] md:w-[1.458vw]"
          viewBox="0 0 28 28"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.7248 2.95171L4.70145 7.53671C2.44978 9.00671 2.44978 12.2967 4.70145 13.7667L11.7248 18.3517C12.9848 19.18 15.0614 19.18 16.3214 18.3517L23.3098 13.7667C25.5498 12.2967 25.5498 9.01837 23.3098 7.54837L16.3214 2.96338C15.0614 2.12338 12.9848 2.12338 11.7248 2.95171Z"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M6.56831 15.26L6.55664 20.7317C6.55664 22.2133 7.69997 23.8 9.09998 24.2667L12.8216 25.5033C13.4633 25.7133 14.525 25.7133 15.1783 25.5033L18.9 24.2667C20.3 23.8 21.4433 22.2133 21.4433 20.7317V15.3183"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M24.9668 17.5V10.5"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        شرکت در دوره
      </button>
    </div>
  </div> 
</template>


<script setup>
const paidStatus = useState("paidStatus");
</script>