admin/sale
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化购物车商品列表布局对齐

Browse Source 
- 表头和商品项列宽度统一对齐
- 调整各列宽度：选择60px、商品flex1、价格100px、数量140px、小计100px、操作60px
- 图片添加overflow:hidden防止溢出

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
admin
2026-05-30 21:49:31 +08:00
parent 8ce9a1e418
commit 99a503fd67
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/user/Cart.vue
+14 -14
View File
@@ -495,7 +495,7 @@ onMounted(() => {
color: rgba(255, 255, 255, 0.5);
:deep(.el-checkbox) {
width: 50px;
width: 60px;
flex-shrink: 0;
margin-right: 0;
@@ -505,10 +505,10 @@ onMounted(() => {
}
}
.header-product { flex: 1; min-width: 200px; padding-left: 12px; }
.header-price { width: 80px; text-align: center; flex-shrink: 0; }
.header-quantity { width: 120px; text-align: center; flex-shrink: 0; }
.header-subtotal { width: 90px; text-align: center; flex-shrink: 0; }
.header-product { flex: 1; min-width: 200px; }
.header-price { width: 100px; text-align: center; flex-shrink: 0; }
.header-quantity { width: 140px; text-align: center; flex-shrink: 0; }
.header-subtotal { width: 100px; text-align: center; flex-shrink: 0; }
.header-action { width: 60px; text-align: center; flex-shrink: 0; }
}
@@ -536,11 +536,11 @@ onMounted(() => {
opacity: 0.5;
}
> .el-checkbox { width: 50px; flex-shrink: 0; }
> .item-product { flex: 1; min-width: 200px; padding-left: 12px; }
> .item-price { width: 80px; text-align: center; flex-shrink: 0; }
> .item-quantity { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
> .item-subtotal { width: 90px; text-align: center; flex-shrink: 0; }
> .el-checkbox { width: 60px; flex-shrink: 0; }
> .item-product { flex: 1; min-width: 200px; }
> .item-price { width: 100px; text-align: center; flex-shrink: 0; }
> .item-quantity { width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
> .item-subtotal { width: 100px; text-align: center; flex-shrink: 0; }
> .item-action { width: 60px; display: flex; justify-content: center; flex-shrink: 0; }
}
@@ -548,7 +548,6 @@ onMounted(() => {
display: flex;
gap: 12px;
cursor: pointer;
padding-left: 12px;
}
.item-image {
@@ -557,6 +556,7 @@ onMounted(() => {
border-radius: 8px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.image-placeholder {
@@ -600,7 +600,7 @@ onMounted(() => {
.item-price {
text-align: center;
width: 80px;
width: 100px;
flex-shrink: 0;
.price-current {
@@ -611,7 +611,7 @@ onMounted(() => {
}
.item-quantity {
width: 120px;
width: 140px;
flex-shrink: 0;
.stock-tip {
@@ -622,7 +622,7 @@ onMounted(() => {
.item-subtotal {
text-align: center;
width: 90px;
width: 100px;
flex-shrink: 0;
.subtotal-price {