257 lines
13 KiB
HTML
257 lines
13 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-list.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" class="active" 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">
|
||
|
|
<!-- Category Banner Section -->
|
||
|
|
<section class="category-banner">
|
||
|
|
<div class="container">
|
||
|
|
<div class="category-grid">
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=sale" alt="Up to 60% off">
|
||
|
|
<h3 data-i18n="banner_sale">Up to 60% off</h3>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=magnetic" alt="Magnetic Tiles">
|
||
|
|
<h3 data-i18n="cat_magnetic">磁力玩具</h3>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=arts" alt="Arts & Crafts">
|
||
|
|
<h3 data-i18n="cat_arts">艺术手工</h3>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=puzzles" alt="Puzzles">
|
||
|
|
<h3 data-i18n="cat_puzzles">拼图</h3>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=games" alt="Board Games">
|
||
|
|
<h3 data-i18n="cat_games">桌游</h3>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="category-card">
|
||
|
|
<img src="https://picsum.photos/200/200?random=new" alt="New Arrivals">
|
||
|
|
<h3 data-i18n="nav_new_arrivals">新品上市</h3>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="content-wrapper">
|
||
|
|
<!-- Sidebar Filter -->
|
||
|
|
<aside class="sidebar">
|
||
|
|
<div class="filter-section">
|
||
|
|
<h3 data-i18n="filter_title">筛选条件</h3>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<h4 data-i18n="filter_availability">库存状态</h4>
|
||
|
|
<div class="filter-options">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="availability" value="in_stock">
|
||
|
|
<span data-i18n="filter_in_stock">有货</span>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="availability" value="out_of_stock">
|
||
|
|
<span data-i18n="filter_out_of_stock">缺货</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<h4 data-i18n="filter_price">价格区间</h4>
|
||
|
|
<div class="price-range">
|
||
|
|
<input type="number" id="priceMin" placeholder="¥0" min="0">
|
||
|
|
<span>-</span>
|
||
|
|
<input type="number" id="priceMax" placeholder="¥1000" min="0">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<h4 data-i18n="filter_category">商品分类</h4>
|
||
|
|
<div class="filter-options">
|
||
|
|
<!-- 分类将从 API 动态加载 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-actions">
|
||
|
|
<button class="btn btn-primary apply-filter" data-i18n="btn_apply">应用筛选</button>
|
||
|
|
<button class="btn btn-secondary clear-filter" data-i18n="btn_clear">清除筛选</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Product List -->
|
||
|
|
<div class="product-section">
|
||
|
|
<div class="product-header">
|
||
|
|
<h2 class="section-title" data-i18n="all_products_title">所有商品</h2>
|
||
|
|
<div class="product-controls">
|
||
|
|
<span class="product-count"><span id="productCount">189</span> <span data-i18n="products_text">个商品</span></span>
|
||
|
|
<div class="sort-dropdown">
|
||
|
|
<label for="sortSelect" data-i18n="sort_by">排序方式：</label>
|
||
|
|
<select id="sortSelect" aria-label="Sort Options">
|
||
|
|
<option value="featured" data-i18n="sort_featured">推荐</option>
|
||
|
|
<option value="best_selling" data-i18n="sort_best_selling">最畅销</option>
|
||
|
|
<option value="price_asc" data-i18n="sort_price_asc">价格从低到高</option>
|
||
|
|
<option value="price_desc" data-i18n="sort_price_desc">价格从高到低</option>
|
||
|
|
<option value="date_new" data-i18n="sort_date_new">最新上架</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product-grid" id="productGrid">
|
||
|
|
<!-- Products will be loaded here by JavaScript -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pagination">
|
||
|
|
<button class="page-btn prev" data-i18n="pagination_prev">上一页</button>
|
||
|
|
<div class="page-numbers"></div>
|
||
|
|
<button class="page-btn next" data-i18n="pagination_next">下一页</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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-list.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|