You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
669 lines
29 KiB
669 lines
29 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta http-equiv="expires" content="0">
|
|
<link rel="shortcut icon" href="dbqb_favicon.ico" />
|
|
<link rel="Bookmark" href="dbqb_favicon.ico" />
|
|
<meta http-equiv="keywords"
|
|
content="弘历夺宝奇兵,homilychart,homilylink,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈">
|
|
<meta http-equiv="description" content="HomilyLink">
|
|
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title>
|
|
<!-- 引入Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- 配置Tailwind自定义颜色和字体（与原页面保持一致） -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#10B981',
|
|
accent: '#8B5CF6',
|
|
dark: '#1E293B',
|
|
light: '#F8FAFC'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.card-hover {
|
|
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
|
|
}
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* 全局动画定义 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* 平滑滚动 */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 视频容器比例控制 */
|
|
.video-container {
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
/* 16:9 比例 */
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-radius: 1.5rem;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.video-container iframe,
|
|
.video-container video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
/* 图片展示样式 */
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.image-item {
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.image-item img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.image-item:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.image-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.image-caption {
|
|
padding: 1rem;
|
|
background-color: white;
|
|
}
|
|
|
|
/* 图片查看器 */
|
|
.image-viewer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 100;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.image-viewer.active {
|
|
display: flex;
|
|
}
|
|
|
|
.viewer-content {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
position: relative;
|
|
}
|
|
|
|
.viewer-image {
|
|
max-width: 100%;
|
|
max-height: 80vh;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.viewer-caption {
|
|
color: white;
|
|
text-align: center;
|
|
margin-top: 1rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.close-viewer {
|
|
position: absolute;
|
|
top: -40px;
|
|
right: 0;
|
|
color: white;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.viewer-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
transform: translateY(-50%);
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.viewer-nav button {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans bg-light text-dark">
|
|
<!-- 导航栏 -->
|
|
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
<a href="#" class="flex items-center space-x-2">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
|
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
|
|
</div>
|
|
<span
|
|
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">夺宝奇兵-操作指南</span>
|
|
</a>
|
|
|
|
<!-- 桌面导航 -->
|
|
<nav class="hidden md:flex items-center space-x-6">
|
|
<a href="#video-guide" class="font-medium hover:text-primary transition-colors">视频指南</a>
|
|
<a href="#image-guide" class="font-medium hover:text-primary transition-colors">图片说明</a>
|
|
<a href="./hkhcdbqbDownload.html" class="font-medium hover:text-primary transition-colors">软件下载</a>
|
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank"
|
|
class="px-5 py-2 rounded-full gradient-bg text-white font-medium hover:shadow-lg transition-all">联系支持</a>
|
|
</nav>
|
|
|
|
<!-- 移动端菜单按钮 -->
|
|
<button id="menuBtn" class="md:hidden text-xl">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 移动端导航菜单 -->
|
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in">
|
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
|
|
<a href="#video-guide" class="font-medium py-2 hover:text-primary transition-colors">视频指南</a>
|
|
<a href="#image-guide" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a>
|
|
<a href="hcdbqb-download.asp" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a>
|
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵指南我需要帮助" target="_blank"
|
|
class="py-2 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg transition-all">联系支持</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 英雄区域 -->
|
|
<section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white">
|
|
<div class="container mx-auto max-w-6xl text-center">
|
|
<div class="animate-fade-in">
|
|
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold leading-tight text-shadow mb-6">
|
|
操作指南中心
|
|
</h1>
|
|
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
通过视频以及图文说明，教你如何使用夺宝奇兵软件以及如何观看直播和观看重播！
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a href="#video-guide"
|
|
class="px-8 py-3 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5">
|
|
观看视频教程
|
|
</a>
|
|
<a href="#image-guide"
|
|
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
|
|
查看图文说明
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 视频指南区域 -->
|
|
<section id="video-guide" class="py-20 px-4 bg-white">
|
|
<div class="container mx-auto max-w-5xl">
|
|
<div class="text-center mb-12 animate-fade-in">
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">HomilyLink指南视频</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">详细的视频教程，如何体验夺宝奇兵，如何听课，如何看重播！</p>
|
|
</div>
|
|
|
|
<!-- 主视频播放窗口 -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 animate-fade-in delay-100">
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-4">HomilyLink操作指南 | 课程直播以及重播指南</h3>
|
|
<div class="video-container">
|
|
<!-- 兼容性视频播放器 -->
|
|
<video id="guideVideo" controls poster="https://d31zlh4on95l9h.cloudfront.net/images/7da138ae80e260196f892a1fd813c66d.jpg" controlsList="nodownload"
|
|
class="w-full"></video>
|
|
</div>
|
|
<div class="mt-6 flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p class="text-gray-600">时长: 02:14</p>
|
|
<p class="text-gray-500 text-sm mt-1">HomilyLink操作指南 </p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button
|
|
class="flex items-center space-x-1 px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
|
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 30px;height: 30px;">
|
|
<span><a href="https://api.whatsapp.com/send?phone=6588792879&text=进HomilyLink听课需要帮助"
|
|
target="_blank" class="text-gray-400 transition-colors"
|
|
style="color: black">点击寻求帮助</a></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 图片说明区域 -->
|
|
<section id="image-guide" class="py-20 px-4 bg-gray-50">
|
|
<div class="container mx-auto max-w-6xl" style="display: none;">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">操作步骤图解</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">详细的图文说明，带您一步步完成各项操作设置</p>
|
|
</div>
|
|
|
|
<!-- 图片过滤标签 -->
|
|
<div class="flex flex-wrap justify-center gap-3 mb-10 animate-fade-in delay-100">
|
|
<button class="filter-btn active px-5 py-2 rounded-full bg-primary text-white font-medium"
|
|
data-filter="all">全部步骤</button>
|
|
<button
|
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors"
|
|
data-filter="setup">安装登录</button>
|
|
<button
|
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors"
|
|
data-filter="operation">观看直播</button>
|
|
<button
|
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors"
|
|
data-filter="advanced">观看重播</button>
|
|
</div>
|
|
|
|
<!-- 图片网格 -->
|
|
<div class="image-grid animate-fade-in delay-200">
|
|
<!-- 安装设置 -->
|
|
<div class="image-item" data-category="setup" data-caption="步骤1：开箱与配件检查">
|
|
<img src="https://picsum.photos/seed/setup1/600/400" alt="开箱与配件检查">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤1：开箱与配件检查</h4>
|
|
<p class="text-gray-600 text-sm mt-1">检查包装内物品是否完整，包含主机、电源线、数据线和说明书</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="image-item" data-category="setup" data-caption="步骤2：设备连接与安装">
|
|
<img src="https://picsum.photos/seed/setup2/600/400" alt="设备连接与安装">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤2：设备连接与安装</h4>
|
|
<p class="text-gray-600 text-sm mt-1">按照图示连接电源和数据线，固定设备到合适位置</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基本操作 -->
|
|
<div class="image-item" data-category="operation" data-caption="步骤3：开机与初始设置">
|
|
<img src="https://picsum.photos/seed/operate1/600/400" alt="开机与初始设置">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤3：开机与初始设置</h4>
|
|
<p class="text-gray-600 text-sm mt-1">首次开机后按照向导完成语言、网络等基本设置</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="image-item" data-category="operation" data-caption="步骤4：主界面功能介绍">
|
|
<img src="https://picsum.photos/seed/operate2/600/400" alt="主界面功能介绍">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤4：主界面功能介绍</h4>
|
|
<p class="text-gray-600 text-sm mt-1">了解主界面布局和各功能模块的位置与作用</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 高级功能 -->
|
|
<div class="image-item" data-category="advanced" data-caption="步骤5：用户权限管理">
|
|
<img src="https://picsum.photos/seed/advanced1/600/400" alt="用户权限管理">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤5：用户权限管理</h4>
|
|
<p class="text-gray-600 text-sm mt-1">如何创建和管理不同权限的用户账户</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="image-item" data-category="advanced" data-caption="步骤6：数据备份与恢复">
|
|
<img src="https://picsum.photos/seed/advanced2/600/400" alt="数据备份与恢复">
|
|
<div class="image-caption">
|
|
<h4 class="font-medium">步骤6：数据备份与恢复</h4>
|
|
<p class="text-gray-600 text-sm mt-1">设置自动备份和手动备份，以及数据恢复方法</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 图片查看器 -->
|
|
<div class="image-viewer" id="imageViewer">
|
|
<div class="viewer-content">
|
|
<span class="close-viewer" id="closeViewer">×</span>
|
|
<div class="viewer-nav">
|
|
<button id="prevImage"><i class="fa fa-chevron-left"></i></button>
|
|
<button id="nextImage"><i class="fa fa-chevron-right"></i></button>
|
|
</div>
|
|
<img src="" alt="" class="viewer-image" id="viewerImage">
|
|
<div class="viewer-caption" id="viewerCaption"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-dark text-white py-12 px-4">
|
|
<div class="container mx-auto max-w-6xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<div class="flex items-center space-x-2 mb-6">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
|
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
|
|
</div>
|
|
<span class="text-xl font-bold">夺宝奇兵</span>
|
|
</div>
|
|
<p class="text-gray-400 mb-6">
|
|
AI炒股时代 机构界的黑科技！
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#"
|
|
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
|
|
<i class="fa fa-facebook"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
|
|
<i class="fa fa-instagram"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-lg font-semibold mb-6">产品</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解弘历云版软件" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解HomilyChart"
|
|
target="_blank" class="text-gray-400 hover:text-white transition-colors">HomilyChart</a>
|
|
</li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解夺宝奇兵" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解博股会员"
|
|
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解最新软件"
|
|
class="text-gray-400 hover:text-white transition-colors">最新软件</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-lg font-semibold mb-6">公司</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-lg font-semibold mb-6">支持</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="./hkhcdbqbGuide.html" class="text-gray-400 hover:text-white transition-colors">帮助中心</a>
|
|
</li>
|
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我有问题" target="_blank"
|
|
class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">© Copyright 2026.Capitalmaster Pte Ltd All Rights
|
|
Reserved.<br /></p>
|
|
<div class="flex space-x-6">
|
|
如需帮助，请及时联系我们！
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// 移动端菜单切换
|
|
const menuBtn = document.getElementById('menuBtn');
|
|
const mobileMenu = document.getElementById('mobileMenu');
|
|
|
|
menuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
// 切换图标
|
|
const icon = menuBtn.querySelector('i');
|
|
if (icon.classList.contains('fa-bars')) {
|
|
icon.classList.replace('fa-bars', 'fa-times');
|
|
} else {
|
|
icon.classList.replace('fa-times', 'fa-bars');
|
|
}
|
|
});
|
|
|
|
// 导航栏滚动效果
|
|
window.addEventListener('scroll', () => {
|
|
const header = document.querySelector('header');
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('py-2', 'shadow');
|
|
header.classList.remove('py-3');
|
|
} else {
|
|
header.classList.add('py-3');
|
|
header.classList.remove('py-2', 'shadow');
|
|
}
|
|
});
|
|
|
|
// 图片查看器功能
|
|
const imageViewer = document.getElementById('imageViewer');
|
|
const viewerImage = document.getElementById('viewerImage');
|
|
const viewerCaption = document.getElementById('viewerCaption');
|
|
const closeViewer = document.getElementById('closeViewer');
|
|
const prevImage = document.getElementById('prevImage');
|
|
const nextImage = document.getElementById('nextImage');
|
|
const imageItems = document.querySelectorAll('.image-item');
|
|
let currentImageIndex = 0;
|
|
let filteredImages = Array.from(imageItems);
|
|
|
|
// 打开图片查看器
|
|
imageItems.forEach((item) => {
|
|
item.addEventListener('click', () => {
|
|
currentImageIndex = filteredImages.indexOf(item);
|
|
updateViewer();
|
|
imageViewer.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
});
|
|
|
|
// 关闭图片查看器
|
|
closeViewer.addEventListener('click', () => {
|
|
imageViewer.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
// 点击查看器外部关闭
|
|
imageViewer.addEventListener('click', (e) => {
|
|
if (e.target === imageViewer) {
|
|
imageViewer.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
// 上一张/下一张图片
|
|
prevImage.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length;
|
|
updateViewer();
|
|
});
|
|
|
|
nextImage.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
currentImageIndex = (currentImageIndex + 1) % filteredImages.length;
|
|
updateViewer();
|
|
});
|
|
|
|
// 更新查看器内容
|
|
function updateViewer() {
|
|
const currentItem = filteredImages[currentImageIndex];
|
|
const imgSrc = currentItem.querySelector('img').src;
|
|
const caption = currentItem.dataset.caption;
|
|
|
|
viewerImage.src = imgSrc;
|
|
viewerImage.alt = caption;
|
|
viewerCaption.textContent = caption;
|
|
}
|
|
|
|
// 图片过滤功能
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
// 更新按钮样式
|
|
filterBtns.forEach(b => {
|
|
b.classList.remove('active', 'bg-primary', 'text-white');
|
|
b.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-100');
|
|
});
|
|
btn.classList.add('active', 'bg-primary', 'text-white');
|
|
btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-100');
|
|
|
|
const filter = btn.dataset.filter;
|
|
|
|
// 过滤图片
|
|
filteredImages = [];
|
|
imageItems.forEach(item => {
|
|
if (filter === 'all' || item.dataset.category === filter) {
|
|
item.style.display = 'block';
|
|
filteredImages.push(item);
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 滚动动画
|
|
const animateOnScroll = () => {
|
|
const elements = document.querySelectorAll('.animate-fade-in');
|
|
|
|
elements.forEach(element => {
|
|
const elementPosition = element.getBoundingClientRect().top;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
if (elementPosition < windowHeight - 100) {
|
|
element.style.opacity = '1';
|
|
element.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
};
|
|
|
|
// 初始加载和滚动时执行动画
|
|
window.addEventListener('load', animateOnScroll);
|
|
window.addEventListener('scroll', animateOnScroll);
|
|
|
|
// 键盘导航支持
|
|
document.addEventListener('keydown', (e) => {
|
|
if (imageViewer.classList.contains('active')) {
|
|
if (e.key === 'Escape') {
|
|
imageViewer.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
} else if (e.key === 'ArrowLeft') {
|
|
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length;
|
|
updateViewer();
|
|
} else if (e.key === 'ArrowRight') {
|
|
currentImageIndex = (currentImageIndex + 1) % filteredImages.length;
|
|
updateViewer();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// 等页面完全加载后再执行（避免播放器还没渲染好）
|
|
window.onload = function () {
|
|
const video = document.getElementById('guideVideo');
|
|
// 这里放你的真实视频地址（本地/网络都可以）
|
|
const realVideoSrc = "https://hc.homilychart.com/hc/250121/img/homilylink-guide.mp4";
|
|
|
|
// 动态添加视频源（支持多格式，兼容性更好）
|
|
const mp4Source = document.createElement('source');
|
|
mp4Source.src = realVideoSrc;
|
|
mp4Source.type = 'video/mp4';
|
|
|
|
video.appendChild(mp4Source);
|
|
// 触发播放器加载（可选，确保视频能正常播放）
|
|
video.load();
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|