huijia-website/app/components/inspira/Marquee.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-14 16:44:03
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-14 16:55:35
 * @Description: 
-->
<template>
  <div
    class="group flex overflow-hidden py-24px [--duration:40s] [--gap:1rem] [gap:var(--gap)]"
    :class="vertical ? 'flex-col' : 'flex-row'"
  >
    <div
      v-for="i in 2"
      :key="i"
      class="flex shrink-0 [gap:var(--gap)]"
      :class="[
        vertical ? 'animate-marquee-vertical flex-col' : 'animate-marquee flex-row',
        pauseOnHover ? 'group-hover:[animation-play-state:paused]' : '',
      ]"
      :style="{
        animationDirection: reverse ? 'reverse' : 'normal',
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    vertical?: boolean
    reverse?: boolean
    pauseOnHover?: boolean
  }

  withDefaults(defineProps<Props>(), {
    vertical: false,
    reverse: false,
    pauseOnHover: false,
  })
</script>

<style scoped>
  .animate-marquee {
    animation: marquee var(--duration) linear infinite;
    animation-delay: var(--delay, 0s);
  }

  .animate-marquee-vertical {
    animation: marquee-vertical var(--duration) linear infinite;
    animation-delay: var(--delay, 0s);
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
</style>