lg_frontend/components/LatestWarning.vue

<!--最新预警-->
<template>
  <div class="latest-warning">
    <secondary-title :title="title">
      <template>
        <div class="right-tab">
          <div class="tab-type" v-for="item of tabDataList" :class="activeTab === item.value? 'active-tab':''"
               @click="tabChange(item.value)">
            {{ item.name }}
          </div>
        </div>
      </template>
    </secondary-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
        }
      ],
      tabDataList: [
        {
          name: '全部',
          value: '0'
        },
        {
          name: '待研判',
          value: '1'
        },
        {
          name: '待审批',
          value: '2'
        },
        {
          name: '已归档',
          value: '3'
        }
      ],
      activeTab: '0'
    }
  },
  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)
      }
    },
  },
  methods: {
    tabChange(val) {
      this.activeTab = val
    }
  }
}
</script>

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

.latest-warning {
  margin-top: 43px;
  height: 784px;
  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;
        }
      }
    }
  }

  .right-tab {
    height: 100%;
    .flex-row;
    justify-content: space-between;
    width: 580px;

    .tab-type {
      width: 144px;
      height: 59px;
      background: url("assets/peakCoalImages/left/pollutant-type-default-bg.png") no-repeat;
      font-family: MicrosoftYaHei;
      font-size: 29.97px;
      color: rgba(216, 240, 255, 0.50);
      letter-spacing: 0;
      text-align: center;
      line-height: 59px;
      text-shadow: 0 0 11px #0091FF;
      font-weight: 400;
      cursor: pointer;
    }

    .active-tab {
      background: url("assets/peakCoalImages/left/pollutant-type-active-bg.png") no-repeat;
      color: #D8F0FF;
      text-shadow: 0 0 33px #0091FF;
      font-weight: 400;
    }
  }
}
</style>