danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create single page of courses

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-18 16:02:45 +03:30
parent d46cce51ac
commit 81f0fd159c
38 changed files with 1918 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/product-page/course-details/Comments.vue
+183
View File
@@ -0,0 +1,183 @@
<template>
<!-- comments -->
<div
class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
>
<svg
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
>نظرات</span
>
</div>
<!-- comment 1 -->
<div
class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
>
<img
src="/public/images/client1.png"
alt="profile"
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw]">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
<div class="thin">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
1402/09/14
</p>
<p
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
</p>
</div>
</div>
<svg
class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<!-- comment 2 -->
<div
class="mt-[4vw] md:mt-[1vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
>
<div class="flex justify-between relative p-[4vw] md:p-[1.55vw]">
<img
src="/public/images/client2.png"
alt="profile"
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw]">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
<div class="thin">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
1402/09/14
</p>
<p
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد
</p>
</div>
</div>
<svg
class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div
class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
>
<img
src="/public/images/client3.png"
alt="profile"
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw]">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
<div class="thin">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
1402/09/14
</p>
<p
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد
</p>
</div>
</div>
<svg
class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</template>
components/product-page/course-details/Course-information.vue
+259
View File
@@ -0,0 +1,259 @@
<template>
<div
class="mt-[5vw] md:mt-[1vw] rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[0.4vw] thin"
>
<h2
class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
>
اطلاعات دوره
<svg
class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 8V13"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11.9946 16H12.0036"
stroke="#0D3F40"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</h2>
<div
class="flexBox w-full flex-col text-[3.59vw] md:text-[0.938vw] text-[#878787]"
>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
>
<p class="flex items-center gap-[0.8vw]">
<svg
class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.53 20.42H6.21C3.05 20.42 2 18.32 2 16.21V7.78996C2 4.62996 3.05 3.57996 6.21 3.57996H12.53C15.69 3.57996 16.74 4.62996 16.74 7.78996V16.21C16.74 19.37 15.68 20.42 12.53 20.42Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M19.5202 17.1L16.7402 15.15V8.84001L19.5202 6.89001C20.8802 5.94001 22.0002 6.52001 22.0002 8.19001V15.81C22.0002 17.48 20.8802 18.06 19.5202 17.1Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11.5 11C12.3284 11 13 10.3284 13 9.5C13 8.67157 12.3284 8 11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
تعداد ویدیو ها
</p>
<p class="text-[#383E43] font-semibold">3</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
>
<p class="flex items-center gap-[0.8vw]">
<svg
class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.31982 11.6801L11.8798 14.2401L14.4398 11.6801"
stroke="#878787"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11.8799 4V14.17"
stroke="#878787"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 12.1801C20 16.6001 17 20.1801 12 20.1801C7 20.1801 4 16.6001 4 12.1801"
stroke="#878787"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
حجم فایل ها
</p>
<p class="text-[#383E43] font-semibold">14 گیگابایت</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
>
<p class="flex items-center gap-[0.8vw]">
<svg
class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.01 2.91995L18.91 5.53995C20.61 6.28995 20.61 7.52995 18.91 8.27995L13.01 10.8999C12.34 11.1999 11.24 11.1999 10.57 10.8999L4.67002 8.27995C2.97002 7.52995 2.97002 6.28995 4.67002 5.53995L10.57 2.91995C11.24 2.61995 12.34 2.61995 13.01 2.91995Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 11C3 11.84 3.63 12.81 4.4 13.15L11.19 16.17C11.71 16.4 12.3 16.4 12.81 16.17L19.6 13.15C20.37 12.81 21 11.84 21 11"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 16C3 16.93 3.55 17.77 4.4 18.15L11.19 21.17C11.71 21.4 12.3 21.4 12.81 21.17L19.6 18.15C20.45 17.77 21 16.93 21 16"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
سطح دوره
</p>
<p class="text-[#383E43] font-semibold">متوسط</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
>
<p class="flex items-center gap-[0.8vw]">
<svg
class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.0001 3H9.0001C7.0501 8.84 7.0501 15.16 9.0001 21H8.0001"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15 3C16.95 8.84 16.95 15.16 15 21"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 16V15C8.84 16.95 15.16 16.95 21 15V16"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 8.99998C8.84 7.04998 15.16 7.04998 21 8.99998"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
زبان
</p>
<p class="text-[#383E43] font-semibold">فارسی</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
>
<p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
<p class="text-[#383E43] font-semibold">5.0</p>
</div>
<h2
class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
>
220,000
<p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
</h2>
<button
class="greenButton h-[11.795vw] md:h-auto w-full flexBox text-[4.038vw] md:text-[1.055vw] rounded-[2.564vw] md:rounded-[0.521vw]"
@click="paidStatus = true"
>
<svg
class="h-[5.641vw] md:h-[1.458vw] w-[5.641vw] md:w-[1.458vw]"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.7248 2.95171L4.70145 7.53671C2.44978 9.00671 2.44978 12.2967 4.70145 13.7667L11.7248 18.3517C12.9848 19.18 15.0614 19.18 16.3214 18.3517L23.3098 13.7667C25.5498 12.2967 25.5498 9.01837 23.3098 7.54837L16.3214 2.96338C15.0614 2.12338 12.9848 2.12338 11.7248 2.95171Z"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.56831 15.26L6.55664 20.7317C6.55664 22.2133 7.69997 23.8 9.09998 24.2667L12.8216 25.5033C13.4633 25.7133 14.525 25.7133 15.1783 25.5033L18.9 24.2667C20.3 23.8 21.4433 22.2133 21.4433 20.7317V15.3183"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.9668 17.5V10.5"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
شرکت در دوره
</button>
</div>
</div>
</template>
<script setup>
const paidStatus = useState("paidStatus");
</script>
components/product-page/course-details/Course-status.vue
+81
View File
@@ -0,0 +1,81 @@
<template>
<div
class="rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[2.45vw] thin"
>
<div class="flex justify-between">
<h2
class="text-[3.59vw] gap-[2vw] md:gap-[0.5vw] md:text-[1.055vw] font-semibold flex items-center"
>
وضعیت دوره
<svg
class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.02 19.5H7.5C6.88 19.5 6.33 19.48 5.84 19.41C3.21 19.12 2.5 17.88 2.5 14.5V9.5C2.5 6.12 3.21 4.88 5.84 4.59C6.33 4.52 6.88 4.5 7.5 4.5H10.96"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.02 4.5H16.5C17.12 4.5 17.67 4.52 18.16 4.59C20.79 4.88 21.5 6.12 21.5 9.5V14.5C21.5 17.88 20.79 19.12 18.16 19.41C17.67 19.48 17.12 19.5 16.5 19.5H15.02"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15 2V22"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8 8.5V15.5"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</h2>
<span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
>تکمیل شده</span
>
</div>
<div>
<div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
<span class="text-[#383E43]">درصد تکمیل دوره</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>
</div>
</template>
<style scoped>
#progressbar {
background-color: #e5e5e5;
width: 100%;
}
#progressbar > div {
background-color: #0d3f40;
width: 77%;
float: left;
left: 0;
}
</style>
components/product-page/course-details/Description.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<div
class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[15vw] md:mt-0"
>
<svg
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
>توضیحات</span
>
</div>
<p class="mt-[4vw] md:mt-[2.1vw] thin">
آموزش HTML یکی از اساسی ترین ماموریت های شینان برای پرورش برنامه
نویسان وب حرفه ای محسوب میشه. حتما اسمشو شنیدید اما شاید براتون سوال
پیش اومده که چرا و چطور باید اون رو یاد گرفت و چه اهمیتی داره؟ میشه
گفت الفبای برنامه نویسی وب هست و یادگیری اون اولین پیش نیاز ورود به
این تخصص جذاب محسوب میشه.
</p>
<p class="mt-[3.4vw] thin">
شینان در کنار شماست تا بدون سردرگمی و گشتن بین آموزش های مختلف، کامل
ترین و تخصصی ترین آموزش HTML رو دریافت کنید و مزه ی یک آموزش اصولی و
یادگیری راحت رو بچشید و خیلی زود قدم های بعدی رو بردارید تا به شغل ها
و درآمدهای بالا برسید.
</p>
<p class="text-[4.038vw] md:text-[1.335vw] mt-[10vw] md:mt-[4.8vw]">
این دوره برای چه کسانی مناسب هست؟
</p>
<p class="mt-[5vw] md:mt-[2.2vw] thin">اگر :</p>
<ul class="ms-[3vw] md:ms-[1vw] list-disc thin">
<li>به حوزه فرانت اند و طراحی رابط کاربری (UI) علاقه دارید</li>
<li>دوست دارید صفحات سایت خودتون رو شخصا به شکل دلخواه تغییر بدید</li>
<li>
قصد دارید سایت هارو آنالیز کنید یا از ساختار اونها ایده بگیرید
</li>
<li>
قصد دارید یک برنامه نویس وب (طراح سایت و اپلیکیشن تحت وب) بشید
</li>
<li>دوست دارید کدهای بهینه تولید کنید تا سئوی قوی تری داشته باشید</li>
</ul>
</template>
components/product-page/course-details/Header.vue
+197
View File
@@ -0,0 +1,197 @@
<template>
<div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
<img
src="/public/images/html.png"
alt="html"
class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
/>
<div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
<h1
class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
>
آموزش HTML رایگان مقدماتی تا پیشرفته
</h1>
<p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
برنامه نویسی
</p>
<p
class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
>
اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
>
مدرس دوره :
<span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
>حمیدرضا عبادی</span
>
</p>
<div
class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
>
<div class="flex gap-[1vw] items-center">
<svg
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
viewBox="0 0 37 37"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.3335 3.08331V7.70831"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.6665 3.08331V7.70831"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.396 14.0137H31.6043"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
stroke="white"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.196 21.1209H24.2098"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.196 25.7459H24.2098"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M18.4928 21.1209H18.5067"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M18.4928 25.7459H18.5067"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.7873 21.1209H12.8011"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.7873 25.7459H12.8011"
stroke="white"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="space-y-[0.3vw]">
<p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
<p class="text-[2.518vw] md:text-[0.741vw]">1401/12/24</p>
</div>
</div>
<div class="border-l"></div>
<div class="flex gap-[1vw] items-center">
<svg
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
viewBox="0 0 37 37"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="space-y-[0.3vw]">
<p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
<p class="text-[2.518vw] md:text-[0.741vw]">7 ساعت</p>
</div>
</div>
<div class="border-l"></div>
<div class="flex gap-[1vw] items-center">
<svg
class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
viewBox="0 0 37 37"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="space-y-[0.3vw]">
<p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
<p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
</div>
</div>
</div>
</div>
</div>
</template>
components/product-page/course-details/Headlines.vue
+318
View File
@@ -0,0 +1,318 @@
<template>
<div
class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[10vw] md:mt-[3.95vw]"
>
<svg
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
>سرفصل ها</span
>
</div>
<div class="mt-[6vw] md:mt-[2.1vw] space-y-[3vw] md:space-y-[1vw] thin">
<div
class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
>
<div class="flex items-center relative">
<span
class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
>
1
</span>
<h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
</div>
<div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
<span>08:55</span>
<svg
class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="flex gap-[1vw] pe-[1vw]">
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 11V17L11 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9 17L7 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<div
class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
>
<div class="flex items-center relative">
<span
class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
>
1
</span>
<h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
</div>
<div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
<span>08:55</span>
<svg
class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="flex gap-[1vw] pe-[1vw]">
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 11V17L11 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9 17L7 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<div
class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
>
<div class="flex items-center relative">
<span
class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
>
1
</span>
<h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
</div>
<div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
<span>08:55</span>
<svg
class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="flex gap-[1vw] pe-[1vw]">
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 11V17L11 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9 17L7 15"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</template>
<style scoped>
.borderb::before {
content: "";
position: absolute;
bottom: 0;
right: 1.1vw;
width: 1vw;
background: #878787;
height: 0.208vw;
border-radius: 20vw;
}
@media (max-width: 768px) {
.borderb::before {
content: "";
position: absolute;
bottom: 0;
right: 0.2vw;
width: 4vw;
background: #878787;
height: 0.7vw;
border-radius: 20vw;
}
}
</style>