사용자:Senouis/highlight.vue

<script>
// 일반 스크립트여야 함
import { ref, reactive } from 'vue' // 모듈 문법 미지

let message1 = ref(true) // 단일 참조
const object1 = reactive({
  name: '색을 뒤집어라, 컬러닷지!',
  image: 'https://dev.libertygame.work/images/7/73/%EC%BB%AC%EB%9F%AC%EB%8B%B7%EC%A7%80.png',
}) // 객체/배열 참조

const flipper = () => {
  message1.value = !message1.value
  if (message1.value) {
    object1.name = '색을 뒤집어라, 컬러닷지!'
    object1.image =
      'https://dev.libertygame.work/images/7/73/%EC%BB%AC%EB%9F%AC%EB%8B%B7%EC%A7%80.png' // 파일 업로드 후 링크 바꿀 것
    return
  }
  object1.name = '깊은 수렁 속으로 빠지다'
  object1.image =
    'https://dev.libertygame.work/images/8/89/%EA%B9%8A%EC%9D%80_%EC%88%98%EB%A0%81.JPG' // 링크를 찾아 바꿀 것
  return
}

setInterval(flipper, 5000)

const getImageUrl = () => {
  return new URL(`${object1.image}`, import.meta.url).href
}
</script>

<template>
  <div class="scroll-view-wrapper">
    <button id="scroll-view-left" class="scroll-button" @click="flipper">&lt;</button>
    <div class="item">
      <a>
        <img id="image_highlight" :src="require(object1.image)" width="480px" height="180px" />
        <!-- src 변경이 안 되면 v-bind 미지원을 감안했을 때 포기하는 것이 좋음 -->
        <div class="details">
          <slot>{{ object1.name }}</slot>
        </div>
      </a>
    </div>
    <button id="scroll-view-right" class="scroll-button" @click="flipper">&gt;</button>
  </div>
</template>
<style>
/* 모듈 범위 스타일 미지원으로 전역으로 설정 적 */
.scroll-view-wrapper {
  display: inline-flex;
  background-color: transparent;
  vertical-align: bottom;
}

.scroll-button {
  background-color: rgba(249, 249, 249, 0.1);
  border-color: transparent;
  height: 180px;
}

.scroll-button:hover {
  background-color: rgba(211, 211, 211, 0.3);
}

.item {
  margin-top: -1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

.details {
  flex: 1;
  margin-left: 1rem;
}

@media (min-width: 1024px) {
  /* 대화면에서 애니메이션 추가 */
  @keyframes scroll-animation {
    0% {
      transform: translateX(10%);
    }

    20% {
      transform: translate(0%);
    }
    100% {
      transform: translate(0%);
    }
  }

  .item {
    animation-duration: 5s;
    animation-name: scroll-animation;
    animation-iteration-count: infinite;
  }
}
</style>