init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,48 @@
+<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>