el-col、el-row设置自动滚动

嗷呜~小脑斧

于 2024-07-03 08:43:15 发布

阅读量255

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46939404/article/details/140141778

版权

用一个div（site-marqee）把要滚动的列表包裹起来，然后在样式中加上：

animation: row 10s linear infinite;

下面这个是列表滚动的关键：

@keyframes row {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}

html代码：

        <div class="site-list">
          <div class="site-marqee">
            <el-row
              class="site-item"
              v-for="(item, index) in pressureData"
              :key="index"
            >
              <el-col :span="6" class="item-column">{{ item.name }}</el-col>
              <el-col :span="8" class="item-column">{{ item.code }}</el-col>
              <el-col :span="8" class="item-column">{{ item.pressure }}</el-col>
              <el-col :span="2" class="item-column">{{ item.time }}</el-col>
            </el-row>
          </div>
        </div>

style代码：

@keyframes row {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
.site-list {
  height: 3.5vw;
  overflow-y: hidden;
  width: 100%;
}
.site-marqee {
  animation: row 10s linear infinite;
}
.site-marqee:hover {
  animation-play-state: paused;
}
.site-item {
  padding: 0.2vw 1.8vw 0.2vw 1.4vw;
  height: 1.2vw;
  display: flex;
  align-content: center;
  align-items: center;
  font-family: "Times New Roman";
}
.site-item:hover {
  background: rgba(255, 255, 255, 0.1);
  .item-column {
    color: #68d8fe;
  }
}
.item-column {
  font-size: 0.7vw;
  color: #61a8ff;
}