首页公告增加滚动

package-lock.json

@@ -41,7 +41,8 @@
         "vue-router": "^4.2.5",
         "vue3-pdfjs": "^0.1.6",
         "vue3-print-nb": "^0.1.4",
-        "vue3-puzzle-vcode": "^1.1.5"
+        "vue3-puzzle-vcode": "^1.1.5",
+        "vue3-seamless-scroll": "^2.0.1"
       },
       "devDependencies": {
         "@our-patches/postcss-px-to-viewport": "^1.2.0",
@@ -6018,6 +6019,14 @@
       "resolved": "https://registry.npmmirror.com/vue3-puzzle-vcode/-/vue3-puzzle-vcode-1.1.7.tgz",
       "integrity": "sha512-mW780dz7HKjrElnE60CeYSeHGidKBKHoMjTDYfqF21330rTkFOsfDK1FQKZ22MktgMtTEoS/imfpEDlM1cxY/g=="
     },
+    "node_modules/vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "dependencies": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.2",
       "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.2.tgz",

package.json

@@ -43,7 +43,8 @@
     "vue-router": "^4.2.5",
     "vue3-pdfjs": "^0.1.6",
     "vue3-print-nb": "^0.1.4",
-    "vue3-puzzle-vcode": "^1.1.5"
+    "vue3-puzzle-vcode": "^1.1.5",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@our-patches/postcss-px-to-viewport": "^1.2.0",

src/views/index/components/announcement.vue

@@ -1,28 +1,44 @@
 <template>
   <el-tabs v-model="active">
-    <el-tab-pane label="平台公告" name="first">
+    <el-tab-pane label="平台公告" name="first" lazy>
-      <ul>
+      <seamless-scroll
-        <li
+        :list="platformAnnouncementList"
-          v-for="(item, index) in platformAnnouncementList.splice(0, 5)"
+        hover
+        class="scroll"
+        :step="0.5"
+        :single-wait-time="1000"
+        :single-height="24"
+        :model-value="!data.viewDialog.visible && active === 'first'"
+      >
+        <div
+          v-for="(item, index) in platformAnnouncementList"
           :key="index"
-          class="line-1"
+          class="line-1 item"
           @click="fnPlatformAnnouncementView(item.NOTICE_ID)"
         >
           {{ item.SYNOPSIS }}
-        </li>
+        </div>
-      </ul>
+      </seamless-scroll>
     </el-tab-pane>
-    <el-tab-pane label="企业公告" name="second">
+    <el-tab-pane label="企业公告" name="second" lazy>
-      <ul>
+      <seamless-scroll
-        <li
+        :list="corporateAnnouncementList"
-          v-for="(item, index) in corporateAnnouncementList.splice(0, 5)"
+        hover
+        class="scroll"
+        :step="0.5"
+        :single-wait-time="1000"
+        :single-height="24"
+        :model-value="!data.viewDialog.visible && active === 'second'"
+      >
+        <div
+          v-for="(item, index) in corporateAnnouncementList"
           :key="index"
-          class="line-1"
+          class="line-1 item"
           @click="fnCorporateAnnouncementView(item.NOTICECORP_ID)"
         >
           {{ item.SYNOPSIS }}
-        </li>
+        </div>
-      </ul>
+      </seamless-scroll>
     </el-tab-pane>
   </el-tabs>
   <announcement-view
@@ -41,6 +57,7 @@ import {
 } from "@/request/index.js";
 import useListData from "@/assets/js/useListData.js";
 import AnnouncementView from "./announcement_view.vue";
+import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";
 
 const active = ref("first");
 const { list: platformAnnouncementList } = useListData(
@@ -70,11 +87,11 @@ const fnCorporateAnnouncementView = async (NOTICECORP_ID) => {
 </script>
 
 <style scoped lang="scss">
-ul {
+.scroll {
   height: 120px;
   overflow: hidden;
 
-  li {
+  .item {
     padding: 4px 0;
     font-size: 14px;
     cursor: pointer;