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
+25 -25
View File
@@ -493,22 +493,22 @@ onMounted(() => {
border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px; font-size: 13px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
:deep(.el-checkbox) { :deep(.el-checkbox) {
width: 50px; width: 60px;
flex-shrink: 0; flex-shrink: 0;
margin-right: 0; margin-right: 0;
.el-checkbox__label { .el-checkbox__label {
font-size: 13px; font-size: 13px;
padding-left: 8px; padding-left: 8px;
} }
} }
.header-product { flex: 1; min-width: 200px; padding-left: 12px; } .header-product { flex: 1; min-width: 200px; }
.header-price { width: 80px; text-align: center; flex-shrink: 0; } .header-price { width: 100px; text-align: center; flex-shrink: 0; }
.header-quantity { width: 120px; text-align: center; flex-shrink: 0; } .header-quantity { width: 140px; text-align: center; flex-shrink: 0; }
.header-subtotal { width: 90px; 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; } .header-action { width: 60px; text-align: center; flex-shrink: 0; }
} }
@@ -523,24 +523,24 @@ onMounted(() => {
padding: 16px 20px; padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
} }
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
&.item-disabled { &.item-disabled {
opacity: 0.5; opacity: 0.5;
} }
> .el-checkbox { width: 50px; flex-shrink: 0; } > .el-checkbox { width: 60px; flex-shrink: 0; }
> .item-product { flex: 1; min-width: 200px; padding-left: 12px; } > .item-product { flex: 1; min-width: 200px; }
> .item-price { width: 80px; text-align: center; flex-shrink: 0; } > .item-price { width: 100px; text-align: center; flex-shrink: 0; }
> .item-quantity { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } > .item-quantity { width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
> .item-subtotal { width: 90px; text-align: center; 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; } > .item-action { width: 60px; display: flex; justify-content: center; flex-shrink: 0; }
} }
@@ -548,7 +548,6 @@ onMounted(() => {
display: flex; display: flex;
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
padding-left: 12px;
} }
.item-image { .item-image {
@@ -557,6 +556,7 @@ onMounted(() => {
border-radius: 8px; border-radius: 8px;
flex-shrink: 0; flex-shrink: 0;
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
overflow: hidden;
} }
.image-placeholder { .image-placeholder {
@@ -600,9 +600,9 @@ onMounted(() => {
.item-price { .item-price {
text-align: center; text-align: center;
width: 80px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
.price-current { .price-current {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
@@ -611,9 +611,9 @@ onMounted(() => {
} }
.item-quantity { .item-quantity {
width: 120px; width: 140px;
flex-shrink: 0; flex-shrink: 0;
.stock-tip { .stock-tip {
font-size: 11px; font-size: 11px;
color: #f59e0b; color: #f59e0b;
@@ -622,9 +622,9 @@ onMounted(() => {
.item-subtotal { .item-subtotal {
text-align: center; text-align: center;
width: 90px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
.subtotal-price { .subtotal-price {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;