HAM!DREZA
206 lines
13 KiB
Vue
206 lines
13 KiB
Vue
<template>
|
|
<div class="pinkShadow h-[103.846vw] 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="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.course?.price == 0 ? 'رایگان' : props.course?.price + ',000'}}
|
|
<span v-if="!props.course?.price == 0" class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
|
|
</p>
|
|
<NuxtImg style="object-fit: cover;" :src="props.course?.image" alt="laravel"
|
|
:placeholder="[30, 20]"
|
|
|
|
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]" />
|
|
|
|
</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]">
|
|
<h1
|
|
class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
|
|
{{hideEndOfString(props.course?.name)}}
|
|
</h1>
|
|
<div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M17.4163 13.2525V3.69713C17.4163 2.74713 16.6405 2.04255 15.6984 2.12171H15.6509C13.9884 2.26421 11.463 3.1113 10.0538 3.99796L9.91926 4.08505C9.68967 4.22755 9.30967 4.22755 9.08009 4.08505L8.88217 3.9663C7.47301 3.08755 4.95551 2.24838 3.29301 2.1138C2.35092 2.03463 1.58301 2.74713 1.58301 3.68921V13.2525C1.58301 14.0125 2.20051 14.725 2.96051 14.82L3.19009 14.8517C4.90801 15.0813 7.56009 15.9521 9.08009 16.7834L9.11176 16.7992C9.32551 16.918 9.66592 16.918 9.87176 16.7992C11.3918 15.96 14.0518 15.0813 15.7776 14.8517L16.0388 14.82C16.7988 14.725 17.4163 14.0125 17.4163 13.2525Z"
|
|
fill="#E5E5E5" stroke="#E5E5E5" stroke-width="1.5"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M9.5 4.34619V16.2212" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.13574 6.72119H4.35449" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.72949 9.09619H4.35449" stroke="white" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]"
|
|
v-for="category in props.course?.categories"
|
|
:key="category.id"
|
|
>
|
|
{{category.name}}
|
|
|
|
<!-- <span v-if="props.course?.categories[0] === '66587a9498d0a0db14693a5b'">
|
|
بک اند
|
|
</span>
|
|
<span v-if="props.course?.categories[0] === '66587ae698d0a0db14693a5e'">
|
|
فرانت اند
|
|
</span>
|
|
<span v-else>
|
|
{{props.course?.categories}}
|
|
</span> -->
|
|
</span>
|
|
</p>
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M7.12467 1.58337C5.05051 1.58337 3.36426 3.26962 3.36426 5.34379C3.36426 7.37837 4.95551 9.02504 7.02967 9.09629C7.09301 9.08837 7.15634 9.08837 7.20384 9.09629C7.21967 9.09629 7.22759 9.09629 7.24342 9.09629C7.25134 9.09629 7.25134 9.09629 7.25926 9.09629C9.28592 9.02504 10.8772 7.37837 10.8851 5.34379C10.8851 3.26962 9.19884 1.58337 7.12467 1.58337Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M11.1468 11.202C8.93801 9.72953 5.33592 9.72953 3.11134 11.202C2.10592 11.8749 1.55176 12.7854 1.55176 13.7591C1.55176 14.7329 2.10592 15.6354 3.10342 16.3004C4.21176 17.0445 5.66842 17.4166 7.12509 17.4166C8.58176 17.4166 10.0384 17.0445 11.1468 16.3004C12.1443 15.6274 12.6984 14.7249 12.6984 13.7433C12.6905 12.7695 12.1443 11.867 11.1468 11.202Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M15.8259 5.81083C15.9526 7.34666 14.8601 8.6925 13.348 8.87458C13.3401 8.87458 13.3401 8.87458 13.3321 8.87458H13.3084C13.2609 8.87458 13.2134 8.87458 13.1738 8.89041C12.4059 8.93 11.7013 8.68458 11.1709 8.23333C11.9863 7.505 12.4534 6.4125 12.3584 5.225C12.303 4.58375 12.0813 3.99791 11.7488 3.49916C12.0496 3.34875 12.398 3.25375 12.7542 3.22208C14.3059 3.0875 15.6913 4.24333 15.8259 5.81083Z"
|
|
fill="#E5E5E5" />
|
|
<path
|
|
d="M17.4085 13.1337C17.3452 13.9017 16.8544 14.5667 16.031 15.0179C15.2394 15.4533 14.2419 15.6592 13.2523 15.6354C13.8223 15.1208 14.1548 14.4796 14.2181 13.7987C14.2973 12.8171 13.8302 11.875 12.896 11.1229C12.3656 10.7033 11.7481 10.3708 11.0752 10.1254C12.8248 9.61874 15.0256 9.95915 16.3794 11.0517C17.1077 11.6375 17.4798 12.3737 17.4085 13.1337Z"
|
|
fill="#E5E5E5" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]">{{props.course?.studentsCount}} دانشجو</span>
|
|
</p>
|
|
<p class="flex items-center text-[#878787]">
|
|
<svg
|
|
class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 19" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M9.49967 1.58337C5.13759 1.58337 1.58301 5.13796 1.58301 9.50004C1.58301 13.8621 5.13759 17.4167 9.49967 17.4167C13.8618 17.4167 17.4163 13.8621 17.4163 9.50004C17.4163 5.13796 13.8618 1.58337 9.49967 1.58337ZM12.9434 12.3263C12.8326 12.5163 12.6347 12.6192 12.4288 12.6192C12.3259 12.6192 12.223 12.5955 12.128 12.5321L9.67384 11.0675C9.06426 10.7034 8.61301 9.90379 8.61301 9.19921V5.95337C8.61301 5.62879 8.88217 5.35962 9.20676 5.35962C9.53134 5.35962 9.80051 5.62879 9.80051 5.95337V9.19921C9.80051 9.48421 10.038 9.90379 10.2834 10.0463L12.7376 11.5109C13.0226 11.6771 13.1176 12.0413 12.9434 12.3263Z"
|
|
fill="#E5E5E5" />
|
|
</svg>
|
|
|
|
<span class="md:ms-[0.2vw]">{{props.course?.duration}} ساعت</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
|
|
<NuxtLink :to="`${props.course?.id}`"
|
|
class="font-[500] mt-[0.5vw] flex items-center justify-center gap-[0.417vw] md:h-[2.292vw] px-[4.103vw] md:px-0 py-[2.308vw] md:py-[0.521vw] bg-primaryGreen text-white text-[3.19vw] md:text-[0.833vw] rounded-[2.564vw] md:rounded-[0.521vw] md:w-[7.917vw]">
|
|
شروع دوره
|
|
<svg
|
|
class="w-[4.575vw] md:w-[0.833vw] h-[4.575vw] md:h-[0.833vw]"
|
|
viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M10.0002 13.28L5.65355 8.93331C5.14022 8.41997 5.14022 7.57997 5.65355 7.06664L10.0002 2.71997"
|
|
stroke="white" stroke-width="1.5" stroke-miterlimit="10"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
</NuxtLink>
|
|
<span class="relative">
|
|
<svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M22.4035 2C19.8297 2 17.2812 2.50851 14.9033 3.4965C12.5255 4.48448 10.365 5.9326 8.54504 7.75816C6.72512 9.58372 5.28149 11.751 4.29656 14.1362C3.31163 16.5214 2.80469 19.0778 2.80469 21.6596C2.80469 24.2413 3.31163 26.7978 4.29656 29.183C5.28149 31.5682 6.72512 33.7354 8.54504 35.561C10.365 37.3866 12.5255 38.8347 14.9033 39.8227C17.2812 40.8106 19.8297 41.3191 22.4035 41.3191L22.4035 21.6596V2Z"
|
|
fill="white" stroke="url(#paint0_linear_7_1513)" stroke-width="3" />
|
|
<path
|
|
d="M22.4035 2.00019C25.3093 2.00019 28.1788 2.64834 30.8041 3.89773C33.4295 5.14712 35.745 6.96647 37.5831 9.22406C39.4212 11.4817 40.7358 14.121 41.4318 16.951C42.1278 19.781 42.1877 22.7308 41.6073 25.5869C41.0268 28.443 39.8205 31.1338 38.0756 33.4647C36.3308 35.7955 34.0911 37.708 31.5186 39.0637C28.9462 40.4193 26.1055 41.1842 23.2021 41.303C20.2987 41.4218 17.4052 40.8914 14.7313 39.7504L22.4035 21.6598L22.4035 2.00019Z"
|
|
fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
|
|
stroke-dasharray="6 6" />
|
|
<ellipse cx="22.4002" cy="21.1915" rx="18.2553" ry="17.7322"
|
|
transform="rotate(-90 22.4002 21.1915)" fill="white" />
|
|
<path
|
|
d="M10.6786 30.0149L12.0474 32.761C12.234 33.1433 12.7318 33.5099 13.1518 33.5801L15.6327 33.9936C17.2193 34.2589 17.5926 35.4135 16.4493 36.5525L14.5206 38.4872C14.1939 38.8149 14.015 39.4468 14.1161 39.8993L14.6683 42.2943C15.1039 44.1901 14.1006 44.9234 12.4285 43.9326L10.1031 42.5518C9.68309 42.3021 8.99091 42.3021 8.56316 42.5518L6.23774 43.9326C4.5734 44.9234 3.56235 44.1823 3.99788 42.2943L4.55007 39.8993C4.65117 39.4468 4.4723 38.8149 4.14565 38.4872L2.21688 36.5525C1.0814 35.4135 1.44693 34.2589 3.0335 33.9936L5.51445 33.5801C5.92665 33.5099 6.4244 33.1433 6.61105 32.761L7.97986 30.0149C8.72648 28.5248 9.93974 28.5248 10.6786 30.0149Z"
|
|
fill="#0D3F40" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_7_1513" x1="20.8356" y1="1.21362"
|
|
x2="22.4054" y2="1.99611" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#22A4A6" stop-opacity="0.6" />
|
|
<stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<span class="absolute top-[0.9vw] left-[0.9vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.satisfactionLevel}}</span>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup>
|
|
import { useToast } from 'vue-toastification'
|
|
const props = defineProps(['course']);
|
|
const MyArray = ['Salam','Man','Sadegh','Hastam'];
|
|
const toast = useToast()
|
|
console.log(props);
|
|
function hideEndOfString(inputString) {
|
|
const words = inputString.split(' ');
|
|
if (words.length > 8) {
|
|
const truncatedWords = words.slice(0, 8);
|
|
return truncatedWords.join(' ') + '...';
|
|
} else {
|
|
return inputString;
|
|
}
|
|
}
|
|
|
|
|
|
</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.15vw;
|
|
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);
|
|
}
|
|
|
|
|
|
|
|
@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> |