247 lines
14 KiB
HTML
247 lines
14 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="live_page_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/live.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="live-page">
|
||
<div class="container">
|
||
<div class="live-wrapper">
|
||
<!-- Left: Video Player -->
|
||
<div class="live-video-section">
|
||
<div class="live-video-container">
|
||
<!-- Video Player Placeholder -->
|
||
<div class="video-player" id="videoPlayer">
|
||
<div class="video-placeholder">
|
||
<div class="live-indicator">
|
||
<span class="live-dot"></span>
|
||
<span data-i18n="live_status">🔴 直播中</span>
|
||
</div>
|
||
<div class="play-button">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polygon points="10 8 16 12 10 16 10 8" fill="currentColor"></polygon>
|
||
</svg>
|
||
</div>
|
||
<p class="video-info" data-i18n="live_video_title">商品展示直播</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video Stats -->
|
||
<div class="video-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-icon">👁️</span>
|
||
<span class="stat-value" id="viewerCount">1,234</span>
|
||
<span class="stat-label" data-i18n="live_viewers">观看</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-icon">👍</span>
|
||
<span class="stat-value" id="likeCount">567</span>
|
||
<span class="stat-label" data-i18n="live_likes">点赞</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-icon">💬</span>
|
||
<span class="stat-value" id="messageCount">89</span>
|
||
<span class="stat-label" data-i18n="live_messages">消息</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video Description -->
|
||
<div class="video-description">
|
||
<h2 data-i18n="live_description_title">直播介绍</h2>
|
||
<p data-i18n="live_description_text">
|
||
欢迎来到vizee为之甄选直播间！今天我们将为您展示最新的儿童益智玩具，包括艺术手工、拼图、桌游等多个品类。主播会详细介绍每款产品的特点、使用方法，并解答您的疑问。直播期间还有专属优惠和抽奖活动，不要错过！
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Chat & Products -->
|
||
<div class="live-sidebar">
|
||
<!-- Tab Navigation -->
|
||
<div class="sidebar-tabs">
|
||
<button class="tab-btn active" data-tab="chat">
|
||
<span data-i18n="live_tab_chat">聊天</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="products">
|
||
<span data-i18n="live_tab_products">商品</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Chat Tab -->
|
||
<div class="tab-content active" id="chatTab">
|
||
<div class="chat-container">
|
||
<div class="chat-messages" id="chatMessages">
|
||
<!-- Chat messages will be loaded here -->
|
||
</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" aria-label="Send message">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Products Tab -->
|
||
<div class="tab-content" id="productsTab">
|
||
<div class="live-products" id="liveProducts">
|
||
<!-- Products will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-section">
|
||
<h3 data-i18n="footer_about">关于我们</h3>
|
||
<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-section">
|
||
<h3 data-i18n="footer_help">帮助中心</h3>
|
||
<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-section">
|
||
<h3 data-i18n="footer_service">客户服务</h3>
|
||
<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-section">
|
||
<h3 data-i18n="footer_follow">关注我们</h3>
|
||
<div class="social-links">
|
||
<a href="#" aria-label="Facebook">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#" aria-label="Instagram">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p data-i18n="footer_copyright">© 2024 vizee为之甄选. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<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.js"></script>
|
||
</body>
|
||
</html>
|