41 lines
1.9 KiB
Vue
41 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
active: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[120px] h-[36px] relative">
|
|
<div class="w-full h-full flex justify-end items-center text-[16px] " :class="{ 'text-[#84F8FB] text-shadow': active }">
|
|
{{ title }}
|
|
</div>
|
|
<svg viewBox="0 0 167 36" class="w-[167px] h-[36px] absolute top-0 left-0 -z-[1]" 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="tab1-选ä¸" clip-path="url(#clip0_0_10814)">
|
|
<path id="矩形" d="M0.75 0.75H164.262C164.2 0.805322 164.138 0.862241 164.073 0.920728C163.027 1.87182 161.564 3.23859 159.894 4.90396C156.558 8.23048 152.377 12.7665 149.04 17.5722C145.64 22.4671 142.977 27.093 141.187 30.4431C139.637 33.3446 136.662 35.25 133.416 35.25H0.75V0.75Z" stroke="url(#paint0_linear_0_10814)" stroke-width="1.5" />
|
|
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_f_0_10814" x="40.1269" y="17.1269" width="102.746" height="24.7463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="5.43656" result="effect1_foregroundBlur_0_10814" />
|
|
</filter>
|
|
<linearGradient id="paint0_linear_0_10814" x1="53.0209" y1="23.8018" x2="53.0936" y2="36.1763" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#7194A8" stop-opacity="0.01" />
|
|
<stop offset="1" stop-color="#7194A8" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_0_10814">
|
|
<rect width="166.241" height="36" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-shadow{
|
|
text-shadow: 0px 10px 12px #84F8FB;
|
|
}
|
|
</style>
|