修改通知看板样式，增加滚动效果

src/views/modules/home/workboard.vue

@@ -14,39 +14,30 @@
           >
         </el-row>
       </div>
-      <div class="mod-home" id="customer-content">
-        <el-table :data="list">
-          <el-table-column
-            label="姓名"
-            prop="userName"
-            header-align="center"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            label="待审批"
-            prop="pendingApprovalNum"
-            header-align="center"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            label="待处理工单"
-            prop="pendingTaskNum"
-            header-align="center"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            label="等待工单"
-            prop="toBeginTaskNum"
-            header-align="center"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            label="预警工单"
-            prop="warningTaskNum"
-            header-align="center"
-            align="center"
-          ></el-table-column>
-        </el-table>
+      <div id="customer-content" ref="tableContainer" class="scroll-container" :style="{ height: tableHeight + 'px' }">
+        <!-- 固定表头（4列） -->
+        <div class="header-row">
+          <div class="header-cell">姓名</div>
+          <div class="header-cell">待审批工单</div>
+          <div class="header-cell">待处理工单</div>
+          <div class="header-cell">等待工单</div>
+          <div class="header-cell">预警工单</div>
+        </div>
+        <seamless-scroll
+          :data="list"
+          class="seamless-scroll"
+          :class-option="{ step: 0.5 }"
+        >
+          <ul>
+            <li v-for="(item, index) in list" :key="index" class="content-row">
+              <div class="content-cell">{{ item.userName }}</div>
+              <div class="content-cell">{{ item.pendingApprovalNum }}</div>
+              <div class="content-cell">{{ item.pendingTaskNum }}</div>
+              <div class="content-cell">{{ item.toBeginTaskNum }}</div>
+              <div class="content-cell">{{ item.warningTaskNum }}</div>
+            </li>
+          </ul>
+        </seamless-scroll>
       </div>
     </div>
     <!-- 选择用户弹框 -->
@@ -60,7 +51,7 @@
           <el-form-item label="选择用户" prop="">
             <el-select
               v-model="selectedUsers"
-               v-loadmore="loadMore"
+              v-loadmore="loadMore"
               placeholder="请选择"
               multiple
               style="width: 100%"
@@ -84,10 +75,13 @@
 </template>
 
 <script>
+import SeamlessScroll from 'vue-seamless-scroll' // 引入组件
 export default {
+  components: { SeamlessScroll }, // 注册组件
   name: 'workboard',
   data () {
     return {
+      tableHeight: 0, // 动态高度
       chooseUserVisible: false,
       userOptions: [],
       oldSelectedUsers: [],
@@ -96,13 +90,31 @@ export default {
       current: 1,
       size: 50,
       total: 0,
-      loading: false   // 防止重复请求
+      loading: false // 防止重复请求
     }
   },
   created () {
     this.getList()
   },
+  mounted () {
+    this.calcHeight()
+    window.addEventListener('resize', this.calcHeight)
+
+    this.startScroll()
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.calcHeight) // 避免内存泄漏
+  },
   methods: {
+    calcHeight () {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const container = this.$refs.tableContainer
+          const top = container.getBoundingClientRect().top
+          this.tableHeight = window.innerHeight - top - 50 // 50px 为预留边距
+        }, 300) // 预留资源加载时间
+      })
+    },
     // 选择用户
     handleUser () {
       this.getSelectedUsers()
@@ -116,8 +128,8 @@ export default {
         url: this.$http.adornUrl(`/user-service/user/queryWithSelectedItems`),
         method: 'get',
         params: this.$http.adornParams({
-          'current': this.current,
-          'size': this.size
+          current: this.current,
+          size: this.size
         })
       }).then(({ data }) => {
         if (data && data.code === '200') {
@@ -137,7 +149,7 @@ export default {
 
       this.loading = true
       this.current++
-      await this.getUsers()  // 请求下一页数据
+      await this.getUsers() // 请求下一页数据
       this.loading = false
     },
     // 提交用户
@@ -180,7 +192,7 @@ export default {
         method: 'get',
         params: this.$http.adornParams({
           current: 1,
-          size: 20
+          size: 500
         })
       }).then(({ data }) => {
         if (data && data.code === '200') {
@@ -203,6 +215,15 @@ export default {
     fullScreen () {
       const element = document.getElementById('customer-content')
       element.requestFullscreen()
+    },
+    startScroll () {
+      const scrollContainer = this.$el.querySelector('.seamless-scroll')
+      let top = 0 // 初始位置
+      setInterval(() => {
+        top -= 1 // 每次减少1px，可以根据需要调整速度和方向
+        scrollContainer.scrollTop = top
+      }, 200)
+      // 调整这个值来改变速度，数值越小速度越快
     }
   }
 }
@@ -213,7 +234,6 @@ export default {
   /* line-height: 1.5; */
   height: 100%;
   position: relative;
-  background-color: #ffffff;
 }
 
 .full-screen-btn {
@@ -236,4 +256,60 @@ export default {
   display: flex;
   justify-content: end;
 }
+
+/* 容器设置 */
+.scroll-container {
+  /* height: 100%; */
+  border: 1px solid #eee;
+  overflow: hidden;
+  background: white; /* 全屏背景 */
+}
+
+/* 表头样式（固定定位） */
+.header-row {
+  display: flex;
+  background: #f5f7fa;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.header-cell {
+  flex: 1;
+  padding: 12px;
+  text-align: center;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+  font-size:30px;
+}
+
+/* 内容滚动区域 */
+.content-scroll {
+  height: calc(100% - 46px); /* 减去表头高度 */
+  overflow: hidden;
+}
+
+/* 内容行与列 */
+.content-row {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+}
+.content-cell {
+  flex: 1;
+  padding: 10px;
+  text-align: center;
+  font-size: 24px;
+}
+.content-row:hover {
+  background: #f9f9f9; /* 悬停高亮 */
+}
+
+ul, ol {
+  margin: 0;    /* 消除外部边距 */
+  padding: 0;   /* 消除内部边距 */
+  list-style: none; /* 可选：移除列表标记 */
+}
+ul li, ol li {
+  padding-top: 0; /* 关键：消除首行上边距 */
+}
+
 </style>