fix: 修复购物车移动端商品列表和订单摘要布局
- 商品项使用稳定的flex布局，宽度约束明确 - 第一行：复选框(24px) + 商品信息 + 删除按钮(40px) - 第二行：单价 + 数量选择器 + 小计，均匀分布 - 订单摘要宽度设为100%，防止溢出 - 各元素添加min-width防止压缩变形 - 商品图片缩小为50px节省空间 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -959,25 +959,34 @@ onMounted(() => {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 12px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 订单摘要放底部 */
|
||||
.cart-left {
|
||||
order: 1 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.cart-summary-panel {
|
||||
order: 2 !important;
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cart-main {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 商品项 - 两行布局 */
|
||||
@@ -985,41 +994,42 @@ onMounted(() => {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
padding: 12px !important;
|
||||
gap: 8px !important;
|
||||
gap: 6px !important;
|
||||
align-items: flex-start !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 隐藏桌面端元素 */
|
||||
/* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */
|
||||
.cart-item > .item-price,
|
||||
.cart-item > .item-quantity,
|
||||
.cart-item > .item-subtotal {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 复选框 */
|
||||
/* 第一行：复选框 + 商品信息 + 删除按钮 */
|
||||
.cart-item > .item-check {
|
||||
flex: 0 0 20px !important;
|
||||
width: 20px !important;
|
||||
flex: 0 0 24px !important;
|
||||
max-width: 24px !important;
|
||||
margin-right: 0 !important;
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.cart-item > .item-product {
|
||||
flex: 1 1 calc(100% - 80px) !important;
|
||||
flex: 1 1 0 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: calc(100% - 70px) !important;
|
||||
display: flex !important;
|
||||
gap: 10px !important;
|
||||
gap: 8px !important;
|
||||
align-items: flex-start !important;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
/* 删除按钮 */
|
||||
.cart-item > .item-action {
|
||||
position: absolute !important;
|
||||
right: 12px !important;
|
||||
top: 12px !important;
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
flex: 0 0 40px !important;
|
||||
max-width: 40px !important;
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
/* 移动端底部行 - 显示 */
|
||||
@@ -1027,25 +1037,29 @@ onMounted(() => {
|
||||
display: flex !important;
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding-left: 28px !important;
|
||||
gap: 8px !important;
|
||||
margin-top: 4px !important;
|
||||
padding-left: 24px !important;
|
||||
gap: 6px !important;
|
||||
margin-top: 6px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom .mobile-price {
|
||||
font-size: 13px !important;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
white-space: nowrap !important;
|
||||
min-width: 60px !important;
|
||||
}
|
||||
|
||||
.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) {
|
||||
padding: 0 2px !important;
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number .el-input__inner) {
|
||||
@@ -1057,12 +1071,14 @@ onMounted(() => {
|
||||
font-weight: 600 !important;
|
||||
color: #f56c6c !important;
|
||||
white-space: nowrap !important;
|
||||
min-width: 70px !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* 商品图片 */
|
||||
.item-product .item-image {
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
flex-shrink: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
@@ -1075,8 +1091,8 @@ onMounted(() => {
|
||||
|
||||
.item-name {
|
||||
font-size: 13px !important;
|
||||
line-height: 1.35 !important;
|
||||
margin-bottom: 2px !important;
|
||||
line-height: 1.4 !important;
|
||||
margin-bottom: 0 !important;
|
||||
word-break: break-all !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
@@ -1088,6 +1104,12 @@ onMounted(() => {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 删除按钮样式 */
|
||||
.item-action .el-button {
|
||||
font-size: 12px !important;
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
.checkout-section {
|
||||
padding: 12px !important;
|
||||
|
||||
Reference in New Issue
Block a user