98 lines
3.6 KiB
Vue
98 lines
3.6 KiB
Vue
<template>
|
|
<div class="three-l-box">
|
|
<div class="title">
|
|
<span>健康终端报警</span>
|
|
<span class="look-view">查看详情</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-item">
|
|
<template v-if="scrollList.length > 0">
|
|
<!-- <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">-->
|
|
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
|
<div>张二雷{{ index }}</div>
|
|
<div style="color: #f6ff00">压力异常(82)</div>
|
|
<div>2025-10-26 22:29:58</div>
|
|
<div class="item-d-img">
|
|
<img :src="pointPng" alt="" />
|
|
<img :src="addressPng" alt="" />
|
|
</div>
|
|
</div>
|
|
<!-- </vue3-seamless-scroll>-->
|
|
</template>
|
|
<template v-else>
|
|
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
|
<Empty :description="'暂无数据'" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
|
import { Empty } from 'ant-design-vue';
|
|
import { ref, onMounted } from 'vue';
|
|
import pointPng from '/@/assets/indexSun/point.png';
|
|
import addressPng from '/@/assets/indexSun/address.png';
|
|
const loading = ref(true);
|
|
const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.three-l-box {
|
|
background: rgba(8, 75, 100, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.title {
|
|
height: 40px;
|
|
border-radius: 14px 14px 0 0;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
letter-spacing: 2px;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
.look-view {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content {
|
|
padding: 10px 20px;
|
|
height: calc(100% - 40px);
|
|
.content-item {
|
|
height: 100%;
|
|
letter-spacing: 1px;
|
|
overflow: auto;
|
|
.scroll {
|
|
width: 98%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.item-d {
|
|
border-bottom: 1px solid #0076b4;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
.item-d-img {
|
|
img {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|