feat:添加滚动面板组件

src/components/scroll-panel/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div ref="scrollContainer" class="scroll-container" @mouseover="pauseScroll" @mouseleave="startScroll">
+    <div ref="scrollContent" class="scroll-content">
+      <div class="scroll-content-inner">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollPanel',
+  props: {
+    scrollSpeed: { type: Number, default: 1 }
+  },
+  data() {
+    return {
+      scrollInterval: null,
+      scrollContainer: null,
+      scrollContent: null,
+      containerHeight: 0,
+      contentHeight: 0,
+      offsetY: 0
+    }
+  },
+  mounted() {
+    this.scrollContainer = this.$refs.scrollContainer
+    this.scrollContent = this.$refs.scrollContent
+    this.$nextTick(() => {
+      this.calculateHeights()
+      this.startScroll()
+    })
+    window.addEventListener('resize', this.calculateHeights)
+  },
+  beforeDestroy() {
+    this.pauseScroll()
+    window.removeEventListener('resize', this.calculateHeights)
+  },
+  methods: {
+    calculateHeights() {
+      this.containerHeight = this.scrollContainer.clientHeight
+      this.contentHeight = this.scrollContent.scrollHeight / 2 // Half of the total content height
+      this.scrollContent.style.height = `${this.contentHeight * 2}px` // Ensure enough height for both sections
+      this.offsetY = 0
+      this.scrollContent.style.transform = `translateY(0px)`
+    },
+    startScroll() {
+      if (this.scrollInterval) return
+
+      const scrollStep = () => {
+        this.offsetY += this.scrollSpeed
+        // console.log(this.offsetY)
+        // console.log(this.contentHeight)
+        if (this.offsetY >= this.contentHeight) {
+          this.offsetY = 0
+        }
+        this.scrollContent.style.transform = `translateY(-${this.offsetY}px)`
+        this.scrollInterval = requestAnimationFrame(scrollStep)
+      }
+
+      this.scrollInterval = requestAnimationFrame(scrollStep)
+    },
+    pauseScroll() {
+      if (this.scrollInterval) {
+        cancelAnimationFrame(this.scrollInterval)
+        this.scrollInterval = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.scroll-container {
+  height: 100%;
+  margin-top: 10px;
+  overflow: hidden;
+  /*position: relative;*/
+}
+
+.scroll-content {
+  display: flex;
+  flex-direction: column;
+  transition: transform 0s linear;
+}
+
+.scroll-content-inner {
+  position: relative;
+}
+</style>