fix: 重构购物车移动端商品布局
- 复选框左上角绝对定位 - 删除按钮右上角绝对定位 - 商品图片+信息单独一行 - 数量选择器单独一行 - 小计金额单独一行显示 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user