HAM!DREZA
81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
class="rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[2.45vw] thin"
|
|
>
|
|
<div class="flex justify-between">
|
|
<h2
|
|
class="text-[3.59vw] gap-[2vw] md:gap-[0.5vw] 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="M11.02 19.5H7.5C6.88 19.5 6.33 19.48 5.84 19.41C3.21 19.12 2.5 17.88 2.5 14.5V9.5C2.5 6.12 3.21 4.88 5.84 4.59C6.33 4.52 6.88 4.5 7.5 4.5H10.96"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M15.02 4.5H16.5C17.12 4.5 17.67 4.52 18.16 4.59C20.79 4.88 21.5 6.12 21.5 9.5V14.5C21.5 17.88 20.79 19.12 18.16 19.41C17.67 19.48 17.12 19.5 16.5 19.5H15.02"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M15 2V22"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M8 8.5V15.5"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</h2>
|
|
<span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
|
|
>تکمیل شده</span
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
|
|
<span class="text-[#383E43]">درصد تکمیل دوره</span>
|
|
<span>77٪</span>
|
|
</div>
|
|
<div
|
|
id="progressbar"
|
|
class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
|
|
>
|
|
<div
|
|
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
#progressbar {
|
|
background-color: #e5e5e5;
|
|
|
|
width: 100%;
|
|
}
|
|
#progressbar > div {
|
|
background-color: #0d3f40;
|
|
width: 77%;
|
|
float: left;
|
|
|
|
left: 0;
|
|
}
|
|
</style> |