update

2024-06-02 14:34:03 +03:30
parent 69ad899b35
commit b6dcacce95
12 changed files with 221 additions and 117 deletions
@@ -3,8 +3,8 @@
        <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]">
-                {{props.course?.price}},000
-                <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
+                {{props.course?.price == 0 ? 'رایگان' : props.course?.price + ',000'}}
+                <span v-if="!props.course?.price == 0" 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]"
@@ -19,7 +19,7 @@
            <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]">
                <h1
                    class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
-                 {{props.course?.name}}
+                 {{hideEndOfString(props.course?.name)}}
            </h1>
                <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                    <p class="flex items-center text-[#878787]">
@@ -106,7 +106,7 @@
                        </svg>
    
                    </NuxtLink>
-                    <span @click="change">
+                    <span>
                        <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
@@ -143,10 +143,20 @@
 <script setup>
 import { useToast } from 'vue-toastification'
 const props = defineProps(['course']);
+const MyArray = ['Salam','Man','Sadegh','Hastam'];
 const toast = useToast()
-const change = () =>{
-    toast.error('متن تست')
+
+function hideEndOfString(inputString) {
+    const words = inputString.split(' ');
+    if (words.length > 8) {
+        const truncatedWords = words.slice(0, 8);
+        return truncatedWords.join(' ') + '...';
+    } else {
+        return inputString;
+    }
 }
+
+
 </script>
 <style scoped>
 .post::before {
@@ -1,53 +1,7 @@
 <template>
-  <div
-    id="filters"
-    class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
-  >
-    <div class="flex items-center justify-between w-full">
-      <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
-      <svg
-        @click="closeSortOptions"
-        class="w-[5.641vw] h-[5.641vw]"
-        viewBox="0 0 22 22"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
-          stroke="#878787"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-
-    <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
-      <li class="border-b py-[4vw] flex justify-between items-center">
-        <span>
-            همه ی دوره ها
-        </span>
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-    </li>
-      <li class="border-b py-[4vw]">دوره های رایگان</li>
-      <li class="border-b py-[4vw]">ارزانترین</li>
-      <li class="py-[4vw]">گرانترین</li>
-    </ul>
-  </div>
+ 
 </template>

 <script setup>
-const closeSortOptions = () => {
-  if (process.client) {
-    document.getElementById("brightnessFilter").style.filter = "none";
-    document.getElementById("brightnessFilter").style.backdropFilter = "none";
-    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
-    document
-      .getElementsByTagName("html")[0]
-      .classList.remove("overflow-hidden");
-  }
-};

 </script>
@@ -28,7 +28,8 @@
        >
          دوره های پیشنهادی
        </h5>
-        <div
+  
+        <div 
          class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
        >
        <div v-for="(course, index) in data.courses"
@@ -36,6 +37,7 @@
        <Card :course="course" />
      
      </div>
+    
        </div>
      </div>