卡片图标和层级调整

pages/index/index.uvue

@@ -9,47 +9,47 @@
 
 			<view class="db-view">
 				<view class="db-box" @click="navigateToOverdueOrders" v-if="checkPermi(['gxt:app:overdue'])" >
-					<view v-if="overdueCount > 0" class="badge"><text class="count">{{ overdueCount }}</text></view>
 					<view class="db-block">
-						<view class="db-center-3">
-							<image class="db-image" src="/static/images/map/2.png"></image>
-						</view>
+						<image class="db-image" src="/static/images/map/44.png"></image>
+					</view>
+					<view v-if="overdueCount > 0" class="badge">
+						<text class="count">{{ overdueCount }}</text>
 					</view>
 					<text class="db-text">超时工单</text>
 				</view>
 				<view class="db-box" @click="navigateToAssignedOrders">
-					<view v-if="assignedCount > 0" class="badge"><text class="count">{{ assignedCount }}</text></view>
 					<view class="db-block">
-						<view class="db-center-1">
-							<image class="db-image" src="/static/images/map/1.png"></image>
-						</view>
+						<image class="db-image" src="/static/images/map/11.png"></image>
+					</view>
+					<view v-if="assignedCount > 0" class="badge">
+						<text class="count">{{ assignedCount }}</text>
 					</view>
 					<text class="db-text">待处理工单</text>
 				</view>
 				<view class="db-box" @click="navigateToScoreOrders" v-if="checkPermi(['gxt:app:toScore'])">
-					<view v-if="selfScoreCount > 0" class="badge"><text class="count">{{ selfScoreCount }}</text></view>
 					<view class="db-block">
-						<view class="db-center-2">
-							<image class="db-image" src="/static/images/map/2.png"></image>
-						</view>
+						<image class="db-image" src="/static/images/map/22.png"></image>
+					</view>
+					<view v-if="selfScoreCount > 0" class="badge">
+						<text class="count">{{ selfScoreCount }}</text>
 					</view>
 					<text class="db-text">待评分工单</text>
 				</view>
 				<view class="db-box" @click="navigateToSuspendedOrders" v-if="checkPermi(['gxt:app:toResume'])">
-					<view v-if="suspendedCount > 0" class="badge"><text class="count">{{ suspendedCount }}</text></view>
 					<view class="db-block">
-						<view class="db-center-1">
-							<image class="db-image" src="/static/images/map/2.png"></image>
-						</view>
+						<image class="db-image" src="/static/images/map/11.png"></image>
+					</view>
+					<view v-if="suspendedCount > 0" class="badge">
+						<text class="count">{{ suspendedCount }}</text>
 					</view>
 					<text class="db-text">已挂起工单</text>
 				</view>
 				<view class="db-box" @click="navigateToApproveOrders" v-if="checkPermi(['gxt:app:toApprove'])">
-					<view v-if="approveCount > 0" class="badge"><text class="count">{{ approveCount }}</text></view>
 					<view class="db-block">
-						<view class="db-center-2">
-							<image class="db-image" src="/static/images/map/1.png"></image>
-						</view>
+						<image class="db-image" src="/static/images/map/11.png"></image>
+					</view>
+					<view v-if="approveCount > 0" class="badge">
+						<text class="count">{{ approveCount }}</text>
 					</view>
 					<text class="db-text">待审批工单</text>
 				</view>
@@ -837,17 +837,10 @@
 		// justify-content: space-around; /* 自动分配间距，避免挤压 */
 		align-items: center;
 		padding: 0 20rpx; // 可选：避免贴边
-		position: relative; // 新增
-		z-index: 3; // 新增
-
+		
 		.db-box {
 			background-color: #fff;
 			width: 216rpx;
-			// 删除固定宽高 ↓
-			// max-width: 300rpx;
-			// height: 200rpx;
-
-			// flex: 1;                // ✅ 关键：平均分空间
 			display: flex;
 			flex-direction: column; // 垂直排列：图标在上，文字在下
 			justify-content: center;
@@ -856,63 +849,47 @@
 			border-radius: 5px;
 			padding: 30rpx 10rpx;   // 可选：增加内边距使内容不拥挤
 			position: relative;
-			// z-index: 10 !important;
-			z-index: 4; // 提升卡片层级
-
+			
 			.db-text {
 				margin-top: 16rpx;   // 图标与文字间距
 				font-size: 24rpx;    // 建议用 rpx，10px 太小了
 				color: #333;
 			}
-
-			.db-center-1,
-			.db-center-2,
-			.db-center-3 {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: 100rpx;
-				height: 100rpx;
-				border-radius: 50rpx;
-				// position: relative;
+			
+			.db-image{
+				width:100rpx;
+				height:100rpx;
+			}
+			.db-block{
+				z-index: 6;
+			}
+			.badge {
+				z-index: 7;
+				position: absolute;
+				top: 35rpx;
+				right: 35rpx;
+				background-color: #ff4d4f;
+				border-radius: 40rpx;
+				min-width: 40rpx;
+				height: 40rpx;
+				display: flex; // 启用 Flexbox 布局
+				justify-content: center; // 水平居中
+				align-items: center;     // 垂直居中
+				box-sizing: border-box;  // 确保 padding 不影响整体尺寸
+				padding: 0 12rpx;
+				overflow: hidden;
+			
+				.count {
+					// line-height: 40rpx;
+					font-size: 26rpx;
+					// text-align: center;
+					color: #ffffff;
+				}
+			
 			}
-
-			.db-center-1 { background-color: #DBEAFE; }
-			.db-center-2 { background-color: #DCFCE7; }
-			.db-center-3 { background-color: #F3E8FF; }
-		}
-		.db-image{
-			width:50rpx;
-			height:50rpx;
-		}
-	}
-
-	.badge {
-		z-index: 9999 !important;
-		position: absolute;
-		top: 35rpx;
-		right: 35rpx;
-		background-color: #ff4d4f;
-		border-radius: 40rpx !important;
-		min-width: 40rpx;
-		height: 40rpx;
-		display: flex; // 启用 Flexbox 布局
-		justify-content: center; // 水平居中
-		align-items: center;     // 垂直居中
-		box-sizing: border-box;  // 确保 padding 不影响整体尺寸
-		padding: 0 12rpx;
-		overflow: hidden;
-
-		.count {
-			// line-height: 40rpx;
-			font-size: 26rpx;
-			// text-align: center;
-			color: #ffffff;
 		}
-
 	}
 
-
 	.list-item {
 		margin: 0 30rpx 24rpx 30rpx;
 		background-color: #ffffff;