fix: ui

pages/order-list/order-list.vue

@@ -296,8 +296,11 @@
 	}
 
 	.scroll-container {
-		flex: 1;
-		height: 100%;
+		flex: 1 1 0;
+		height: auto;
+		min-height: 0;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.empty-state {
@@ -471,6 +474,8 @@
 	.container {
 		top: var(--window-top);
 		background: #f8f9fb;
+		padding: 0;
+		gap: 0;
 		padding-top: 0;
 	}
 
@@ -514,8 +519,11 @@
 	}
 
 	.scroll-container {
-		height: 0;
+		flex: 1 1 0;
+		height: auto;
 		min-height: 0;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.order-list {
@@ -629,28 +637,30 @@
 
 	.order-card .card-footer {
 		display: flex;
-		align-items: center;
+		align-items: stretch;
 		justify-content: flex-start;
 		gap: 16rpx;
 		margin-top: 0;
 		padding: 0 0 28rpx;
 		border-top: 0;
-		flex-direction: row;
+		flex-direction: column;
 	}
 
 	.order-card .card-body .card-footer {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
+		flex-direction: column;
+		align-items: stretch;
 		justify-content: flex-start;
+		gap: 16rpx;
 		margin-top: 0;
 		padding: 0 0 28rpx;
 		border-top: 0;
 	}
 
 	.created-time {
+		width: 100%;
 		min-width: 0;
-		flex: 1;
+		flex: none;
 		color: #777b84;
 		font-size: 24rpx;
 		line-height: 1.3;
@@ -665,6 +675,7 @@
 		align-items: center;
 		gap: 16rpx;
 		margin-left: auto;
+		align-self: flex-end;
 		flex-shrink: 0;
 	}