vue3卡片垂直无限滚动方式

        <div class="temp_info">
          <div class="scroll-wrapper">
            <div class="scroll-content">
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来1小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
            </div>
          </div>
        </div>

onMounted(()=>{

  // 计算滚动速度的函数
  const calculateScrollSpeed = () => {
    const scrollContent = document.querySelector('.scroll-content')
    const tempInfo = document.querySelector('.temp_info')
    
    if (scrollContent && tempInfo) {
      // 获取所有预警项目
      const warnItems = scrollContent.querySelectorAll('.warnItem')
      const itemCount = warnItems.length
      
      // 计算实际需要滚动的行数（考虑重复内容）
      const visibleHeight = tempInfo.clientHeight
      const itemHeight = 30 // 每个项目的高度
      const visibleItems = Math.ceil(visibleHeight / itemHeight)
      const actualScrollItems = itemCount - visibleItems
      
      // 计算滚动时间：每个项目1.5秒，确保匀速且不会太快
      const scrollDuration = Math.max(actualScrollItems * 1.5, 10) // 最少10秒
      
      // 设置CSS变量
      scrollContent.style.setProperty('--scroll-duration', `${scrollDuration}s`)
      
      console.log('预警项目数量:', itemCount, '可见项目:', visibleItems, '滚动时间:', scrollDuration + 's')
    }
  }
  
  // 动态计算滚动速度，确保匀速滚动
  setTimeout(calculateScrollSpeed, 1000)
  
  // 监听窗口大小变化，重新计算滚动速度
  window.addEventListener('resize', calculateScrollSpeed)
})

    .temp_info {
      box-sizing: border-box;
      width: 100%;
      height: 60px;
      background: rgba(1, 60, 93, 0.36);
      border-radius: 3px;
      border: 1px solid #1a3f58;
      padding-left: 15px;
      padding-right: 10px;
      overflow: hidden;
      position: relative;
      
      // 添加渐变遮罩
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: linear-gradient(to bottom, rgba(1, 60, 93, 0.8) 0%, transparent 15%, transparent 85%, rgba(1, 60, 93, 0.8) 100%);
        pointer-events: none;
        z-index: 2;
      }
      
      .scroll-wrapper {
        height: 100%;
        overflow: hidden;
      }
      
      .scroll-content {
        // 使用CSS变量控制滚动速度，默认20秒
        animation: scrollUp var(--scroll-duration, 20s) linear infinite;
        will-change: transform;
        position: relative;
        z-index: 1;
        
        &:hover {
          animation-play-state: paused;
        }
      }
      
      .warnItem {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        .textcol {
          font-weight: 400;
          font-size: 14px;
          color: #7dbaed;
        }
        .quan {
          display: inline-block;
          width: 7px;
          height: 7px;
          background: rgba(34, 186, 255, 0.36);
          border-radius: 50%;
          border: 1px solid #22baff;
          margin-right: 6px;
        }
        .timecol {
          font-weight: 400;
          font-size: 14px;
          color: #a3e5ff;
        }
      }
    }
    
    @keyframes scrollUp {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-50%);
      }
    }
    
    // 确保动画能够正常工作
    .scroll-content {
      will-change: transform;
    }