修复滚动插件问题

package.json

@@ -14,9 +14,9 @@
     "naive-ui": "^2.36.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
-    "tank-vue3-seamless-scroll": "^1.0.16",
     "vue": "^3.3.11",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-marquee": "^4.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.4",

src/pages/views/home/components/HomePage.vue

@@ -221,38 +221,38 @@
                   </span>
                 </div>
                 <div class="scrollBox">
-                  <!-- <TankSeamlessScroll
-                    :step-length="60"
-                    :debug="false"
-                    :reverse="false"
-                  > -->
-                  <template
-                    v-for="(item, index) in itemd.content[1]"
-                    :key="index"
+                  <Vue3Marquee
+                    pause-on-hover
+                    vertical
+                    clone
                   >
-                    <div class="classes-scroll-content">
-                      <div>
+                    <template
+                      v-for="(item, index) in itemd.content[1]"
+                      :key="index"
+                    >
+                      <div class="classes-scroll-content">
                         <div>
-                          <span>{{ item.name }}<i>{{ item.num }}</i></span>
-                          <span>始</span>
-                          <span>{{ item.start }}</span>
-                          <span>终</span>
-                          <span>{{ item.end }}</span>
+                          <div>
+                            <span>{{ item.name }}<i>{{ item.num }}</i></span>
+                            <span>始</span>
+                            <span>{{ item.start }}</span>
+                            <span>终</span>
+                            <span>{{ item.end }}</span>
+                          </div>
+                          <div>{{ item.plan }}/{{ item.pratic }}</div>
+                        </div>
+                        <div>
+                          <n-progress
+                            type="line"
+                            :percentage="item.pratic"
+                            :show-indicator="false"
+                            :class="{ resetStyle: indexd === 3 }"
+                            processing
+                          />
                         </div>
-                        <div>{{ item.plan }}/{{ item.pratic }}</div>
-                      </div>
-                      <div>
-                        <n-progress
-                          type="line"
-                          :percentage="item.pratic"
-                          :show-indicator="false"
-                          :class="{ resetStyle: indexd === 3 }"
-                          processing
-                        />
                       </div>
-                    </div>
-                  </template>
-                  <!-- </TankSeamlessScroll> -->
+                    </template>
+                  </Vue3Marquee>
                 </div>
               </div>
               <template v-else>
@@ -292,7 +292,7 @@
 import Layout from '@/components/layout.vue'
 import { ref } from 'vue'
 import Box from '@/components/box.vue'
-// import TankSeamlessScroll from 'tank-vue3-seamless-scroll'
+import { Vue3Marquee } from 'vue3-marquee'
 import { graphic } from 'echarts'
 import Echart from '@/components/chart.vue'
 
@@ -871,16 +871,16 @@ const rightContent = ref([
           name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          name: '2路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          name: '3路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          name: '4路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          name: '5路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
         }
       ]
     ]
@@ -974,8 +974,10 @@ function changeFn(id: number, item: any) {
         align-items: center;
         justify-content: center;
         font-family: "Impact Normal", Impact, sans-serif;
+
         &>div {
           position: relative;
+
           &>p:first-child {
             font-size: 18px;
 
@@ -987,7 +989,8 @@ function changeFn(id: number, item: any) {
           &>p:last-child {
             font-size: 24px;
           }
-          .steps{
+
+          .steps {
             position: absolute;
             top: -60px;
             left: 15px;