153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<template>
|
|
<div class="monitoring-component">
|
|
<img src="@/assets/images/head/monitorTitle2.png" alt="" class="headerImage" />
|
|
<div class="monitor-list" ref="monitorListRef">
|
|
<div class="monitor-item" v-for="(item, index) in anchorMonitorList" :key="index">
|
|
<div class="monitor-item-content">
|
|
<img :src="item.avatar" alt="" class="avatar" />
|
|
<div class="context">
|
|
<div class="title-and-time">
|
|
<div class="title">{{ item.commenter }}</div>
|
|
<div class="time">{{ item.time }}</div>
|
|
</div>
|
|
<div class="content">{{ item.comment }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, ref, onBeforeUnmount, onMounted } from "vue";
|
|
const monitorListRef = ref(null);
|
|
let scrollTimer = null;
|
|
const scrollConstant = {
|
|
DIRECTION: 1, // 1: 向下, -1: 向上
|
|
SCROLLSPEED: 1, // 每次滚动的像素
|
|
SCROLLINTERVAL: 50
|
|
};
|
|
|
|
const props = defineProps({
|
|
anchorMonitorList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const startAutoScroll = () => {
|
|
if (!monitorListRef.value) return;
|
|
scrollTimer = setInterval(() => {
|
|
const el = monitorListRef.value;
|
|
if (!el) return;
|
|
el.scrollTop += scrollConstant.SCROLLSPEED * scrollConstant.DIRECTION;
|
|
//到底部
|
|
if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
|
|
scrollConstant.DIRECTION = -1;
|
|
}
|
|
|
|
//到顶部
|
|
if (el.scrollTop <= 0) {
|
|
scrollConstant.DIRECTION = 1;
|
|
}
|
|
}, scrollConstant.SCROLLINTERVAL);
|
|
};
|
|
|
|
onMounted(() => {
|
|
startAutoScroll();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (scrollTimer) clearInterval(scrollTimer);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.monitoring-component {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.headerImage {
|
|
margin-top: -7px;
|
|
}
|
|
.monitor-list {
|
|
padding: 20px 20px;
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
height: 190px;
|
|
overflow: auto;
|
|
-ms-overflow-style: none; /* IE 和 Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
.monitor-item {
|
|
width: 100%;
|
|
height: 80px;
|
|
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
.monitor-item-content {
|
|
width: 100%;
|
|
height: 80%;
|
|
padding: 0px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 5px;
|
|
}
|
|
.context {
|
|
padding-left: 15px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.title-and-time {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
width: 100px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
white-space: nowrap; /* 禁止换行 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
.time {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: "PingFang SC";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: 0.14px;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: 0.14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: #152341;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|