ai-postcard/src/components/Marquee.vue

<script setup></script>

<template>
  <section id="marquee">
    <div class="view">
      <div class="pic-container">
        <div class="pic">
          <img src="../assets/img/result/中秋節_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/南投清境農場_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/南投日月潭_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/台中歌劇院_成果照.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/台中高美濕地_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/台南孔廟_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/中秋節_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/南投清境農場_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/南投日月潭_成果圖.webp" alt="" />
        </div>
        <div class="pic">
          <img src="../assets/img/result/台中歌劇院_成果照.webp" alt="" />
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss">
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-(20% * 5));
  }
}

@media (max-width: 1024px) {
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-(25% * 5));
    }
  }
}

@media (max-width: 768px) {
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-(33.33% * 5));
    }
  }
}

#marquee {
  width: 100%;
  // margin-top: 50px;
  // position: absolute;
  // top: 50%;
  // transform: translate(0, -50%);

  .view {
    overflow: hidden;
    width: 100%;
  }

  .pic-container {
    display: flex;
    animation: marquee 60s infinite linear;

    .pic {
      margin-right: 1.2rem;
      flex-basis: 20%;
      flex-shrink: 0;
      @media (max-width: 1024px) {
        flex-basis: 25%;
      }
      @media (max-width: 768px) {
        flex-basis: 33.33%;
      }
    }
  }

  img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    vertical-align: middle;

    @media (max-width: 768px) {
      height: 30vh;
      width: 400px;
    }

    @media (max-width: 375px) {
      height: 25vh;
    }
  }
}
</style>