atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Swap out card swap assets

Browse Source
This commit is contained in:
David Haz
2025-08-25 15:48:01 +03:00
parent 667308f75a
commit 19bc7b0b78
4 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/demo/cs1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 659 KiB

BIN
src/assets/demo/cs2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 633 KiB

BIN
src/assets/demo/cs3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 628 KiB

84
src/demo/Components/CardSwapDemo.vue
View File

@@ -29,62 +29,62 @@
@card-click="handleCardClick" @card-click="handleCardClick"
> >
<template #card-0> <template #card-0>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]"> <div class="h-full flex flex-col">
<div class="m-2 flex items-center"> <div class="rounded-2xl border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b] shrink-0">
<i class="pi pi-circle-fill mr-2"></i> <div class="m-2 flex items-center">
<i class="pi pi-circle-fill mr-2"></i>
<span>Smooth</span> <span>Smooth</span>
</div>
</div> </div>
</div> <div class="relative p-2 flex-1 overflow-hidden rounded-[15px]">
<img
<div class="relative p-2"> src="@/assets/demo/cs1.webp"
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full"> alt="Card swap demo screenshot 1"
<source class="w-full h-full object-cover grayscale block transform scale-105"
src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4" loading="lazy"
type="video/mp4" decoding="async"
/> />
Your browser does not support the video tag. </div>
</video>
</div> </div>
</template> </template>
<template #card-1> <template #card-1>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]"> <div class="h-full flex flex-col">
<div class="m-2 flex items-center"> <div class="rounded-2xl border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b] shrink-0">
<i class="pi pi-code mr-2"></i> <div class="m-2 flex items-center">
<i class="pi pi-code mr-2"></i>
<span>Reliable</span> <span>Reliable</span>
</div>
</div> </div>
</div> <div class="relative p-2 flex-1 overflow-hidden rounded-[15px]">
<img
<div class="relative p-2"> src="@/assets/demo/cs2.webp"
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full"> alt="Card swap demo screenshot 2"
<source class="w-full h-full object-cover grayscale block transform scale-105"
src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4" loading="lazy"
type="video/mp4" decoding="async"
/> />
Your browser does not support the video tag. </div>
</video>
</div> </div>
</template> </template>
<template #card-2> <template #card-2>
<div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]"> <div class="h-full flex flex-col">
<div class="m-2 flex items-center"> <div class="rounded-2xl border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b] shrink-0">
<i class="pi pi-sliders-h mr-2"></i> <div class="m-2 flex items-center">
<i class="pi pi-sliders-h mr-2"></i>
<span>Customizable</span> <span>Customizable</span>
</div>
</div> </div>
</div> <div class="relative p-2 flex-1 overflow-hidden rounded-[15px]">
<img
<div class="relative p-2"> src="@/assets/demo/cs3.webp"
<video autoplay loop muted playsinline class="rounded-[15px] w-full h-full"> alt="Card swap demo screenshot 3"
<source class="w-full h-full object-cover grayscale block transform scale-105"
src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4" loading="lazy"
type="video/mp4" decoding="async"
/> />
Your browser does not support the video tag. </div>
</video>
</div> </div>
</template> </template>
</CardSwap> </CardSwap>