mky-vent-base/src/views/vent/home/colliery/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>
      <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>

</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 10s linear infinite;

        .item-column {
          width: 25%;
          text-align: center;
        }
      }
    }

    @keyframes move {
      0% {
        transform: translateY(0px);
      }

      100% {
        transform: translateY(-269px);
      }
    }

    @keyframes move1 {
      0% {
        transform: translateY(0px);
      }
    }

  }
}</style>