76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex gap-24">
|
|
<div class="price-container">
|
|
<div class="slider"
|
|
v-html="duplicatedContent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const res
|
|
= '<span class="text-base sm:text-lg font-bold">CZK price (to EUR). Kč 25,1720<span class="text-accent-green-light dark:text-accent-green-dark"> Kč 0,0180 (0.07%) </span></span><span class="text-base sm:text-lg font-bold">Gold price on market. 2 929,7250 €<span class="text-[#B72D2D]"> -6,9560 € (-0.24%) </span></span><span class="text-base sm:text-lg font-bold">Silver price on market. 31,5280 €<span class="text-accent-green-light dark:text-accent-green-dark"> 0,1690 € (0.54%) </span></span><span class="text-base sm:text-lg font-bold">PLN price (to EUR). zł 4,2660<span class="text-[#B72D2D]"> zł -0,0050 (-0.12%) </span></span>'
|
|
const productStore = useProductStore()
|
|
productStore.getModules()
|
|
|
|
// Computed property to duplicate the content
|
|
const duplicatedContent = computed(() => {
|
|
const originalContent = res || ''
|
|
return originalContent + originalContent + originalContent + originalContent
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.price-container {
|
|
/* display: flex; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slider {
|
|
display: flex;
|
|
gap: 64px;
|
|
animation: slidein 40s linear infinite;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logos {
|
|
display: flex;
|
|
gap: 64px;
|
|
width: 100%;
|
|
/* display: inline-block; */
|
|
margin: 0px 0;
|
|
}
|
|
|
|
.fas {
|
|
height: 50%;
|
|
animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
|
|
}
|
|
|
|
@keyframes slidein {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.slider {
|
|
animation: slidein 80s linear infinite;
|
|
}
|
|
}
|
|
</style>
|