shish 1 год назад
Родитель
Сommit
e1e379c0f8
2 измененных файлов с 49 добавлено и 15 удалено
  1. 4 4
      ghsApp/src/admin/billing/index2.vue
  2. 45 11
      ghsApp/src/components/module/app-footer-cart.vue

+ 4 - 4
ghsApp/src/admin/billing/index2.vue

@@ -260,7 +260,7 @@ export default {
 	}
 	.tab-view {
 		position: relative;
-		height: calc(100vh - 140upx);
+		height: calc(100vh - 140upx - 120upx); /* 减去购物车高度 */
 		width: 170upx;
 		flex-shrink: 0;
 		background-color: #f0f2f6;
@@ -289,7 +289,7 @@ export default {
 				font-size: 20upx;
 			}
       &:last-child{
-        margin-bottom: 110upx;
+        margin-bottom: 140upx; /* 增加底部边距,确保不被购物车遮挡 */
       }
 		}
 		.active {
@@ -307,7 +307,7 @@ export default {
 		}
 	}
 	.right-box {
-		height: calc(100vh - 140upx);
+		height: calc(100vh - 140upx - 120upx); /* 减去购物车高度 */
 		flex: 1;
 		box-sizing: border-box;
 	}
@@ -315,7 +315,7 @@ export default {
 		padding: 40upx 16upx;
 		//padding: 0 16upx;
     &:last-child{
-      margin-bottom: 70upx;
+      margin-bottom: 140upx; /* 增加底部边距,确保不被购物车遮挡 */
     }
 	}
 	.item_list_title {

+ 45 - 11
ghsApp/src/components/module/app-footer-cart.vue

@@ -45,24 +45,53 @@ export default {
 </script>
 <style lang="scss" scoped>
 .cart-ft_bx {
-	width: 702upx;
-	height: 88upx;
-	background-color: #444444;
+	/* 更稳定的定位方式 */
 	position: fixed;
-	bottom: 15upx;
-	border-radius: 50upx;
-	left: 50%;
-	transform: translate(-50%, 0);
-	z-index: 9999;
-	overflow: hidden;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	
+	/* 使用flex居中替代transform */
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	
+	/* 安全区域适配 */
+	padding-bottom: calc(15upx + env(safe-area-inset-bottom));
+	padding-top: 15upx;
+	
+	/* 背景保护 */
+	background: transparent;
+	pointer-events: none; /* 让背景区域不响应点击 */
+	
+	/* 硬件加速 */
+	transform: translateZ(0);
+	-webkit-transform: translateZ(0);
+	
+	/* 确保层级 */
+	z-index: 999;
 	& .cart-ct_bx {
+		/* 实际的购物车内容 */
+		width: 702upx;
+		max-width: calc(100vw - 40upx); /* 响应式宽度 */
+		height: 88upx;
+		background-color: #444444;
+		border-radius: 50upx;
+		pointer-events: auto; /* 恢复点击响应 */
+		overflow: hidden;
+		
+		/* 防止变形 */
+		flex-shrink: 0;
+		min-height: 88upx;
+		
+		/* 布局设置 */
 		display: flex;
 		align-items: center;
-		height: 100%;
 		& .cart-lf_bx {
 			flex: 1;
 			display: flex;
 			align-items: center;
+			min-width: 0; /* 防止flex子元素溢出 */
 			& .cart-dot_bx {
 				position: relative;
 				width: 72upx;
@@ -97,14 +126,19 @@ export default {
 				color: #ffffff;
 				font-size: 35upx;
 				padding-left: 24upx;
-				width:415upx;
+				width: auto; /* 移除固定宽度 */
+				max-width: calc(100% - 100upx);
 				display: flex;
 				justify-content: center;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 		}
 		& .cart-rg_bx {
 			height: 100%;
 			width: 200upx;
+			flex-shrink: 0; /* 防止按钮被压缩 */
 			text-align: center;
 			font-size: 28upx;
 			color: #ffffff;