82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex gap-24">
|
|
<div class="price-container">
|
|
<div class="slider" v-html="duplicatedContent">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
let 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()
|
|
const activeElement = ref(1);
|
|
productStore.getModules()
|
|
|
|
// Computed property to duplicate the content
|
|
const duplicatedContent = computed(() => {
|
|
const originalContent = res || '';
|
|
return originalContent + originalContent + originalContent + originalContent;
|
|
});
|
|
|
|
|
|
const changeActive = (item: number) => {
|
|
activeElement.value = item;
|
|
};
|
|
</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>
|