修改“通知看板”的样式

src/views/modules/home/workboard.vue

@@ -2,16 +2,12 @@
   <div>
     <div>
       <div>
-        <el-row>
-          <el-col :span="12"
-            ><el-button @click="handleUser">选择用户</el-button></el-col
-          >
+        <el-row style="margin-bottom: 20px;">
+          <el-col :span="12"><el-button @click="handleUser">选择用户</el-button></el-col>
           <el-col :span="12">
             <!-- <span>当前时间：</span><span>2025-05-12</span> -->
           </el-col>
-          <el-button @click="fullScreen" class="full-screen-btn"
-            >全屏</el-button
-          >
+          <el-button @click="fullScreen" class="full-screen-btn">全屏</el-button>
         </el-row>
       </div>
       <div id="customer-content" ref="tableContainer" class="scroll-container" :style="{ height: tableHeight + 'px' }">
@@ -24,48 +20,31 @@
           <div class="header-cell">等待工单</div>
           <div class="header-cell">预警工单</div>
         </div>
-        <seamless-scroll
-          :data="list"
-          class="seamless-scroll"
-          :class-option="{ step: 0.5 }"
-        >
+        <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.unReadNum }}</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>
+              <div class="content-cell red-cell">{{ Number(item.unReadNum) === 0 ? '' : item.unReadNum }}</div>
+              <div class="content-cell red-cell">{{ Number(item.pendingApprovalNum) === 0 ? '' : item.pendingApprovalNum
+              }}
+              </div>
+              <div class="content-cell red-cell">{{ Number(item.pendingTaskNum) === 0 ? '' : item.pendingTaskNum }}
+              </div>
+              <div class="content-cell red-cell">{{ Number(item.toBeginTaskNum) === 0 ? '' : item.toBeginTaskNum }}
+              </div>
+              <div class="content-cell red-cell">{{ Number(item.warningTaskNum) === 0 ? '' : item.warningTaskNum }}
+              </div>
             </li>
           </ul>
         </seamless-scroll>
       </div>
     </div>
     <!-- 选择用户弹框 -->
-    <el-dialog
-      title="选择用户"
-      :visible.sync="chooseUserVisible"
-      :close-on-click-modal="false"
-    >
+    <el-dialog title="选择用户" :visible.sync="chooseUserVisible" :close-on-click-modal="false">
       <div class="dialog">
         <el-form>
           <el-form-item label="选择用户" prop="">
-            <el-select
-              v-model="selectedUsers"
-              v-loadmore="loadMore"
-              placeholder="请选择"
-              multiple
-              style="width: 100%"
-            >
-              <el-option
-                v-for="item in userOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
+            <user-components v-model="selectedUsers" :userIds.sync="selectedUsers" @change="userSelectedChanged" />
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer2">
@@ -78,10 +57,11 @@
 
 <script>
 import SeamlessScroll from 'vue-seamless-scroll' // 引入组件
+import UserComponents from '../common/user-components'
 export default {
-  components: { SeamlessScroll }, // 注册组件
+  components: { SeamlessScroll, UserComponents }, // 注册组件
   name: 'workboard',
-  data () {
+  data() {
     return {
       tableHeight: 0, // 动态高度
       chooseUserVisible: false,
@@ -95,20 +75,20 @@ export default {
       loading: false // 防止重复请求
     }
   },
-  created () {
+  created() {
     this.getList()
   },
-  mounted () {
+  mounted() {
     this.calcHeight()
     window.addEventListener('resize', this.calcHeight)
 
     this.startScroll()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     window.removeEventListener('resize', this.calcHeight) // 避免内存泄漏
   },
   methods: {
-    calcHeight () {
+    calcHeight() {
       this.$nextTick(() => {
         setTimeout(() => {
           const container = this.$refs.tableContainer
@@ -118,14 +98,14 @@ export default {
       })
     },
     // 选择用户
-    handleUser () {
+    handleUser() {
       this.getSelectedUsers()
 
       this.chooseUserVisible = true
       this.getUsers()
     },
 
-    async getUsers () {
+    async getUsers() {
       this.$http({
         url: this.$http.adornUrl(`/user-service/user/queryWithSelectedItems`),
         method: 'get',
@@ -146,7 +126,7 @@ export default {
       })
     },
     // 滚动到底部时触发
-    async loadMore () {
+    async loadMore() {
       if (this.loading || this.userOptions.length >= this.total) return
 
       this.loading = true
@@ -155,7 +135,7 @@ export default {
       this.loading = false
     },
     // 提交用户
-    userSubmit () {
+    userSubmit() {
       // let addUserIds = []
       // let delUserIds = []
       // // 计算新增用户
@@ -188,7 +168,7 @@ export default {
         }
       })
     },
-    getList () {
+    getList() {
       this.$http({
         url: this.$http.adornUrl(`/biz-service/workBoard/list`),
         method: 'get',
@@ -202,7 +182,7 @@ export default {
         }
       })
     },
-    getSelectedUsers () {
+    getSelectedUsers() {
       this.$http({
         url: this.$http.adornUrl(`/biz-service/workBoard/selected/user/list`),
         method: 'get',
@@ -214,11 +194,11 @@ export default {
       })
     },
     // 全屏显示
-    fullScreen () {
+    fullScreen() {
       const element = document.getElementById('customer-content')
       element.requestFullscreen()
     },
-    startScroll () {
+    startScroll() {
       const scrollContainer = this.$el.querySelector('.seamless-scroll')
       let top = 0 // 初始位置
       setInterval(() => {
@@ -226,6 +206,9 @@ export default {
         scrollContainer.scrollTop = top
       }, 200)
       // 调整这个值来改变速度，数值越小速度越快
+    },
+    userSelectedChanged(val) {
+      this.selectedUsers = val
     }
   }
 }
@@ -264,7 +247,8 @@ export default {
   /* height: 100%; */
   border: 1px solid #eee;
   overflow: hidden;
-  background: white; /* 全屏背景 */
+  background: white;
+  /* 全屏背景 */
 }
 
 /* 表头样式（固定定位） */
@@ -275,18 +259,20 @@ export default {
   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;
+  font-size: 30px;
 }
 
 /* 内容滚动区域 */
 .content-scroll {
-  height: calc(100% - 46px); /* 减去表头高度 */
+  height: calc(100% - 46px);
+  /* 减去表头高度 */
   overflow: hidden;
 }
 
@@ -294,24 +280,40 @@ export default {
 .content-row {
   display: flex;
   border-bottom: 1px solid #f0f0f0;
+  border-bottom: 2px solid #d8d8d8;
+  /* 新增：加粗下划线 */
 }
+
 .content-cell {
   flex: 1;
   padding: 10px;
   text-align: center;
   font-size: 24px;
 }
+
 .content-row:hover {
-  background: #f9f9f9; /* 悬停高亮 */
+  background: #f9f9f9;
+  /* 悬停高亮 */
 }
 
-ul, ol {
-  margin: 0;    /* 消除外部边距 */
-  padding: 0;   /* 消除内部边距 */
-  list-style: none; /* 可选：移除列表标记 */
+ul,
+ol {
+  margin: 0;
+  /* 消除外部边距 */
+  padding: 0;
+  /* 消除内部边距 */
+  list-style: none;
+  /* 可选：移除列表标记 */
 }
-ul li, ol li {
-  padding-top: 0; /* 关键：消除首行上边距 */
+
+ul li,
+ol li {
+  padding-top: 0;
+  /* 关键：消除首行上边距 */
 }
 
+.red-cell {
+  color: red;
+  font-weight: bold;
+}
 </style>