Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复文旅订单班资源路径和交互功能

Browse Source 
详细说明:
- 修复app.js路由,支持/order-class/wenlu/*.html格式访问
- 修复所有子页面的资源路径(js/css/data从../改为相对路径)
- 为index.html添加图片点击放大查看功能
- 为精彩瞬间Gallery区域所有图片添加点击放大功能
- 优化展馆布置图尺寸,限制最大高度为600px
- 修复文件: budget.html, exhibition.html, marketing.html, operation.html, overview.html, risk.html, index.html
- 影响模块: 文旅订单班展示系统,路由系统,图片交互

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-10-09 12:00:43 +08:00
parent cb9d459db4
commit 60216833a0
8 changed files with 110 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web_frontend/web_result/order-classes/wenlu/index.html
View File

@@ -427,8 +427,8 @@
<!-- 展馆布置图 -->
<div class="mt-12 animate-fadeInUp animation-delay-700">
<div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden">
<img src="data/订单班文档资料/文旅/notion文稿/image/展馆布置图.jpeg" alt="展馆布置图" class="w-full h-auto hover:scale-105 transition-transform duration-700">
<div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden cursor-pointer group" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/展馆布置图.jpeg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/展馆布置图.jpeg" alt="展馆布置图" class="w-full max-h-[600px] object-contain group-hover:scale-105 transition-transform duration-700">
<div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
<p class="text-center font-semibold"><i class="fas fa-map-marked-alt mr-2"></i>展馆3D全景布置图 - 点击查看详情</p>
</div>
@@ -445,7 +445,7 @@
<div class="container mx-auto px-6 relative z-10" title="精彩瞬间展示区">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12 animate-fadeInUp">精彩瞬间</h2>
<div class="grid md:grid-cols-3 gap-6 mb-8">
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/展会内部参观.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/展会内部参观.jpg" alt="展会内部" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
@@ -455,7 +455,7 @@
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/签到.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/签到.jpg" alt="签到处" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
@@ -465,7 +465,7 @@
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/3.小米汽车.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/3.小米汽车.jpg" alt="展品展示" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
@@ -478,7 +478,7 @@
<!-- 更多图片展示 -->
<div class="grid md:grid-cols-4 gap-4">
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-800">
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-800 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/Whisk_03282ab7e5.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_03282ab7e5.jpg" alt="展品1" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
<div class="absolute inset-0 bg-gradient-to-t from-purple-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
@@ -486,7 +486,7 @@
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-900">
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-900 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/Whisk_15f65339bb.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_15f65339bb.jpg" alt="展品2" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
<div class="absolute inset-0 bg-gradient-to-t from-indigo-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
@@ -494,7 +494,7 @@
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1000">
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1000 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/Whisk_192cdc54bc.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_192cdc54bc.jpg" alt="展品3" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
<div class="absolute inset-0 bg-gradient-to-t from-blue-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
@@ -502,7 +502,7 @@
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1100">
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1100 cursor-pointer" onclick="openImageModal('data/订单班文档资料/文旅/notion文稿/image/Whisk_1c05424f7f.jpg')">
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_1c05424f7f.jpg" alt="展品4" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
<div class="absolute inset-0 bg-gradient-to-t from-cyan-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
@@ -593,6 +593,41 @@
</div>
</footer>
<!-- 图片放大查看模态框 -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4" onclick="closeImageModal()">
<div class="relative max-w-7xl max-h-screen">
<button onclick="closeImageModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors">
<i class="fas fa-times text-3xl"></i>
</button>
<img id="modalImage" src="" alt="放大查看" class="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl">
</div>
</div>
<script>
// 图片模态框功能
function openImageModal(imageSrc) {
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
modalImage.src = imageSrc;
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
event.stopPropagation();
}
function closeImageModal() {
const modal = document.getElementById('imageModal');
modal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
// ESC键关闭模态框
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeImageModal();
}
});
</script>
<script src="js/nav-component.js"></script>
<script src="js/back-to-top.js"></script>
<script src="js/main.js"></script>