460 lines
23 KiB
HTML
460 lines
23 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/home.css">
|
||
<link rel="stylesheet" href="assets/css/toast.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" class="active" 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">
|
||
<!-- Hero Slider -->
|
||
<section class="hero-slider">
|
||
<div class="slider-container">
|
||
<div class="slider-track" id="heroSlider">
|
||
<!-- 轮播图将通过 API 动态加载 -->
|
||
<div class="slide active">
|
||
<img src="https://picsum.photos/1920/600?random=hero1" alt="加载中...">
|
||
<div class="slide-content">
|
||
<h2>加载中...</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="slider-btn prev" aria-label="Previous">‹</button>
|
||
<button class="slider-btn next" aria-label="Next">›</button>
|
||
<div class="slider-dots"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="features">
|
||
<div class="container">
|
||
<div class="features-grid">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">💰</div>
|
||
<h3 data-i18n="feature_guarantee_title">30天退款保证</h3>
|
||
<p data-i18n="feature_guarantee_desc">无忧购物体验</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🚚</div>
|
||
<h3 data-i18n="feature_shipping_title">满$59免运费</h3>
|
||
<p data-i18n="feature_shipping_desc">全国包邮</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">✨</div>
|
||
<h3 data-i18n="feature_quality_title">高品质与安全</h3>
|
||
<p data-i18n="feature_quality_desc">严格品控标准</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bestsellers -->
|
||
<section class="bestsellers">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title" data-i18n="bestsellers_title">畅销商品</h2>
|
||
<a href="home.html" class="view-all" data-i18n="view_all">查看全部 →</a>
|
||
</div>
|
||
<div class="product-grid" id="bestsellersGrid">
|
||
<!-- Products will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Categories -->
|
||
<section class="categories-section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center" data-i18n="shop_by_categories">按分类选购</h2>
|
||
<div class="categories-grid">
|
||
<a href="home.html?cat=puzzles" class="category-large-card">
|
||
<img src="https://picsum.photos/600/400?random=puzzles" alt="Puzzles">
|
||
<div class="category-overlay">
|
||
<h3 data-i18n="cat_puzzles">拼图</h3>
|
||
</div>
|
||
</a>
|
||
<a href="home.html?cat=arts" class="category-large-card">
|
||
<img src="https://picsum.photos/600/400?random=arts" alt="Arts & Crafts">
|
||
<div class="category-overlay">
|
||
<h3 data-i18n="cat_arts">艺术手工</h3>
|
||
</div>
|
||
</a>
|
||
<a href="home.html?cat=blocks" class="category-large-card">
|
||
<img src="https://picsum.photos/600/400?random=blocks" alt="Building Blocks">
|
||
<div class="category-overlay">
|
||
<h3 data-i18n="cat_blocks">积木</h3>
|
||
</div>
|
||
</a>
|
||
<a href="home.html?cat=outdoor" class="category-large-card">
|
||
<img src="https://picsum.photos/600/400?random=outdoor" alt="Outdoor">
|
||
<div class="category-overlay">
|
||
<h3 data-i18n="cat_outdoor">户外玩具</h3>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Promotional Banner -->
|
||
<section class="promo-banner-section">
|
||
<div class="container">
|
||
<div class="promo-banner-large">
|
||
<img src="https://picsum.photos/1400/300?random=promo" alt="Promotion">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Age Categories -->
|
||
<section class="age-categories">
|
||
<div class="container">
|
||
<h2 class="section-title text-center" data-i18n="fun_for_all_ages">适合各年龄段</h2>
|
||
<div class="age-grid">
|
||
<a href="index.html?age=0-2" class="age-card">
|
||
<img src="https://picsum.photos/300/300?random=age1" alt="0-2 years">
|
||
<h3 data-i18n="age_0_2">0-2岁</h3>
|
||
</a>
|
||
<a href="index.html?age=3-4" class="age-card">
|
||
<img src="https://picsum.photos/300/300?random=age2" alt="3-4 years">
|
||
<h3 data-i18n="age_3_4">3-4岁</h3>
|
||
</a>
|
||
<a href="index.html?age=5-6" class="age-card">
|
||
<img src="https://picsum.photos/300/300?random=age3" alt="5-6 years">
|
||
<h3 data-i18n="age_5_6">5-6岁</h3>
|
||
</a>
|
||
<a href="index.html?age=7+" class="age-card">
|
||
<img src="https://picsum.photos/300/300?random=age4" alt="7+ years">
|
||
<h3 data-i18n="age_7_plus">7岁以上</h3>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Reviews Section -->
|
||
<section class="reviews-section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center" data-i18n="customer_reviews">用户评价</h2>
|
||
<div class="reviews-grid" id="reviewsGrid">
|
||
<!-- Reviews will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Instagram Feed -->
|
||
<section class="instagram-section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center" data-i18n="instagram_title">关注我们的Instagram</h2>
|
||
<p class="text-center" data-i18n="instagram_subtitle">#获取最新灵感</p>
|
||
<div class="instagram-grid">
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig1" alt="Instagram 1">
|
||
</a>
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig2" alt="Instagram 2">
|
||
</a>
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig3" alt="Instagram 3">
|
||
</a>
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig4" alt="Instagram 4">
|
||
</a>
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig5" alt="Instagram 5">
|
||
</a>
|
||
<a href="#" class="instagram-item">
|
||
<img src="https://picsum.photos/300/300?random=ig6" alt="Instagram 6">
|
||
</a>
|
||
</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>
|
||
|
||
<!-- Live Stream Float Button -->
|
||
<div class="live-float-btn" id="liveFloatBtn">
|
||
<div class="live-float-preview">
|
||
<video class="live-float-video" autoplay muted loop playsinline>
|
||
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4" type="video/mp4">
|
||
</video>
|
||
<div class="live-float-badge-top">
|
||
<img src="https://img11.360buyimg.com/imagetools/jfs/t1/9051/22/29284/11177/004e1903Fe9f1303e/4830ab8eae20319a.png" alt="live" class="live-icon-img">
|
||
<span class="live-viewers" id="floatViewers">1.8W观看</span>
|
||
</div>
|
||
<div class="live-float-title" data-i18n="live_float_title">vizee珍品直播</div>
|
||
</div>
|
||
<div class="live-float-info">
|
||
<div class="live-float-avatar">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
|
||
<circle cx="12" cy="12" r="10" fill="#e91e63"/>
|
||
<polygon points="10 8 16 12 10 16 10 8" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<div class="live-float-text">
|
||
<div class="live-float-name" data-i18n="live_float_name">vizee官方直播</div>
|
||
<div class="live-float-desc" data-i18n="live_float_desc">珍品官方直播，专业...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live Stream Modal -->
|
||
<div class="live-modal" id="liveModal">
|
||
<div class="live-modal-content">
|
||
<button class="live-modal-close" id="liveModalClose">×</button>
|
||
|
||
<!-- 视频主区域 -->
|
||
<div class="live-video-main">
|
||
<div class="live-video-container">
|
||
<video id="liveVideo" class="live-video-player" autoplay muted loop playsinline>
|
||
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
|
||
<!-- 顶部主播信息栏 -->
|
||
<div class="live-top-bar">
|
||
<div class="live-host-info">
|
||
<div class="host-avatar">
|
||
<img src="https://picsum.photos/40/40?random=host" alt="主播">
|
||
</div>
|
||
<div class="host-details">
|
||
<div class="host-name" id="liveHostName">直播间</div>
|
||
<div class="host-viewers">
|
||
<span id="liveViewerCount">1.2W</span> 人在线
|
||
</div>
|
||
</div>
|
||
<button class="btn-follow" id="followBtn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
</svg>
|
||
关注
|
||
</button>
|
||
</div>
|
||
<button class="btn-goto-platform-top" id="gotoPlatformBtnTop" style="display: none;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||
<polyline points="15 3 21 3 21 9"></polyline>
|
||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||
</svg>
|
||
前往<span id="platformNameTop">平台</span>观看
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 右侧互动按钮 -->
|
||
<div class="live-interaction-bar">
|
||
<button class="interaction-btn" id="likeBtn" title="点赞">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||
</svg>
|
||
<span id="likeCount">1.2W</span>
|
||
</button>
|
||
<button class="interaction-btn" title="评论">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
<span id="commentCount">8923</span>
|
||
</button>
|
||
<button class="interaction-btn" title="分享">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="18" cy="5" r="3"></circle>
|
||
<circle cx="6" cy="12" r="3"></circle>
|
||
<circle cx="18" cy="19" r="3"></circle>
|
||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
|
||
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
|
||
</svg>
|
||
<span>分享</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 弹幕容器 -->
|
||
<div class="danmaku-container" id="danmakuContainer"></div>
|
||
|
||
<!-- 底部聊天预览 -->
|
||
<div class="live-chat-preview" id="chatPreview">
|
||
<!-- 聊天消息将在这里滚动显示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧侧边栏 -->
|
||
<div class="live-sidebar-right">
|
||
<!-- Tab导航 -->
|
||
<div class="sidebar-tabs">
|
||
<button class="tab-btn active" data-tab="chat">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
<span data-i18n="live_tab_chat">聊天</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="products">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
||
</svg>
|
||
<span data-i18n="live_tab_products">商品</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tab内容 -->
|
||
<div class="sidebar-content">
|
||
<!-- 聊天Tab -->
|
||
<div class="tab-content active" id="chatTab">
|
||
<div class="chat-messages" id="chatMessages">
|
||
<!-- 聊天消息 -->
|
||
</div>
|
||
<div class="chat-input-container">
|
||
<input type="text" id="chatInput" data-i18n-placeholder="live_chat_placeholder" placeholder="说点什么...">
|
||
<button type="button" class="btn-send" id="sendMessageBtn">
|
||
发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品Tab -->
|
||
<div class="tab-content" id="productsTab">
|
||
<div class="live-products" id="liveProducts">
|
||
<!-- 商品列表 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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/live-float.js"></script>
|
||
<script src="assets/js/home.js"></script>
|
||
</body>
|
||
</html>
|