118 lines
3.5 KiB
Vue
118 lines
3.5 KiB
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>
|