fix: 优化删除按钮和数量选择器样式
删除按钮: - 改用垃圾桶图标,更直观美观 - 圆角矩形背景,hover效果 - 红色主题,符合删除语义 数量选择器: - 增加宽度至110px - 调整padding确保数字居中 - 加减按钮宽度32px,易于点击 - 数字居中显示,不再重叠 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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">
|
||||
@@ -249,7 +251,7 @@ import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
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;
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
|
||||
Reference in New Issue
Block a user