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