diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 4976142..7bf9194 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -51,7 +51,9 @@

{{ item.product?.name }}

- 删除 + + +
@@ -247,9 +249,9 @@ import { ref, reactive, computed, watch, onMounted, markRaw } from 'vue' import { useRouter } from 'vue-router' import { ElMessage, ElMessageBox } from 'element-plus' -import { +import { ShoppingCart, Picture, Location, CreditCard, Plus, CircleCheckFilled, - Wallet, Coin, ChatDotRound + Wallet, Coin, ChatDotRound, Delete } from '@element-plus/icons-vue' import { useCartStore } from '../../store/cart' import { systemApi, addressApi, orderApi, paymentChannelApi } from '../../api' @@ -564,7 +566,7 @@ onMounted(() => { } /* 桌面端布局 */ - > .item-check { width: 40px; flex-shrink: 0; } + > .item-check { width: 60px; flex-shrink: 0; } > .item-image-wrap { width: 70px; flex-shrink: 0; } > .item-content { flex: 1; min-width: 200px; } > .item-price { width: 100px; text-align: center; flex-shrink: 0; } @@ -581,15 +583,6 @@ onMounted(() => { align-items: flex-start; } -/* 移动端专用元素 - 桌面端隐藏 */ -.item-image-wrap { - display: none; -} - -.item-content { - display: none; -} - .item-image { width: 70px; height: 70px; @@ -603,6 +596,7 @@ onMounted(() => { .item-image-wrap { margin-right: 12px; cursor: pointer; + display: block; } .item-content { @@ -619,9 +613,7 @@ onMounted(() => { } .item-bottom-row { - display: flex; - align-items: center; - gap: 8px; + display: none; } .btn-delete { @@ -1130,10 +1122,25 @@ onMounted(() => { /* 删除按钮 */ .item-content .btn-delete { - display: block !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; flex-shrink: 0 !important; - font-size: 12px !important; - padding: 0 !important; + width: 28px !important; + height: 28px !important; + border-radius: 4px !important; + background: rgba(245, 108, 108, 0.1) !important; + cursor: pointer !important; + transition: all 0.2s !important; + } + + .item-content .btn-delete:hover { + background: rgba(245, 108, 108, 0.2) !important; + } + + .item-content .btn-delete .el-icon { + font-size: 14px !important; + color: #f56c6c !important; } /* 标签 */ @@ -1173,15 +1180,27 @@ onMounted(() => { } .item-content .quantity-wrap :deep(.el-input-number) { - width: 100px !important; + width: 110px !important; } .item-content .quantity-wrap :deep(.el-input-number .el-input__wrapper) { - padding: 0 4px !important; + padding: 0 38px !important; + } + + .item-content .quantity-wrap :deep(.el-input-number__decrease) { + width: 32px !important; + left: 2px !important; + } + + .item-content .quantity-wrap :deep(.el-input-number__increase) { + width: 32px !important; + right: 2px !important; } .item-content .quantity-wrap :deep(.el-input-number .el-input__inner) { - font-size: 13px !important; + font-size: 14px !important; + text-align: center !important; + padding: 0 !important; } /* 地址 */