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
      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between 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">
        <span
          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
        >
          1
        </span>
        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
      </div>
      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
        <span>08:55</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] pe-[1vw]">
        <svg
          class="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
          class="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
      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between 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">
        <span
          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
        >
          1
        </span>
        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
      </div>
      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
        <span>08:55</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] pe-[1vw]">
        <svg
          class="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
          class="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
      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between 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">
        <span
          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
        >
          1
        </span>
        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
      </div>
      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
        <span>08:55</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] pe-[1vw]">
        <svg
          class="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
          class="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>

<style scoped>
.borderb::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 1.1vw;
    width: 1vw;
    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>