remove folder pages
This commit is contained in:
81
components/section/CurrencyRatesBar.vue
Normal file
81
components/section/CurrencyRatesBar.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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>
|
Reference in New Issue
Block a user