HAM!DREZA
36 lines
866 B
Vue
36 lines
866 B
Vue
<template>
|
|
|
|
<div
|
|
class="mt-[5vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1vw] space-y-[6vw] md:space-y-[2vw] md:mt-[1vw] text-[#383E43]"
|
|
>
|
|
<div
|
|
class="flex justify-between text-[3.19vw] md:text-[0.833vw] font-semibold text-[#383E43]"
|
|
>
|
|
<span class="text-[3.59vw] md:text-[0.938vw]">پیشرفت شما</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>
|
|
</template>
|
|
<style scoped>
|
|
#progressbar {
|
|
background-color: #e5e5e5;
|
|
|
|
width: 100%;
|
|
}
|
|
#progressbar > div {
|
|
background-color: #0d3f40;
|
|
width: 77%;
|
|
float: left;
|
|
|
|
left: 0;
|
|
}
|
|
|
|
</style> |