浏览代码

首页显示优化

HD_wangm 4 月之前
父节点
当前提交
bcb8dda399
共有 6 个文件被更改,包括 227 次插入190 次删除
  1. 84 51
      pages/index/index.uvue
  2. 4 2
      pages/order/index.uvue
  3. 3 2
      pages/order/overdue.uvue
  4. 134 133
      pages/order/pendingOrder.uvue
  5. 1 1
      pages/score/index.uvue
  6. 1 1
      pages/worktime/index.uvue

+ 84 - 51
pages/index/index.uvue

@@ -37,12 +37,6 @@
 				</view>
 			</view>
 
-            <!-- 支流出库流量图表 -->
-           <!-- <view class="chart-section">
-                <text class="section-title">支流出库流量 (m³/s)</text>
-                <flow-chart />
-            </view> -->
-
 			<!-- <view>
 				<button @click="handlePush">通知</button>
 			</view> -->
@@ -628,7 +622,7 @@
     .page-container {
         position: relative;
         flex: 1;
-        padding-top: env(safe-area-inset-top);
+        // padding-top: env(safe-area-inset-top);
 		background-color: #e8f0f9;
     }
 
@@ -654,8 +648,9 @@
     .page-content {
         position: relative;
         flex: 1;
+		margin-top: 30rpx;
         margin-bottom: 150rpx;
-        padding: 20rpx;
+        // padding: 20rpx;
         z-index: 10;
     }
 
