vent-template/src/views/vent/home/clique/index.vue

<template>
  <div class="header">1111</div>
  <div class="container-box">
    <div class="left-box lr-box">
      <div class="lr-top air-monitor">
        <div class="column-header">
          <div class="header-item" v-for="(item, index) in airVolumeMonitorKey" :key="index">{{ item.value }}</div>
        </div>
        <div class="column-container">
          <div class="column-item" v-for="(airVolume, index) in airVolumeMonitor" :key="index">
            <div class="item-column" v-for="(item, key) in airVolumeMonitorKey" :key="key">{{ airVolume[item.code] }}</div>
          </div>
        </div>
      </div>
      <div class="lr-bottom warning-monitor"></div>
    </div>
    <div class="center-box ">
      <div class="center-container file-list"></div>
    </div>
    <div class="right-box lr-box">
      <div class="lr-top scene-monitor"></div>
      <div class="lr-bottom tunnel-statistic">
        
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { airVolumeMonitorKey, airVolumeMonitor } from './clique.data'
</script>
<style lang="less" scoped>
  .header{
    width: 100%;
    height: 100px;
    background-color: #ffffff11;
  }
  .container-box{
    height: calc(100% - 32px);
    display: flex;
    margin: 16px 10px;
    .lr-box{
      width: 400px;
      height: calc(100% - 50px);
      position: relative;
      top: -50px;
      background-color: #ffffff11;
    }
    .center-box{
      flex: 1;
      margin: 0 16px;
      .center-container{
        height: 500px;
        position: fixed;
        bottom: 0;
        background-color: #ffffff11;
      }
    }
    .air-monitor{
      .column-header{
        width: 100%;
        display: flex;
        justify-content: center;
        color: aqua;
        height: 80px;
        line-height: 80px;
        .header-item{
          width: 25%;
          text-align: center;
        }
      }
      .column-container{
        height: 400px;
        overflow-y: auto;
        &:hover {
          overflow-y: auto;
          & > .column-item{
            animation-play-state: paused;
            // animation: move1 2s linear;
          }
        }
        .column-item{
          width: 100%;
          display: flex;
          justify-content: center;
          color: #fff;
          height: 60px;
          animation: move 5s linear infinite;
          .item-column{
            width: 25%;
            text-align: center;
          }
        }
      }
      @keyframes move {
        0% {
          transform: translateY(0px);
        }
        100% {
          transform: translateY(-260px);
        }
      }

      @keyframes move1 {
        0% {
          transform: translateY(0px);
        }
      }
      
    }
  }
</style>