103 lines
6.1 KiB
Vue
103 lines
6.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
value: number
|
|
icon: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[257px] h-[89px] relative">
|
|
<div class="flex w-full h-full">
|
|
<div class="flex justify-center items-center w-[82px] h-full">
|
|
<Iconify :icon="icon" class="w-[50px] h-[50px]" />
|
|
</div>
|
|
<div class="flex flex-col items-start pl-[20px] justify-center flex-1 w-full h-full">
|
|
<div class="text-[#00F8F4] text-[34px] inline-block align-baseline">
|
|
{{ value }}
|
|
</div>
|
|
<div class="text-[#A5D8FC] text-[16px] -mt-3 pl-1">
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg viewBox="0 0 257 89" fill="none" class="absolute top-0 left-0 -z-[1]" 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="box1">
|
|
<g id="å¡«å……">
|
|
<g filter="url(#filter0_i_0_11197)">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H257V88H0V0Z" fill="#263343" fill-opacity="0.5" />
|
|
</g>
|
|
<path d="M0.5 0.5H256.5V87.5H0.5V0.5Z" stroke="#9DA3AF" stroke-opacity="0.5" />
|
|
</g>
|
|
<g id="å¡«å……_2" opacity="0.2">
|
|
<rect width="82" height="88" fill="#577B95" fill-opacity="0.75" />
|
|
<rect width="82" height="88" fill="url(#paint0_linear_0_11197)" />
|
|
</g>
|
|
<g id="高光" opacity="0.45">
|
|
<rect width="82" height="88" fill="url(#paint1_radial_0_11197)" />
|
|
<rect width="82" height="88" fill="url(#paint2_radial_0_11197)" />
|
|
</g>
|
|
<g id="编组 92">
|
|
<path id="路径 43" opacity="0.663407" fill-rule="evenodd" clip-rule="evenodd" d="M0 64.2831V88.2831H26L0 64.2831Z" fill="#253645" />
|
|
<path id="路径 48" opacity="0.0416248" fill-rule="evenodd" clip-rule="evenodd" d="M15 85.2831L35.5479 64.2831L38 85.2831H15Z" fill="#FEFFFF" />
|
|
<path id="路径 49" opacity="0.0482428" fill-rule="evenodd" clip-rule="evenodd" d="M29 87.2831L52 75.2831L48.029 87.2831H29Z" fill="#FEFFFF" />
|
|
<path id="路径 58" opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M78.1507 58.2831L68 86.2831L82 72.2831L78.1507 58.2831Z" fill="#FEFFFF" />
|
|
<path id="路径 59" opacity="0.135917" fill-rule="evenodd" clip-rule="evenodd" d="M59.1277 73.2831L57 87.2831H74L59.1277 73.2831Z" fill="#FEFFFF" />
|
|
</g>
|
|
<rect id="边框" opacity="0.66428" x="0.75" y="0.75" width="80.5" height="86.5" stroke="url(#paint3_linear_0_11197)" stroke-width="1.5" />
|
|
|
|
<rect id="矩形" width="4" height="4" fill="#FFF9FF" />
|
|
<rect id="矩形_2" y="84" width="4" height="4" fill="#FFF9FF" />
|
|
<rect id="矩形_3" x="253" width="4" height="4" fill="#FFF9FF" />
|
|
<rect id="矩形_4" x="253" y="84" width="4" height="4" fill="#FFF9FF" />
|
|
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_i_0_11197" x="0" y="0" width="257" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
|
<feOffset />
|
|
<feGaussianBlur stdDeviation="2.5" />
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.577123 0 0 0 0 0.766759 0 0 0 0 0.884641 0 0 0 0.3 0" />
|
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_11197" />
|
|
</filter>
|
|
<filter id="filter1_d_0_11197" x="14" y="24" width="52" height="50.0909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
|
<feOffset dy="2" />
|
|
<feGaussianBlur stdDeviation="1" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_11197" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_11197" result="shape" />
|
|
</filter>
|
|
<linearGradient id="paint0_linear_0_11197" x1="0" y1="0" x2="0" y2="88" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#467591" />
|
|
<stop offset="1" stop-color="#84C3D5" />
|
|
</linearGradient>
|
|
<radialGradient id="paint1_radial_0_11197" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41 -16.5514) rotate(90) scale(79.4466 95.9972)">
|
|
<stop stop-color="#1D3B53" />
|
|
<stop offset="0.179646" stop-color="#1E3D55" stop-opacity="0.910177" />
|
|
<stop offset="1" stop-color="#416C89" stop-opacity="0.5" />
|
|
</radialGradient>
|
|
<radialGradient id="paint2_radial_0_11197" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.0746 82.7784) rotate(90) scale(79.4466 74.0297)">
|
|
<stop stop-color="#ACDDE4" />
|
|
<stop offset="1" stop-color="#305877" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<linearGradient id="paint3_linear_0_11197" x1="-39.4221" y1="47.3867" x2="48.1169" y2="125.818" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FEFFFF" />
|
|
<stop offset="0.986769" stop-color="#FEFFFF" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient id="paint4_linear_0_11197" x1="16.3103" y1="24.0877" x2="16.3103" y2="69.5826" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="white" />
|
|
<stop offset="1" stop-color="#9FC3C4" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_0_11197">
|
|
<rect width="81" height="62" fill="white" transform="translate(103 12)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|