滚动

@@ -13,8 +13,10 @@
           <div><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
           <div><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
         </div>
         </div>
         <div class="rBotton">
         <div class="rBotton">
-          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
-          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
+
+          <ScrollingData :data="dataItems" speed="1"/>
+          <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内=容</div>-->
+          <!--          <div class"row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
           <!--          <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
@@ -98,10 +100,28 @@
 
 
 <script setup>
 <script setup>
 import {autoToolTip} from "@/plugins/auto-toolTip";
 import {autoToolTip} from "@/plugins/auto-toolTip";
+import ScrollingData from './scrollingData .vue'
 import * as echarts from "echarts";
 import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
 import * as api from "@/apiPc/common"
 import {onMounted, ref} from 'vue'
 import {onMounted, ref} from 'vue'
 
 
+
+const dataItems = ref([
+  '数据项 1: 当前值 256',
+  '数据项 2: 当前值 189',
+  '数据项 3: 当前值 342',
+  '数据项 4: 当前值 127',
+  '数据项 5: 当前值 298',
+  '数据项 6: 当前值 431',
+  '数据项 7: 当前值 156',
+  '数据项 8: 当前值 321',
+  '数据项 9: 当前值 456',
+  '数据项 10: 当前值 234',
+  '数据项 11: 当前值 321',
+  '数据项 12: 当前值 456',
+  '数据项 13: 当前值 234',
+  '数据项 14: 当前值 321',
+]);
 const zhuRef1 = ref(null)
 const zhuRef1 = ref(null)
 const zhuRef2 = ref(null)
 const zhuRef2 = ref(null)
 const zhuRef3 = ref(null)
 const zhuRef3 = ref(null)
@@ -999,7 +1019,7 @@ function autoHover(myChart, option, index, time) {
       }
       }
 
 
       .rBotton {
       .rBotton {
-        height: calc(60 * 100vw / 1920);
+        height: calc(130 * 100vh / 1920);
         //overflow-y: scroll;
         //overflow-y: scroll;
         .row-text {
         .row-text {
           font-family: PingFang SC, serif;
           font-family: PingFang SC, serif;

+<template>
+  <div class="scrolling-container" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
+    <div :style="{ transform: `translateY(${offset}px)` }" class="scrolling-content">
+      <div v-for="(item, index) in dataList" :key="index" class="scrolling-item">
+        <span/> {{ item }}
+      </div>
+      <!-- 复制一份数据实现无缝滚动 -->
+      <div v-for="(item, index) in dataList" :key="`copy-${index}`" class="scrolling-item">
+        <span/> {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  },
+  speed: {
+    type: Number,
+    default: 1 // 滚动速度，数值越大越快
+  },
+  delay: {
+    type: Number,
+    default: 1000 // 初始延迟时间(毫秒)
+  }
+});
+
+const dataList = ref([...props.data]);
+const offset = ref(0);
+const scrollInterval = ref(null);
+const isPaused = ref(false);
+const containerHeight = ref(0);
+const contentHeight = ref(0);
+const itemHeight = ref(0);
+
+// 初始化滚动
+const initScroll = () => {
+  // 清除之前的定时器
+  if (scrollInterval.value) {
+    clearInterval(scrollInterval.value);
+  }
+  // 重置位置到第一条数据
+  offset.value = 0;
+
+  // 设置定时器
+  scrollInterval.value = setInterval(() => {
+    if (!isPaused.value) {
+      offset.value -= props.speed;
+      // 当滚动到内容的一半时，重置位置实现无缝滚动
+      if (Math.abs(offset.value) >= contentHeight.value / 2) {
+        offset.value += contentHeight.value / 2;
+      }
+    }
+  }, 20);
+};
+
+// 暂停滚动
+const pauseScroll = () => {
+  isPaused.value = true;
+};
+
+// 恢复滚动
+const resumeScroll = () => {
+  isPaused.value = false;
+};
+
+onMounted(() => {
+  // 延迟启动滚动，确保DOM已渲染
+  setTimeout(() => {
+    const container = document.querySelector('.scrolling-container');
+    const content = document.querySelector('.scrolling-content');
+    const firstItem = document.querySelector('.scrolling-item');
+
+    if (container && content && firstItem) {
+      containerHeight.value = container.clientHeight;
+      contentHeight.value = content.clientHeight;
+      itemHeight.value = firstItem.clientHeight;
+
+      // 如果内容高度小于容器高度，不需要滚动
+      if (contentHeight.value > containerHeight.value) {
+        // 初始位置设置为显示第一条数据
+        // offset.value = 0;
+        initScroll();
+      }
+    }
+  }, props.delay);
+});
+
+onUnmounted(() => {
+  if (scrollInterval.value) {
+    clearInterval(scrollInterval.value);
+  }
+});
+</script>
+
+<style scoped>
+.scrolling-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.scrolling-content {
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+
+.scrolling-item {
+  font-family: PingFang SC, serif;
+  font-weight: 400;
+  font-size: calc(17 * 100vw / 1920);
+  color: #FFFFFF;
+  height: calc(40 * 100vh / 1920);
+  margin: calc(8 * 100vw / 1920) 0;
+
+  span {
+    display: inline-block;
+    width: calc(12 * 100vw / 1920);
+    height: calc(12 * 100vw / 1920);
+    background-color: #01D7F0;
+    transform: rotate(45deg);
+    margin-left: calc(3 * 100vw / 1920);
+    border-radius: calc(3 * 100vw / 1920);
+  }
+}
+
+
+</style>
\ No newline at end of file