336 lines
17 KiB
HTML
336 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title data-i18n="site_title">vizee为之甄选 - 商品详情</title>
|
||
<link rel="stylesheet" href="assets/css/reset.css">
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<link rel="stylesheet" href="assets/css/header.css">
|
||
<link rel="stylesheet" href="assets/css/footer.css">
|
||
<link rel="stylesheet" href="assets/css/toast.css">
|
||
<link rel="stylesheet" href="assets/css/product-detail.css">
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<!-- Announcement Banner -->
|
||
<div class="announcement-banner">
|
||
<div class="announcement-slider">
|
||
<div class="announcement-item">
|
||
<span data-i18n="announcement_1">🚚 FREE SHIPPING OVER $59</span>
|
||
</div>
|
||
<div class="announcement-item">
|
||
<span data-i18n="announcement_2">🔥 FINAL SALE | PRICES LIKE THIS WON'T LAST</span>
|
||
</div>
|
||
<div class="announcement-item">
|
||
<span data-i18n="announcement_3">💰 SITEWIDE OFFER | 25% OFF ALL ORDERS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-top">
|
||
<div class="container">
|
||
<div class="header-top-content">
|
||
<div class="promo-text" data-i18n="promo_banner">全场最高6折优惠</div>
|
||
<div class="header-actions">
|
||
<div class="language-switcher">
|
||
<select id="languageSelect" aria-label="Language Selector">
|
||
<option value="zh-CN">中文</option>
|
||
<option value="en-US">English</option>
|
||
<option value="ja-JP">日本語</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-main">
|
||
<div class="container">
|
||
<div class="header-main-content">
|
||
<div class="logo">
|
||
<a href="index.html">
|
||
<h1 data-i18n="site_name">vizee<span style="font-size: 0.7em; margin-left: 6px;">为之甄选</span></h1>
|
||
</a>
|
||
</div>
|
||
|
||
<nav class="main-nav">
|
||
<ul>
|
||
<li><a href="index.html" data-i18n="nav_home">首页</a></li>
|
||
<li><a href="home.html" data-i18n="nav_all_products">所有商品</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="header-tools">
|
||
<div class="search-box">
|
||
<input type="text" data-i18n-placeholder="search_placeholder" placeholder="搜索商品...">
|
||
<button type="button" class="search-btn" aria-label="Search">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<path d="m21 21-4.35-4.35"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<a href="javascript:void(0)" class="cart-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="9" cy="21" r="1"></circle>
|
||
<circle cx="20" cy="21" r="1"></circle>
|
||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||
</svg>
|
||
<span class="cart-count">0</span>
|
||
</a>
|
||
<a href="login.html" class="user-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<!-- Breadcrumb -->
|
||
<div class="container">
|
||
<nav class="breadcrumb">
|
||
<a href="index.html" data-i18n="nav_home">首页</a>
|
||
<span>/</span>
|
||
<a href="index.html" data-i18n="nav_all_products">所有商品</a>
|
||
<span>/</span>
|
||
<span id="breadcrumbProduct">商品详情</span>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Product Detail -->
|
||
<div class="container">
|
||
<div class="product-detail-wrapper">
|
||
<!-- Left: Image Gallery -->
|
||
<div class="product-gallery">
|
||
<div class="main-image">
|
||
<img id="mainImage" src="https://picsum.photos/800/800?random=1" alt="Product Image">
|
||
<div class="image-badges" id="productBadges"></div>
|
||
</div>
|
||
<div class="thumbnail-list" id="thumbnails">
|
||
<!-- Thumbnails will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Product Info -->
|
||
<div class="product-info-section">
|
||
<h1 class="product-name" id="productName">Creative Costume Collage Set: Sweetheart</h1>
|
||
|
||
<div class="product-rating-wrapper">
|
||
<div class="stars" id="productStars">★★★★★</div>
|
||
<span class="review-count" id="reviewCount">23 reviews</span>
|
||
</div>
|
||
|
||
<div class="product-price-wrapper">
|
||
<div class="price-row">
|
||
<span class="price-current" id="currentPrice">$21.99</span>
|
||
<span class="price-original" id="originalPrice">$29.99</span>
|
||
</div>
|
||
<div class="price-save" id="priceSave">SAVE 27%</div>
|
||
</div>
|
||
|
||
<!-- Stock Status -->
|
||
<div class="stock-info">
|
||
<span id="stockStatus" class="stock-status in-stock">有货</span>
|
||
<span id="soldCount" class="sold-count" style="display:none;"></span>
|
||
</div>
|
||
|
||
<!-- Spec Selector -->
|
||
<div id="specSelector" class="spec-selector" style="display:none;">
|
||
<!-- Spec options will be loaded here -->
|
||
</div>
|
||
|
||
<!-- Quantity Selector -->
|
||
<div class="quantity-section">
|
||
<label for="quantityInput" data-i18n="quantity_label">数量：</label>
|
||
<div class="quantity-selector">
|
||
<button class="qty-btn minus" aria-label="Decrease">-</button>
|
||
<input type="number" id="quantityInput" class="qty-input" value="1" min="1" max="99" aria-label="Quantity">
|
||
<button class="qty-btn plus" aria-label="Increase">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add to Cart Button -->
|
||
<div class="cart-actions">
|
||
<button class="btn btn-primary btn-add-cart" id="addToCartBtn">
|
||
<span data-i18n="add_to_cart">加入购物车</span>
|
||
</button>
|
||
<button class="btn btn-secondary btn-buy-now" id="buyNowBtn">
|
||
<span data-i18n="buy_now">立即购买</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Product Features -->
|
||
<div class="product-features">
|
||
<div class="feature-item">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3"></circle>
|
||
</svg>
|
||
<span data-i18n="feature_shipping">Free Shipping Over $59</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
<span data-i18n="feature_return">30 Day Money-Back Guarantee</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||
</svg>
|
||
<span data-i18n="feature_quality">High Quality and Safety</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product Description -->
|
||
<div class="product-description">
|
||
<h3 data-i18n="description_title">商品描述</h3>
|
||
<div id="productDescription">
|
||
<p>Creative and imaginative play set for children. Perfect for developing creativity and fine motor skills.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Share -->
|
||
<div class="product-share">
|
||
<span data-i18n="share_label">分享：</span>
|
||
<a href="#" class="share-btn" aria-label="Facebook">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="#" class="share-btn" aria-label="Twitter">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="#" class="share-btn" aria-label="Pinterest">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<path d="M8 12c0-2.21 1.79-4 4-4 1.11 0 2 .45 2 1.5 0 1.5-2 2.5-2 4.5" stroke="white" fill="none"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product Details Tabs -->
|
||
<div class="container">
|
||
<div class="product-tabs">
|
||
<div class="tab-headers">
|
||
<button class="tab-header active" data-tab="details">
|
||
<span data-i18n="tab_details">产品详情</span>
|
||
</button>
|
||
<button class="tab-header" data-tab="reviews">
|
||
<span data-i18n="tab_reviews">用户评价</span>
|
||
</button>
|
||
<button class="tab-header" data-tab="shipping">
|
||
<span data-i18n="tab_shipping">配送与退货</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-contents">
|
||
<div class="tab-content active" id="details">
|
||
<div class="details-content">
|
||
<h3 data-i18n="details_specifications">规格参数</h3>
|
||
<div id="productDetailImages">
|
||
<!-- 详情图片将在这里加载 -->
|
||
</div>
|
||
<ul>
|
||
<li><strong data-i18n="spec_age">适用年龄：</strong><span>3-6岁</span></li>
|
||
<li><strong data-i18n="spec_material">材质：</strong><span>环保纸质</span></li>
|
||
<li><strong data-i18n="spec_size">尺寸：</strong><span>30 x 20 cm</span></li>
|
||
<li><strong data-i18n="spec_weight">重量：</strong><span>200g</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="tab-content" id="reviews">
|
||
<div class="reviews-content" id="reviewsList">
|
||
<!-- Reviews will be loaded here -->
|
||
</div>
|
||
<div id="commentPagination" style="display:none;"></div>
|
||
</div>
|
||
<div class="tab-content" id="shipping">
|
||
<div class="shipping-content">
|
||
<h3 data-i18n="shipping_info_title">配送信息</h3>
|
||
<p data-i18n="shipping_info_desc">订单满$59美国境内免运费，通常3-5个工作日送达。</p>
|
||
<h3 data-i18n="return_policy_title">退货政策</h3>
|
||
<p data-i18n="return_policy_desc">30天无理由退货保证，商品需保持全新未使用状态。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Related Products -->
|
||
<section class="related-products">
|
||
<div class="container">
|
||
<h2 class="section-title" data-i18n="related_products">相关推荐</h2>
|
||
<div class="product-grid" id="relatedProducts">
|
||
<!-- Related products will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_about">关于我们</h4>
|
||
<ul>
|
||
<li><a href="#" data-i18n="footer_about_us">公司简介</a></li>
|
||
<li><a href="#" data-i18n="footer_contact">联系我们</a></li>
|
||
<li><a href="#" data-i18n="footer_careers">加入我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_help">帮助中心</h4>
|
||
<ul>
|
||
<li><a href="#" data-i18n="footer_shipping">配送信息</a></li>
|
||
<li><a href="#" data-i18n="footer_returns">退换货政策</a></li>
|
||
<li><a href="#" data-i18n="footer_faq">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_service">客户服务</h4>
|
||
<ul>
|
||
<li><a href="#" data-i18n="footer_account">我的账户</a></li>
|
||
<li><a href="#" data-i18n="footer_orders">订单查询</a></li>
|
||
<li><a href="#" data-i18n="footer_track">物流跟踪</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-i18n="footer_follow">关注我们</h4>
|
||
<div class="social-links">
|
||
<a href="#" aria-label="Facebook">Facebook</a>
|
||
<a href="#" aria-label="Instagram">Instagram</a>
|
||
<a href="#" aria-label="WeChat">微信</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p data-i18n="footer_copyright">© 2024 在线商城. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="assets/js/toast.js"></script>
|
||
<script src="assets/js/api.js"></script>
|
||
<script src="assets/js/i18n.js"></script>
|
||
<script src="assets/js/common.js"></script>
|
||
<script src="assets/js/product-detail.js"></script>
|
||
</body>
|
||
</html>
|