Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan
This commit is contained in:
commit
ae36a56077
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
const props = defineProps({
|
||||
anlysisList: {
|
||||
type: Array,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user