HAM!DREZA
97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="shadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] animate-pulse bg-zinc-50"
|
|
>
|
|
<div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
|
|
<p
|
|
class="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-zinc-50 rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]"
|
|
>
|
|
|
|
<span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
|
|
></span
|
|
>
|
|
</p>
|
|
<div
|
|
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] bg-zinc-100"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="flexBox flex-col">
|
|
<div
|
|
class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]"
|
|
>
|
|
<div
|
|
class="bg-zinc-100 w-[9vw] h-[1vw] rounded-[0.2vw]"
|
|
>
|
|
</div>
|
|
<div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
|
|
<div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
|
|
|
|
</div>
|
|
<div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
|
|
|
|
</div>
|
|
<div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="flex justify-between !mt-[2.2vw]">
|
|
<div class="bg-zinc-100 w-[8vw] h-[2vw] rounded-[0.2vw]">
|
|
|
|
</div>
|
|
<div class="bg-zinc-100 w-[2vw] h-[2vw] rounded-[50%]">
|
|
|
|
</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 #fafafa;
|
|
}
|
|
.post::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.15vw;
|
|
left: 100%;
|
|
width: 1.083vw;
|
|
height: 2.083vw;
|
|
border-bottom-left-radius: 0.781vw;
|
|
box-shadow: -0.26vw 1.042vw 0 0.026vw #fafafa;
|
|
}
|
|
|
|
@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 #fafafa;
|
|
}
|
|
.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 #fafafa;
|
|
}
|
|
}
|
|
</style> |