212 lines
9.9 KiB
Vue
212 lines
9.9 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
value: number
|
|
unit: string
|
|
icon: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class=" w-[196px] h-[75px] relative">
|
|
<div class="absolute top-0 left-20 opacity-60 text-[14px]">
|
|
{{ title }}
|
|
</div>
|
|
<div class="absolute top-6 left-[88px] flex justify-center items-center gap-1">
|
|
<span class=" text-[22px]">{{ value }}</span>
|
|
<span class="opacity-60 text-[14px]">{{ unit }}</span>
|
|
</div>
|
|
|
|
<div class="">
|
|
<Iconify :icon="icon" class=" w-[32px] h-[32px] absolute top-[12px] left-[12px]" />
|
|
</div>
|
|
<svg
|
|
viewBox="0 0 196 75" 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="1" clip-path="url(#clip0_0_11033)">
|
|
|
|
<path
|
|
id="矩形"
|
|
d="M75.5131 27.0529H188.544L173.645 57.7836H60.9809C59.8423 57.7836 59.1188 56.5649 59.6641 55.5653L75.0742 27.3134C75.1618 27.1528 75.3302 27.0529 75.5131 27.0529Z"
|
|
fill="url(#paint0_radial_0_11033)" fill-opacity="0.2" stroke="url(#paint1_linear_0_11033)"
|
|
/>
|
|
<path
|
|
id="å¡«å……" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M80.4048 24.1894C80.58 23.8681 80.9167 23.6682 81.2827 23.6682H195.112L179.728 55.399H66.7504C65.2323 55.399 64.2677 53.774 64.9946 52.4413L80.4048 24.1894Z"
|
|
fill="url(#paint2_linear_0_11033)" fill-opacity="0.5"
|
|
/>
|
|
<g id="倒影">
|
|
<mask
|
|
id="mask0_0_11033" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="59" y="58" width="106"
|
|
height="17"
|
|
>
|
|
<path
|
|
id="矩形_2" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M59.5352 58.2836H164.343V74.6298H59.5352V58.2836Z" fill="url(#paint3_linear_0_11033)"
|
|
/>
|
|
</mask>
|
|
<g mask="url(#mask0_0_11033)">
|
|
<path
|
|
id="å¡«å……_2" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M76.5586 88.5317C76.7338 88.853 77.0705 89.0529 77.4365 89.0529H191.266L175.881 57.3221H62.9042C61.3861 57.3221 60.4215 58.947 61.1484 60.2798L76.5586 88.5317Z"
|
|
fill="url(#paint4_linear_0_11033)" fill-opacity="0.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<path
|
|
id="边框"
|
|
d="M81.2827 24.1682H194.314L179.414 54.899H66.7504C65.6118 54.899 64.8884 53.6803 65.4336 52.6807L80.8437 24.4288C80.9313 24.2682 81.0997 24.1682 81.2827 24.1682Z"
|
|
stroke="url(#paint5_linear_0_11033)"
|
|
/>
|
|
<g id="编组 4">
|
|
<g id="座">
|
|
<g id="底部模糊" opacity="0.87" filter="url(#filter0_f_0_11033)">
|
|
<path
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M27.9334 39.7012C28.2471 39.5159 28.6367 39.5159 28.9504 39.7012L45.243 49.3224C46.5537 50.0964 46.5537 51.9927 45.243 52.7667L28.9504 62.3879C28.6367 62.5731 28.2471 62.5732 27.9334 62.3879L11.6408 52.7667C10.3301 51.9927 10.3301 50.0964 11.6408 49.3224L27.9334 39.7012Z"
|
|
fill="url(#paint6_linear_0_11033)"
|
|
/>
|
|
</g>
|
|
<path
|
|
id="深层" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M28.0706 28.5854C28.3843 28.4001 28.7739 28.4001 29.0876 28.5854L53.8416 43.2032C55.1523 43.9772 55.1523 45.8735 53.8416 46.6475L29.0876 61.2654C28.7739 61.4506 28.3843 61.4506 28.0706 61.2654L3.31665 46.6475C2.00594 45.8735 2.00594 43.9772 3.31665 43.2032L28.0706 28.5854Z"
|
|
fill="url(#paint7_linear_0_11033)" fill-opacity="0.6"
|
|
/>
|
|
<path
|
|
id="基层"
|
|
d="M28.935 23.0745L53.689 37.6923C54.8031 38.3502 54.8031 39.9621 53.689 40.62L28.935 55.2378C28.7155 55.3675 28.4427 55.3675 28.2232 55.2378L3.4692 40.62C2.3551 39.9621 2.35509 38.3502 3.4692 37.6923L28.2232 23.0745C28.4427 22.9448 28.7155 22.9448 28.935 23.0745Z"
|
|
fill="url(#paint8_radial_0_11033)" stroke="url(#paint9_linear_0_11033)" stroke-width="0.6"
|
|
/>
|
|
</g>
|
|
<g id="æ¤åœ†å½¢" filter="url(#filter1_df_0_11033)">
|
|
<ellipse
|
|
cx="27.9068" cy="36.0023" rx="11.1538" ry="7.88462" fill="url(#paint10_linear_0_11033)"
|
|
fill-opacity="0.4"
|
|
/>
|
|
</g>
|
|
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter0_f_0_11033" x="-5.65198" y="23.2526" width="68.1877" height="55.584"
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"
|
|
>
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="8.15485" result="effect1_foregroundBlur_0_11033" />
|
|
</filter>
|
|
<filter
|
|
id="filter1_df_0_11033" x="11.7529" y="25.3994" width="30.3076" height="27.4875"
|
|
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 dx="-1" dy="5" />
|
|
<feGaussianBlur stdDeviation="2" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.0700061 0 0 0 0 0.128382 0 0 0 0 0.238646 0 0 0 0.5 0" />
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_11033" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_11033" result="shape" />
|
|
<feGaussianBlur stdDeviation="1.35914" result="effect2_foregroundBlur_0_11033" />
|
|
</filter>
|
|
<radialGradient
|
|
id="paint0_radial_0_11033" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(66.8013 53.1895) rotate(90) scale(14.2635 86.1863)"
|
|
>
|
|
<stop stop-color="#466C90" />
|
|
<stop offset="1" stop-color="#183F64" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<linearGradient
|
|
id="paint1_linear_0_11033" x1="106.274" y1="66.5687" x2="107.89" y2="42.6304"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="white" stop-opacity="0.08" />
|
|
<stop offset="0.49066" stop-color="white" stop-opacity="0.3" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint2_linear_0_11033" x1="37.4551" y1="6.637" x2="26.2427" y2="80.4089"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#031518" />
|
|
<stop offset="0.404838" stop-color="#446D9C" />
|
|
<stop offset="1" stop-color="#2E6376" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint3_linear_0_11033" x1="77.816" y1="58.2836" x2="77.816" y2="68.9275"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#EEEEEE" />
|
|
<stop offset="1" stop-color="#D8D8D8" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint4_linear_0_11033" x1="33.6089" y1="106.084" x2="22.3965" y2="32.3122"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#031518" />
|
|
<stop offset="0.404838" stop-color="#446D9C" />
|
|
<stop offset="1" stop-color="#2E6376" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint5_linear_0_11033" x1="199.904" y1="46.5626" x2="196.423" y2="10.3945"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="white" stop-opacity="0.01" />
|
|
<stop offset="0.830588" stop-color="white" stop-opacity="0.3" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint6_linear_0_11033" x1="19.3075" y1="55.1144" x2="12.6648" y2="73.8499"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#6AD4D1" />
|
|
<stop offset="1" stop-color="#5E96B8" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint7_linear_0_11033" x1="15.5249" y1="50.7417" x2="6.03154" y2="77.5172"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#1B2D4F" />
|
|
<stop offset="1" stop-color="#1B2D4F" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="paint8_radial_0_11033" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(28.9127 49.7191) rotate(109.522) scale(28.4087)"
|
|
>
|
|
<stop stop-color="#67A4E1" />
|
|
<stop offset="1" stop-color="#67A4E1" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<linearGradient
|
|
id="paint9_linear_0_11033" x1="12.0455" y1="23.1229" x2="12.8914" y2="54.368"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#DDFFFF" stop-opacity="0.01" />
|
|
<stop offset="1" stop-color="#DDFFFF" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint10_linear_0_11033" x1="16.7529" y1="28.1177" x2="16.7529" y2="43.8869"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#DDFFFF" stop-opacity="0.01" />
|
|
<stop offset="1" stop-color="#80BAF3" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint11_linear_0_11033" x1="12.0304" y1="10.0516" x2="12.0304" y2="37.1307"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="white" />
|
|
<stop offset="1" stop-color="#6AF6FA" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_0_11033">
|
|
<rect width="194.712" height="74.0144" fill="white" transform="translate(0.400391 0.615356)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|