前端通过css3实现一个轮播效果

项目需要一个报警列表，数据要上下滚动，鼠标移入就停止，移入在展示详情，超出部门出现省略号，之前想的用框架，dataV里面有类似框架，但是感觉太大了，想着还是自己写一个吧

废话少说直接上代码

    
      
        
          报警列表
  
            鸡舍名
            报警内容
            开始报警时间
            报警时长
          

          
             4 ? warnings.length * -36 + 'px' : '0px',
                '--warntime': warnings.length * 2 + 's',
              }"
            >

                暂无报警，栏舍状态良好 \^o^/
              
              
{{
                  item.fenceValue
                }}
                {{
                  item.warnDetail
                }}
                {{
                  item.startTime
                }}
                {{ item.duration }}
              

            

          
        
 报警提示:
          当前 {{ dawtaListlenght }} 个报警栏舍
        
        {{
          footerTitle
        }}

        
        
        
      
    
  


  data() {
    // 这里存放数据
    return {
      visibleJiantou: false,
      visibleDow: true,
      activeIndex: 0,
      visible: false, //报警d窗
      warnings: [
        {
          fenceValue: "小红",
          warnDetail: "18",
          data: "2022-1-1",
        },]


  methods: {
    //点击报警轮播
    sirenClick() {
      this.visible = !this.visible;
      this.visibleDow = !this.visibleDow;
      this.visibleJiantou = !this.visibleJiantou;
    },
  },