fix: 参考京东风格重新设计购物车移动端布局
- 商品项采用卡片式布局，圆角设计 - 复选框在左侧，商品图片80x80px - 商品名称和标签在图片右侧 - 价格(红色醒目)和数量选择器在底部 - 删除按钮绝对定位在右上角 - 订单摘要和各区块统一宽度100% - 整体风格简洁清晰，符合主流电商设计 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -46,14 +46,31 @@
|
||||
<h4 class="item-name">{{ item.product?.name }}</h4>
|
||||
<div class="item-tags">
|
||||
<el-tag v-if="item.product?.require_credit" size="small" type="warning">
|
||||
需要资格: {{ item.product?.credit_cost }}
|
||||
需要: {{ item.product?.credit_cost }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.product?.credit_reward > 0" size="small" type="success">
|
||||
奖励: +{{ item.product?.credit_reward }}
|
||||
+{{ item.product?.credit_reward }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p v-if="!item.product?.is_active" class="item-off">已下架</p>
|
||||
</div>
|
||||
|
||||
<!-- 移动端底部：价格 + 数量 -->
|
||||
<div class="item-mobile-bottom">
|
||||
<div class="mobile-price-row">
|
||||
<span class="mobile-price">¥{{ item.product?.price }}</span>
|
||||
</div>
|
||||
<div class="mobile-quantity-row">
|
||||
<el-input-number
|
||||
v-model="item.quantity"
|
||||
:min="1"
|
||||
:max="getMaxQuantity(item.product)"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
@change="(val: number) => updateQuantity(item, val)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-price">
|
||||
@@ -80,19 +97,6 @@
|
||||
<div class="item-action">
|
||||
<el-button link type="danger" size="small" @click="removeItem(item.id)">删除</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 移动端底部行：单价+数量+小计 -->
|
||||
<div class="item-mobile-bottom">
|
||||
<span class="mobile-price">¥{{ item.product?.price }}</span>
|
||||
<el-input-number
|
||||
v-model="item.quantity"
|
||||
:min="1"
|
||||
:max="getMaxQuantity(item.product)"
|
||||
size="small"
|
||||
@change="(val: number) => updateQuantity(item, val)"
|
||||
/>
|
||||
<span class="mobile-subtotal">¥{{ ((item.product?.price || 0) * item.quantity).toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -562,6 +566,8 @@ onMounted(() => {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
@@ -987,132 +993,157 @@ onMounted(() => {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* 商品项 - 两行布局 */
|
||||
/* 商品项 - 京东风格卡片布局 */
|
||||
.cart-item {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
padding: 12px !important;
|
||||
gap: 6px !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px !important;
|
||||
align-items: stretch !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #2d2d44 !important;
|
||||
border-radius: 8px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */
|
||||
/* 隐藏桌面端元素 */
|
||||
.cart-item > .item-price,
|
||||
.cart-item > .item-quantity,
|
||||
.cart-item > .item-subtotal {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 第一行：复选框 + 商品信息 + 删除按钮 */
|
||||
/* 复选框 - 左侧垂直居中 */
|
||||
.cart-item > .item-check {
|
||||
flex: 0 0 24px !important;
|
||||
max-width: 24px !important;
|
||||
flex: 0 0 20px !important;
|
||||
width: 20px !important;
|
||||
margin-right: 0 !important;
|
||||
align-self: flex-start !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
/* 商品信息区 - 中间主体 */
|
||||
.cart-item > .item-product {
|
||||
flex: 1 1 0 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: calc(100% - 70px) !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 8px !important;
|
||||
align-items: flex-start !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* 删除按钮 - 右上角绝对定位 */
|
||||
.cart-item > .item-action {
|
||||
flex: 0 0 40px !important;
|
||||
max-width: 40px !important;
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
/* 移动端底部行 - 显示 */
|
||||
.item-mobile-bottom {
|
||||
display: flex !important;
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding-left: 24px !important;
|
||||
gap: 6px !important;
|
||||
margin-top: 6px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom .mobile-price {
|
||||
font-size: 13px !important;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
white-space: nowrap !important;
|
||||
min-width: 60px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number) {
|
||||
width: 85px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number .el-input__wrapper) {
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number .el-input__inner) {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom .mobile-subtotal {
|
||||
font-size: 15px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #f56c6c !important;
|
||||
white-space: nowrap !important;
|
||||
min-width: 70px !important;
|
||||
text-align: right !important;
|
||||
position: absolute !important;
|
||||
right: 8px !important;
|
||||
top: 8px !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
/* 商品图片 */
|
||||
.item-product .item-image {
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
flex-shrink: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* 商品信息区 - 图片右侧 */
|
||||
.item-info {
|
||||
flex: 1 !important;
|
||||
flex: 1 1 calc(100% - 100px) !important;
|
||||
min-width: 0 !important;
|
||||
max-width: calc(100% - 100px) !important;
|
||||
overflow: hidden !important;
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 13px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.4 !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-bottom: 4px !important;
|
||||
word-break: break-all !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
display: none !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 4px !important;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.item-tags .el-tag {
|
||||
font-size: 10px !important;
|
||||
padding: 0 4px !important;
|
||||
height: 16px !important;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
|
||||
/* 移动端底部 - 价格和数量 */
|
||||
.item-mobile-bottom {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
padding-left: 0 !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.mobile-price-row {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom .mobile-price {
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #f2270c !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.mobile-quantity-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number) {
|
||||
width: 90px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number .el-input__wrapper) {
|
||||
padding: 0 28px 0 8px !important;
|
||||
background: rgba(255,255,255,0.08) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.item-mobile-bottom :deep(.el-input-number .el-input__inner) {
|
||||
font-size: 13px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* 删除按钮样式 */
|
||||
.item-action .el-button {
|
||||
font-size: 12px !important;
|
||||
padding: 4px 0 !important;
|
||||
padding: 2px 4px !important;
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
.checkout-section {
|
||||
padding: 12px !important;
|
||||
margin-top: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -1158,6 +1189,7 @@ onMounted(() => {
|
||||
/* 订单摘要 */
|
||||
.cart-summary-panel {
|
||||
padding: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
|
||||
Reference in New Issue
Block a user