28 lines
642 B
Vue
28 lines
642 B
Vue
<script setup lang="ts">
|
|
|
|
const props = defineProps<{
|
|
total: number
|
|
done: number
|
|
open: number
|
|
}>()
|
|
|
|
const done = 100 * props.done / props.total;
|
|
const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<span class="relative w-full h-2 bg-gray-300 inline-block">
|
|
<span v-if="notDone !== done"
|
|
class="absolute bg-orange-500 h-full"
|
|
:style="{width: `${notDone}%`}"
|
|
></span>
|
|
<span v-if="done > 0"
|
|
class="absolute bg-green-500 h-full"
|
|
:style="{width: `${done}%`}"
|
|
></span>
|
|
</span>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|