43 lines
2.1 KiB
Vue
43 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
src: string
|
||
|
|
width?: string
|
||
|
|
height?: string
|
||
|
|
icon?: string
|
||
|
|
title?: string
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="relative overflow-hidden rounded ">
|
||
|
|
<img :src="src" :height="height" :width="width" class="object-cover w-full h-full min-h-[100px] outline-none">
|
||
|
|
<div class="absolute bottom-0 px-2 left-0 flex w-full z-10 justify-between items-center h-[26px]">
|
||
|
|
<div>
|
||
|
|
{{ title }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Iconify v-if="icon" :icon="icon" />
|
||
|
|
</div>
|
||
|
|
<svg viewBox="0 0 210 26" class="absolute bottom-0 w-full " 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="accident_tiltle_bg1" opacity="0.577746" filter="url(#filter0_i_0_10627)">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.108154 0.51355H209.302V22C209.302 24.2092 207.511 26 205.302 26H4.10816C1.89902 26 0.108154 24.2092 0.108154 22V0.51355Z" fill="url(#paint0_linear_0_10627)" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_i_0_10627" x="0.108154" y="0.51355" width="209.194" height="25.4865" 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 dy="1" />
|
||
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.654596 0 0 0 0 0.854219 0 0 0 0 1 0 0 0 1 0" />
|
||
|
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_10627" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_0_10627" x1="0.108154" y1="26" x2="209.302" y2="26" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="#09D4BC" />
|
||
|
|
<stop offset="1" stop-color="#233344" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</template>
|