api / tickets

components/Card.vue

@@ -1,15 +1,14 @@
 <template>
-    <div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
-
-
+    <div  class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
         <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
                 <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
             </p>
-            <NuxtImg style="object-fit: cover;" src="/images/course.png" alt="laravel"
+            <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>
@@ -20,8 +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]">
                 <NuxtLink to="/ترفندهای-پایتون"
                     class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
-                    ترفند های کاربردی
-                    پایتون
+                 {{props.course?.name}}
                </NuxtLink>
                 <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                     <p class="flex items-center text-[#878787]">
@@ -78,7 +76,8 @@
                     </p>
                 </div>
                 <div class="flex justify-between">
-                    <button
+                 
+                    <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
@@ -91,7 +90,7 @@
                                 stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
     
-                    </button>
+                    </NuxtLink>
                     <span @click="change">
                         <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">
@@ -124,9 +123,11 @@
             </div>
         </div>
     </div>
+   
 </template>
 <script setup>
 import { useToast } from 'vue-toastification'
+const props = defineProps(['course'])
 const toast = useToast()
 const change = () =>{
     toast.error('متن تست')