HAM!DREZA
115 lines
3.4 KiB
Vue
115 lines
3.4 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]">
|
|
|
|
{{ props.item?.item.price > 0 ? numberFormat(props.item?.item.price) + 'تومان' : 'رایگان' }}
|
|
|
|
</p>
|
|
<NuxtImg style="object-fit: cover;" :src="props.item?.item.image"
|
|
:placeholder="[30, 20]"
|
|
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 @click="change"
|
|
class="cursor-pointer 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]"
|
|
>
|
|
{{ props.item?.item.name }}
|
|
</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]">{{ Math.floor(props.item.completionPercentage) }} %</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
|
|
:style="{ width: activeClass + '%' }"
|
|
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
|
|
const props = defineProps(['item']);
|
|
|
|
const activeClass = ref(props.item.completionPercentage);
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const change = () =>{
|
|
router.replace(`/${props.item.item.id}`)
|
|
}
|
|
</script>
|
|
|
|
<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;
|
|
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> |