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

create frequently questions page

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-03 09:09:38 +03:30
parent b6dcacce95
commit 7d9ac8c0c9
9 changed files with 261 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/product-page/course-details/Course-information.vue
+8 -7
View File
@@ -6,6 +6,7 @@
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"
@@ -73,7 +74,7 @@
</svg>
تعداد ویدیو ها
</p>
<p class="text-[#383E43] font-semibold">3</p>
<p class="text-[#383E43] font-semibold">{{props.props.countOfVideos}}</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -113,7 +114,7 @@
حجم فایل ها
</p>
<p class="text-[#383E43] font-semibold">14 گیگابایت</p>
<p class="text-[#383E43] font-semibold">{{props.props.totalFileSize}}</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -149,7 +150,7 @@
</svg>
سطح دوره
</p>
<p class="text-[#383E43] font-semibold">متوسط</p>
<p class="text-[#383E43] font-semibold">{{props.props.level}}</p>
</div>
<div
class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -200,19 +201,19 @@
زبان
</p>
<p class="text-[#383E43] font-semibold">فارسی</p>
<p class="text-[#383E43] font-semibold">{{props.props.language}}</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>
<p class="text-[#383E43] font-semibold">{{props.props.satisfactionLevel}}</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
{{props.props.price}},000
<p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
</h2>
<button
@@ -255,5 +256,5 @@
<script setup>
const paidStatus = useState("paidStatus");
const props = defineProps(['props'])
</script>
components/product-page/course-details/Course-status.vue
+10 -4
View File
@@ -43,20 +43,25 @@
/>
</svg>
</h2>
<span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
<span v-if="props.props.completionPercentage > 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
>تکمیل شده</span
>
<span v-else-if="props.props.completionPercentage > 1 && props.props.completionPercentage < 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
>در حال تکمیل</span
>
<span v-else 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>
<span>{{props.props.completionPercentage}}٪</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="`w-[${props.props.completionPercentage}%]`"
class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
></div>
</div>
@@ -64,7 +69,9 @@
</div>
</template>
<script setup>
const props = defineProps(['props'])
</script>
<style scoped>
#progressbar {
background-color: #e5e5e5;
@@ -73,7 +80,6 @@
}
#progressbar > div {
background-color: #0d3f40;
width: 77%;
float: left;
left: 0;
components/product-page/course-details/Description.vue
+7 -6
View File
@@ -18,11 +18,7 @@
>
</div>
<p class="mt-[4vw] md:mt-[2.1vw] thin">
آموزش HTML یکی از اساسی ترین ماموریت های شینان برای پرورش برنامه
نویسان وب حرفه ای محسوب میشه. حتما اسمشو شنیدید اما شاید براتون سوال
پیش اومده که چرا و چطور باید اون رو یاد گرفت و چه اهمیتی داره؟ میشه
گفت الفبای برنامه نویسی وب هست و یادگیری اون اولین پیش نیاز ورود به
این تخصص جذاب محسوب میشه.
{{props.props.description}}
</p>
<p class="mt-[3.4vw] thin">
شینان در کنار شماست تا بدون سردرگمی و گشتن بین آموزش های مختلف، کامل
@@ -47,4 +43,9 @@
<li>دوست دارید کدهای بهینه تولید کنید تا سئوی قوی تری داشته باشید</li>
</ul>
</template>
</template>
<script setup>
const props = defineProps(['props'])
</script>
components/product-page/course-details/Header.vue
+8 -9
View File
@@ -2,7 +2,7 @@
<div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
<NuxtImg
:placeholder="[30, 20]"
:src="props.props.slug.value.image"
: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"
/>
@@ -10,17 +10,15 @@
<h1
class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
>
{{ props.props.slug.value.name }}
{{ 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]"
>
اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
{{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"
@@ -117,7 +115,7 @@
</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>
<p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.createdAt}}</p>
</div>
</div>
<div class="border-l"></div>
@@ -146,7 +144,7 @@
<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>
<p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.duration}} ساعت</p>
</div>
</div>
<div class="border-l"></div>
@@ -188,7 +186,7 @@
</svg>
<div class="space-y-[0.3vw]">
<p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
<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>
@@ -199,4 +197,5 @@
<script setup>
const props = defineProps(['props'])
</script>
layouts/footer.vue
+2 -2
View File
@@ -20,8 +20,8 @@
</div>
<div>
<p class="text-[1.055vw] mt-[4vw]">خدمات مشتریان</p>
<p class="text-[0.833vw] mt-[1vw] text-[#E5E5E5]">سوالات متداول</p>
<p class="text-[1.055vw] mt-[4.8vw] pb-[1vw]">خدمات مشتریان</p>
<nuxt-link to="/frequently-questions" class="text-[0.833vw] mt-[1vw] text-[#E5E5E5]">سوالات متداول</nuxt-link>
<p class="text-[0.833vw] mt-[0.8vw] text-[#E5E5E5]">قوانین سایت</p>
</div>
<svg
pages/[product]/index.vue
+20 -5
View File
@@ -1,17 +1,32 @@
<template>
<product-pageAttended-course v-if="paidCourse" />
<product-pageCourse-detail :slug="data.data" v-else/>
<div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
<product-page-course-detailsHeader :props="data.course"/>
<div
class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
>
<div
class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
>
<product-page-course-detailsDescription :props="data.course" />
<product-page-course-detailsHeadlines :props="data.course"/>
<product-page-course-detailsComments :props="data.course"/>
</div>
<div class="w-full md:w-[23.438vw] text-[#383E43]">
<product-page-course-detailsCourse-status :props="data.course"/>
<product-page-course-detailsCourse-information :props="data.course"/>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute();
const data = await useFetch("/api/productId", {
const {data} = await useFetch("/api/productId", {
method: "POST",
body: {
id: route.params.product,
},
})
const paidCourse = useState('paidStatus', () => false)
console.log(data.value.course);
</script>
pages/account/tickets.vue
+1 -27
View File
@@ -348,33 +348,7 @@
</div>
</div>
</tabs>
<!-- <div
v-if="addTicketForm"
class="backdrop-blur-xl bg-white/30 absolute px-[5vw] py-[8vw]
w-full top-0 space-y-[5vw] md:space-y-[2vw] border rounded-[1vw] shadow-md h-[80vw] md:h-auto"
>
<p class="text-[3vw] md:text-[1vw] font-semibold text-primaryGreen">موضوع تیکت :</p>
<div class="flex flex-col md:flex-row gap-[5vw] md:gap-[1vw]">
<input
class="h-[10vw] md:h-[3vw] rounded-[1vw] px-[1vw] md:w-[40vw] border"
type="text"
placeholder="موضوع تیکت را وارد کنید"
v-model="subject"
/>
<button
class="text-[3vw] md:text-[0.7vw] greenButton rounded-[1vw] px-[1.5vw] h-[10vw] md:h-[3vw]"
@click="sendTicket"
>
ثبت
</button>
<button
class="text-[3vw] md:text-[0.7vw] bg-red-400 rounded-[1vw] text-white px-[1vw] h-[10vw] md:h-[3vw]"
@click="addTicketForm = false"
>
انصراف
</button>
</div>
</div> -->
</div>
</template>
pages/frequently-questions/index.vue
+205
View File
@@ -0,0 +1,205 @@
<template>
<div class="flexBox overflow-x-hidden !max-w-[100vw]">
<div class="relative flexBox round">
<img
src="/public/images/questions.jpg"
alt=""
class="relative ask object-cover mt-[7.4vw]"
/>
<h1 class="absolute text-white mt-[10vw] thin text-[2.706vw] font-bold">
سؤالات متداول
</h1>
<svg
class="absolute w-[1.719vw] h-[6.979vw] left-[38vw] mt-[30vw]"
viewBox="0 0 33 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33 -2.88495e-06C20.6662 5.8727 4.22709 37.5761 1.23394 60.1708C-2.00567 84.6276 0.711141 98.6363 14.4574 127.343C12.5088 126.917 10.9951 126.517 9.45562 126.27C7.77956 126.001 6.0776 125.741 4.39053 125.763C3.8651 125.77 3.00726 126.661 2.93201 127.228C2.86018 127.77 3.47837 128.766 4.0187 128.963C8.69395 130.663 13.4077 132.265 18.1381 133.815C19.7168 134.333 20.886 133.766 21.3134 132.069C22.8841 125.831 24.5361 119.612 25.9711 113.344C26.3096 111.867 25.9206 110.228 25.8514 108.229C21.7095 109.79 22.1803 113.239 21.07 115.695C19.8962 118.292 19.1895 121.093 18.0745 124.412C12.6278 116.45 9.19096 108.418 7.02976 99.9164C-0.909448 68.685 5.63275 40.0232 23.373 13.4706C25.6829 10.0144 28.3993 6.82148 30.8833 3.47536C31.5548 2.57061 32.0643 1.55003 33 -2.88495e-06Z"
fill="white"
/>
</svg>
</div>
</div>
<div class="text-[#878787] mt-[10vw] mb-[10vw] flex flex-col mx-auto justify-center w-[80vw]">
<button class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
<div class="flexBox gap-[2vw]">
<p class="text-[1.901vw] font-bold ">01</p>
<h2 class="text-[0.938vw] font-semibold thin">
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
</h2>
</div>
<svg
class="h-[2.604vw] w-[2.604vw] transition"
viewBox="0 0 50 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
<path
id="center"
d="M17.6665 25.5H32.3332"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="around"
d="M25 32.8334V18.1667"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
</div>
<div class="border-b py-[0.2vw]"></div>
<button class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
<div class="flexBox gap-[2vw]">
<p class="text-[1.901vw] font-bold ">01</p>
<h2 class="text-[0.938vw] font-semibold thin">
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
</h2>
</div>
<svg
class="h-[2.604vw] w-[2.604vw] transition"
viewBox="0 0 50 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
<path
id="center"
d="M17.6665 25.5H32.3332"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="around"
d="M25 32.8334V18.1667"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
</div>
<div class="border-b py-[0.2vw]"></div>
<!-- <button class="accordion ">متن تست 2</button>
<div class="content">
<p>لوریپسوم...</p>
</div>
<button class="accordion">متن تست 3</button>
<div class="content">
<p>لوریپسوم...</p>
</div> -->
</div>
</template>
<script setup>
if (process.client) {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + 50 + "px";
}
});
}
}
</script>
<style scoped>
.accordion {
max-width: 100vw !important;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}
.active {
background-color: #E0FEFF;
}
.active svg {
transform: rotate(45deg);
transition: 0.2s;
}
.active svg path {
stroke: #E0FEFF;
}
.active rect {
fill: #0D3F40;
}
.active p {
color: #0D3F40;
}
.active h2 {
color: #383E43;
}
/*.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}*/
.content {
max-width: 100vw !important;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.ask {
filter: brightness(50%);
border-radius:0 0 200% 200% / 80%;
}
</style>
public/images/questions.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB