48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
|
|
>
|
|
<!-- <svg
|
|
class=""
|
|
viewBox="0 0 870 350"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<path
|
|
d="M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z"
|
|
fill="url(#pattern0_381_6471)"
|
|
/>
|
|
<defs>
|
|
<pattern
|
|
id="pattern0_381_6471"
|
|
patternContentUnits="objectBoundingBox"
|
|
width="1"
|
|
height="1"
|
|
>
|
|
<use
|
|
xlink:href="#image0_381_6471"
|
|
transform="matrix(0.000732064 0 0 0.0018197 0 -0.198766)"
|
|
/>
|
|
</pattern>
|
|
<image
|
|
id="image0_381_6471"
|
|
width="1366"
|
|
height="768"
|
|
preserveAspectRatio="none"
|
|
xlink:href="/block.webp"
|
|
/>
|
|
</defs>
|
|
</svg> -->
|
|
<img class="image" src="/block.webp" alt="">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup></script>
|
|
<style>
|
|
.image {
|
|
clip-path: path("M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z");
|
|
}
|
|
</style>
|