1

src/components/ScrollContainer.vue

@@ -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"
+      <div
-        :class="{ 'temporary-style': item.showTemporaryStyle }">
+        v-for="(item, index) in displayData"
-        <img :src="item.avatar"  />
+        :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 scrollContainer = ref(null)
-const scrollTimer = ref(null);
+const scrollTimer = ref(null)
-const displayData = ref([]);
+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;
+  const container = scrollContainer.value
-  container.addEventListener('mouseenter', stopScroll);
+  container.addEventListener("mouseenter", stopScroll)
-  container.addEventListener('mouseleave', startAutoScroll);
+  container.addEventListener("mouseleave", startAutoScroll)
-};
+}
 
 // 停止滚动
 const stopScroll = () => {
   if (scrollTimer.value) {
-    clearInterval(scrollTimer.value);
+    clearInterval(scrollTimer.value)
-    scrollTimer.value = null;
+    scrollTimer.value = null
   }
-};
+}
 
 // 监听数据变化
-watch(() => props.data,
+watch(
+  () => props.data,
   (newVal) => {
-    stopScroll();
+    stopScroll()
-    initDisplayData();
+    initDisplayData()
-    startAutoScroll();
+    startAutoScroll()
   },
   { immediate: true }
-);
+)
 
 // 生命周期钩子
 onMounted(() => {
-  initDisplayData();
+  initDisplayData()
-  startAutoScroll();
+  startAutoScroll()
-});
+})
 
 onBeforeUnmount(() => {
-  stopScroll();
+  stopScroll()
   // 移除事件监听
   if (scrollContainer.value) {
-    const container = scrollContainer.value;
+    const container = scrollContainer.value
-    container.removeEventListener('mouseenter', stopScroll);
+    container.removeEventListener("mouseenter", stopScroll)
-    container.removeEventListener('mouseleave', startAutoScroll);
+    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>

src/components/timeAxis.vue

@@ -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"

src/views/LinkPrediction/components/anlysisPanle.vue

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