fix: 修复购物车移动端商品列表和订单摘要布局

- 商品项使用稳定的flex布局,宽度约束明确
- 第一行:复选框(24px) + 商品信息 + 删除按钮(40px)
- 第二行:单价 + 数量选择器 + 小计,均匀分布
- 订单摘要宽度设为100%,防止溢出
- 各元素添加min-width防止压缩变形
- 商品图片缩小为50px节省空间

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-01 09:14:41 +08:00
parent 5a7c1a0964
commit d3f765c6e4
+46 -24
View File
@@ -959,25 +959,34 @@ onMounted(() => {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
gap: 12px !important; gap: 12px !important;
width: 100% !important;
} }
/* 订单摘要放底部 */ /* 订单摘要放底部 */
.cart-left { .cart-left {
order: 1 !important; order: 1 !important;
width: 100% !important;
} }
.cart-summary-panel { .cart-summary-panel {
order: 2 !important; order: 2 !important;
position: static !important; position: static !important;
width: 100% !important;
box-sizing: border-box !important;
} }
.cart-header { .cart-header {
display: none !important; display: none !important;
} }
.cart-main {
width: 100% !important;
}
.cart-list { .cart-list {
max-height: none !important; max-height: none !important;
overflow: visible !important; overflow: visible !important;
width: 100% !important;
} }
/* 商品项 - 两行布局 */ /* 商品项 - 两行布局 */
@@ -985,41 +994,42 @@ onMounted(() => {
display: flex !important; display: flex !important;
flex-wrap: wrap !important; flex-wrap: wrap !important;
padding: 12px !important; padding: 12px !important;
gap: 8px !important; gap: 6px !important;
align-items: flex-start !important; align-items: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
} }
/* 隐藏桌面端元素 */ /* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */
.cart-item > .item-price, .cart-item > .item-price,
.cart-item > .item-quantity, .cart-item > .item-quantity,
.cart-item > .item-subtotal { .cart-item > .item-subtotal {
display: none !important; display: none !important;
} }
/* 复选框 */ /* 第一行:复选框 + 商品信息 + 删除按钮 */
.cart-item > .item-check { .cart-item > .item-check {
flex: 0 0 20px !important; flex: 0 0 24px !important;
width: 20px !important; max-width: 24px !important;
margin-right: 0 !important; margin-right: 0 !important;
align-self: flex-start !important;
} }
/* 商品信息 */
.cart-item > .item-product { .cart-item > .item-product {
flex: 1 1 calc(100% - 80px) !important; flex: 1 1 0 !important;
min-width: 0 !important; min-width: 0 !important;
max-width: calc(100% - 70px) !important;
display: flex !important; display: flex !important;
gap: 10px !important; gap: 8px !important;
align-items: flex-start !important; align-items: flex-start !important;
padding-right: 40px !important;
} }
/* 删除按钮 */
.cart-item > .item-action { .cart-item > .item-action {
position: absolute !important; flex: 0 0 40px !important;
right: 12px !important; max-width: 40px !important;
top: 12px !important; display: flex !important;
flex: 0 0 auto !important; justify-content: flex-end !important;
width: auto !important; align-self: flex-start !important;
} }
/* 移动端底部行 - 显示 */ /* 移动端底部行 - 显示 */
@@ -1027,25 +1037,29 @@ onMounted(() => {
display: flex !important; display: flex !important;
flex: 0 0 100% !important; flex: 0 0 100% !important;
width: 100% !important; width: 100% !important;
max-width: 100% !important;
align-items: center !important; align-items: center !important;
justify-content: space-between !important; justify-content: space-between !important;
padding-left: 28px !important; padding-left: 24px !important;
gap: 8px !important; gap: 6px !important;
margin-top: 4px !important; margin-top: 6px !important;
box-sizing: border-box !important;
} }
.item-mobile-bottom .mobile-price { .item-mobile-bottom .mobile-price {
font-size: 13px !important; font-size: 13px !important;
color: rgba(255, 255, 255, 0.8) !important; color: rgba(255, 255, 255, 0.8) !important;
white-space: nowrap !important; white-space: nowrap !important;
min-width: 60px !important;
} }
.item-mobile-bottom :deep(.el-input-number) { .item-mobile-bottom :deep(.el-input-number) {
width: 90px !important; width: 85px !important;
flex-shrink: 0 !important;
} }
.item-mobile-bottom :deep(.el-input-number .el-input__wrapper) { .item-mobile-bottom :deep(.el-input-number .el-input__wrapper) {
padding: 0 2px !important; padding: 0 4px !important;
} }
.item-mobile-bottom :deep(.el-input-number .el-input__inner) { .item-mobile-bottom :deep(.el-input-number .el-input__inner) {
@@ -1057,12 +1071,14 @@ onMounted(() => {
font-weight: 600 !important; font-weight: 600 !important;
color: #f56c6c !important; color: #f56c6c !important;
white-space: nowrap !important; white-space: nowrap !important;
min-width: 70px !important;
text-align: right !important;
} }
/* 商品图片 */ /* 商品图片 */
.item-product .item-image { .item-product .item-image {
width: 55px !important; width: 50px !important;
height: 55px !important; height: 50px !important;
flex-shrink: 0 !important; flex-shrink: 0 !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
@@ -1075,8 +1091,8 @@ onMounted(() => {
.item-name { .item-name {
font-size: 13px !important; font-size: 13px !important;
line-height: 1.35 !important; line-height: 1.4 !important;
margin-bottom: 2px !important; margin-bottom: 0 !important;
word-break: break-all !important; word-break: break-all !important;
display: -webkit-box !important; display: -webkit-box !important;
-webkit-line-clamp: 2 !important; -webkit-line-clamp: 2 !important;
@@ -1088,6 +1104,12 @@ onMounted(() => {
display: none !important; display: none !important;
} }
/* 删除按钮样式 */
.item-action .el-button {
font-size: 12px !important;
padding: 4px 0 !important;
}
/* 地址 */ /* 地址 */
.checkout-section { .checkout-section {
padding: 12px !important; padding: 12px !important;