48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
value: number
|
|
icon: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[110px] h-[66px] relative">
|
|
<div class="space-y-3 ">
|
|
<div class="flex items-end gap-3">
|
|
<Iconify :icon="icon" class="w-[38px] h-[38px] shrink-0 " />
|
|
<div class="text-[24px] text-shadow">
|
|
{{ value }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-[14px]">
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
<svg viewBox="0 0 96 66" class="absolute top-0 left-0 w-full h-full " 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="编组 12" clip-path="url(#clip0_0_10738)">
|
|
<g id="icon_bar" opacity="0.5">
|
|
<path id="直线 20" d="M0.646341 44.0854H88.5488" stroke="white" stroke-linecap="square" />
|
|
<circle id="æ¤åœ†å½¢" cx="92.4268" cy="44.0853" r="2.73171" stroke="white" />
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_0_10738" x1="4.02103" y1="0.0608013" x2="4.02103" y2="31.9686" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white" />
|
|
<stop offset="1" stop-color="#6AF6FA" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_0_10738">
|
|
<rect width="95.6585" height="66" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-shadow{
|
|
text-shadow: 0px 1px 6px #84F8FB;
|
|
}
|
|
</style>
|