heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix marquee bug

Browse Source
This commit is contained in:
marzban-dev
2025-05-05 21:04:47 +03:30
parent 5372030095
commit a01fed00c9
2 changed files with 54 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/css/tailwind.css
-8
View File
@@ -131,8 +131,6 @@
--breakpoint-3xl: 1700px;
/* ANIMATIONS */
--animate-marquee: marquee 20s linear infinite;
--animate-marquee-reverse: marquee 20s linear infinite reverse;
--animate-fade-in: fadeIn 350ms ease-in-out;
--animate-slide-down: slideDown 300ms ease-out;
@@ -149,12 +147,6 @@
--animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-toast-out: toastSlideOut 200ms ease-out;
@keyframes marquee {
to {
transform: translateX(50%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
frontend/components/global/Brands.vue
+54 -67
View File
@@ -9,6 +9,15 @@ type Props = {
const props = defineProps<Props>();
const {} = toRefs(props);
const brands = ref([
"/img/brands/brand-1.png",
"/img/brands/brand-2.png",
"/img/brands/brand-3.png",
"/img/brands/brand-4.png",
"/img/brands/brand-5.png",
"/img/brands/brand-6.png",
]);
</script>
<template>
@@ -20,86 +29,64 @@ const {} = toRefs(props);
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
</p>
</div>
<div class="-rotate-z-2 z-20">
<div
class="bg-black flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
<div class="-rotate-z-2 z-20 w-[110%]">
<Marquee
class="bg-black h-full"
:clone="true"
dir="ltr"
:duration="3"
>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
<div class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[90px] sm:h-[140px]">
<div class="text-[30px] lg:text-[40px] mt-2 text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg
src="/img/heymlz/heymlz-logo.png"
class="h-[25px] sm:h-[45px] invert opacity-85"
/>
</template>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg
src="/img/heymlz/heymlz-logo.png"
class="h-[25px] sm:h-[45px] invert opacity-85"
/>
</template>
</div>
</div>
</Marquee>
</div>
<div class="rotate-z-2 z-10">
<div
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
<div class="rotate-z-2 z-10 w-[110%]">
<Marquee
class="bg-slate-100/70"
:direction="'reverse'"
:clone="true"
dir="ltr"
:duration="10"
>
<template v-for="i in 2">
<div
v-for="brand in brands"
:key="brand"
class="flex items-center px-6 sm:px-10 h-[90px] sm:h-[140px]"
>
<NuxtImg
src="/img/brands/brand-1.png"
:src="brand"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-1.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
</template>
</div>
</div>
</Marquee>
</div>
</div>
</template>
<!-- <NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/> -->