update
This commit is contained in:
HAM!DREZA
+23
-8
@@ -3,12 +3,12 @@
|
||||
<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]">
|
||||
540,000
|
||||
{{props.course?.price}},000
|
||||
<span 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]"
|
||||
:format="webp"
|
||||
|
||||
class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]" />
|
||||
|
||||
</div>
|
||||
@@ -17,10 +17,10 @@
|
||||
|
||||
<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]">
|
||||
<NuxtLink to="/ترفندهای-پایتون"
|
||||
<h1
|
||||
class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
|
||||
{{props.course?.name}}
|
||||
</NuxtLink>
|
||||
</h1>
|
||||
<div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
|
||||
<p class="flex items-center text-[#878787]">
|
||||
<svg
|
||||
@@ -39,7 +39,22 @@
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="md:ms-[0.2vw]">بک اند</span>
|
||||
<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
|
||||
@@ -60,7 +75,7 @@
|
||||
fill="#E5E5E5" />
|
||||
</svg>
|
||||
|
||||
<span class="md:ms-[0.2vw]">825 دانشجو</span>
|
||||
<span class="md:ms-[0.2vw]">{{props.course?.studentsCount}} دانشجو</span>
|
||||
</p>
|
||||
<p class="flex items-center text-[#878787]">
|
||||
<svg
|
||||
@@ -72,7 +87,7 @@
|
||||
fill="#E5E5E5" />
|
||||
</svg>
|
||||
|
||||
<span class="md:ms-[0.2vw]">00:28</span>
|
||||
<span class="md:ms-[0.2vw]">{{props.course?.duration}} ساعت</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
@@ -127,7 +142,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { useToast } from 'vue-toastification'
|
||||
const props = defineProps(['course'])
|
||||
const props = defineProps(['course']);
|
||||
const toast = useToast()
|
||||
const change = () =>{
|
||||
toast.error('متن تست')
|
||||
|
||||
@@ -49,12 +49,13 @@
|
||||
<li class="pb-[0.681vw]">گران ترین</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
||||
v-for="(course, index) in data.data.value"
|
||||
:key="index"
|
||||
<div class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
||||
>
|
||||
<Card :course="course" />
|
||||
<div v-for="(course, index) in data.data.courses"
|
||||
:key="index">
|
||||
<Card :course="course" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,7 +63,8 @@
|
||||
<script setup>
|
||||
// const pages = 17 / 16
|
||||
// console.log(Math.ceil(pages));
|
||||
const data = await useFetch("/api/course");
|
||||
//const data = await useFetch("/api/course");
|
||||
const data = defineProps(['data']);
|
||||
const openSortOptions = () => {
|
||||
if (process.client) {
|
||||
document
|
||||
|
||||
@@ -17,7 +17,9 @@
|
||||
</h3>
|
||||
<span
|
||||
class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
|
||||
>42 ویدیو آموزشی</span
|
||||
>
|
||||
{{data?.count}}
|
||||
ویدیو آموزشی</span
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
@@ -79,8 +81,9 @@
|
||||
:wrapAround="true"
|
||||
class="w-full md:w-[95%]"
|
||||
>
|
||||
<Slide v-for="slide in categories" :key="slide">
|
||||
<div class="categoriesOption">{{ slide }}</div>
|
||||
<Slide v-for="slide in categories" :key="slide" @click="selectCategory(slide.id)">
|
||||
<div class="categoriesOption"
|
||||
>{{ slide.name }}</div>
|
||||
</Slide>
|
||||
</Carousel>
|
||||
|
||||
@@ -98,21 +101,30 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="pending" class="grid grid-cols-4 gap-[2vw] mt-[2vw]">
|
||||
<Loading />
|
||||
<Loading />
|
||||
<Loading />
|
||||
<Loading />
|
||||
</div>
|
||||
<courses-pageCourses-list :data="data"/>
|
||||
</template>
|
||||
<script setup>
|
||||
const categories = [
|
||||
"Python",
|
||||
"JavaScript",
|
||||
"C#",
|
||||
"php",
|
||||
"C++",
|
||||
"Ruby",
|
||||
"Node.js",
|
||||
"php",
|
||||
"C++",
|
||||
"Ruby",
|
||||
"Node.js",
|
||||
];
|
||||
const changeCategory = ref('')
|
||||
const {data, refresh, pending} = await useFetch(() => "/api/course", {
|
||||
method: "POST",
|
||||
body: {
|
||||
changeCategory
|
||||
}
|
||||
});
|
||||
const categoryLis = await useFetch("/api/category");
|
||||
// console.log('daste bandy', categoryLis.data.value);
|
||||
const categories = categoryLis.data.value;
|
||||
function selectCategory (id){
|
||||
changeCategory.value = '/category/' + id
|
||||
refresh()
|
||||
}
|
||||
|
||||
const breakpoints = {
|
||||
// 700px and up
|
||||
300: {
|
||||
|
||||
@@ -10,14 +10,15 @@
|
||||
<div
|
||||
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
||||
>
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<div v-for="(course, index) in selectedItems"
|
||||
:key="index">
|
||||
<Card :course="course" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
const data = await useFetch("/api/course");
|
||||
const selectedItems = data.data.value.courses.slice(0, 8);
|
||||
</script>
|
||||
Reference in New Issue
Block a user