dlearn-front/components/product-page/attended-courses/Headlines.vue

<template>
    <div
    class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
  >
    <div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
      <label
        class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
      >
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          <input type="radio" class="accent-primaryGreen" />
          HTML چیست؟
        </div>
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          02:24
          <svg
            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
            viewBox="0 0 19 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#clip0_1_896)">
              <path
                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
            <defs>
              <clipPath id="clip0_1_896">
                <rect
                  width="19"
                  height="19"
                  fill="white"
                  transform="translate(0 0.5)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>
      </label>

      <label
        class="bg-[#FDF4FB] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
      >
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          <input
            type="radio"
            checked="checked"
            class="accent-primaryGreen"
          />
          آشنایی با ساختار صفحات
        </div>
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          08:44
          <svg
            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
            viewBox="0 0 19 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#clip0_1_896)">
              <path
                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
            <defs>
              <clipPath id="clip0_1_896">
                <rect
                  width="19"
                  height="19"
                  fill="white"
                  transform="translate(0 0.5)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>
      </label>

      <label
        class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
      >
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          <input type="radio" class="accent-primaryGreen" />
          تگ های Heading
        </div>
        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
          07:41
          <svg
            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
            viewBox="0 0 19 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#clip0_1_896)">
              <path
                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                stroke="#383E43"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
            <defs>
              <clipPath id="clip0_1_896">
                <rect
                  width="19"
                  height="19"
                  fill="white"
                  transform="translate(0 0.5)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>
      </label>
    </div>
  </div> 
</template>

<script setup>
const props = defineProps(['props'])
</script>