61 lines
2.5 KiB
Vue
61 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
value: number
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[77px] relative w-[140px]">
|
|
<div class="w-full text-center text-[#E4F3FF] text-[14px] scale-95 opacity-70">
|
|
{{ title }}
|
|
</div>
|
|
<div class="bottom-0 h-[50px] flex justify-center items-center w-full absolute text-[24px] text-[#00F8F4]">
|
|
{{ value }}
|
|
</div>
|
|
<svg
|
|
class="absolute bottom-0" viewBox="0 0 140 75" 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"
|
|
>
|
|
<g id="1" clip-path="url(#clip0_0_11080)">
|
|
<path
|
|
id="BG" opacity="0.39908" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M3 33.1563L9.02438 25H129.615L137.242 33.1563L137.36 66L129.615 74.3253L9.02438 74.0097L3 66L3 33.1563Z"
|
|
fill="url(#paint0_radial_0_11080)"
|
|
/>
|
|
<path id="路径 41" opacity="0.245359" d="M6.91697 70.52H133.553" stroke="white" stroke-width="0.6" />
|
|
<path
|
|
id="路径 31" opacity="0.4" d="M3.23047 32.6844L9.25485 24.6747H129.846L137.591 32.6844"
|
|
stroke="white"
|
|
/>
|
|
<path
|
|
id="路径 31_2" opacity="0.4" d="M3.23047 65.6747L9.25485 73.6844H129.846L137.591 65.6747"
|
|
stroke="white"
|
|
/>
|
|
<rect id="矩形" y="48" width="4.94438" height="2.7" rx="1" fill="#2EF9CB" />
|
|
<rect id="矩形_2" x="135" y="48" width="4.94438" height="2.7" rx="1" fill="#2EF9CB" />
|
|
|
|
<g id="四边">
|
|
<path id="路径 32" d="M3.23047 32.831L9.25485 24.6747H15.5446" stroke="#BFE2FB" />
|
|
<path id="路径 32_2" d="M136.544 32.831L130.52 24.6747H124.23" stroke="#BFE2FB" />
|
|
<path id="路径 32_3" d="M3.23047 65.6747L9.25485 73.831H15.5446" stroke="#BFE2FB" />
|
|
<path id="路径 32_4" d="M136.544 65.6747L130.52 73.831H124.23" stroke="#BFE2FB" />
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<radialGradient
|
|
id="paint0_radial_0_11080" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(66.7454 74.3253) rotate(91.4485) scale(67.9372 416.887)"
|
|
>
|
|
<stop stop-color="#67A4E1" />
|
|
<stop offset="1" stop-color="#67A4E1" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<clipPath id="clip0_0_11080">
|
|
<rect width="139.944" height="74.6747" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|