consumer模块完成度95%，优化安卓端界面和小程序测试8

pages/main/cart.uvue

@@ -131,11 +131,13 @@
 						class="recommend-item"
 						@click="navigateToProduct(product)"
 					>
-						<image 
-							class="recommend-image" 
-							:src="product.image" 
-							mode="aspectFill"
-						/>
+						<view class="recommend-image-wrapper">
+							<image 
+								class="recommend-image" 
+								:src="product.image" 
+								mode="aspectFill"
+							/>
+						</view>
 						<text class="recommend-name" :lines="2">{{ product.name }}</text>
 						<view class="recommend-bottom">
 							<text class="recommend-price">¥{{ product.price }}</text>
@@ -1400,16 +1402,24 @@ const goToCheckout = () => {
 	margin-bottom: 12px;
 }
 
-.recommend-image {
+.recommend-image-wrapper {
 	width: 100%;
-	height: 170px; /* 显式高度 */
-	/* aspect-ratio: 1; REMOVED */
-	/* object-fit: cover; REMOVED */
+	padding-bottom: 100%;
+	position: relative;
 	border-radius: 8px;
-	margin-bottom: 8px;
+	overflow: hidden;
 	background: #f5f5f5;
 }
 
+.recommend-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 8px;
+}
+
 	.recommend-name {
 		font-size: 13px;
 		color: #333;
@@ -1455,6 +1465,37 @@ const goToCheckout = () => {
 	}
 
 	/* 响应式布局优化 */
+@media screen and (max-width: 414px) {
+	.recommend-item {
+		width: 48%;
+	}
+}
+
+@media screen and (min-width: 415px) and (max-width: 768px) {
+	.recommend-item {
+		width: 48%;
+	}
+}
+
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+	.recommend-item {
+		width: 32%;
+	}
+}
+
+@media screen and (min-width: 1025px) and (max-width: 1399px) {
+	.recommend-item {
+		width: 23%;
+	}
+}
+
+@media screen and (min-width: 1400px) {
+	.recommend-item {
+		width: 18%;
+	}
+}
+
+/* 保留原有的媒体查询用于其他样式 */
 @media screen and (min-width: 768px) {
 	.cart-list, 
 	.recommend-section {
@@ -1467,10 +1508,6 @@ const goToCheckout = () => {
 		/* gap: 16px; REMOVED */
 		/* Flex 布局参数调整在下方 update */
 	}
-	.recommend-item {
-		width: 23%;
-		margin-bottom: 16px;
-	}
 }
 
 @media screen and (min-width: 1024px) {
@@ -1597,13 +1634,9 @@ const goToCheckout = () => {
 		/* grid-template-columns: repeat(5, 1fr); REMOVED */
 		/* gap: 20px; REMOVED */
 	}
-	.recommend-item {
-		width: 18%; /* 5列 */
-		margin-bottom: 20px;
-	}
     
-    .recommend-image {
-        height: 200px; /* 强制高度 */
+    .recommend-image-wrapper {
+        padding-bottom: 100%;
     }
 	
 	/* 底部结算栏优化 */
@@ -1638,9 +1671,6 @@ const goToCheckout = () => {
 	.recommend-list {
 		/* grid-template-columns: repeat(6, 1fr); REMOVED */
 	}
-	.recommend-item {
-		width: 15%; /* 6 columns approx */
-	}
 	
 	.footer-content {
 		width: 1400px;