258 lines
9.4 KiB
HTML
258 lines
9.4 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>订单班AI生成结果</title>
|
|||
|
|
|
|||
|
|
<!-- Tailwind CSS -->
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
|
|||
|
|
<!-- 字体 -->
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<!-- Font Awesome -->
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loader {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border: 5px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-top-color: white;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-class-selector {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 40px;
|
|||
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class-card {
|
|||
|
|
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 30px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class-card:hover {
|
|||
|
|
transform: translateY(-5px);
|
|||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class-card::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
transform: scaleX(0);
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class-card:hover::before {
|
|||
|
|
transform: scaleX(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wenlu-card {
|
|||
|
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.food-card {
|
|||
|
|
background: linear-gradient(135deg, #10b981 0%, #84cc16 100%);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="bg-gray-100">
|
|||
|
|
<!-- 加载状态 -->
|
|||
|
|
<div id="loading" class="loading-container hidden">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="loader mb-4"></div>
|
|||
|
|
<p class="text-white text-xl">正在加载订单班方案...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 主内容容器 -->
|
|||
|
|
<div id="main-content">
|
|||
|
|
<!-- 如果没有指定订单班，显示选择界面 -->
|
|||
|
|
<div id="selector-container" class="min-h-screen flex items-center justify-center p-4">
|
|||
|
|
<div class="order-class-selector">
|
|||
|
|
<div class="text-center mb-10">
|
|||
|
|
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
|
|||
|
|
选择订单班查看AI生成方案
|
|||
|
|
</h1>
|
|||
|
|
<p class="text-gray-600 text-lg">
|
|||
|
|
每个方案由多个AI Agent协作生成，展示AI在专业领域的应用能力
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|||
|
|
<!-- 文旅订单班 -->
|
|||
|
|
<div class="class-card wenlu-card" onclick="loadOrderClass('wenlu')">
|
|||
|
|
<div class="mb-4">
|
|||
|
|
<i class="fas fa-car text-4xl opacity-80"></i>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="text-2xl font-bold mb-3">文旅订单班</h2>
|
|||
|
|
<h3 class="text-lg mb-4 opacity-90">2024长三角新能源汽车博览会</h3>
|
|||
|
|
<div class="space-y-2 text-sm opacity-85">
|
|||
|
|
<p>📍 会展策划完整方案</p>
|
|||
|
|
<p>👥 6位AI专家协作</p>
|
|||
|
|
<p>📊 从概览到风险控制全覆盖</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-6 inline-flex items-center">
|
|||
|
|
<span class="text-sm">查看方案</span>
|
|||
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 食品订单班 -->
|
|||
|
|
<div class="class-card food-card" onclick="loadOrderClass('food')">
|
|||
|
|
<div class="mb-4">
|
|||
|
|
<i class="fas fa-utensils text-4xl opacity-80"></i>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="text-2xl font-bold mb-3">食品订单班</h2>
|
|||
|
|
<h3 class="text-lg mb-4 opacity-90">中高端轻食店铺经营方案</h3>
|
|||
|
|
<div class="space-y-2 text-sm opacity-85">
|
|||
|
|
<p>🥗 轻食创业全流程指导</p>
|
|||
|
|
<p>👥 7位AI专家协作</p>
|
|||
|
|
<p>💰 从调研到运营管理全方位</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-6 inline-flex items-center">
|
|||
|
|
<span class="text-sm">查看方案</span>
|
|||
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 更多订单班提示 -->
|
|||
|
|
<div class="mt-10 text-center">
|
|||
|
|
<p class="text-gray-500 text-sm">
|
|||
|
|
更多订单班方案正在开发中...
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容展示容器 -->
|
|||
|
|
<div id="content-container" class="hidden"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 检查URL参数
|
|||
|
|
function checkUrlParams() {
|
|||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|||
|
|
const orderClass = urlParams.get('class');
|
|||
|
|
|
|||
|
|
if (orderClass) {
|
|||
|
|
loadOrderClass(orderClass);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载指定的订单班
|
|||
|
|
function loadOrderClass(className) {
|
|||
|
|
// 显示加载状态
|
|||
|
|
document.getElementById('loading').classList.remove('hidden');
|
|||
|
|
document.getElementById('selector-container').classList.add('hidden');
|
|||
|
|
|
|||
|
|
// 更新URL
|
|||
|
|
const newUrl = `${window.location.pathname}?class=${className}`;
|
|||
|
|
window.history.pushState({ class: className }, '', newUrl);
|
|||
|
|
|
|||
|
|
// 根据订单班类型加载对应页面
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let targetUrl = '';
|
|||
|
|
|
|||
|
|
switch(className) {
|
|||
|
|
case 'wenlu':
|
|||
|
|
targetUrl = '/index.html'; // 文旅订单班使用现有的index.html
|
|||
|
|
break;
|
|||
|
|
case 'food':
|
|||
|
|
targetUrl = '/pages/food-result.html'; // 食品订单班新页面
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
alert('未找到对应的订单班方案');
|
|||
|
|
document.getElementById('loading').classList.add('hidden');
|
|||
|
|
document.getElementById('selector-container').classList.remove('hidden');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接跳转到对应页面
|
|||
|
|
window.location.href = targetUrl;
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理浏览器后退按钮
|
|||
|
|
window.addEventListener('popstate', (event) => {
|
|||
|
|
if (event.state && event.state.class) {
|
|||
|
|
loadOrderClass(event.state.class);
|
|||
|
|
} else {
|
|||
|
|
// 返回选择界面
|
|||
|
|
document.getElementById('loading').classList.add('hidden');
|
|||
|
|
document.getElementById('selector-container').classList.remove('hidden');
|
|||
|
|
document.getElementById('content-container').classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 页面加载时检查参数
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
checkUrlParams();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 也可以通过iframe加载内容（备选方案）
|
|||
|
|
function loadContentInIframe(className) {
|
|||
|
|
const container = document.getElementById('content-container');
|
|||
|
|
let iframeSrc = '';
|
|||
|
|
|
|||
|
|
switch(className) {
|
|||
|
|
case 'wenlu':
|
|||
|
|
iframeSrc = '/index.html';
|
|||
|
|
break;
|
|||
|
|
case 'food':
|
|||
|
|
iframeSrc = '/pages/food-result.html';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
container.innerHTML = `
|
|||
|
|
<iframe src="${iframeSrc}"
|
|||
|
|
style="width: 100%; height: 100vh; border: none;"
|
|||
|
|
frameborder="0">
|
|||
|
|
</iframe>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
container.classList.remove('hidden');
|
|||
|
|
document.getElementById('loading').classList.add('hidden');
|
|||
|
|
document.getElementById('selector-container').classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|