129 lines
12 KiB
Vue
129 lines
12 KiB
Vue
<script setup lang="ts">
|
||
defineProps<{
|
||
title: string
|
||
value: number
|
||
unit: string
|
||
icon: string
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-[420px] h-[92px] relative">
|
||
<div class="flex items-center h-full gap-10 pt-1 pl-8">
|
||
<div class="opacity-60 text-[14px]">
|
||
{{ title }}
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<div class="text-[24px] text-[#00F8F4]">
|
||
{{ value }}
|
||
</div>
|
||
<div class="opacity-60 text-[14px]">
|
||
{{ unit }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Iconify :icon="icon" class="absolute top-1/2 right-9 -translate-y-1/2 w-[45px] h-[45px]" />
|
||
<svg
|
||
viewBox="0 0 420 92" 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="å›åŒºæ€»äººæ•°" clip-path="url(#clip0_0_10780)">
|
||
<rect id="矩形" opacity="0.39908" width="420" height="92" rx="46" fill="url(#paint0_linear_0_10780)" />
|
||
<g id="车ä½_æ ‡å¿—">
|
||
<circle
|
||
id="æ¤åœ†å½¢" opacity="0.5" cx="360.745" cy="45.9989" r="35.2706"
|
||
stroke="url(#paint1_linear_0_10780)"
|
||
/>
|
||
<path
|
||
id="形状" opacity="0.5"
|
||
d="M383.869 65.3988L383.226 66.1646L383.992 66.8077L384.635 66.0419L383.869 65.3988ZM390.928 45.9989H391.928V44.9989H390.928V45.9989ZM383.103 64.7557L382.337 64.1126L381.694 64.8784L382.46 65.5215L383.103 64.7557ZM389.928 45.9989V44.9989H388.928V45.9989H389.928ZM332.909 34.3088L333.297 33.3869L332.375 32.9993L331.988 33.9212L332.909 34.3088ZM333.831 34.6964L334.753 35.084L335.141 34.1621L334.219 33.7745L333.831 34.6964ZM332.295 52.5294L332.518 53.5042L333.493 53.2814L333.27 52.3065L332.295 52.5294ZM331.321 52.7522L330.346 52.975L330.568 53.9499L331.543 53.7271L331.321 52.7522ZM384.512 64.6331L384.359 64.5044L383.073 66.036L383.226 66.1646L384.512 64.6331ZM383.899 64.1186L383.746 63.9899L382.46 65.5215L382.613 65.6501L383.899 64.1186ZM383.869 65.3988C384.095 65.13 384.316 64.8572 384.532 64.5806L382.957 63.3483C382.755 63.6067 382.548 63.8615 382.337 64.1126L383.869 65.3988ZM386.346 61.9942C386.718 61.3999 387.07 60.7917 387.401 60.1705L385.636 59.2302C385.327 59.8101 384.998 60.3779 384.651 60.9329L386.346 61.9942ZM388.738 57.3075C389.001 56.6583 389.241 55.9979 389.459 55.3272L387.557 54.7097C387.354 55.3356 387.129 55.9519 386.884 56.5578L388.738 57.3075ZM390.275 52.2744C390.42 51.5907 390.541 50.8986 390.638 50.1989L388.658 49.9231C388.567 50.5764 388.453 51.2225 388.318 51.8606L390.275 52.2744ZM390.91 47.0521C390.922 46.7025 390.928 46.3514 390.928 45.9989H388.928C388.928 46.3285 388.923 46.6567 388.911 46.9835L390.91 47.0521ZM389.928 46.9989H390.128V44.9989H389.928V46.9989ZM390.728 46.9989H390.928V44.9989H390.728V46.9989ZM389.928 45.9989C389.928 46.3402 389.922 46.68 389.911 47.0184L391.91 47.087C391.922 46.7258 391.928 46.363 391.928 45.9989H389.928ZM389.648 50.0623C389.554 50.7388 389.436 51.4078 389.296 52.0686L391.253 52.4825C391.402 51.7762 391.528 51.0611 391.629 50.3382L389.648 50.0623ZM388.508 55.0189C388.297 55.667 388.065 56.3052 387.811 56.9326L389.665 57.6823C389.937 57.0117 390.185 56.3294 390.41 55.6365L388.508 55.0189ZM386.519 59.6999C386.199 60.3004 385.859 60.8885 385.499 61.4631L387.194 62.5244C387.578 61.9104 387.942 61.282 388.284 60.6402L386.519 59.6999ZM383.745 63.9643C383.535 64.2319 383.321 64.4957 383.103 64.7557L384.635 66.0419C384.868 65.7642 385.096 65.4824 385.32 65.1965L383.745 63.9643ZM331.988 33.9212C331.828 34.3016 331.675 34.6859 331.53 35.0738L333.403 35.7746C333.539 35.4117 333.682 35.0522 333.831 34.6964L331.988 33.9212ZM330.438 38.6289C330.245 39.4278 330.082 40.2388 329.951 41.0603L331.926 41.3747C332.049 40.606 332.201 39.8473 332.382 39.1L330.438 38.6289ZM329.586 44.7598C329.57 45.1709 329.562 45.584 329.562 45.9989H331.562C331.562 45.61 331.57 45.223 331.585 44.8379L329.586 44.7598ZM329.562 45.9989C329.562 46.47 329.572 46.9387 329.593 47.4049L331.591 47.3161C331.572 46.8795 331.562 46.4404 331.562 45.9989H329.562ZM330.063 51.5964C330.147 52.0596 330.241 52.5192 330.346 52.975L332.295 52.5294C332.198 52.1029 332.11 51.6729 332.031 51.2396L330.063 51.5964ZM331.543 53.7271L331.738 53.6825L331.293 51.7328L331.098 51.7773L331.543 53.7271ZM332.323 53.5488L332.518 53.5042L332.073 51.5545L331.878 51.5991L332.323 53.5488ZM333.27 52.3065C333.176 51.8947 333.091 51.4794 333.015 51.0608L331.047 51.4176C331.128 51.866 331.22 52.3109 331.321 52.7522L333.27 52.3065ZM332.59 47.2712C332.571 46.8495 332.562 46.4254 332.562 45.9989H330.562C330.562 46.4549 330.572 46.9087 330.592 47.3599L332.59 47.2712ZM332.562 45.9989C332.562 45.6233 332.569 45.2496 332.584 44.8777L330.585 44.7996C330.57 45.1975 330.562 45.5973 330.562 45.9989H332.562ZM332.914 41.5332C333.032 40.7908 333.179 40.0582 333.354 39.3365L331.41 38.8655C331.223 39.6387 331.065 40.4236 330.938 41.2189L332.914 41.5332ZM334.34 36.1252C334.471 35.7747 334.609 35.4276 334.753 35.084L332.909 34.3088C332.755 34.677 332.607 35.0489 332.466 35.4244L334.34 36.1252ZM334.219 33.7745L334.034 33.697L333.259 35.5407L333.444 35.6182L334.219 33.7745ZM333.481 33.4645L333.297 33.3869L332.522 35.2306L332.706 35.3081L333.481 33.4645Z"
|
||
fill="url(#paint2_linear_0_10780)"
|
||
/>
|
||
<path
|
||
id="形状_2"
|
||
d="M371.334 85.4858L369.39 85.959L369.864 87.9022L371.807 87.429L371.334 85.4858ZM399.915 60.689L401.771 61.4335L402.516 59.5773L400.66 58.8327L399.915 60.689ZM371.097 84.5142L370.624 82.571L368.681 83.0441L369.154 84.9874L371.097 84.5142ZM398.987 60.3167L399.732 58.4604L397.875 57.7159L397.131 59.5721L398.987 60.3167ZM397.096 24.2053L398.815 23.1837L397.794 21.4643L396.074 22.4859L397.096 24.2053ZM400.99 57.6733L400.393 59.5819L402.301 60.1795L402.899 58.2709L400.99 57.6733ZM400.036 57.3745L398.127 56.7768L397.53 58.6855L399.438 59.2831L400.036 57.3745ZM396.236 24.7161L395.215 22.9967L393.495 24.0182L394.517 25.7377L396.236 24.7161ZM371.807 87.429C385.485 84.0984 396.616 74.2871 401.771 61.4335L398.059 59.9444C393.378 71.6138 383.269 80.5213 370.86 83.5426L371.807 87.429ZM369.154 84.9874L369.39 85.959L373.277 85.0126L373.04 84.041L369.154 84.9874ZM397.131 59.5721C392.569 70.9455 382.714 79.627 370.624 82.571L371.57 86.4574C384.931 83.2041 395.806 73.6188 400.843 61.0612L397.131 59.5721ZM400.66 58.8327L399.732 58.4604L398.242 62.1729L399.171 62.5452L400.66 58.8327ZM404.873 45.3005C404.873 37.2265 402.664 29.661 398.815 23.1837L395.376 25.2269C398.868 31.103 400.873 37.9653 400.873 45.3005H404.873ZM402.899 58.2709C404.182 54.1724 404.873 49.8147 404.873 45.3005H400.873C400.873 49.4047 400.245 53.3595 399.082 57.0757L402.899 58.2709ZM399.438 59.2831L400.393 59.5819L401.588 55.7647L400.634 55.4658L399.438 59.2831ZM399.873 45.3005C399.873 49.3022 399.261 53.1563 398.127 56.7768L401.945 57.9721C403.198 53.9692 403.873 49.7122 403.873 45.3005H399.873ZM394.517 25.7377C397.919 31.4635 399.873 38.15 399.873 45.3005H403.873C403.873 37.4112 401.715 30.0215 397.956 23.6945L394.517 25.7377ZM396.074 22.4859L395.215 22.9967L397.258 26.4355L398.117 25.9247L396.074 22.4859Z"
|
||
fill="url(#paint3_linear_0_10780)"
|
||
/>
|
||
<path
|
||
id="形状_3"
|
||
d="M350.428 6.51419L352.372 6.04102L351.898 4.0978L349.955 4.57097L350.428 6.51419ZM321.847 31.311L319.991 30.5665L319.246 32.4227L321.102 33.1673L321.847 31.311ZM350.665 7.4858L351.138 9.42902L353.081 8.95585L352.608 7.01263L350.665 7.4858ZM322.775 31.6833L322.03 33.5396L323.887 34.2841L324.631 32.4279L322.775 31.6833ZM324.666 67.7947L322.947 68.8163L323.968 70.5357L325.688 69.5141L324.666 67.7947ZM320.772 34.3267L321.369 32.4181L319.461 31.8205L318.863 33.7291L320.772 34.3267ZM321.726 34.6255L323.635 35.2232L324.232 33.3145L322.324 32.7169L321.726 34.6255ZM325.526 67.2839L326.547 69.0033L328.267 67.9818L327.245 66.2623L325.526 67.2839ZM349.955 4.57097C336.277 7.90163 325.146 17.7129 319.991 30.5665L323.703 32.0556C328.384 20.3862 338.493 11.4787 350.902 8.45741L349.955 4.57097ZM352.608 7.01263L352.372 6.04102L348.485 6.98736L348.722 7.95897L352.608 7.01263ZM324.631 32.4279C329.193 21.0545 339.048 12.373 351.138 9.42902L350.192 5.54258C336.831 8.79591 325.956 18.3812 320.919 30.9388L324.631 32.4279ZM321.102 33.1673L322.03 33.5396L323.519 29.8271L322.591 29.4548L321.102 33.1673ZM316.889 46.6995C316.889 54.7735 319.098 62.339 322.947 68.8163L326.385 66.7731C322.894 60.897 320.889 54.0347 320.889 46.6995H316.889ZM318.863 33.7291C317.58 37.8276 316.889 42.1853 316.889 46.6995H320.889C320.889 42.5953 321.517 38.6405 322.68 34.9243L318.863 33.7291ZM322.324 32.7169L321.369 32.4181L320.174 36.2353L321.128 36.5342L322.324 32.7169ZM321.889 46.6995C321.889 42.6978 322.501 38.8437 323.635 35.2232L319.817 34.0279C318.564 38.0308 317.889 42.2878 317.889 46.6995H321.889ZM327.245 66.2623C323.843 60.5365 321.889 53.85 321.889 46.6995H317.889C317.889 54.5888 320.047 61.9785 323.806 68.3055L327.245 66.2623ZM325.688 69.5141L326.547 69.0033L324.504 65.5645L323.645 66.0753L325.688 69.5141Z"
|
||
fill="url(#paint4_linear_0_10780)"
|
||
/>
|
||
|
||
</g>
|
||
</g>
|
||
<defs>
|
||
<filter
|
||
id="filter0_f_0_10780" x="330.537" y="23.7524" width="62.4582" height="52.2006"
|
||
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_10780" />
|
||
</filter>
|
||
<linearGradient
|
||
id="paint0_linear_0_10780" x1="0.360291" y1="73.2461" x2="419.678" y2="56.3299"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#67A4E1" stop-opacity="0.33" />
|
||
<stop offset="0.195436" stop-color="#67A4E1" stop-opacity="0.01" />
|
||
<stop offset="0.535357" stop-color="#67A4E1" stop-opacity="0.01" />
|
||
<stop offset="1" stop-color="#67A4E1" stop-opacity="0.9" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint1_linear_0_10780" x1="317.83" y1="30.6611" x2="344.44" y2="79.3588"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
<stop offset="0.260824" stop-color="#DFF7FF" />
|
||
<stop offset="0.623539" stop-color="#DFF7FF" />
|
||
<stop offset="1" stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint2_linear_0_10780" x1="336.552" y1="15.3195" x2="333.307" y2="57.9034"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
<stop offset="0.280256" stop-color="#DFF7FF" />
|
||
<stop offset="0.634379" stop-color="#DFF7FF" />
|
||
<stop offset="1" stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint3_linear_0_10780" x1="364.727" y1="41.5865" x2="400.264" y2="73.2964"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="white" />
|
||
<stop offset="0.262294" stop-color="#DFF7FF" />
|
||
<stop offset="1" stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint4_linear_0_10780" x1="357.035" y1="50.4135" x2="321.498" y2="18.7036"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="white" />
|
||
<stop offset="0.262294" stop-color="#DFF7FF" />
|
||
<stop offset="1" stop-color="#DFF7FF" stop-opacity="0.01" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint5_linear_0_10780" x1="340.699" y1="26.5818" x2="340.699" y2="62.2006"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="white" />
|
||
<stop offset="1" stop-color="#6AF6FA" stop-opacity="0.2" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint6_linear_0_10780" x1="353.959" y1="53.3313" x2="348.281" y2="69.3448"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#6AD4D1" />
|
||
<stop offset="1" stop-color="#5E96B8" stop-opacity="0.01" />
|
||
</linearGradient>
|
||
<clipPath id="clip0_0_10780">
|
||
<rect width="420" height="92" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
</template>
|