fix: 重构购物车移动端商品布局
- 复选框左上角绝对定位 - 删除按钮右上角绝对定位 - 商品图片+信息单独一行 - 数量选择器单独一行 - 小计金额单独一行显示 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -944,40 +944,19 @@ onMounted(() => {
|
|||||||
.cart-item {
|
.cart-item {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
padding-left: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 复选框 - 左上角 */
|
||||||
.cart-item > .el-checkbox {
|
.cart-item > .el-checkbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 14px;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
width: 24px;
|
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 {
|
.cart-item > .item-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
@@ -985,6 +964,32 @@ onMounted(() => {
|
|||||||
width: auto;
|
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 {
|
.item-product .item-image {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@@ -1002,6 +1007,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.item-subtotal .subtotal-price {
|
.item-subtotal .subtotal-price {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
color: #f56c6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-methods {
|
.payment-methods {
|
||||||
|
|||||||
Reference in New Issue
Block a user