34 lines
624 B
Vue
34 lines
624 B
Vue
|
<script setup>
|
||
|
|
const skill = ref(20)
|
||
|
|
const knowledge = ref(33)
|
||
|
|
const power = ref(78)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="demo-space-y">
|
||
|
|
<VProgressLinear
|
||
|
|
v-model="power"
|
||
|
|
color="primary"
|
||
|
|
height="8"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<VProgressLinear
|
||
|
|
v-model="skill"
|
||
|
|
color="primary"
|
||
|
|
height="20"
|
||
|
|
>
|
||
|
|
<template #default="{ value }">
|
||
|
|
<span>{{ Math.ceil(value) }}%</span>
|
||
|
|
</template>
|
||
|
|
</VProgressLinear>
|
||
|
|
|
||
|
|
<VProgressLinear
|
||
|
|
v-model="knowledge"
|
||
|
|
height="20"
|
||
|
|
color="primary"
|
||
|
|
>
|
||
|
|
<span>{{ Math.ceil(knowledge) }}%</span>
|
||
|
|
</VProgressLinear>
|
||
|
|
</div>
|
||
|
|
</template>
|