fix: 强制修复购物车移动端布局
- 使用!important确保样式优先级 - flex-direction: column让元素垂直排列 - 商品信息、数量、小计各占一行 - 复选框左上角、删除按钮右上角 - 隐藏商品标签简化显示 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -933,130 +933,176 @@ onMounted(() => {
|
||||
@media (max-width: 768px) {
|
||||
.cart-page {
|
||||
padding-bottom: 20px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 商品项整体容器 */
|
||||
.cart-list {
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
/* 商品项容器 */
|
||||
.cart-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
padding: 12px;
|
||||
padding-left: 44px;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex-wrap: nowrap !important;
|
||||
padding: 10px !important;
|
||||
position: relative;
|
||||
gap: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 复选框 - 左侧固定 */
|
||||
/* 复选框 - 左上角 */
|
||||
.cart-item > .el-checkbox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
/* 删除按钮 - 右上角固定 */
|
||||
/* 删除按钮 - 右上角 */
|
||||
.cart-item > .item-action {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: auto;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: auto !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* 商品图片+信息 - 占满一行 */
|
||||
/* 商品信息行 */
|
||||
.cart-item > .item-product {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-right: 50px;
|
||||
margin-bottom: 12px;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
width: 100% !important;
|
||||
padding-left: 28px !important;
|
||||
padding-right: 40px !important;
|
||||
margin-bottom: 8px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 隐藏单价 */
|
||||
.cart-item > .item-price {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 数量行 - 占满一行 */
|
||||
/* 数量行 */
|
||||
.cart-item > .item-quantity {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 100% !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding-left: 28px !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* 小计行 - 占满一行 */
|
||||
/* 小计行 */
|
||||
.cart-item > .item-subtotal {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
padding-left: 28px !important;
|
||||
}
|
||||
|
||||
/* 商品图片 */
|
||||
.item-product .item-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 4px !important;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 13px !important;
|
||||
-webkit-line-clamp: 1 !important;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 数量输入框 */
|
||||
.item-quantity :deep(.el-input-number) {
|
||||
width: 100px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.item-quantity .stock-tip {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 小计金额样式 */
|
||||
.item-subtotal .subtotal-price {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 支付方式2列 */
|
||||
/* 支付方式 */
|
||||
.payment-methods {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
|
||||
.cart-left {
|
||||
gap: 12px;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.checkout-section {
|
||||
padding: 12px;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.cart-summary-panel {
|
||||
padding: 12px;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.summary-total .total-amount {
|
||||
font-size: 20px;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
padding: 12px;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.address-name {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
padding: 12px 8px;
|
||||
padding: 10px 6px !important;
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
.payment-name {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user