fix: 修复文旅订单班资源路径和交互功能
详细说明: - 修复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:
@@ -19,9 +19,6 @@ const app = express();
|
|||||||
const PORT = config.server.port || 4155;
|
const PORT = config.server.port || 4155;
|
||||||
|
|
||||||
// 静态文件服务
|
// 静态文件服务
|
||||||
app.use('/css', express.static('css'));
|
|
||||||
app.use('/js', express.static('js'));
|
|
||||||
app.use('/data', express.static('data'));
|
|
||||||
app.use('/order-classes', express.static('order-classes'));
|
app.use('/order-classes', express.static('order-classes'));
|
||||||
|
|
||||||
// 为所有订单班提供独立的静态文件服务
|
// 为所有订单班提供独立的静态文件服务
|
||||||
@@ -56,7 +53,20 @@ app.get('/', (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 处理 /order-class/*.html 形式的请求(wenlu 子页面)- 必须放在前面
|
// 处理 /order-class/wenlu/*.html 形式的请求
|
||||||
|
app.get('/order-class/wenlu/:page', (req, res) => {
|
||||||
|
const page = req.params.page;
|
||||||
|
const filePath = path.join(__dirname, 'order-classes', 'wenlu', page);
|
||||||
|
|
||||||
|
if (fs.existsSync(filePath)) {
|
||||||
|
let html = fs.readFileSync(filePath, 'utf8');
|
||||||
|
res.send(html);
|
||||||
|
} else {
|
||||||
|
res.status(404).send(generate404Page(`wenlu/${page}`));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理 /order-class/*.html 形式的请求(wenlu 子页面)- 兼容旧路径
|
||||||
app.get('/order-class/:page', (req, res, next) => {
|
app.get('/order-class/:page', (req, res, next) => {
|
||||||
const page = req.params.page;
|
const page = req.params.page;
|
||||||
// 只处理 .html 文件
|
// 只处理 .html 文件
|
||||||
|
|||||||
@@ -9,15 +9,15 @@
|
|||||||
|
|
||||||
<!-- 页面加载动画 -->
|
<!-- 页面加载动画 -->
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
|
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
|
|
||||||
<!-- 移动端优化 -->
|
<!-- 移动端优化 -->
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
|
|
||||||
<!-- 性能优化 -->
|
<!-- 性能优化 -->
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
@@ -415,7 +415,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Detailed Budget Breakdown -->
|
<!-- Detailed Budget Breakdown -->
|
||||||
<section class="py-20 bg-gray-50" style="background-image: url('../data/订单班文档资料/文旅/notion文稿/image/财务分析.jpg'); background-size: cover; background-position: center;">
|
<section class="py-20 bg-gray-50" style="background-image: url('data/订单班文档资料/文旅/notion文稿/image/财务分析.jpg'); background-size: cover; background-position: center;">
|
||||||
<div class="bg-gray-50/95 backdrop-blur-sm">
|
<div class="bg-gray-50/95 backdrop-blur-sm">
|
||||||
<div class="container mx-auto px-6">
|
<div class="container mx-auto px-6">
|
||||||
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">支出预算明细分析</h2>
|
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">支出预算明细分析</h2>
|
||||||
@@ -1099,7 +1099,7 @@
|
|||||||
counterObserver.observe(el);
|
counterObserver.observe(el);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
<title>展会介绍 - 2024长三角国际新能源汽车展</title>
|
<title>展会介绍 - 2024长三角国际新能源汽车展</title>
|
||||||
|
|
||||||
<!-- 样式表 -->
|
<!-- 样式表 -->
|
||||||
<link rel="stylesheet" href="../css/animations.css">
|
<link rel="stylesheet" href="css/animations.css">
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
<!-- 字体 -->
|
<!-- 字体 -->
|
||||||
@@ -17,15 +17,15 @@
|
|||||||
|
|
||||||
<!-- 页面加载动画 -->
|
<!-- 页面加载动画 -->
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
|
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
|
|
||||||
<!-- 移动端优化 -->
|
<!-- 移动端优化 -->
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
|
|
||||||
<!-- 性能优化 -->
|
<!-- 性能优化 -->
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
@@ -203,7 +203,7 @@
|
|||||||
<!-- Venue Information -->
|
<!-- Venue Information -->
|
||||||
<section class="py-16 bg-gray-50 relative overflow-hidden">
|
<section class="py-16 bg-gray-50 relative overflow-hidden">
|
||||||
<!-- 背景图片 -->
|
<!-- 背景图片 -->
|
||||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../data/订单班文档资料/文旅/notion文稿/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
|
<div class="absolute inset-0 opacity-5" style="background-image: url('data/订单班文档资料/文旅/notion文稿/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
|
||||||
|
|
||||||
<div class="container mx-auto px-6 relative z-10">
|
<div class="container mx-auto px-6 relative z-10">
|
||||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
||||||
@@ -300,7 +300,7 @@
|
|||||||
<!-- 整车展区 -->
|
<!-- 整车展区 -->
|
||||||
<div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 animate-fadeInUp animation-delay-200">
|
<div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 animate-fadeInUp animation-delay-200">
|
||||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-blue-400 to-blue-600">
|
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-blue-400 to-blue-600">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/3.小米汽车.jpg" alt="整车展示" class="w-full h-full object-cover opacity-60">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/3.小米汽车.jpg" alt="整车展示" class="w-full h-full object-cover opacity-60">
|
||||||
<div class="absolute inset-0 flex items-center justify-center">
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
<i class="fas fa-car-side text-5xl text-white"></i>
|
<i class="fas fa-car-side text-5xl text-white"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -337,7 +337,7 @@
|
|||||||
<!-- 核心零部件展区 -->
|
<!-- 核心零部件展区 -->
|
||||||
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 animate-fadeInUp animation-delay-400">
|
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 animate-fadeInUp animation-delay-400">
|
||||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-green-400 to-green-600">
|
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-green-400 to-green-600">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/Whisk_8236005bb2.jpg" alt="核心零部件" class="w-full h-full object-cover opacity-60">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_8236005bb2.jpg" alt="核心零部件" class="w-full h-full object-cover opacity-60">
|
||||||
<div class="absolute inset-0 flex items-center justify-center">
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
<i class="fas fa-battery-full text-5xl text-white"></i>
|
<i class="fas fa-battery-full text-5xl text-white"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -374,7 +374,7 @@
|
|||||||
<!-- 智能交通展区 -->
|
<!-- 智能交通展区 -->
|
||||||
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 animate-fadeInUp animation-delay-600">
|
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 animate-fadeInUp animation-delay-600">
|
||||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-purple-400 to-purple-600">
|
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-purple-400 to-purple-600">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/Whisk_5c4b912ea7.jpg" alt="智能交通" class="w-full h-full object-cover opacity-60">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_5c4b912ea7.jpg" alt="智能交通" class="w-full h-full object-cover opacity-60">
|
||||||
<div class="absolute inset-0 flex items-center justify-center">
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
<i class="fas fa-network-wired text-5xl text-white"></i>
|
<i class="fas fa-network-wired text-5xl text-white"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -411,7 +411,7 @@
|
|||||||
<!-- 配套服务展区 -->
|
<!-- 配套服务展区 -->
|
||||||
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 animate-fadeInUp animation-delay-800">
|
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 animate-fadeInUp animation-delay-800">
|
||||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-orange-400 to-orange-600">
|
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-orange-400 to-orange-600">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/Whisk_2a9b622636.jpg" alt="配套服务" class="w-full h-full object-cover opacity-60">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/Whisk_2a9b622636.jpg" alt="配套服务" class="w-full h-full object-cover opacity-60">
|
||||||
<div class="absolute inset-0 flex items-center justify-center">
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
<i class="fas fa-charging-station text-5xl text-white"></i>
|
<i class="fas fa-charging-station text-5xl text-white"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -729,7 +729,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- JavaScript -->
|
<!-- JavaScript -->
|
||||||
<script src="../js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// 页面加载动画
|
// 页面加载动画
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
@@ -805,7 +805,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -427,8 +427,8 @@
|
|||||||
|
|
||||||
<!-- 展馆布置图 -->
|
<!-- 展馆布置图 -->
|
||||||
<div class="mt-12 animate-fadeInUp animation-delay-700">
|
<div class="mt-12 animate-fadeInUp animation-delay-700">
|
||||||
<div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden">
|
<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 h-auto hover:scale-105 transition-transform duration-700">
|
<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">
|
<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>
|
<p class="text-center font-semibold"><i class="fas fa-map-marked-alt mr-2"></i>展馆3D全景布置图 - 点击查看详情</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -445,7 +445,7 @@
|
|||||||
<div class="container mx-auto px-6 relative z-10" title="精彩瞬间展示区">
|
<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>
|
<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="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">
|
<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="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">
|
<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>
|
</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">
|
<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="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">
|
<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>
|
</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">
|
<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="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">
|
<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="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">
|
<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="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">
|
<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>
|
||||||
</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">
|
<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="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">
|
<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>
|
||||||
</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">
|
<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="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">
|
<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>
|
||||||
</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">
|
<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="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">
|
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
|
||||||
@@ -593,6 +593,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</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/nav-component.js"></script>
|
||||||
<script src="js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<title>营销方案 - 2024长三角国际新能源汽车展</title>
|
<title>营销方案 - 2024长三角国际新能源汽车展</title>
|
||||||
|
|
||||||
<!-- 样式表 -->
|
<!-- 样式表 -->
|
||||||
<link rel="stylesheet" href="../css/animations.css">
|
<link rel="stylesheet" href="css/animations.css">
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
<!-- 字体 -->
|
<!-- 字体 -->
|
||||||
@@ -17,15 +17,15 @@
|
|||||||
|
|
||||||
<!-- 页面加载动画 -->
|
<!-- 页面加载动画 -->
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
|
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
|
|
||||||
<!-- 移动端优化 -->
|
<!-- 移动端优化 -->
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
|
|
||||||
<!-- 性能优化 -->
|
<!-- 性能优化 -->
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
||||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
<div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||||||
<!-- 背景图片 -->
|
<!-- 背景图片 -->
|
||||||
<div class="absolute inset-0 opacity-10" style="background-image: url('../data/订单班文档资料/文旅/notion文稿/image/Whisk_1c05424f7f.jpg'); background-size: cover; background-position: center;"></div>
|
<div class="absolute inset-0 opacity-10" style="background-image: url('data/订单班文档资料/文旅/notion文稿/image/Whisk_1c05424f7f.jpg'); background-size: cover; background-position: center;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container mx-auto px-6 relative z-10">
|
<div class="container mx-auto px-6 relative z-10">
|
||||||
@@ -172,7 +172,7 @@
|
|||||||
<!-- Marketing Strategy Timeline -->
|
<!-- Marketing Strategy Timeline -->
|
||||||
<section class="py-16 bg-white relative overflow-hidden">
|
<section class="py-16 bg-white relative overflow-hidden">
|
||||||
<!-- 背景装饰 -->
|
<!-- 背景装饰 -->
|
||||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../data/订单班文档资料/文旅/notion文稿/image/Whisk_4aabd94ef3.jpg'); background-size: cover; background-position: center;"></div>
|
<div class="absolute inset-0 opacity-5" style="background-image: url('data/订单班文档资料/文旅/notion文稿/image/Whisk_4aabd94ef3.jpg'); background-size: cover; background-position: center;"></div>
|
||||||
|
|
||||||
<div class="container mx-auto px-6 relative z-10">
|
<div class="container mx-auto px-6 relative z-10">
|
||||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
||||||
@@ -787,7 +787,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -13,10 +13,10 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -655,8 +655,8 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Register GSAP plugins
|
// Register GSAP plugins
|
||||||
|
|||||||
@@ -4,23 +4,23 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
||||||
<title>策划概述 - 2024长三角国际新能源汽车展</title>
|
<title>策划概述 - 2024长三角国际新能源汽车展</title>
|
||||||
<link rel="stylesheet" href="../css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<link rel="stylesheet" href="../css/animations.css">
|
<link rel="stylesheet" href="css/animations.css">
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
|
||||||
<!-- 页面加载动画 -->
|
<!-- 页面加载动画 -->
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
|
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
|
|
||||||
<!-- 移动端优化 -->
|
<!-- 移动端优化 -->
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
|
|
||||||
<!-- 性能优化 -->
|
<!-- 性能优化 -->
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
@@ -102,7 +102,7 @@
|
|||||||
<!-- Page Header -->
|
<!-- Page Header -->
|
||||||
<section class="relative bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white pt-24 pb-16 overflow-hidden">
|
<section class="relative bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white pt-24 pb-16 overflow-hidden">
|
||||||
<div class="absolute inset-0">
|
<div class="absolute inset-0">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/博览会.jpg" alt="博览会背景" class="w-full h-full object-cover opacity-20">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/博览会.jpg" alt="博览会背景" class="w-full h-full object-cover opacity-20">
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-purple-900/50"></div>
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-purple-900/50"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
<div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||||
@@ -233,7 +233,7 @@
|
|||||||
<!-- Objectives Section -->
|
<!-- Objectives Section -->
|
||||||
<section class="py-16 bg-gradient-to-br from-gray-50 via-purple-50 to-indigo-50 relative overflow-hidden">
|
<section class="py-16 bg-gradient-to-br from-gray-50 via-purple-50 to-indigo-50 relative overflow-hidden">
|
||||||
<div class="absolute inset-0 opacity-5">
|
<div class="absolute inset-0 opacity-5">
|
||||||
<img src="../data/订单班文档资料/文旅/notion文稿/image/展馆布置图.jpeg" alt="展馆布置" class="w-full h-full object-cover">
|
<img src="data/订单班文档资料/文旅/notion文稿/image/展馆布置图.jpeg" alt="展馆布置" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<div class="container mx-auto px-6 relative z-10">
|
<div class="container mx-auto px-6 relative z-10">
|
||||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
||||||
@@ -493,7 +493,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -9,15 +9,15 @@
|
|||||||
|
|
||||||
<!-- 页面加载动画 -->
|
<!-- 页面加载动画 -->
|
||||||
<!-- 错误处理(需要最早加载) -->
|
<!-- 错误处理(需要最早加载) -->
|
||||||
<script src="../js/error-handler.js"></script>
|
<script src="js/error-handler.js"></script>
|
||||||
|
|
||||||
<script src="../js/page-loader.js"></script>
|
<script src="js/page-loader.js"></script>
|
||||||
|
|
||||||
<!-- 移动端优化 -->
|
<!-- 移动端优化 -->
|
||||||
<script src="../js/mobile-optimize.js"></script>
|
<script src="js/mobile-optimize.js"></script>
|
||||||
|
|
||||||
<!-- 性能优化 -->
|
<!-- 性能优化 -->
|
||||||
<script src="../js/performance-optimizer.js"></script>
|
<script src="js/performance-optimizer.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
@@ -462,7 +462,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Detailed Risk Analysis -->
|
<!-- Detailed Risk Analysis -->
|
||||||
<section class="py-20 bg-gray-50" style="background-image: url('../data/订单班文档资料/文旅/notion文稿/image/风险管理.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
|
<section class="py-20 bg-gray-50" style="background-image: url('data/订单班文档资料/文旅/notion文稿/image/风险管理.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
|
||||||
<div class="bg-gray-50/95 backdrop-blur-sm py-20">
|
<div class="bg-gray-50/95 backdrop-blur-sm py-20">
|
||||||
<div class="container mx-auto px-6">
|
<div class="container mx-auto px-6">
|
||||||
<h2 class="text-4xl font-bold text-center mb-12">重点风险详细分析</h2>
|
<h2 class="text-4xl font-bold text-center mb-12">重点风险详细分析</h2>
|
||||||
@@ -1052,7 +1052,7 @@
|
|||||||
progressObserver.observe(bar);
|
progressObserver.observe(bar);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="../js/nav-component.js"></script>
|
<script src="js/nav-component.js"></script>
|
||||||
<script src="../js/back-to-top.js"></script>
|
<script src="js/back-to-top.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user