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

create searchBox section

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-10 13:18:04 +03:30
parent 5310ec4dbc
commit c8bfc3c177
22 changed files with 1124 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Card.vue
+2 -4
View File
@@ -92,7 +92,7 @@
</div>
<div class="flex justify-between">
<NuxtLink :to="`${props.course?.id}`"
<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
@@ -129,7 +129,7 @@
</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 class="absolute top-[0.9vw] w-[1.5vw] text-center left-[0.4vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.averageRating}}</span>
</span>
</div>
@@ -141,9 +141,7 @@
<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) {
components/product-page/course-details/Comments.vue
+13 -9
View File
@@ -21,7 +21,8 @@
<!-- comment 1 -->
<div
class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
v-for="item in props.props" :key="item.id"
class="mt-[1vw] 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"
@@ -29,7 +30,7 @@
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw]">
<div class="ps-[3vw] md:ps-[1vw] w-full">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
@@ -40,10 +41,8 @@
<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]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
{{ item.text }}
</p>
</div>
</div>
@@ -73,7 +72,7 @@
</div>
<!-- comment 2 -->
<div
<!-- <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]">
@@ -179,5 +178,10 @@
/>
</svg>
</div>
</div>
</template>
</div> -->
</template>
<script setup>
const props = defineProps(['props'])
</script>
components/product-page/course-details/Course-status.vue
+5 -3
View File
@@ -61,8 +61,9 @@
class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
>
<div
:class="`w-[${props.props.completionPercentage}%]`"
class=" rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
:class="`w-[${props.props.completionPercentage}%]`"
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
>
<!-- {{props.props.completionPercentage}} -->
</div>
@@ -74,6 +75,8 @@
<script setup>
const adad = 2;
const props = defineProps(['props'])
</script>
<style scoped>
#progressbar {
@@ -84,7 +87,6 @@ const props = defineProps(['props'])
#progressbar > div {
background-color: #0d3f40;
float: left;
left: 0;
}
</style>
components/product-page/course-details/Header.vue
+203 -189
View File
@@ -1,201 +1,215 @@
<template>
<div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
<NuxtImg
:placeholder="[30, 20]"
:src="props.props.image"
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]"
<div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
<NuxtImg
:placeholder="[30, 20]"
:src="props.props.image"
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]">
{{ props.props.name }}
</h1>
<p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
{{ props.props.categories[0].name }}
</p>
<p
class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
>
{{ props.props.description }}
</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"
>
{{ props.props.name }}
</h1>
<p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
{{props.props.categories[0].name}}
</p>
<p
class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
<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]">
{{ shamsi[2] }} / {{ shamsi[1] }} / {{ shamsi[0] }}
</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"
>
{{props.props.description}}
</p>
<p
class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
<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]">
{{ props.props.duration }} ساعت
</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"
>
مدرس دوره :
<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]">{{props.props.createdAt}}</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]">{{props.props.duration}} ساعت</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]">{{props.props.studentsCount}}</p>
<p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
</div>
</div>
<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]">
{{ props.props.studentsCount }}
</p>
<p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps(['props'])
const props = defineProps(["props"]);
const isoDateString = props.props.createdAt;
const dateObject = new Date(isoDateString);
const year = dateObject.getFullYear();
const month = dateObject.getMonth() + 1;
const day = dateObject.getDate();
const hours = dateObject.getHours();
const minutes = dateObject.getMinutes();
const seconds = dateObject.getSeconds();
const shamsi = gregorian_to_jalali(year,month,day)
</script>
components/product-page/course-details/Headlines.vue
+47 -188
View File
@@ -18,18 +18,21 @@
>
</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
v-for="headline in props.props.courseHeadlines" :key="headline.id"
class="px-[3vw] md:px-[0.4vw] flex items-center 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">
<div class="flex items-center relative basis-5/6 md:basis-3/6 w-full">
<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]"
class=" border-b-[0.15vw] border-[#878787] px-[1vw] md:px-[0.5vw] ms-[0.3vw] me-[2vw] md:me-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
>
1
{{ props.props.courseHeadlines.indexOf(headline)+1 }}
</span>
<h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
<h2 class="border-r ps-[2.2vw]">{{ headline.headline }}</h2>
</div>
<div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
<div class="hidden md:flex items-center text-[0.833vw] w-full md:basis-2/6">
<span>08:55</span>
<svg
class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
@@ -54,97 +57,7 @@
</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]">
<div class="flex gap-[1vw] basis-1/6 md:basis-1/6 w-full text-end justify-end md:pe-[2vw]">
<svg
class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
@@ -199,106 +112,52 @@
</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>
<script setup>
const props = defineProps(['props'])
</script>
<style scoped>
.borderb::before {
content: "";
position: absolute;
bottom: 0;
right: 1.1vw;
width: 1vw;
right: 1vw;
width: 1.5vw;
background: #878787;
height: 0.208vw;
border-radius: 20vw;