dlearn-front/components/product-page/course-details/Headlines.vue

<template>
    <div
    class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[10vw] md:mt-[3.95vw]"
  >
    <svg
      class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
      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>
    <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
      >سرفصل ها</span
    >
  </div>
  <div class="mt-[6vw] md:mt-[2.1vw] space-y-[3vw] md:space-y-[1vw] thin">
    <div 
    v-for="headline in props?.props?.courseHeadlines" :key="headline.id"
      class="px-[3vw] md:px-[0.4vw] flex items-center bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
    >
      <div class="flex items-center relative basis-5/6 md:basis-3/6 w-full">
        <span
          class=" border-b-[0.15vw] border-[#878787] px-[1vw] md:px-[0.5vw] ms-[0.3vw] me-[2vw] md:me-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
        >
          {{ props?.props?.courseHeadlines?.indexOf(headline)+1 }}
        </span>
        <h2 class="border-r ps-[2.2vw]">{{ headline?.headline }}</h2>
      </div>
      <div class="hidden md:flex items-center text-[0.833vw] w-full  md:basis-2/6">
        <span>{{ convertStoMs(headline?.time) }}</span>
        <svg
          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>

      <div class="flex gap-[1vw] basis-1/6  md:basis-1/6 w-full text-end justify-end md:pe-[2vw]">
        <svg
         @click="download('دانلود')"
          class="cursor-pointer h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 11V17L11 15"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M9 17L7 15"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>

        <svg
        @click="download('مشاهده')"
          class="cursor-pointer h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
  </div>
</template>




<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const props = defineProps(['props'])
const download = (val) => toast.warning(`برای ${val} باید در دوره شرکت کنید`); 
function convertStoMs(seconds) {
  let minutes = Math.floor(seconds / 60);
  let extraSeconds = seconds % 60;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  return (
    minutes +
    ":" +
    (extraSeconds < 10
      ? "0" + Math.floor(extraSeconds)
      : Math.floor(extraSeconds))
  );
}
</script>





<style scoped>
.borderb::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 1vw;
    width: 1.5vw;
    background: #878787;
    height: 0.208vw;
    border-radius: 20vw;
  }
  @media (max-width: 768px) {
    .borderb::before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0.2vw;
      width: 4vw;
      background: #878787;
      height: 0.7vw;
      border-radius: 20vw;
    }
  }
</style>