diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 31c8744..5dc0035 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -959,25 +959,34 @@ onMounted(() => { display: flex !important; flex-direction: column !important; gap: 12px !important; + width: 100% !important; } /* 订单摘要放底部 */ .cart-left { order: 1 !important; + width: 100% !important; } .cart-summary-panel { order: 2 !important; position: static !important; + width: 100% !important; + box-sizing: border-box !important; } .cart-header { display: none !important; } + .cart-main { + width: 100% !important; + } + .cart-list { max-height: none !important; overflow: visible !important; + width: 100% !important; } /* 商品项 - 两行布局 */ @@ -985,41 +994,42 @@ onMounted(() => { display: flex !important; flex-wrap: wrap !important; padding: 12px !important; - gap: 8px !important; + gap: 6px !important; align-items: flex-start !important; + width: 100% !important; + box-sizing: border-box !important; } - /* 隐藏桌面端元素 */ + /* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */ .cart-item > .item-price, .cart-item > .item-quantity, .cart-item > .item-subtotal { display: none !important; } - /* 复选框 */ + /* 第一行:复选框 + 商品信息 + 删除按钮 */ .cart-item > .item-check { - flex: 0 0 20px !important; - width: 20px !important; + flex: 0 0 24px !important; + max-width: 24px !important; margin-right: 0 !important; + align-self: flex-start !important; } - /* 商品信息 */ .cart-item > .item-product { - flex: 1 1 calc(100% - 80px) !important; + flex: 1 1 0 !important; min-width: 0 !important; + max-width: calc(100% - 70px) !important; display: flex !important; - gap: 10px !important; + gap: 8px !important; align-items: flex-start !important; - padding-right: 40px !important; } - /* 删除按钮 */ .cart-item > .item-action { - position: absolute !important; - right: 12px !important; - top: 12px !important; - flex: 0 0 auto !important; - width: auto !important; + flex: 0 0 40px !important; + max-width: 40px !important; + display: flex !important; + justify-content: flex-end !important; + align-self: flex-start !important; } /* 移动端底部行 - 显示 */ @@ -1027,25 +1037,29 @@ onMounted(() => { display: flex !important; flex: 0 0 100% !important; width: 100% !important; + max-width: 100% !important; align-items: center !important; justify-content: space-between !important; - padding-left: 28px !important; - gap: 8px !important; - margin-top: 4px !important; + padding-left: 24px !important; + gap: 6px !important; + margin-top: 6px !important; + box-sizing: border-box !important; } .item-mobile-bottom .mobile-price { font-size: 13px !important; color: rgba(255, 255, 255, 0.8) !important; white-space: nowrap !important; + min-width: 60px !important; } .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) { - padding: 0 2px !important; + padding: 0 4px !important; } .item-mobile-bottom :deep(.el-input-number .el-input__inner) { @@ -1057,12 +1071,14 @@ onMounted(() => { font-weight: 600 !important; color: #f56c6c !important; white-space: nowrap !important; + min-width: 70px !important; + text-align: right !important; } /* 商品图片 */ .item-product .item-image { - width: 55px !important; - height: 55px !important; + width: 50px !important; + height: 50px !important; flex-shrink: 0 !important; border-radius: 6px !important; } @@ -1075,8 +1091,8 @@ onMounted(() => { .item-name { font-size: 13px !important; - line-height: 1.35 !important; - margin-bottom: 2px !important; + line-height: 1.4 !important; + margin-bottom: 0 !important; word-break: break-all !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; @@ -1088,6 +1104,12 @@ onMounted(() => { display: none !important; } + /* 删除按钮样式 */ + .item-action .el-button { + font-size: 12px !important; + padding: 4px 0 !important; + } + /* 地址 */ .checkout-section { padding: 12px !important;