This commit is contained in:
duanhao 2025-08-12 15:54:37 +08:00
commit ae36a56077
3 changed files with 45 additions and 45 deletions

View File

@ -1,9 +1,13 @@
<template>
<div :class="containerClass" ref="scrollContainer">
<div class="scroll-content">
<div v-for="(item, index) in displayData" :key="index" class="containner4-data"
:class="{ 'temporary-style': item.showTemporaryStyle }">
<img :src="item.avatar" />
<div
v-for="(item, index) in displayData"
:key="index"
class="containner4-data"
:class="{ 'temporary-style': item.showTemporaryStyle }"
>
<img :src="item.avatar" />
<div class="data-content">
<div class="commenter">{{ item.commenter }}</div>
<div class="comment">{{ item.comment }}</div>
@ -14,9 +18,8 @@
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { ref, watch, onMounted, onBeforeUnmount } from "vue"
// props
const props = defineProps({
data: {
type: Array,
@ -24,74 +27,74 @@ const props = defineProps({
},
containerClass: {
type: String,
default: 'containner4-alldata'
default: "containner4-alldata"
},
scrollSpeed: {
type: Number,
// 10
default: 10
}
});
})
//
const scrollContainer = ref(null);
const scrollTimer = ref(null);
const displayData = ref([]);
const scrollContainer = ref(null)
const scrollTimer = ref(null)
const displayData = ref([])
//
const initDisplayData = () => {
displayData.value = [...props.data, ...props.data];
};
displayData.value = [...props.data, ...props.data]
}
//
const startAutoScroll = () => {
if (!scrollContainer.value) return;
if (!scrollContainer.value) return
scrollTimer.value = setInterval(() => {
scrollContainer.value.scrollTop += 1;
scrollContainer.value.scrollTop += 1
if (scrollContainer.value.scrollTop >= scrollContainer.value.scrollHeight / 2) {
scrollContainer.value.scrollTop = 0;
scrollContainer.value.scrollTop = 0
}
}, props.scrollSpeed);
}, props.scrollSpeed)
//
const container = scrollContainer.value;
container.addEventListener('mouseenter', stopScroll);
container.addEventListener('mouseleave', startAutoScroll);
};
const container = scrollContainer.value
container.addEventListener("mouseenter", stopScroll)
container.addEventListener("mouseleave", startAutoScroll)
}
//
const stopScroll = () => {
if (scrollTimer.value) {
clearInterval(scrollTimer.value);
scrollTimer.value = null;
clearInterval(scrollTimer.value)
scrollTimer.value = null
}
};
}
//
watch(() => props.data,
watch(
() => props.data,
(newVal) => {
stopScroll();
initDisplayData();
startAutoScroll();
stopScroll()
initDisplayData()
startAutoScroll()
},
{ immediate: true }
);
)
//
onMounted(() => {
initDisplayData();
startAutoScroll();
});
initDisplayData()
startAutoScroll()
})
onBeforeUnmount(() => {
stopScroll();
stopScroll()
//
if (scrollContainer.value) {
const container = scrollContainer.value;
container.removeEventListener('mouseenter', stopScroll);
container.removeEventListener('mouseleave', startAutoScroll);
const container = scrollContainer.value
container.removeEventListener("mouseenter", stopScroll)
container.removeEventListener("mouseleave", startAutoScroll)
}
});
})
</script>
<style scoped>
@ -127,7 +130,7 @@ onBeforeUnmount(() => {
}
.containner4-data {
color: #E1F4FF;
color: #e1f4ff;
font-family: "PingFang SC", sans-serif;
font-size: 14px;
font-style: normal;
@ -137,7 +140,7 @@ onBeforeUnmount(() => {
align-items: center;
letter-spacing: 0.14px;
padding: 12px 16px;
background-image: linear-gradient(135deg, #4ea2f566, #1C588F66);
background-image: linear-gradient(135deg, #4ea2f566, #1c588f66);
border-radius: 10px;
cursor: pointer;
margin-left: 10px;
@ -151,7 +154,7 @@ onBeforeUnmount(() => {
.containner4-data:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(78, 162, 245, 0.3);
background-image: linear-gradient(135deg, #4ea2f588, #1C588F88);
background-image: linear-gradient(135deg, #4ea2f588, #1c588f88);
}
.containner4-data img {
@ -171,7 +174,7 @@ onBeforeUnmount(() => {
.commenter {
font-weight: 500;
color: #FFFFFF;
color: #ffffff;
margin-bottom: 4px;
}
@ -183,4 +186,4 @@ onBeforeUnmount(() => {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</style>

View File

@ -15,7 +15,6 @@
@pointerdown.stop="handleSectionPointerDown(time)"
></div>
</el-tooltip>
<div class="progress-bar" :style="trackStyle"></div>
<div class="active-sign">
<el-tooltip
@ -26,7 +25,6 @@
>
<div class="active-needle" :style="showHidden"></div>
</el-tooltip>
<el-tooltip
:content="TansTimestamp(currentTime, 'YYYY.MM.DD HH:mm:ss')"
placement="bottom"

View File

@ -42,7 +42,6 @@
</template>
<script setup>
import { ref } from "vue"
const props = defineProps({
anlysisList: {
type: Array,