120 lines
4.9 KiB
Vue
120 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[326px] h-[20px] flex justify-center items-center relative">
|
|
<div class="text-[14px]">
|
|
{{ title }}
|
|
</div>
|
|
<svg
|
|
viewBox="0 0 326 20" 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_11069)">
|
|
<path
|
|
id="å¡«å……" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M100.591 0H225.85L234 14.803L229.974 20H96.9235L92 14.5531L100.591 0Z"
|
|
fill="url(#paint0_radial_0_11069)"
|
|
/>
|
|
|
|
<g id="边框">
|
|
<path
|
|
d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
|
|
stroke="url(#paint1_linear_0_11069)"
|
|
/>
|
|
<path
|
|
d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
|
|
stroke="url(#paint2_radial_0_11069)"
|
|
/>
|
|
<path
|
|
d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
|
|
stroke="url(#paint3_radial_0_11069)"
|
|
/>
|
|
</g>
|
|
<g id="编组 65">
|
|
<path id="路径 33" d="M233.316 14.6773H325.195" stroke="url(#paint4_linear_0_11069)" />
|
|
<path
|
|
id="路径 34" d="M231.755 20L234.387 17H248.755" stroke="url(#paint5_radial_0_11069)"
|
|
stroke-width="0.6"
|
|
/>
|
|
</g>
|
|
<g id="编组 65_2">
|
|
<path id="路径 33_2" d="M93.1951 14.6773H1.31561" stroke="url(#paint6_linear_0_11069)" />
|
|
<path
|
|
id="路径 34_2" d="M94.7554 20L92.1242 17H77.7554" stroke="url(#paint7_radial_0_11069)"
|
|
stroke-width="0.6"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<radialGradient
|
|
id="paint0_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(163 13.8769) rotate(90) scale(20 419.717)"
|
|
>
|
|
<stop stop-color="#1AB4D7" stop-opacity="0.6" />
|
|
<stop offset="1" stop-color="#27363D" />
|
|
</radialGradient>
|
|
<linearGradient
|
|
id="paint1_linear_0_11069" x1="105.681" y1="26.4717" x2="174.232" y2="-44.13"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="0.231689" stop-color="#A1D9E0" stop-opacity="0.2" />
|
|
<stop offset="0.500249" stop-color="#99C9D4" stop-opacity="0.01" />
|
|
<stop offset="0.790929" stop-color="#A2DAE1" stop-opacity="0.2" />
|
|
<stop offset="1" stop-color="#A8E7EB" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="paint2_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(226.099 1.74818) rotate(90) scale(14.1018 100.123)"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="paint3_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(100.241 1.19016) rotate(90) scale(15.3031 108.652)"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<linearGradient
|
|
id="paint4_linear_0_11069" x1="210.873" y1="15.995" x2="211.083" y2="20.9072"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="#A8E7EB" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="paint5_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(234.502 17) rotate(90) scale(3 64.4003)"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<linearGradient
|
|
id="paint6_linear_0_11069" x1="115.638" y1="15.995" x2="115.427" y2="20.9072"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="#A8E7EB" stop-opacity="0.01" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="paint7_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(92.0086 17) rotate(90) scale(3 64.4003)"
|
|
>
|
|
<stop stop-color="#A8E7EB" />
|
|
<stop offset="1" stop-color="white" stop-opacity="0.01" />
|
|
</radialGradient>
|
|
<clipPath id="clip0_0_11069">
|
|
<rect width="326" height="20" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|