会员专区完成
This commit is contained in:
parent
63329dd6b4
commit
300ffb8fb9
|
|
@ -164,6 +164,7 @@
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
border-bottom: 1px dashed #eee;
|
border-bottom: 1px dashed #eee;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.product-list-item:last-child {
|
.product-list-item:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
@ -212,6 +213,66 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 购物车控件样式 */
|
||||||
|
.add-to-cart {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 5px;
|
||||||
|
display: none;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-controls.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-btn {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-count {
|
||||||
|
min-width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
|
|
@ -337,6 +398,12 @@
|
||||||
<div class="product-list-points">300积分</div>
|
<div class="product-list-points">300积分</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">积分兑换</div>
|
<div class="product-offer-type">积分兑换</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-list-item">
|
<div class="product-list-item">
|
||||||
<div class="product-icon">商品图标</div>
|
<div class="product-icon">商品图标</div>
|
||||||
|
|
@ -345,6 +412,12 @@
|
||||||
<div class="product-list-price">¥35.00</div>
|
<div class="product-list-price">¥35.00</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">积分双倍</div>
|
<div class="product-offer-type">积分双倍</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-list-item">
|
<div class="product-list-item">
|
||||||
<div class="product-icon">商品图标</div>
|
<div class="product-icon">商品图标</div>
|
||||||
|
|
@ -353,6 +426,12 @@
|
||||||
<div class="product-list-price">¥12.50</div>
|
<div class="product-list-price">¥12.50</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">优惠券可用</div>
|
<div class="product-offer-type">优惠券可用</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -393,6 +472,12 @@
|
||||||
<div class="product-list-price">¥12.50</div>
|
<div class="product-list-price">¥12.50</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">优惠券可用</div>
|
<div class="product-offer-type">优惠券可用</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -428,6 +513,12 @@
|
||||||
<div class="product-list-price">¥58.00</div>
|
<div class="product-list-price">¥58.00</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">积分双倍</div>
|
<div class="product-offer-type">积分双倍</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-list-item">
|
<div class="product-list-item">
|
||||||
<div class="product-icon">商品图标</div>
|
<div class="product-icon">商品图标</div>
|
||||||
|
|
@ -436,6 +527,12 @@
|
||||||
<div class="product-list-price">¥28.00</div>
|
<div class="product-list-price">¥28.00</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-offer-type">优惠券可用</div>
|
<div class="product-offer-type">优惠券可用</div>
|
||||||
|
<div class="add-to-cart" onclick="addToCart(this)">+</div>
|
||||||
|
<div class="cart-controls">
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, -1)">-</button>
|
||||||
|
<div class="cart-count">1</div>
|
||||||
|
<button class="cart-btn" onclick="changeQuantity(this, 1)">+</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -513,6 +610,32 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 添加到购物车功能
|
||||||
|
function addToCart(element) {
|
||||||
|
const productItem = element.closest('.product-list-item');
|
||||||
|
const addToCartBtn = productItem.querySelector('.add-to-cart');
|
||||||
|
const cartControls = productItem.querySelector('.cart-controls');
|
||||||
|
|
||||||
|
// 隐藏添加按钮，显示数量控制器
|
||||||
|
addToCartBtn.style.display = 'none';
|
||||||
|
cartControls.classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改商品数量
|
||||||
|
function changeQuantity(element, change) {
|
||||||
|
const productItem = element.closest('.product-list-item');
|
||||||
|
const cartCountElement = productItem.querySelector('.cart-count');
|
||||||
|
let count = parseInt(cartCountElement.innerText) || 1;
|
||||||
|
|
||||||
|
// 更新数量
|
||||||
|
count += change;
|
||||||
|
|
||||||
|
// 确保数量至少为1
|
||||||
|
if (count < 1) count = 1;
|
||||||
|
|
||||||
|
cartCountElement.innerText = count;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue