60 lines
2.2 KiB
Vue
60 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string
|
|
value: number
|
|
max?: number
|
|
}>()
|
|
|
|
const percent = computed(() => {
|
|
return (props.value / (props.max ?? 100)) * 100
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[32px] flex items-center justify-between">
|
|
<div class="w-[140px] opacity-60 truncate">
|
|
{{ title }}
|
|
</div>
|
|
<div class="relative w-[333px] h-[4px]">
|
|
<div class="absolute text-[#E4F3FF] text-[15px] -top-2 " :style="`padding-left:${percent}%`">
|
|
<span class="pl-2">{{ value }}</span>
|
|
</div>
|
|
|
|
<svg
|
|
viewBox="0 0 333 4" class="h-[4px] absolute top-0 left-0 z-10" :style="`width:${percent}%`" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:anim="http://www.w3.org/2000/anim" anim=""
|
|
anim:transform-origin="50% 50%" anim:duration="1" anim:ease="ease-in-out"
|
|
>
|
|
<rect
|
|
id="矩形" opacity="0.7" x="0.00170898" y="0.529053" width="333" height="3" rx="1.5"
|
|
fill="url(#paint0_linear_0_10711)" stroke="url(#paint1_linear_0_10711)"
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="paint0_linear_0_10711" x1="164.549" y1="0.551191" x2="164.346" y2="7.98045"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#A8DEFF" />
|
|
<stop offset="1" stop-color="#284257" stop-opacity="0.5" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint1_linear_0_10711" x1="225.089" y1="1.99811" x2="0.00170898" y2="1.99811"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="white" stop-opacity="0.598517" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<svg
|
|
viewBox="0 0 333 4" class="absolute top-0 left-0 -z-[1]" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:anim="http://www.w3.org/2000/anim" anim="" anim:transform-origin="50% 50%" anim:duration="1"
|
|
anim:ease="ease-in-out"
|
|
>
|
|
<rect id="矩形" opacity="0.7" x="0.00170898" y="0.529053" width="333" height="3" rx="1.5" fill="#2D4D67" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|