一个上帝类电商网页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>上帝类 · 电商圣殿 | 全知全能购物车</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', sans-serif;
}
body {
background: linear-gradient(145deg, #f5f7fc 0%, #eef2f9 100%);
min-height: 100vh;
padding: 1.5rem;
}
/* 圣光面板 */
.god-panel {
max-width: 1400px;
margin: 0 auto;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(2px);
border-radius: 2rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,215,150,0.3);
overflow: hidden;
transition: all 0.2s;
}
/* 头部 */
.holy-header {
background: #1a1e2c;
padding: 1.2rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 3px solid #ffb347;
}
.logo h1 {
font-size: 1.6rem;
font-weight: 700;
background: linear-gradient(135deg, #FFE6B0, #B7C9FF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo span {
font-size: 0.75rem;
color: #9aa2cf;
display: block;
}
.cart-icon {
position: relative;
cursor: pointer;
background: #2d334b;
padding: 10px 20px;
border-radius: 60px;
display: flex;
align-items: center;
gap: 12px;
transition: 0.2s;
border: 1px solid #ffb34780;
}
.cart-icon:hover {
background: #3a4062;
transform: scale(0.97);
}
.cart-icon svg {
width: 24px;
height: 24px;
stroke: #ffcd94;
stroke-width: 1.8;
fill: none;
}
.cart-count {
background: #ffa62e;
color: #1e1f2c;
font-weight: bold;
border-radius: 40px;
padding: 2px 10px;
font-size: 0.85rem;
}
/* 双栏布局 */
.temple-body {
display: flex;
flex-wrap: wrap;
}
.products-area {
flex: 2;
padding: 1.8rem;
background: #ffffff;
}
.cart-sidebar {
flex: 1;
background: #f8fafd;
border-left: 1px solid #e2e8f0;
padding: 1.5rem;
transition: all 0.2s;
max-height: 80vh;
overflow-y: auto;
}
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 8px;
border-left: 4px solid #ffb347;
padding-left: 12px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
}
.product-card {
background: white;
border-radius: 1.2rem;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
transition: 0.25s ease;
border: 1px solid #eef2ff;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.product-img {
background: #f1f5f9;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.product-info {
padding: 1rem;
}
.product-title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.4rem;
}
.product-price {
color: #ff8c42;
font-weight: 800;
font-size: 1.2rem;
margin: 8px 0;
}
.add-to-cart {
background: #1e293b;
color: white;
border: none;
width: 100%;
padding: 8px;
border-radius: 40px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.add-to-cart:hover {
background: #ffa62e;
color: #1e1f2c;
}
/* 购物车条目 */
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 12px;
border-radius: 1rem;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.cart-item-info {
flex: 2;
}
.cart-item-title {
font-weight: 600;
font-size: 0.85rem;
}
.cart-item-price {
font-size: 0.75rem;
color: #ff8c42;
}
.cart-item-actions {
display: flex;
align-items: center;
gap: 8px;
}
.cart-item-actions button {
background: #eef2ff;
border: none;
width: 28px;
height: 28px;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
transition: 0.1s;
}
.cart-item-actions button:hover {
background: #ffa62e;
color: white;
}
.cart-item-qty {
min-width: 28px;
text-align: center;
font-weight: 600;
}
.remove-item {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #acb5cf;
}
.remove-item:hover {
color: #e53e3e;
}
.cart-summary {
margin-top: 20px;
border-top: 2px dashed #cbd5e1;
padding-top: 16px;
}
.total-row {
display: flex;
justify-content: space-between;
font-weight: 800;
font-size: 1.2rem;
margin: 12px 0;
}
.clear-cart {
background: #ef4444;
color: white;
border: none;
width: 100%;
padding: 10px;
border-radius: 60px;
font-weight: 600;
cursor: pointer;
margin-top: 12px;
}
.clear-cart:hover {
background: #dc2626;
}
.empty-cart-msg {
text-align: center;
color: #94a3b8;
padding: 2rem 0;
}
footer {
text-align: center;
font-size: 0.7rem;
color: #6f78a8;
padding: 1rem;
border-top: 1px solid #e2e8f0;
background: #ffffffcc;
}
@media (max-width: 780px) {
.temple-body {
flex-direction: column;
}
.cart-sidebar {
border-left: none;
border-top: 1px solid #e2e8f0;
}
}
.badge-god {
background: #ffb34730;
border-radius: 30px;
padding: 2px 10px;
font-size: 0.7rem;
}
</style>
</head>
<body>
<div class="god-panel">
<div class="holy-header">
<div class="logo">
<h1>✨ 上帝类 · 电商圣殿 ✨</h1>
<span>全能购物中枢 · 一神统御万物</span>
</div>
<div class="cart-icon" id="cartToggleBtn">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" fill="none">
<path d="M6 6L7 18H17L18 6H6Z" />
<path d="M8 6V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V6" />
<circle cx="9" cy="19" r="1" />
<circle cx="15" cy="19" r="1" />
</svg>
<span class="cart-count" id="cartCountBadge">0</span>
</div>
</div>
<div class="temple-body">
<!-- 商品圣域 -->
<div class="products-area">
<div class="section-title">
<span>🛍️ 圣品陈列</span>
<span class="badge-god">上帝类实时渲染</span>
</div>
<div class="product-grid" id="productGrid"></div>
</div>
<!-- 购物车圣柜 -->
<div class="cart-sidebar" id="cartSidebar">
<div class="section-title">🧺 购物车 · 圣选之物</div>
<div id="cartItemsContainer"></div>
<div id="cartSummary"></div>
</div>
</div>
<footer>⚡ 全知全能电商上帝类 | 商品/购物车/本地存储 统一掌管 | 点击圣品添加入仓 ⚡</footer>
</div>
<script>
// ========================= 上帝类：电商全知中枢 =========================
class EcommerceGod {
constructor() {
// 商品数据 (id, 名称, 价格, 图标)
this.products = [
{ id: 1, name: "灵韵机械键盘", price: 299, emoji: "⌨️", description: "RGB 神光同步" },
{ id: 2, name: "圣者无线鼠标", price: 129, emoji: "🖱️", description: "8000 DPI" },
{ id: 3, name: "天启显示器 27寸", price: 1899, emoji: "🖥️", description: "4K 圣光屏" },
{ id: 4, name: "神谕降噪耳机", price: 499, emoji: "🎧", description: "ANC 主动降噪" },
{ id: 5, name: "极速固态硬盘 1TB", price: 599, emoji: "💾", description: "NVMe 神速" },
{ id: 6, name: "创世氛围灯", price: 89, emoji: "💡", description: "RGB 流光" }
];
// 购物车结构: { items: [{ id, name, price, quantity }] }
this.cart = { items: [] };
// DOM 元素
this.productGridEl = document.getElementById('productGrid');
this.cartContainer = document.getElementById('cartItemsContainer');
this.cartSummaryEl = document.getElementById('cartSummary');
this.cartCountBadge = document.getElementById('cartCountBadge');
// 初始化: 加载本地存储, 渲染页面, 绑定事件
this.init();
}
// ---------- 全知初始化 ----------
init() {
this.loadCartFromStorage();
this.renderProducts();
this.renderCart();
this.updateCartBadge();
// 全局上帝事件监听 (委托)
this.productGridEl.addEventListener('click', (e) => {
const btn = e.target.closest('.add-to-cart');
if (btn) {
const productId = parseInt(btn.dataset.id);
this.addToCart(productId);
}
});
this.cartContainer.addEventListener('click', (e) => {
// 增加数量
const incBtn = e.target.closest('.inc-qty');
if (incBtn) {
const id = parseInt(incBtn.dataset.id);
this.changeQuantity(id, 1);
}
// 减少数量
const decBtn = e.target.closest('.dec-qty');
if (decBtn) {
const id = parseInt(decBtn.dataset.id);
this.changeQuantity(id, -1);
}
// 删除项
const delBtn = e.target.closest('.remove-item');
if (delBtn) {
const id = parseInt(delBtn.dataset.id);
this.removeFromCart(id);
}
});
// 清空购物车按钮 (动态创建，用委托)
document.addEventListener('click', (e) => {
if (e.target.id === 'clearCartBtn') {
this.clearCart();
}
});
}
// ---------- 商品渲染 (上帝之手) ----------
renderProducts() {
if (!this.productGridEl) return;
this.productGridEl.innerHTML = this.products.map(product => `
<div class="product-card">
<div class="product-img">${product.emoji}</div>
<div class="product-info">
<div class="product-title">${this.escapeHtml(product.name)}</div>
<div class="product-price">¥${product.price}</div>
<button class="add-to-cart" data-id="${product.id}">✨ 添入圣车 ✨</button>
</div>
</div>
`).join('');
}
// ---------- 购物车渲染 (圣光显影) ----------
renderCart() {
if (!this.cartContainer || !this.cartSummaryEl) return;
if (this.cart.items.length === 0) {
this.cartContainer.innerHTML = `<div class="empty-cart-msg">🛒 圣车空空如也<br>点击上方圣品添加</div>`;
this.cartSummaryEl.innerHTML = '';
return;
}
// 渲染列表
this.cartContainer.innerHTML = this.cart.items.map(item => {
const product = this.products.find(p => p.id === item.id);
const emoji = product ? product.emoji : '📦';
return `
<div class="cart-item">
<div class="cart-item-info">
<div class="cart-item-title">${emoji} ${this.escapeHtml(item.name)}</div>
<div class="cart-item-price">¥${item.price}</div>
</div>
<div class="cart-item-actions">
<button class="dec-qty" data-id="${item.id}">−</button>
<span class="cart-item-qty">${item.quantity}</span>
<button class="inc-qty" data-id="${item.id}">+</button>
<button class="remove-item" data-id="${item.id}" title="移除">🗑️</button>
</div>
</div>
`;
}).join('');
// 汇总信息
const totalItems = this.getTotalItems();
const totalPrice = this.getTotalPrice();
this.cartSummaryEl.innerHTML = `
<div class="cart-summary">
<div class="total-row">
<span>圣品总数:</span>
<span>${totalItems}</span>
</div>
<div class="total-row">
<span>神恩总额:</span>
<span>¥${totalPrice.toFixed(2)}</span>
</div>
<button id="clearCartBtn" class="clear-cart">🧹 净化圣车</button>
</div>
`;
this.updateCartBadge();
this.saveCartToStorage();
}
// ---------- 购物车核心逻辑 ----------
addToCart(productId) {
const product = this.products.find(p => p.id === productId);
if (!product) return;
const existingItem = this.cart.items.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
this.cart.items.push({
id: product.id,
name: product.name,
price: product.price,
quantity: 1
});
}
this.renderCart();
}
changeQuantity(productId, delta) {
const item = this.cart.items.find(i => i.id === productId);
if (!item) return;
const newQty = item.quantity + delta;
if (newQty <= 0) {
this.removeFromCart(productId);
} else {
item.quantity = newQty;
this.renderCart();
}
}
removeFromCart(productId) {
this.cart.items = this.cart.items.filter(item => item.id !== productId);
this.renderCart();
}
clearCart() {
if (this.cart.items.length === 0) return;
if (confirm("🚨 确定要净化圣车，清空所有圣品吗？")) {
this.cart.items = [];
this.renderCart();
}
}
getTotalItems() {
return this.cart.items.reduce((sum, item) => sum + item.quantity, 0);
}
getTotalPrice() {
return this.cart.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
}
updateCartBadge() {
if (this.cartCountBadge) {
const total = this.getTotalItems();
this.cartCountBadge.innerText = total;
}
}
// ---------- 本地存储 · 永恒铭记 ----------
saveCartToStorage() {
try {
localStorage.setItem('ecommerce_god_cart', JSON.stringify(this.cart));
} catch(e) { console.warn("存储失败"); }
}
loadCartFromStorage() {
const saved = localStorage.getItem('ecommerce_god_cart');
if (saved) {
try {
const parsed = JSON.parse(saved);
if (parsed.items && Array.isArray(parsed.items)) {
this.cart = parsed;
}
} catch(e) {}
}
}
// 辅助防XSS
escapeHtml(str) {
return String(str).replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
}
// 页面加载时，授予神权
window.addEventListener('DOMContentLoaded', () => {
window.ecommerceGod = new EcommerceGod();
});
</script>
</body>
</html>
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)