publication v-1

components/ProgressCard.vue

@@ -3,11 +3,11 @@
     <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
           <p
           class="text-black 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.item?.price > 0 ? numberFormat(props.item?.price) + 'تومان' : 'رایگان' }}
+ 
+         {{ props.item?.item.price > 0 ? numberFormat(props.item?.item.price) + 'تومان' : 'رایگان' }}
      
           </p>
-          <NuxtImg style="object-fit: cover;" :src="props.item?.image"
+          <NuxtImg style="object-fit: cover;" :src="props.item?.item.image"
             :placeholder="[30, 20]"
             alt="laravel"
             class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
@@ -20,7 +20,7 @@
         <p @click="change"
             class="cursor-pointer mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
           >
-        {{ props.item?.name }}
+        {{ props.item?.item.name }}
      </p>
 
           <div
@@ -28,13 +28,14 @@
           >
             <div class="flex justify-between w-full mb-[0.417vw]">
               <p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
-              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">0 %</p>
+              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">{{ Math.floor(props.item.completionPercentage) }} %</p>
             </div>
             <div
             id="progressbar"
             class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
           >
             <div
+                   :style="{ width: activeClass + '%' }"
               class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
             ></div>
             </div>
@@ -45,10 +46,12 @@
 <script setup>
 
 const props = defineProps(['item']);
+
+const activeClass = ref(props.item.completionPercentage);
 const router = useRouter()
 const route = useRoute()
 const change = () =>{
-  router.replace(`/${props.item.id}`)
+  router.replace(`/${props.item.item.id}`)
 }
 </script>
 
@@ -80,7 +83,6 @@ const change = () =>{
 }
 #progressbar > div {
   background-color: #0d3f40;
-  width: 77%;
   float: left;
 
   left: 0;