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