一个上帝类电商网页

!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableyestitle上帝类 · 电商圣殿 | 全知全能购物车/titlestyle* {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/headbodydiv classgod-paneldiv classholy-headerdiv classlogoh1✨ 上帝类 · 电商圣殿 ✨/h1span全能购物中枢 · 一神统御万物/span/divdiv classcart-icon idcartToggleBtnsvg viewBox0 0 24 24 strokecurrentColor stroke-width1.8 fillnonepath dM6 6L7 18H17L18 6H6Z /path dM8 6V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V6 /circle cx9 cy19 r1 /circle cx15 cy19 r1 //svgspan classcart-count idcartCountBadge0/span/div/divdiv classtemple-body!-- 商品圣域 --div classproducts-areadiv classsection-titlespan️ 圣品陈列/spanspan classbadge-god上帝类实时渲染/span/divdiv classproduct-grid idproductGrid/div/div!-- 购物车圣柜 --div classcart-sidebar idcartSidebardiv classsection-title 购物车 · 圣选之物/divdiv idcartItemsContainer/divdiv idcartSummary/div/div/divfooter⚡ 全知全能电商上帝类 | 商品/购物车/本地存储 统一掌管 | 点击圣品添加入仓 ⚡/footer/divscript// 上帝类电商全知中枢 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 classproduct-carddiv classproduct-img${product.emoji}/divdiv classproduct-infodiv classproduct-title${this.escapeHtml(product.name)}/divdiv classproduct-price¥${product.price}/divbutton classadd-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 classempty-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 classcart-itemdiv classcart-item-infodiv classcart-item-title${emoji} ${this.escapeHtml(item.name)}/divdiv classcart-item-price¥${item.price}/div/divdiv classcart-item-actionsbutton classdec-qty data-id${item.id}−/buttonspan classcart-item-qty${item.quantity}/spanbutton classinc-qty data-id${item.id}/buttonbutton classremove-item data-id${item.id} title移除️/button/div/div;}).join();// 汇总信息const totalItems this.getTotalItems();const totalPrice this.getTotalPrice();this.cartSummaryEl.innerHTML div classcart-summarydiv classtotal-rowspan圣品总数:/spanspan${totalItems}/span/divdiv classtotal-rowspan神恩总额:/spanspan¥${totalPrice.toFixed(2)}/span/divbutton idclearCartBtn classclear-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) {}}}// 辅助防XSSescapeHtml(str) {return String(str).replace(/[]/g, function(m) {if (m ) return amp;;if (m ) return lt;;if (m ) return gt;;return m;});}}// 页面加载时授予神权window.addEventListener(DOMContentLoaded, () {window.ecommerceGod new EcommerceGod();});/script/body/html