Sfoglia il codice sorgente

首页数字角标显示优化

HD_wangm 3 mesi fa
parent
commit
b51af05c5f
1 ha cambiato i file con 26 aggiunte e 6 eliminazioni
  1. 26 6
      pages/index/index.uvue

+ 26 - 6
pages/index/index.uvue

@@ -144,7 +144,7 @@
 </template>
 
 <script setup lang="uts">
-    import { ref, onMounted, reactive } from 'vue'
+    import { ref, onMounted, reactive, onLoad, onShow, nextTick } from 'vue'
     import { getUserInfo,checkPermi } from '../../utils/storage'
     import FlowChart from '../../components/index/flow-chart/flow-chart.uvue'
     import { getOrderList, almostOverdueList, overdueList, pendingList } from '../../api/order/list'
@@ -659,6 +659,22 @@
 		})
 	}
 
+	onShow(() => {
+		// 重新加载所有计数
+		loadAssignedCount()
+		loadSelfScoreCount()
+		loadOverdueCount()
+		loadSuspendedCount()
+		loadApproveCount()
+		loadOverdueList()
+
+		// 修复:使用从vue导入的nextTick,移除document操作
+		nextTick(() => {
+			// uts中无需手动操作DOM,nextTick已确保数据更新后DOM完成渲染
+			console.log('数据更新完成,DOM已重新渲染')
+		})
+	})
+
     // 初始化
     //onMounted(() => {
     onLoad((options: any) => {
@@ -733,6 +749,7 @@
         flex: 1;
         // padding-top: env(safe-area-inset-top);
 		background-color: #e8f0f9;
+		z-index: 1; // 新增:基础层级
     }
 
     .bg-image {
@@ -760,7 +777,7 @@
 		margin-top: 30rpx;
         margin-bottom: 150rpx;
         // padding: 20rpx;
-        z-index: 10;
+        z-index: 2;
     }
 
     .header {
@@ -820,6 +837,8 @@
 		// justify-content: space-around; /* 自动分配间距,避免挤压 */
 		align-items: center;
 		padding: 0 20rpx; // 可选:避免贴边
+		position: relative; // 新增
+		z-index: 3; // 新增
 
 		.db-box {
 			background-color: #fff;
@@ -836,8 +855,9 @@
 			margin: 0 10rpx 20rpx 10rpx;        // 左右间距(替代原来的 margin-left)
 			border-radius: 5px;
 			padding: 30rpx 10rpx;   // 可选:增加内边距使内容不拥挤
-			position: relative !important;
-			z-index: 10 !important;
+			position: relative;
+			// z-index: 10 !important;
+			z-index: 4; // 提升卡片层级
 
 			.db-text {
 				margin-top: 16rpx;   // 图标与文字间距
@@ -868,8 +888,8 @@
 	}
 
 	.badge {
-		z-index: 999 !important;
-		position: absolute !important;
+		z-index: 9999 !important;
+		position: absolute;
 		top: 35rpx;
 		right: 35rpx;
 		background-color: #ff4d4f;