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;
|
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;
|
||||||
|
|||||||
Reference in New Issue
Block a user