diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 13ae463..fb429a6 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -942,36 +942,43 @@ onMounted(() => { } .cart-list { - max-height: none; - overflow-y: visible; + max-height: none !important; + overflow: visible !important; } - /* 商品项容器 - 两列布局 */ + /* 商品项 - 使用grid两行布局 */ .cart-item { - display: flex !important; - flex-direction: row !important; - flex-wrap: nowrap !important; - align-items: flex-start !important; + display: grid !important; + grid-template-columns: 50px 1fr auto !important; + grid-template-rows: auto auto !important; + gap: 8px !important; padding: 12px !important; - position: relative !important; - gap: 10px !important; + align-items: center !important; } - /* 复选框 - 左侧 */ + /* 复选框 - 第一行第一列 */ .cart-item > .el-checkbox { - width: 32px !important; - flex-shrink: 0 !important; - align-self: center !important; - margin-right: 0 !important; + grid-column: 1 !important; + grid-row: 1 / 3 !important; + width: 50px !important; + justify-self: center !important; } - /* 商品图片+信息 - 中间主体 */ + /* 商品图片+信息 - 第一行第二列 */ .cart-item > .item-product { + grid-column: 2 !important; + grid-row: 1 !important; display: flex !important; flex-direction: row !important; - flex: 1 !important; - min-width: 0 !important; - cursor: pointer; + gap: 8px !important; + align-items: center !important; + } + + /* 删除按钮 - 第一行第三列 */ + .cart-item > .item-action { + grid-column: 3 !important; + grid-row: 1 !important; + justify-self: end !important; } /* 隐藏单价 */ @@ -979,70 +986,58 @@ onMounted(() => { display: none !important; } - /* 数量 - 商品信息下方 */ + /* 数量 - 第二行第二列 */ .cart-item > .item-quantity { - width: auto !important; - flex-shrink: 0 !important; - align-self: center !important; - margin-left: 8px !important; + grid-column: 2 !important; + grid-row: 2 !important; + display: flex !important; + flex-direction: row !important; + align-items: center !important; + gap: 8px !important; } - /* 小计 - 右侧 */ + /* 小计 - 第二行第三列 */ .cart-item > .item-subtotal { - width: auto !important; - flex-shrink: 0 !important; - align-self: center !important; + grid-column: 3 !important; + grid-row: 2 !important; + justify-self: end !important; text-align: right !important; - margin-left: 8px !important; - } - - /* 删除按钮 - 最右侧 */ - .cart-item > .item-action { - width: auto !important; - flex-shrink: 0 !important; - align-self: center !important; } .item-product .item-image { - width: 60px !important; - height: 60px !important; - margin-right: 10px !important; + width: 50px !important; + height: 50px !important; + flex-shrink: 0 !important; } .item-info { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 6px; + flex: 1 !important; + min-width: 0 !important; } .item-name { font-size: 14px !important; line-height: 1.3 !important; - -webkit-line-clamp: 2 !important; + -webkit-line-clamp: 1 !important; } .item-tags { display: none !important; } - .item-off { - font-size: 12px !important; - } - .item-quantity :deep(.el-input-number) { - width: 80px !important; + width: 90px !important; } .item-quantity .stock-tip { - display: none !important; + font-size: 11px !important; } .item-subtotal .subtotal-price { - font-size: 15px !important; + font-size: 14px !important; font-weight: 600 !important; color: #f56c6c !important; + white-space: nowrap !important; } /* 支付方式 */ @@ -1068,13 +1063,14 @@ onMounted(() => { } .summary-title { - font-size: 15px; - margin-bottom: 10px; - padding-bottom: 8px; + font-size: 15px !important; + margin-bottom: 10px !important; + padding-bottom: 8px !important; } .summary-row { font-size: 13px !important; + margin-bottom: 8px !important; } .summary-total .total-amount { @@ -1082,8 +1078,8 @@ onMounted(() => { } .checkout-btn { - height: 40px !important; - font-size: 14px !important; + height: 42px !important; + font-size: 15px !important; } .address-item { @@ -1099,15 +1095,15 @@ onMounted(() => { } .payment-item { - padding: 10px 6px !important; + padding: 12px 8px !important; } .payment-icon { - font-size: 22px !important; + font-size: 24px !important; } .payment-name { - font-size: 12px !important; + font-size: 13px !important; } }