HAM!DREZA
108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<template>
|
|
<div class="thin pinkShadow md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
|
|
<div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
|
|
<p
|
|
class="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute left-0 bottom-0 bg-white rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
|
|
|
|
540,000
|
|
<span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
|
|
>تومان</span
|
|
>
|
|
</p>
|
|
<img
|
|
style="object-fit: cover"
|
|
src="/public/images/course.png"
|
|
alt="laravel"
|
|
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
|
|
>
|
|
<p
|
|
class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
|
|
>
|
|
ترفند های کاربردی پایتون
|
|
</p>
|
|
|
|
<div
|
|
class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
|
|
>
|
|
<div class="flex justify-between w-full mb-[0.417vw]">
|
|
<p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
|
|
<p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">0 %</p>
|
|
</div>
|
|
<div
|
|
id="progressbar"
|
|
class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
|
|
>
|
|
<div
|
|
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
.post::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8.1vw;
|
|
left: 0vw;
|
|
width: 3vw;
|
|
height: 8.1vw;
|
|
border-bottom-left-radius: 0.781vw;
|
|
box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
|
|
}
|
|
.post::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.16vw;
|
|
left: 100%;
|
|
width: 3.083vw;
|
|
height: 2.083vw;
|
|
border-bottom-left-radius: 0.781vw;
|
|
box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
|
|
}
|
|
#progressbar {
|
|
background-color: #e5e5e5;
|
|
|
|
width: 100%;
|
|
}
|
|
#progressbar > div {
|
|
background-color: #0d3f40;
|
|
width: 77%;
|
|
float: left;
|
|
|
|
left: 0;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.post::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8.1vw;
|
|
left: 0vw;
|
|
width: 3vw;
|
|
height: 8.1vw;
|
|
border-bottom-left-radius: 3.59vw;
|
|
box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
|
|
}
|
|
.post::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3.4vw;
|
|
left: 100%;
|
|
width: 5.083vw;
|
|
height: 6.083vw;
|
|
border-bottom-left-radius: 3.59vw;
|
|
box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
|
|
}
|
|
|
|
}
|
|
</style> |