fix: 优化删除按钮和数量选择器样式

删除按钮:
- 改用垃圾桶图标,更直观美观
- 圆角矩形背景,hover效果
- 红色主题,符合删除语义

数量选择器:
- 增加宽度至110px
- 调整padding确保数字居中
- 加减按钮宽度32px,易于点击
- 数字居中显示,不再重叠

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-01 21:40:13 +08:00
parent 5aa57bec3c
commit c6400f5f67
+41 -22
View File
@@ -51,7 +51,9 @@
<!-- 标题行商品名 + 删除按钮 -->
<div class="item-title-row">
<h4 class="item-name" @click="$router.push(`/products/${item.product?.id}`)">{{ item.product?.name }}</h4>
<el-button class="btn-delete" link type="danger" @click.stop="removeItem(item.id)">删除</el-button>
<span class="btn-delete" @click.stop="removeItem(item.id)">
<el-icon><Delete /></el-icon>
</span>
</div>
<!-- 标签 -->
<div class="item-tags" v-if="item.product?.require_credit || item.product?.credit_reward > 0">
@@ -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;
}
/* 地址 */