fix: 重构购物车移动端商品布局

- 复选框左上角绝对定位
- 删除按钮右上角绝对定位
- 商品图片+信息单独一行
- 数量选择器单独一行
- 小计金额单独一行显示

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 23:38:19 +08:00
parent 3d8ec47a3d
commit 2dcf3019ef
+31 -25
View File
@@ -944,40 +944,19 @@ onMounted(() => {
.cart-item {
display: block;
padding: 12px;
padding-left: 40px;
position: relative;
}
/* 复选框 - 左上角 */
.cart-item > .el-checkbox {
position: absolute;
top: 12px;
top: 14px;
left: 12px;
width: 24px;
}
.cart-item > .item-product {
display: flex;
gap: 10px;
padding-left: 32px;
padding-right: 60px;
}
.cart-item > .item-price {
display: none;
}
.cart-item > .item-quantity {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-left: 32px;
}
.cart-item > .item-subtotal {
text-align: right;
margin-top: 8px;
}
/* 删除按钮 - 右上角 */
.cart-item > .item-action {
position: absolute;
top: 12px;
@@ -985,6 +964,32 @@ onMounted(() => {
width: auto;
}
/* 商品信息 - 第一行 */
.cart-item > .item-product {
display: flex;
gap: 10px;
padding-right: 50px;
margin-bottom: 10px;
}
/* 隐藏单价列 */
.cart-item > .item-price {
display: none;
}
/* 数量 - 单独一行 */
.cart-item > .item-quantity {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
/* 小计金额 - 单独一行 */
.cart-item > .item-subtotal {
text-align: left;
}
.item-product .item-image {
width: 50px;
height: 50px;
@@ -1002,6 +1007,7 @@ onMounted(() => {
.item-subtotal .subtotal-price {
font-size: 16px;
color: #f56c6c;
}
.payment-methods {