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/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;