create frequently questions page

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
@@ -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;