vue2 div使用css的方式实现自动滚动

html 复制代码
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.js" crossorigin="anonymous"></script>

    <style>
      /* ========== 告警列表样式（原有） ========== */
      .alarm-container {
        width: 400px;
        height: 300px;
        background-color: #1e293b;
        border-radius: 8px;
        padding: 16px;
        color: white;
      }
      .alarm-title {
        font-size: 18px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #334155;
      }
      .alarm-scroll-box {
        height: 220px;
        overflow: hidden;
        position: relative;
      }
      .alarm-scroll-content {
        display: flex;
        flex-direction: column;
        animation: alarm-scroll-up 15s linear infinite;
      }
      .alarm-item {
        padding: 8px 12px;
        margin-bottom: 8px;
        background-color: #334155;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.4;
      }
      .alarm-item .time {
        color: #94a3b8;
        font-size: 12px;
        margin-top: 4px;
      }
      @keyframes alarm-scroll-up {
        0% {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -50%, 0);
        }
      }
      .alarm-scroll-box:hover .alarm-scroll-content {
        animation-play-state: paused;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 原有：告警列表滚动 -->
      <div class="alarm-container">
        <div class="alarm-title">告警列表</div>
        <div class="alarm-scroll-box" @mouseenter="pauseListScroll" @mouseleave="resumeListScroll">
          <div class="alarm-scroll-content" ref="scrollContent">
            <div class="alarm-item" v-for="item in alarmList" :key="'origin-' + item.id">
              <div>{{ item.content }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
            <div class="alarm-item" v-for="item in alarmList" :key="'copy-' + item.id">
              <div>{{ item.content }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            // 告警列表数据
            alarmList: [
              { id: 1, content: '区域1：检测到陌生人闯入', time: '2026-03-17 10:01:23' },
              { id: 2, content: '区域2：检测到车辆违停', time: '2026-03-17 10:02:45' },
              { id: 3, content: '区域3：检测到人员聚集', time: '2026-03-17 10:03:12' },
              { id: 4, content: '区域4：检测到消防通道堵塞', time: '2026-03-17 10:04:56' },
              { id: 5, content: '区域5：检测到翻越围栏', time: '2026-03-17 10:05:34' },
            ],
          };
        },
        mounted() {
          // 初始化告警列表滚动时长
          this.setScrollDuration();
        },
        beforeDestroy() {},
        methods: {
          // ========== 告警列表滚动相关方法（原有） ==========
          setScrollDuration() {
            const scrollContent = this.$refs.scrollContent;
            if (!scrollContent) return;
            const duration = Math.max(10, this.alarmList.length * 1.5);
            scrollContent.style.animationDuration = `${duration}s`;
          },
          pauseListScroll() {
            const scrollContent = this.$refs.scrollContent;
            if (scrollContent) scrollContent.style.animationPlayState = 'paused';
          },
          resumeListScroll() {
            const scrollContent = this.$refs.scrollContent;
            if (scrollContent) scrollContent.style.animationPlayState = 'running';
          },
        },
      });
    </script>
  </body>
</html>