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;
}
/* 地址 */