@@ -684,7 +679,8 @@
     }
 
 	.section-title-container {
-		padding: 20rpx 30rpx 10rpx 30rpx;
+		margin-top: 20rpx;
+		padding: 20rpx 30rpx;
 	}
 
 	.section-header {
@@ -710,53 +706,89 @@
 	.db-view{
 		display: flex;
 		flex-direction: row;
-		// justify-content: space-between;
-		justify-content: flex-start;
-		margin-bottom: 10rpx;
-		// gap: 20rpx;
-
-		.db-box{
+		justify-content: space-between; // 或 space-around
+		align-items: center;
+		padding: 0 20rpx; // 可选:避免贴边
+
+		// .db-box{
+		// 	background-color: #fff;
+		// 	width:200rpx;
+		// 	height: 200rpx;
+		// 	justify-content: center;
+		// 	align-items: center;
+		// 	margin-left: 28rpx;
+		// 	border-radius: 5px;
+		// 	.db-text{
+		// 		margin-top: 10rpx;
+		// 		font-size:10px;
+		// 	}
+		// 	.db-center-1{
+		// 		justify-content: center;
+		// 		align-items: center;
+		// 		background-color: #DBEAFE;
+		// 		border-radius: 200px;
+		// 		width:100rpx;
+		// 		height:100rpx;
+		// 		position: relative;
+		// 	}
+		// 	.db-center-2{
+		// 		justify-content: center;
+		// 		align-items: center;
+		// 		background-color: #DCFCE7;
+		// 		border-radius: 200px;
+		// 		width:100rpx;
+		// 		height:100rpx;
+		// 		position: relative;
+		// 	}
+		// 	.db-center-3{
+		// 		justify-content: center;
+		// 		align-items: center;
+		// 		background-color: #F3E8FF;
+		// 		border-radius: 200px;
+		// 		width:100rpx;
+		// 		height:100rpx;
+		// 	}
+		// }
+		.db-box {
 			background-color: #fff;
-			width:200rpx;
-			height: 200rpx;
+			// 删除固定宽高 ↓
+			// width: 200rpx;
+			// height: 200rpx;
+		
+			flex: 1;                // ✅ 关键:平均分空间
+			display: flex;
+			flex-direction: column; // 垂直排列:图标在上,文字在下
 			justify-content: center;
 			align-items: center;
-			margin-left: 28rpx;
+			margin: 0 10rpx;        // 左右间距(替代原来的 margin-left)
 			border-radius: 5px;
-			.db-text{
-				margin-top: 10rpx;
-				font-size:10px;
-			}
-			.db-center-1{
-				justify-content: center;
-				align-items: center;
-				background-color: #DBEAFE;
-				border-radius: 200px;
-				width:100rpx;
-				height:100rpx;
-				position: relative;
+			padding: 30rpx 10rpx;   // 可选:增加内边距使内容不拥挤
+		
+			.db-text {
+				margin-top: 16rpx;   // 图标与文字间距
+				font-size: 24rpx;    // 建议用 rpx,10px 太小了
+				color: #333;
 			}
-			.db-center-2{
+		
+			.db-center-1,
+			.db-center-2,
+			.db-center-3 {
+				display: flex;
 				justify-content: center;
 				align-items: center;
-				background-color: #DCFCE7;
-				border-radius: 200px;
-				width:100rpx;
-				height:100rpx;
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50rpx; 
 				position: relative;
 			}
-			.db-center-3{
-				justify-content: center;
-				align-items: center;
-				background-color: #F3E8FF;
-				border-radius: 200px;
-				width:100rpx;
-				height:100rpx;
-			}
+		
+			.db-center-1 { background-color: #DBEAFE; }
+			.db-center-2 { background-color: #DCFCE7; }
+			.db-center-3 { background-color: #F3E8FF; }
 		}
 		.db-image{
-			width:20px;
-			height:20px;
+			width:50rpx;
+			height:50rpx;
 		}
 	}
 
@@ -774,14 +806,15 @@
 		align-items: center;     // 垂直居中
 		box-sizing: border-box;  // 确保 padding 不影响整体尺寸
 		padding: 0 12rpx; 
+		.count {
+			// line-height: 40rpx;
+			font-size: 26rpx;
+			// text-align: center;
+			color: #ffffff;
+		}
 
 	}
-	.count {
-		// line-height: 40rpx;
-		font-size: 26rpx;
-		// text-align: center;
-		color: #ffffff;
-	}
+	
 
 	.list-item {
 		margin: 0 30rpx 24rpx 30rpx;

+ 4 - 2
pages/order/index.uvue

@@ -841,13 +841,14 @@ const statusConfig: StatusItem[] = [
   flex-direction: row;
   align-items: flex-start;
   margin-bottom: 16rpx;
+  justify-content: space-between; /* 主轴两端对齐 */
 
   .item-title {
     font-size: 30rpx;
     color: #333333;
     font-weight: bold;
     flex-wrap: wrap;
-    flex: 0 1 80%;
+    flex: 0 1 75%;
     min-width: 0;
   }
 
@@ -884,7 +885,8 @@ const statusConfig: StatusItem[] = [
 	border-radius: 20rpx;
 	font-size: 24rpx;
 	white-space: nowrap;
-	margin-left: 50rpx;
+	// margin-left: 50rpx;
+	// justify-content: flex-end;
 	border: 1rpx solid;
 }
 

+ 3 - 2
pages/order/overdue.uvue

@@ -548,13 +548,14 @@ import {checkPermi} from '../../utils/storage'
   flex-direction: row;
   align-items: flex-start;
   margin-bottom: 16rpx;
+  justify-content: space-between;
 
   .item-title {
     font-size: 30rpx;
     color: #333333;
     font-weight: bold;
     flex-wrap: wrap;
-    flex: 0 1 80%;
+    flex: 0 1 75%;
     min-width: 0;
   }
 
@@ -590,7 +591,7 @@ import {checkPermi} from '../../utils/storage'
 	border-radius: 20rpx;
 	font-size: 24rpx;
 	white-space: nowrap;
-	margin-left: 20rpx;
+	// margin-left: 20rpx;
 	border: 1rpx solid;
 }
 

+ 134 - 133
pages/order/pendingOrder.uvue

@@ -675,141 +675,142 @@ import {checkPermi, getUserInfo} from '../../utils/storage'
         padding: 30rpx;
     }
 
-.item-header {
-  flex-direction: row;
-  align-items: flex-start;
-  margin-bottom: 16rpx;
-
-  .item-title {
-    font-size: 30rpx;
-    color: #333333;
-    font-weight: bold;
-    flex-wrap: wrap;
-    flex: 0 1 80%;
-    min-width: 0;
-  }
-
-  .info-value {
-    font-size: 28rpx;
-    color: #999999;
-    margin-left: auto;
-    flex: 0 0 auto;
-    white-space: nowrap;
-  }
-}
-.info-row {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  .info-label {
-    font-size: 26rpx;
-    color: #666;
-  }
-
-  .info-value {
-    font-size: 26rpx;
-  }
-}
-.text-gray{
-  font-size: 26rpx;
-  color: #666;
-}
-
-.status-tag {
-	padding: 8rpx 20rpx;
-	border-radius: 20rpx;
-	font-size: 24rpx;
-	white-space: nowrap;
-	margin-left: 20rpx;
-	border: 1rpx solid;
-}
-
-/* 待接单 */
-.status-assigned {
-	background-color: #ebf5ff;
-	color: #409eff;
-	border-color: #d8ebff;
-}
-
-
-/* 待结单 */
-.status-to_finish {
-	background-color: #fff7e6;
-	color: #fa8c16;
-	border-color: #ffd591;
-}
-
-/* 待审批 */
-.status-to_approve {
-	background-color: #fff7e6;
-	color: #fa8c16;
-	border-color: #ffd591;
-}
-
-/* 已挂起 */
-.status-suspended {
-	background-color: #fff2f0;
-	color: #ff4d4f;
-	border-color: #ffccc7;
-}
-
-/* 已完成 */
-.status-completed {
-	background-color: #f0f9eb;
-	color: #5cb87a;
-	border-color: #c2e7b0;
-}
-
-/* 待下发 */
-.status-to_issue {
-	background-color: #f4f4f5;
-	color: #909399;
-	border-color: #e9e9eb;
-}
-
-/* 已归档 */
-.status-archived {
-	background-color: #f0f9eb;
-	color: #5cb87a;
-	border-color: #c2e7b0;
-}
-
-/* 退回 */
-.status-return {
-	background-color: #fff2f0;
-	color: #ff4d4f;
-	border-color: #ffccc7;
-}
-
-/* 退回 */
-.status-accept_return {
-	background-color: #fff2f0;
-	color: #ff4d4f;
-	border-color: #ffccc7;
-}
-
-.btn-primary {
-	z-index: 999;
-	border-radius: 10rpx;
-	font-size: 24rpx;
-	// white-space: nowrap;
-	margin-left: 20rpx;
-	background-color: #165DFF;
-	line-height: 45rpx;
-	color: #ffffff;
-	.btn-text{
-		color: #ffffff;
+	.item-header {
+	  flex-direction: row;
+	  align-items: flex-start;
+	  margin-bottom: 16rpx;
+	  justify-content: space-between;
+
+	  .item-title {
+		font-size: 30rpx;
+		color: #333333;
+		font-weight: bold;
+		flex-wrap: wrap;
+		flex: 0 1 75%;
+		min-width: 0;
+	  }
+
+	  .info-value {
+		font-size: 28rpx;
+		color: #999999;
+		margin-left: auto;
+		flex: 0 0 auto;
+		white-space: nowrap;
+	  }
+	}
+	.info-row {
+	  flex-direction: row;
+	  justify-content: space-between;
+	  align-items: center;
+
+	  .info-label {
+		font-size: 26rpx;
+		color: #666;
+	  }
+
+	  .info-value {
+		font-size: 26rpx;
+	  }
+	}
+	.text-gray{
+	  font-size: 26rpx;
+	  color: #666;
+	}
+
+	.status-tag {
+		padding: 8rpx 20rpx;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+		white-space: nowrap;
+		// margin-left: 20rpx;
+		border: 1rpx solid;
+	}
+
+	/* 待接单 */
+	.status-assigned {
+		background-color: #ebf5ff;
+		color: #409eff;
+		border-color: #d8ebff;
+	}
+
+
+	/* 待结单 */
+	.status-to_finish {
+		background-color: #fff7e6;
+		color: #fa8c16;
+		border-color: #ffd591;
+	}
+
+	/* 待审批 */
+	.status-to_approve {
+		background-color: #fff7e6;
+		color: #fa8c16;
+		border-color: #ffd591;
+	}
+
+	/* 已挂起 */
+	.status-suspended {
+		background-color: #fff2f0;
+		color: #ff4d4f;
+		border-color: #ffccc7;
+	}
+
+	/* 已完成 */
+	.status-completed {
+		background-color: #f0f9eb;
+		color: #5cb87a;
+		border-color: #c2e7b0;
+	}
+
+	/* 待下发 */
+	.status-to_issue {
+		background-color: #f4f4f5;
+		color: #909399;
+		border-color: #e9e9eb;
+	}
+
+	/* 已归档 */
+	.status-archived {
+		background-color: #f0f9eb;
+		color: #5cb87a;
+		border-color: #c2e7b0;
+	}
+
+	/* 退回 */
+	.status-return {
+		background-color: #fff2f0;
+		color: #ff4d4f;
+		border-color: #ffccc7;
+	}
+
+	/* 退回 */
+	.status-accept_return {
+		background-color: #fff2f0;
+		color: #ff4d4f;
+		border-color: #ffccc7;
+	}
+
+	.btn-primary {
+		z-index: 999;
+		border-radius: 10rpx;
 		font-size: 24rpx;
-		padding: 5px 15px;
+		// white-space: nowrap;
+		margin-left: 20rpx;
+		background-color: #165DFF;
+		line-height: 45rpx;
+		color: #ffffff;
+		.btn-text{
+			color: #ffffff;
+			font-size: 24rpx;
+			padding: 5px 15px;
+		}
+	}
+	.btn-group {
+	  flex-direction: row;
+	  align-items: center;
+	  justify-content: flex-end;
+	  margin-top: 20rpx;
 	}
-}
-.btn-group {
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 20rpx;
-}
 // /* 超时 */
 // .status-overdue {
 // 	background-color: #fff2f0;

+ 1 - 1
pages/score/index.uvue

@@ -1049,7 +1049,7 @@
 
   .status-text {
     font-size: 24rpx;
-    padding: 4rpx 12rpx;
+    padding: 4rpx 10rpx;
     border-radius: 24rpx;
     background-color: #f2f3f5;
     color: #666;

+ 1 - 1
pages/worktime/index.uvue

@@ -895,7 +895,7 @@ onBeforeUnmount(() => {
   flex: 1;
 
   .status-txt {
-    padding: 8px 12px;
+    padding: 8px 10px;
     text-align: center;
     margin-right: 12rpx;
     border-radius: 36rpx;