49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import { clientLogos as defaultLogos } from "~/data/home";
|
|
|
|
const props = defineProps({
|
|
logos: {
|
|
type: Array,
|
|
default: () => defaultLogos,
|
|
},
|
|
});
|
|
|
|
const marqueeTrackA = computed(() => [...props.logos, ...props.logos]);
|
|
const marqueeTrackB = computed(() => [...props.logos, ...props.logos]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="overflow-hidden bg-[#fafafa] py-16" id="cases">
|
|
<div class="container-gm" data-reveal>
|
|
<p class="text-center text-sm uppercase tracking-[0.3em] text-[#8a8a8a]">
|
|
我们的客户
|
|
</p>
|
|
</div>
|
|
|
|
<div class="relative mt-8 overflow-hidden">
|
|
<div class="flex w-max animate-marquee hover:[animation-play-state:paused]">
|
|
<div
|
|
v-for="(name, index) in marqueeTrackA"
|
|
:key="`a-${name}-${index}`"
|
|
class="mx-4 flex h-14 w-32 shrink-0 items-center justify-center rounded-2xl border border-gm-border bg-white text-sm font-medium text-[#6b6b6b] shadow-sm"
|
|
>
|
|
{{ name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative mt-6 overflow-hidden">
|
|
<div class="flex w-max animate-marquee-reverse hover:[animation-play-state:paused]">
|
|
<div
|
|
v-for="(name, index) in marqueeTrackB"
|
|
:key="`b-${name}-${index}`"
|
|
class="mx-4 flex h-14 w-32 shrink-0 items-center justify-center rounded-2xl border border-gm-border bg-white text-sm font-medium text-[#6b6b6b] shadow-sm"
|
|
>
|
|
{{ name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|