<template>
? ?<ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled" style="overflow: auto">
? ? ? ? ? <li v-for="(item, index) in Data.IncidentData" :key="index" class="IncidentMediateli clearfix" @click="Details(item)" :style="item.style">
? ? ? ? ? ? <img :src="getImageUrl(item.status)" alt="" />
? ? ? ? ? ? <div class="Mediate">
? ? ? ? ? ? ? <el-tooltip class="item" effect="light" popper-class="tooltipLight" :content="item.name" placement="top">
? ? ? ? ? ? ? ? <p class="headline">{{ item.name }}</p>
? ? ? ? ? ? ? </el-tooltip>
? ? ? ? ? ? ? <p class="time">{{ item.reportTime }}</p>
? ? ? ? ? ? ? <p class="location">{{ item.eventLocation }}</p>
? ? ? ? ? ? </div>
? ? ? ? ? </li>
? ? ? ? </ul>
</template>

<script setup>
const cssIndex = ref(0)

const 列表方法 =()=>{
// 獲取到list列表后處理數(shù)據(jù) res.data ?與Data.IncidentData 均為列表
? cssIndex.value = 0
? res.data.forEach((item, index) => {
? ? if (Data.IncidentData.length === 0 || Data.IncidentData.length < index) {
? ? ? cssIndex.value += 1
? ? ? item.style = {
? ? ? ? animationDelay: `${cssIndex.value * 0.3}s` ?// 加載動畫
? ? ? }
? ? } else {
? ? ? item.style = {
? ? ? ? animationDelay: `0s` ?// 如果滾動將以前動畫置為0?
? ? ? }
? ? }
? })
? Data.IncidentData = res.data
}
</script>
<style lang="scss" scoped>
.IncidentMediateli {
? transform: translateX(100%);
? animation: rise-in 1s forwards;
? @keyframes rise-in {
? ? to {
? ? ? transform: translateX(0);
? ? }
? }
}
</style>