lg_frontend/components/LatestWarning.vue

<!--最新预警-->
<template>
  <div class="latest-warning">
    <secondary-title :title="title"/>
    <div class="latest-warning-info">
      <div class="warning-data-list">
        <vue-seamless-scroll
          v-if="warningDataList.length"
          ref="vueSeamless"
          :data="warningDataList"
          class="seamless-scroll"
          :class-option="defaultOption"
        >
          <div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
            <warning-info-item :data-item="item"/>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "LatestWarning",
  components: {vueSeamlessScroll},
  data() {
    return {
      title: '最新预警',
      warningDataList: [
        {
          indexCode: '001',
          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
          warningName: '区域入侵',
          site: 'xxx地区西门',
          warningTime: '2023-12-12 12:32:45',
          state: 1
        },
        {
          indexCode: '002',
          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
          warningName: '区域入侵',
          site: 'xxx地区西门',
          warningTime: '2023-12-12 12:32:45',
          state: 0
        },
        {
          indexCode: '003',
          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
          warningName: '区域入侵',
          site: 'xxx地区西门',
          warningTime: '2023-12-12 12:32:45',
          state: 1
        },
        {
          indexCode: '004',
          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
          warningName: '区域入侵',
          site: 'xxx地区西门',
          warningTime: '2023-12-12 12:32:45',
          state: 1
        }
      ]
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.latest-warning {
  margin-top: 43px;
  height: 984px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
  .flex-column;

  .latest-warning-info {
    flex: 1;
    height: 0;
    padding: 0 50px;

    .warning-data-list {
      height: 100%;
      padding-top: 20px;
      .seamless-scroll {
        height: 100%;
        overflow: hidden;

        .event-item {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>