wt_project_web_bak/src/views/dash/compoents/notice.vue

<template>
  <div class="flex flex-center flex-justify-start">
    <el-icon class="mr-10" color="#A3773D" size="18">
      <Bell />
    </el-icon>
    <div class="roll full-width">
      <ul :class="{ marquee_top: animate }">
        <li v-for="(item, index) in data" :key="index" class="pointer">
          <div class="flex flex-center flex-justify-between">
            <preview :id="item.fileId">
              <template #title>
                <div class="main-color">
                  {{ item.title }}
                </div>
              </template>
            </preview>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import preview from '@/views/resource/component/preview.vue'

export default {
  components: { preview },
  props: {
    data: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      animate: false,
      setInTime: '' // 定时器
    }
  },
  mounted() {
    this.setInTime = setInterval(this.showMarquee, 5000)
  },
  unmounted() {
    clearInterval(this.setInTime) // 页面销毁时清除定时器
  },
  methods: {
    // 滚动栏滚动
    showMarquee() {
      this.animate = true
      setTimeout(() => {
        this.data.push(this.data[0])
        this.data.shift()
        this.animate = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.roll {
  height: 20px;
  width: 1200px;
  text-align: left;
  overflow: hidden;
}

.marquee_top {
  transition: all 0.5s;
  margin-top: -20px; /* 容器高度 */
}
</style>