调适配

App.vue

@@ -228,21 +228,21 @@
 	  }
 	  }
 	} */
 	} */
 	
 	
-	/* 平板设备 (768px-1023px) */
+	/* 平板设备 (768px-1023px) */ 
 	/* @media (min-width: 768px) and (max-width: 1023px) {
 	/* @media (min-width: 768px) and (max-width: 1023px) {
 	  .container {
 	  .container {
 	    max-width: 100%;
 	    max-width: 100%;
 	  } */
 	  } */
 	  
 	  
-	  /* iPad竖屏 */
-	  /* @media (orientation: portrait) {
+	  /* iPad竖屏*/ 
+	 /* @media (orientation: portrait) {
 	    .container {
 	    .container {
-	      max-width: 1000px;
+	      max-width: 650px;
 	    }
 	    }
 	  } */
 	  } */
 	  
 	  
 	  /* iPad横屏 */
 	  /* iPad横屏 */
-	  /* @media (orientation: landscape) {
+	 /* @media (orientation: landscape) {
 	    .container {
 	    .container {
 	      max-width: 900px;
 	      max-width: 900px;
 	    }
 	    }
@@ -252,14 +252,14 @@
 	/* 小桌面设备 (1024px-1279px) */
 	/* 小桌面设备 (1024px-1279px) */
 	@media (min-width: 1024px) and (max-width: 1279px) {
 	@media (min-width: 1024px) and (max-width: 1279px) {
 	  .container {
 	  .container {
-	    max-width: 800px;
+	    max-width: 980px;
 	  }
 	  }
 	}
 	}
 	
 	
 	/* 大桌面设备 (1280px以上) */
 	/* 大桌面设备 (1280px以上) */
 	@media (min-width: 1280px) {
 	@media (min-width: 1280px) {
 	  .container {
 	  .container {
-	    max-width: 800px;
+	    max-width: 1200px;
 	  }
 	  }
 	}
 	}
 	
 	

pages/index/index.vue

@@ -746,38 +746,75 @@
 			    }
 			    }
 			  }
 			  }
 			}
 			}
-			
-			/* 平板设备 (768px 以上) */
 			@media (min-width: 768px) {
 			@media (min-width: 768px) {
 			  .productList {
 			  .productList {
 			    .productListBox {
 			    .productListBox {
-			      max-width: 1200rpx; /* 限制最大宽度 */
-			      margin: 0 auto; /* 居中显示 */
 			      justify-content: flex-start;
 			      justify-content: flex-start;
+			      gap: 20rpx;
+			      /* 添加以下两行确保换行和均匀分布 */
+			      display: flex;
+			      flex-wrap: wrap;
+			      
 			      .productListItem {
 			      .productListItem {
-			        width: 30%; /* 三列布局 */
+			        /* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */
+			        /* 计算方式：100%/3 - (gap*2)/3 */
+			        width: calc(33.333% - 14rpx);
+			        /* 或者使用 flex-grow 和 flex-basis 的替代方案 */
+			        /* flex: 1 0 calc(33.333% - 14rpx); */
+			        
 			        /* 确保图片和文字比例协调 */
 			        /* 确保图片和文字比例协调 */
 			        .top {
 			        .top {
 			          &::before {
 			          &::before {
 			            // padding-top: 120%; /* 略微调整宽高比 */
 			            // padding-top: 120%; /* 略微调整宽高比 */
 			          }
 			          }
 			        }
 			        }
-					.bottom{
-						.two{
-							.price{
-								font-size: 23rpx;
-								color: rgba(32, 39, 155, 1);
-							}
-							.num{
-								font-size: 20rpx;
-								color: rgba(166, 166, 166, 1);
-							}
-						}
-					}
+			        .bottom {
+			          .two {
+			            .price {
+			              font-size: 23rpx;
+			              color: rgba(32, 39, 155, 1);
+			            }
+			            .num {
+			              font-size: 20rpx;
+			              color: rgba(166, 166, 166, 1);
+			            }
+			          }
+			        }
 			      }
 			      }
 			    }
 			    }
 			  }
 			  }
 			}
 			}
+			/* 平板设备 (768px 以上) */
+			// @media (min-width: 768px) {
+			//   .productList {
+			//     .productListBox {
+			      
+			//       justify-content: flex-start;
+			// 	  gap: 20rpx;
+			//       .productListItem {
+			//          width: calc(30% - 20rpx); /* 两列布局，考虑间隙 */
+			//         /* 确保图片和文字比例协调 */
+			//         .top {
+			//           &::before {
+			//             // padding-top: 120%; /* 略微调整宽高比 */
+			//           }
+			//         }
+			// 		.bottom{
+			// 			.two{
+			// 				.price{
+			// 					font-size: 23rpx;
+			// 					color: rgba(32, 39, 155, 1);
+			// 				}
+			// 				.num{
+			// 					font-size: 20rpx;
+			// 					color: rgba(166, 166, 166, 1);
+			// 				}
+			// 			}
+			// 		}
+			//       }
+			//     }
+			//   }
+			// }
 			
 			
 			/* 桌面设备 (1024px 以上) */
 			/* 桌面设备 (1024px 以上) */
 			// @media (min-width: 1024px) {
 			// @media (min-width: 1024px) {

pages/orderStatus/orderStatus.vue

@@ -287,29 +287,37 @@
 					@media (min-width: 768px) {
 					@media (min-width: 768px) {
 					  .productList {
 					  .productList {
 					    .productListBox {
 					    .productListBox {
-					      max-width: 1200rpx; /* 限制最大宽度 */
-					      margin: 0 auto; /* 居中显示 */
 					      justify-content: flex-start;
 					      justify-content: flex-start;
+					      gap: 20rpx;
+					      /* 添加以下两行确保换行和均匀分布 */
+					      display: flex;
+					      flex-wrap: wrap;
+					      
 					      .productListItem {
 					      .productListItem {
-					        width: 30%; /* 三列布局 */
+					        /* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */
+					        /* 计算方式：100%/3 - (gap*2)/3 */
+					        width: calc(33.333% - 14rpx);
+					        /* 或者使用 flex-grow 和 flex-basis 的替代方案 */
+					        /* flex: 1 0 calc(33.333% - 14rpx); */
+					        
 					        /* 确保图片和文字比例协调 */
 					        /* 确保图片和文字比例协调 */
 					        .top {
 					        .top {
 					          &::before {
 					          &::before {
 					            // padding-top: 120%; /* 略微调整宽高比 */
 					            // padding-top: 120%; /* 略微调整宽高比 */
 					          }
 					          }
 					        }
 					        }
-							.bottom{
-								.two{
-									.price{
-										font-size: 23rpx;
-										color: rgba(32, 39, 155, 1);
-									}
-									.num{
-										font-size: 20rpx;
-										color: rgba(166, 166, 166, 1);
-									}
-								}
-							}
+					        .bottom {
+					          .two {
+					            .price {
+					              font-size: 23rpx;
+					              color: rgba(32, 39, 155, 1);
+					            }
+					            .num {
+					              font-size: 20rpx;
+					              color: rgba(166, 166, 166, 1);
+					            }
+					          }
+					        }
 					      }
 					      }
 					    }
 					    }
 					  }
 					  }