29 lines
654 B
Vue
29 lines
654 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
|
|
console.log(done, notDone)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<span class="relative w-full h-2 bg-gray-300">
|
|
<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>
|